@uipath/apollo-react 3.71.0-pr482.ae381a7 → 3.71.1

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs

@@ -243,7 +243,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         const actions = [
             {
                 id: 'delete',
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
                     icon: "trash",
                     size: 14
                 }),
@@ -252,7 +252,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             },
             {
                 id: 'edit',
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
                     icon: "pencil",
                     size: 14
                 }),

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Global } from "@emotion/react";
-import { CanvasIcon } from "../../index.js";
+import { NodeIcon } from "../../index.js";
 import { NodeResizeControl, useReactFlow } from "../../xyflow/react.js";
 import { AnimatePresence } from "motion/react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -203,7 +203,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         const actions = [
             {
                 id: 'delete',
-                icon: /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: /*#__PURE__*/ jsx(NodeIcon, {
                     icon: "trash",
                     size: 14
                 }),
@@ -212,7 +212,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             },
             {
                 id: 'edit',
-                icon: /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: /*#__PURE__*/ jsx(NodeIcon, {
                     icon: "pencil",
                     size: 14
                 }),

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

@@ -27,11 +27,10 @@ __webpack_require__.d(__webpack_exports__, {
     NodeToolbar: ()=>NodeToolbar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const index_cjs_namespaceObject = require("../../../../material/components/index.cjs");
 const react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
-const icon_registry_cjs_namespaceObject = require("../../../utils/icon-registry.cjs");
-const external_CanvasTooltip_cjs_namespaceObject = require("../../CanvasTooltip.cjs");
-const index_cjs_namespaceObject = require("../shared/index.cjs");
+const external_shared_index_cjs_namespaceObject = require("../shared/index.cjs");
 const external_NodeToolbar_styles_cjs_namespaceObject = require("./NodeToolbar.styles.cjs");
 const external_NodeToolbar_utils_cjs_namespaceObject = require("./NodeToolbar.utils.cjs");
 const external_useToolbarState_cjs_namespaceObject = require("./useToolbarState.cjs");
@@ -86,7 +85,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
             children: [
                 actionsToDisplay.map((item, i)=>(0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeToolbar_styles_cjs_namespaceObject.StyledToolbarSeparator, {
                         $orientation: separatorOrientation
-                    }, `separator-${i}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarButton, {
+                    }, `separator-${i}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shared_index_cjs_namespaceObject.ToolbarButton, {
                         action: item,
                         layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
                     }, item.id)),
@@ -97,7 +96,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodeToolbar_styles_cjs_namespaceObject.StyledOverflowContainer, {
                             children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.StyledToolbarButton, {
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shared_index_cjs_namespaceObject.StyledToolbarButton, {
                                     ref: buttonRef,
                                     type: "button",
                                     className: "nodrag nopan",
@@ -105,12 +104,13 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                                     "aria-label": "More options",
                                     "aria-expanded": isDropdownOpen,
                                     "aria-haspopup": "menu",
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
                                         content: config.overflowLabel,
                                         placement: "top",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                                            icon: "ellipsis-vertical",
-                                            size: 16
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
+                                            variant: "outlined",
+                                            name: "more_vert",
+                                            size: "16px"
                                         })
                                     })
                                 }),
@@ -154,15 +154,13 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                                                 role: "menuitem",
                                                 $disabled: item.disabled,
                                                 children: [
-                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
                                                         style: {
-                                                            flex: 'unset',
-                                                            display: 'inline-flex'
+                                                            flex: 'unset'
                                                         },
-                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                                                            icon: item.icon,
-                                                            size: 16
-                                                        })
+                                                        variant: "outlined",
+                                                        name: item.icon,
+                                                        size: "16px"
                                                     }),
                                                     item.icon && 'string' != typeof item.icon && item.icon,
                                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8I5D,eAAO,MAAM,WAAW,6EA1I4C,gBAAgB,oDA0I/B,CAAC"}
+{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAiJ5D,eAAO,MAAM,WAAW,6EA7I4C,gBAAgB,oDA6I/B,CAAC"}

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

@@ -1,8 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ApIcon, ApTooltip } from "../../../../material/components/index.js";
 import { AnimatePresence } from "motion/react";
 import { memo, useMemo } from "react";
-import { CanvasIcon } from "../../../utils/icon-registry.js";
-import { CanvasTooltip } from "../../CanvasTooltip.js";
 import { StyledToolbarButton, ToolbarButton } from "../shared/index.js";
 import { StyledDropdownItem, StyledDropdownMenu, StyledOverflowContainer, StyledToolbarContainer, StyledToolbarSeparator } from "./NodeToolbar.styles.js";
 import { isSeparator } from "./NodeToolbar.utils.js";
@@ -77,12 +76,13 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                                     "aria-label": "More options",
                                     "aria-expanded": isDropdownOpen,
                                     "aria-haspopup": "menu",
-                                    children: /*#__PURE__*/ jsx(CanvasTooltip, {
+                                    children: /*#__PURE__*/ jsx(ApTooltip, {
                                         content: config.overflowLabel,
                                         placement: "top",
-                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                            icon: "ellipsis-vertical",
-                                            size: 16
+                                        children: /*#__PURE__*/ jsx(ApIcon, {
+                                            variant: "outlined",
+                                            name: "more_vert",
+                                            size: "16px"
                                         })
                                     })
                                 }),
@@ -126,15 +126,13 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                                                 role: "menuitem",
                                                 $disabled: item.disabled,
                                                 children: [
-                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
+                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx(ApIcon, {
                                                         style: {
-                                                            flex: 'unset',
-                                                            display: 'inline-flex'
+                                                            flex: 'unset'
                                                         },
-                                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                                            icon: item.icon,
-                                                            size: 16
-                                                        })
+                                                        variant: "outlined",
+                                                        name: item.icon,
+                                                        size: "16px"
                                                     }),
                                                     item.icon && 'string' != typeof item.icon && item.icon,
                                                     /*#__PURE__*/ jsx("span", {

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

@@ -28,9 +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_CanvasTooltip_cjs_namespaceObject = require("../../CanvasTooltip.cjs");
 const external_ToolbarButton_styles_cjs_namespaceObject = require("./ToolbarButton.styles.cjs");
 const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ action, layoutId })=>{
     const isEnabled = !action.disabled;
@@ -40,7 +39,7 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
         e.preventDefault();
         if (isEnabled) action.onClick();
     };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApTooltip, {
         content: action.label,
         placement: "top",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_styles_cjs_namespaceObject.StyledToolbarButton, {
@@ -61,9 +60,10 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
             $isToggled: action.isToggled,
             $color: action.color,
             $hoverColor: hoverColor,
-            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                icon: action.icon,
-                size: 16,
+            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
+                variant: "outlined",
+                name: action.icon,
+                size: "16px",
                 color: action.color
             }) : action.icon
         })

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/ToolbarButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAK9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,6DAA+B,kBAAkB,6CAqCzE,CAAC"}
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/ToolbarButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAK9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,6DAA+B,kBAAkB,6CAqCzE,CAAC"}

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

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { getLighterColor } from "../../../utils/index.js";
+import { ApIcon, ApTooltip } from "../../../../material/components/index.js";
 import { memo } from "react";
-import { CanvasIcon } from "../../../utils/icon-registry.js";
-import { CanvasTooltip } from "../../CanvasTooltip.js";
 import { StyledToolbarButton } from "./ToolbarButton.styles.js";
 const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
     const isEnabled = !action.disabled;
@@ -12,7 +11,7 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
         e.preventDefault();
         if (isEnabled) action.onClick();
     };
-    return /*#__PURE__*/ jsx(CanvasTooltip, {
+    return /*#__PURE__*/ jsx(ApTooltip, {
         content: action.label,
         placement: "top",
         children: /*#__PURE__*/ jsx(StyledToolbarButton, {
@@ -33,9 +32,10 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
             $isToggled: action.isToggled,
             $color: action.color,
             $hoverColor: hoverColor,
-            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ jsx(CanvasIcon, {
-                icon: action.icon,
-                size: 16,
+            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ jsx(ApIcon, {
+                variant: "outlined",
+                name: action.icon,
+                size: "16px",
                 color: action.color
             }) : action.icon
         })

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

@@ -27,10 +27,10 @@ __webpack_require__.d(__webpack_exports__, {
     Header: ()=>Header_Header
 });
 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 apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
 const external_react_namespaceObject = require("react");
-const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ title, onBack, showBackButton }) {
     const isBackButtonVisible = showBackButton && onBack;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
@@ -46,23 +46,22 @@ const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(fun
                     transition: 'width 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                     overflow: 'hidden'
                 },
-                children: isBackButtonVisible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
-                    variant: "ghost",
-                    size: "icon",
-                    className: "h-8 w-8",
+                children: isBackButtonVisible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
                     "aria-label": "Back",
+                    color: "secondary",
                     onClick: onBack,
                     style: {
                         transition: 'transform 0.3s ease-in-out'
                     },
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                        icon: "chevron-left",
-                        size: 20
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
+                        name: "chevron_left",
+                        size: "20px"
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "text-base font-bold",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeLBold,
+                color: "var(--uix-canvas-foreground-emp)",
                 style: {
                     transition: 'transform 0.3s ease-in-out, margin 0.3s ease-in-out',
                     margin: 0

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Header.tsx"],"names":[],"mappings":"AAKA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,mDA0CjB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Header.tsx"],"names":[],"mappings":"AAKA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,mDAyCjB,CAAC"}

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { FontVariantToken } from "@uipath/apollo-core";
 import { Row } from "../../layouts/index.js";
-import { Button } from "@uipath/apollo-wind";
+import { ApIcon, ApIconButton, ApTypography } from "../../../material/index.js";
 import { memo } from "react";
-import { CanvasIcon } from "../../utils/icon-registry.js";
 const Header_Header = /*#__PURE__*/ memo(function({ title, onBack, showBackButton }) {
     const isBackButtonVisible = showBackButton && onBack;
     return /*#__PURE__*/ jsxs(Row, {
@@ -18,23 +18,22 @@ const Header_Header = /*#__PURE__*/ memo(function({ title, onBack, showBackButto
                     transition: 'width 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                     overflow: 'hidden'
                 },
-                children: isBackButtonVisible && /*#__PURE__*/ jsx(Button, {
-                    variant: "ghost",
-                    size: "icon",
-                    className: "h-8 w-8",
+                children: isBackButtonVisible && /*#__PURE__*/ jsx(ApIconButton, {
                     "aria-label": "Back",
+                    color: "secondary",
                     onClick: onBack,
                     style: {
                         transition: 'transform 0.3s ease-in-out'
                     },
-                    children: /*#__PURE__*/ jsx(CanvasIcon, {
-                        icon: "chevron-left",
-                        size: 20
+                    children: /*#__PURE__*/ jsx(ApIcon, {
+                        name: "chevron_left",
+                        size: "20px"
                     })
                 })
             }),
-            /*#__PURE__*/ jsx("span", {
-                className: "text-base font-bold",
+            /*#__PURE__*/ jsx(ApTypography, {
+                variant: FontVariantToken.fontSizeLBold,
+                color: "var(--uix-canvas-foreground-emp)",
                 style: {
                     transition: 'transform 0.3s ease-in-out, margin 0.3s ease-in-out',
                     margin: 0

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

@@ -28,12 +28,13 @@ __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 apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
+const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 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 = [];
@@ -95,8 +96,9 @@ 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)("span", {
-            className: "text-xs",
+        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: renderItem.sectionName
         })
     });
@@ -128,7 +130,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.CanvasIcon, {
+                    item.icon?.name && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.NodeIcon, {
                         icon: item.icon.name,
                         size: 24
                     }),
@@ -139,35 +141,40 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
                 flex: 1,
                 overflow: "hidden",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApTooltip, {
                         content: item.name,
                         placement: "right",
                         smartTooltip: true,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                            className: "text-sm list-view-item-name",
+                        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: item.name
                         })
                     }),
-                    item.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                    item.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApTooltip, {
                         content: item.description,
                         placement: "right",
                         smartTooltip: true,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                            className: "text-xs list-view-item-name text-foreground-muted",
+                        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: item.description
                         })
                     })
                 ]
             }),
-            !!item.children && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
-                icon: "chevron-right",
-                size: 20,
+            !!item.children && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
+                name: "chevron_right",
+                variant: "outlined",
+                size: "20px",
                 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-x', 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_off', isLoading = false, enableSections = true }, ref) {
     const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
     const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
         items,
@@ -197,8 +204,12 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         gap: 8,
         children: [
             ...Array(3)
-        ].map((_, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
-                className: "h-8 w-full"
+        ].map((_, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApSkeleton, {
+                variant: "rectangle",
+                style: {
+                    height: '32px',
+                    width: '100%'
+                }
             }, index))
     });
     if (0 === items.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
@@ -210,13 +221,14 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
             minHeight: '250px'
         },
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
-                icon: emptyStateIcon,
-                size: 48,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
+                name: emptyStateIcon,
+                size: "48px",
                 color: "var(--uix-canvas-foreground-de-emp)"
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "text-xs text-foreground-muted",
+            /*#__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)",
                 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":"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"}
+{"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"}

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

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