@uipath/apollo-react 3.71.0 → 4.0.0

package/dist/canvas/components/Toolbox/ListView.cjs

@@ -28,13 +28,12 @@ __webpack_require__.d(__webpack_exports__, {
     buildRenderedItems: ()=>buildRenderedItems
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const external_utils_index_cjs_namespaceObject = require("../../utils/index.cjs");
-const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
-const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThemeContext.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_ListView_styles_cjs_namespaceObject = require("./ListView.styles.cjs");
 function buildRenderedItems(items, enableSections) {
     const result = [];
@@ -96,9 +95,8 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
     if ('section' === renderItem.type) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.SectionHeader, {
         ...ariaAttributes,
         style: style,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-            color: "var(--uix-canvas-foreground-emp)",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            className: "text-xs",
             children: renderItem.sectionName
         })
     });
@@ -130,7 +128,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
                             height: 24
                         }
                     }),
-                    item.icon?.name && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.NodeIcon, {
+                    item.icon?.name && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                         icon: item.icon.name,
                         size: 24
                     }),
@@ -141,40 +139,35 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
                 flex: 1,
                 overflow: "hidden",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApTooltip, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                         content: item.name,
                         placement: "right",
                         smartTooltip: true,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeM,
-                            className: "list-view-item-name",
-                            color: "var(--uix-canvas-foreground-emp)",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-sm list-view-item-name",
                             children: item.name
                         })
                     }),
-                    item.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApTooltip, {
+                    item.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                         content: item.description,
                         placement: "right",
                         smartTooltip: true,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeXs,
-                            className: "list-view-item-name",
-                            color: "var(--uix-canvas-foreground-de-emp)",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-xs list-view-item-name text-foreground-muted",
                             children: item.description
                         })
                     })
                 ]
             }),
-            !!item.children && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                name: "chevron_right",
-                variant: "outlined",
-                size: "20px",
+            !!item.children && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
+                icon: "chevron-right",
+                size: 20,
                 color: "var(--uix-canvas-foreground-de-emp)"
             })
         ]
     });
 });
-const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }, ref) {
+const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
     const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
     const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
         items,
@@ -204,12 +197,8 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         gap: 8,
         children: [
             ...Array(3)
-        ].map((_, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApSkeleton, {
-                variant: "rectangle",
-                style: {
-                    height: '32px',
-                    width: '100%'
-                }
+        ].map((_, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
+                className: "h-8 w-full"
             }, index))
     });
     if (0 === items.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
@@ -221,14 +210,13 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
             minHeight: '250px'
         },
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                name: emptyStateIcon,
-                size: "48px",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
+                icon: emptyStateIcon,
+                size: 48,
                 color: "var(--uix-canvas-foreground-de-emp)"
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                color: "var(--uix-canvas-foreground-de-emp)",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-xs text-foreground-muted",
                 children: emptyStateMessage
             })
         ]

package/dist/canvas/components/Toolbox/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAIzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AAkHD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAsED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAKzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA8FD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAiED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}

package/dist/canvas/components/Toolbox/ListView.js

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FontVariantToken } from "@uipath/apollo-core";
 import { Column } from "../../layouts/index.js";
-import { NodeIcon, partition } from "../../utils/index.js";
-import { ApSkeleton, ApTypography } from "../../../material/index.js";
-import { ApIcon, ApTooltip } from "../../../material/components/index.js";
+import { CanvasIcon, partition } from "../../utils/index.js";
+import { Skeleton } from "@uipath/apollo-wind";
 import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "react";
 import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
 import { IconContainer, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
 function buildRenderedItems(items, enableSections) {
     const result = [];
@@ -67,9 +66,8 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
     if ('section' === renderItem.type) return /*#__PURE__*/ jsx(SectionHeader, {
         ...ariaAttributes,
         style: style,
-        children: /*#__PURE__*/ jsx(ApTypography, {
-            variant: FontVariantToken.fontSizeS,
-            color: "var(--uix-canvas-foreground-emp)",
+        children: /*#__PURE__*/ jsx("span", {
+            className: "text-xs",
             children: renderItem.sectionName
         })
     });
@@ -101,7 +99,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
                             height: 24
                         }
                     }),
-                    item.icon?.name && /*#__PURE__*/ jsx(NodeIcon, {
+                    item.icon?.name && /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: item.icon.name,
                         size: 24
                     }),
@@ -112,40 +110,35 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
                 flex: 1,
                 overflow: "hidden",
                 children: [
-                    /*#__PURE__*/ jsx(ApTooltip, {
+                    /*#__PURE__*/ jsx(CanvasTooltip, {
                         content: item.name,
                         placement: "right",
                         smartTooltip: true,
-                        children: /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeM,
-                            className: "list-view-item-name",
-                            color: "var(--uix-canvas-foreground-emp)",
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "text-sm list-view-item-name",
                             children: item.name
                         })
                     }),
-                    item.description && /*#__PURE__*/ jsx(ApTooltip, {
+                    item.description && /*#__PURE__*/ jsx(CanvasTooltip, {
                         content: item.description,
                         placement: "right",
                         smartTooltip: true,
-                        children: /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeXs,
-                            className: "list-view-item-name",
-                            color: "var(--uix-canvas-foreground-de-emp)",
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "text-xs list-view-item-name text-foreground-muted",
                             children: item.description
                         })
                     })
                 ]
             }),
-            !!item.children && /*#__PURE__*/ jsx(ApIcon, {
-                name: "chevron_right",
-                variant: "outlined",
-                size: "20px",
+            !!item.children && /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "chevron-right",
+                size: 20,
                 color: "var(--uix-canvas-foreground-de-emp)"
             })
         ]
     });
 });
-const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search_off', isLoading = false, enableSections = true }, ref) {
+const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
     const { isDarkMode } = useCanvasTheme();
     const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections), [
         items,
@@ -175,12 +168,8 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
         gap: 8,
         children: [
             ...Array(3)
-        ].map((_, index)=>/*#__PURE__*/ jsx(ApSkeleton, {
-                variant: "rectangle",
-                style: {
-                    height: '32px',
-                    width: '100%'
-                }
+        ].map((_, index)=>/*#__PURE__*/ jsx(Skeleton, {
+                className: "h-8 w-full"
             }, index))
     });
     if (0 === items.length) return /*#__PURE__*/ jsxs(Column, {
@@ -192,14 +181,13 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
             minHeight: '250px'
         },
         children: [
-            /*#__PURE__*/ jsx(ApIcon, {
-                name: emptyStateIcon,
-                size: "48px",
+            /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: emptyStateIcon,
+                size: 48,
                 color: "var(--uix-canvas-foreground-de-emp)"
             }),
-            /*#__PURE__*/ jsx(ApTypography, {
-                variant: FontVariantToken.fontSizeS,
-                color: "var(--uix-canvas-foreground-de-emp)",
+            /*#__PURE__*/ jsx("span", {
+                className: "text-xs text-foreground-muted",
                 children: emptyStateMessage
             })
         ]

package/dist/canvas/components/Toolbox/SearchBox.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../utils/index.cjs");
-const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const external_SearchBox_styles_cjs_namespaceObject = require("./SearchBox.styles.cjs");
 const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, clearButtonRef, onNavigationKeyDown, navigateToFirstItem, activeDescendantId }) {
     const internalRef = (0, external_react_namespaceObject.useRef)(null);
@@ -57,9 +57,9 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
             children: [
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                     className: "searchbox-icon",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                        name: "search",
-                        size: "16px"
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "search",
+                        size: 16
                     })
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
@@ -82,9 +82,9 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
                     className: "searchbox-clear",
                     onClick: clear,
                     onKeyDown: handleClearButtonKeyDown,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                        name: "close",
-                        size: "16px"
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "x",
+                        size: 16
                     })
                 })
             ]

package/dist/canvas/components/Toolbox/SearchBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC3D,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACvD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,sDAmEpB,CAAC"}
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC3D,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACvD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,sDAmEpB,CAAC"}

package/dist/canvas/components/Toolbox/SearchBox.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/index.js";
-import { ApIcon } from "../../../material/components/index.js";
 import { memo, useEffect, useRef } from "react";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { StyledSearchForm } from "./SearchBox.styles.js";
 const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, clearButtonRef, onNavigationKeyDown, navigateToFirstItem, activeDescendantId }) {
     const internalRef = useRef(null);
@@ -29,9 +29,9 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
             children: [
                 /*#__PURE__*/ jsx("span", {
                     className: "searchbox-icon",
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        name: "search",
-                        size: "16px"
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "search",
+                        size: 16
                     })
                 }),
                 /*#__PURE__*/ jsx("input", {
@@ -54,9 +54,9 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
                     className: "searchbox-clear",
                     onClick: clear,
                     onKeyDown: handleClearButtonKeyDown,
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        name: "close",
-                        size: "16px"
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "x",
+                        size: 16
                     })
                 })
             ]

package/dist/canvas/components/TriggerNode/TriggerNode.cjs

@@ -28,10 +28,11 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_TriggerNode_styles_cjs_namespaceObject = require("./TriggerNode.styles.cjs");
 const TriggerNodeComponent = (props)=>{
     const { selected, id, details = {} } = props;
@@ -72,10 +73,8 @@ const TriggerNodeComponent = (props)=>{
         status: status,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TriggerNode_styles_cjs_namespaceObject.TriggerIconWrapper, {
             status: status,
-            children: icon || /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                name: "bolt",
-                variant: "outlined",
-                size: "30px"
+            children: icon || /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                icon: "zap"
             })
         })
     });
@@ -88,13 +87,9 @@ const TriggerNodeComponent = (props)=>{
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-            tooltip ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+            tooltip ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: tooltip,
                 placement: "top",
-                style: {
-                    width: '100%',
-                    height: '100%'
-                },
                 children: triggerContent
             }) : triggerContent,
             handleElements

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

@@ -1 +1 @@
-{"version":3,"file":"TriggerNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/TriggerNode/TriggerNode.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAkE5D,eAAO,MAAM,WAAW,8CAhEa,gBAAgB,6CAgEA,CAAC"}
+{"version":3,"file":"TriggerNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/TriggerNode/TriggerNode.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAgE5D,eAAO,MAAM,WAAW,8CA9Da,gBAAgB,6CA8DA,CAAC"}

package/dist/canvas/components/TriggerNode/TriggerNode.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Position, useStore } from "../../xyflow/react.js";
-import { ApIcon, ApTooltip } from "../../../material/components/index.js";
 import { memo, useCallback, useMemo, useState } from "react";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
 import { TriggerContainer, TriggerIconWrapper } from "./TriggerNode.styles.js";
 const TriggerNodeComponent = (props)=>{
     const { selected, id, details = {} } = props;
@@ -44,10 +45,8 @@ const TriggerNodeComponent = (props)=>{
         status: status,
         children: /*#__PURE__*/ jsx(TriggerIconWrapper, {
             status: status,
-            children: icon || /*#__PURE__*/ jsx(ApIcon, {
-                name: "bolt",
-                variant: "outlined",
-                size: "30px"
+            children: icon || /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "zap"
             })
         })
     });
@@ -60,13 +59,9 @@ const TriggerNodeComponent = (props)=>{
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-            tooltip ? /*#__PURE__*/ jsx(ApTooltip, {
+            tooltip ? /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: tooltip,
                 placement: "top",
-                style: {
-                    width: '100%',
-                    height: '100%'
-                },
                 children: triggerContent
             }) : triggerContent,
             handleElements

package/dist/canvas/components/shared/CanvasDropdownMenu.cjs

@@ -0,0 +1,80 @@
+"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__, {
+    CanvasDropdownMenu: ()=>CanvasDropdownMenu
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
+function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel = 'Dropdown menu', contentClassName }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DropdownMenu, {
+        open: open,
+        onOpenChange: onOpenChange,
+        modal: false,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-6 w-6",
+                    "data-testid": triggerTestId,
+                    "aria-label": triggerAriaLabel,
+                    onClick: (e)=>e.stopPropagation(),
+                    onPointerDown: (e)=>e.stopPropagation(),
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "ellipsis-vertical",
+                        size: 16
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DropdownMenuContent, {
+                align: "end",
+                sideOffset: 4,
+                className: contentClassName,
+                children: menuItems.map((item, index)=>{
+                    if ('type' in item && 'divider' === item.type) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DropdownMenuSeparator, {}, `divider-${index}`);
+                    const actionItem = item;
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DropdownMenuItem, {
+                        disabled: actionItem.disabled,
+                        onSelect: ()=>onItemClick(actionItem),
+                        children: [
+                            actionItem.icon,
+                            actionItem.label
+                        ]
+                    }, actionItem.id);
+                })
+            })
+        ]
+    });
+}
+exports.CanvasDropdownMenu = __webpack_exports__.CanvasDropdownMenu;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasDropdownMenu"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/shared/CanvasDropdownMenu.d.ts

@@ -0,0 +1,13 @@
+import type { NodeMenuAction, NodeMenuItem } from '../NodeContextMenu';
+interface CanvasDropdownMenuProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    menuItems: NodeMenuItem[];
+    onItemClick: (item: NodeMenuAction) => void;
+    triggerTestId?: string;
+    triggerAriaLabel?: string;
+    contentClassName?: string;
+}
+export declare function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel, contentClassName, }: CanvasDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CanvasDropdownMenu.d.ts.map

package/dist/canvas/components/shared/CanvasDropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/shared/CanvasDropdownMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvE,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,WAAW,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAYD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAkC,EAClC,gBAAgB,GACjB,EAAE,uBAAuB,2CAoCzB"}

package/dist/canvas/components/shared/CanvasDropdownMenu.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@uipath/apollo-wind";
+import { CanvasIcon } from "../../utils/icon-registry.js";
+function CanvasDropdownMenu({ open, onOpenChange, menuItems, onItemClick, triggerTestId, triggerAriaLabel = 'Dropdown menu', contentClassName }) {
+    return /*#__PURE__*/ jsxs(DropdownMenu, {
+        open: open,
+        onOpenChange: onOpenChange,
+        modal: false,
+        children: [
+            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-6 w-6",
+                    "data-testid": triggerTestId,
+                    "aria-label": triggerAriaLabel,
+                    onClick: (e)=>e.stopPropagation(),
+                    onPointerDown: (e)=>e.stopPropagation(),
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "ellipsis-vertical",
+                        size: 16
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                align: "end",
+                sideOffset: 4,
+                className: contentClassName,
+                children: menuItems.map((item, index)=>{
+                    if ('type' in item && 'divider' === item.type) return /*#__PURE__*/ jsx(DropdownMenuSeparator, {}, `divider-${index}`);
+                    const actionItem = item;
+                    return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                        disabled: actionItem.disabled,
+                        onSelect: ()=>onItemClick(actionItem),
+                        children: [
+                            actionItem.icon,
+                            actionItem.label
+                        ]
+                    }, actionItem.id);
+                })
+            })
+        ]
+    });
+}
+export { CanvasDropdownMenu };

package/dist/canvas/constants.cjs

@@ -24,6 +24,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    CANVAS_COMPACT_BREAKPOINT: ()=>CANVAS_COMPACT_BREAKPOINT,
     DEFAULT_NODE_SIZE: ()=>DEFAULT_NODE_SIZE,
     GRID_SPACING: ()=>GRID_SPACING,
     PREVIEW_EDGE_ID: ()=>PREVIEW_EDGE_ID,
@@ -33,11 +34,14 @@ const PREVIEW_NODE_ID = 'preview-node-id';
 const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
+const CANVAS_COMPACT_BREAKPOINT = 600;
+exports.CANVAS_COMPACT_BREAKPOINT = __webpack_exports__.CANVAS_COMPACT_BREAKPOINT;
 exports.DEFAULT_NODE_SIZE = __webpack_exports__.DEFAULT_NODE_SIZE;
 exports.GRID_SPACING = __webpack_exports__.GRID_SPACING;
 exports.PREVIEW_EDGE_ID = __webpack_exports__.PREVIEW_EDGE_ID;
 exports.PREVIEW_NODE_ID = __webpack_exports__.PREVIEW_NODE_ID;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_COMPACT_BREAKPOINT",
     "DEFAULT_NODE_SIZE",
     "GRID_SPACING",
     "PREVIEW_EDGE_ID",

package/dist/canvas/constants.d.ts

@@ -2,4 +2,5 @@ export declare const PREVIEW_NODE_ID = "preview-node-id";
 export declare const PREVIEW_EDGE_ID = "preview-edge-id";
 export declare const DEFAULT_NODE_SIZE = 96;
 export declare const GRID_SPACING = 16;
+export declare const CANVAS_COMPACT_BREAKPOINT = 600;
 //# sourceMappingURL=constants.d.ts.map

package/dist/canvas/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC"}

package/dist/canvas/constants.js

@@ -2,4 +2,5 @@ const PREVIEW_NODE_ID = 'preview-node-id';
 const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
-export { DEFAULT_NODE_SIZE, GRID_SPACING, PREVIEW_EDGE_ID, PREVIEW_NODE_ID };
+const CANVAS_COMPACT_BREAKPOINT = 600;
+export { CANVAS_COMPACT_BREAKPOINT, DEFAULT_NODE_SIZE, GRID_SPACING, PREVIEW_EDGE_ID, PREVIEW_NODE_ID };