@uipath/apollo-react 6.44.2 → 6.45.1

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

@@ -1,8 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Row } from "../../layouts/index.js";
+import { cx } from "../../utils/index.js";
 import { Button } from "@uipath/apollo-wind";
 import { memo } from "react";
 import { CanvasIcon } from "../../utils/icon-registry.js";
+const BACK_SLOT_CLASS = 'overflow-hidden transition-[width,opacity,transform,margin] duration-300 ease-in-out';
+const BACK_SLOT_VISIBLE_CLASS = 'mr-2 w-8 translate-x-0 opacity-100';
+const BACK_SLOT_HIDDEN_CLASS = 'mr-0 w-0 translate-x-5 opacity-0';
 const Header_Header = /*#__PURE__*/ memo(function({ title, onBack, showBackButton }) {
     const isBackButtonVisible = showBackButton && onBack;
     return /*#__PURE__*/ jsxs(Row, {
@@ -10,23 +14,13 @@ const Header_Header = /*#__PURE__*/ memo(function({ title, onBack, showBackButto
         align: "center",
         children: [
             /*#__PURE__*/ jsx("div", {
-                style: {
-                    width: isBackButtonVisible ? '32px' : '0px',
-                    opacity: isBackButtonVisible ? 1 : 0,
-                    transform: isBackButtonVisible ? 'translateX(0)' : 'translateX(20px)',
-                    marginRight: isBackButtonVisible ? '8px' : '0px',
-                    transition: 'width 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
-                    overflow: 'hidden'
-                },
+                className: cx(BACK_SLOT_CLASS, isBackButtonVisible ? BACK_SLOT_VISIBLE_CLASS : BACK_SLOT_HIDDEN_CLASS),
                 children: isBackButtonVisible && /*#__PURE__*/ jsx(Button, {
                     variant: "ghost",
                     size: "icon",
-                    className: "h-8 w-8",
+                    className: "h-8 w-8 transition-transform duration-300 ease-in-out",
                     "aria-label": "Back",
                     onClick: onBack,
-                    style: {
-                        transition: 'transform 0.3s ease-in-out'
-                    },
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "chevron-left",
                         size: 20
@@ -35,10 +29,6 @@ const Header_Header = /*#__PURE__*/ memo(function({ title, onBack, showBackButto
             }),
             /*#__PURE__*/ jsx("span", {
                 className: "text-base font-bold",
-                style: {
-                    transition: 'transform 0.3s ease-in-out, margin 0.3s ease-in-out',
-                    margin: 0
-                },
                 children: title
             })
         ]

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

@@ -37,11 +37,13 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 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 react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
+const external_react_window_namespaceObject = require("react-window");
 const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThemeContext.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const InitialsBadge_cjs_namespaceObject = require("../shared/InitialsBadge.cjs");
-const external_ListView_styles_cjs_namespaceObject = require("./ListView.styles.cjs");
+const external_ListViewIconContainer_cjs_namespaceObject = require("./ListViewIconContainer.cjs");
 const DEFAULT_SKELETON_COUNT = 3;
 const ROW_HEIGHT_ITEM = 32;
 const ROW_HEIGHT_ITEM_TWO_LINE = 44;
@@ -119,7 +121,8 @@ function buildRenderedItems(items, enableSections, loadingSkeleton) {
     if (skeletonConfig && !skeletonConfig.sections) pushSkeletons(baseSkeletonCount);
     return result;
 }
-const IconContainerMemoized = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(external_ListView_styles_cjs_namespaceObject.IconContainer);
+const ROW_BUTTON_CLASS = "box-border flex w-full cursor-pointer items-center gap-2.5 border-none bg-transparent text-left rounded-lg outline-1 outline-transparent [outline-offset:-1px] hover:bg-(--canvas-background-hover) aria-selected:bg-(--canvas-background-hover) aria-selected:outline-(--canvas-primary) disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&:disabled_*]:opacity-70 transition-[background-color,opacity,outline-color] duration-150";
+const LIST_SCROLLBAR_CLASS = "[scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-(--canvas-border-de-emp) [&::-webkit-scrollbar-thumb:hover]:bg-(--canvas-border)";
 const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ index, style, ariaAttributes, renderedItems, activeIndex, isLoading, isDarkMode, onItemClick, onItemHover })=>{
     const renderItem = renderedItems[index];
     const buttonStyle = (0, external_react_namespaceObject.useMemo)(()=>({
@@ -171,8 +174,9 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
     const item = renderItem.item;
     const bgColor = isDarkMode ? item.colorDark ?? item.color : item.color;
     const isActive = index === activeIndex;
-    const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_ListView_styles_cjs_namespaceObject.ListItemButton, {
+    const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.motion.button, {
         ...ariaAttributes,
+        type: "button",
         tabIndex: -1,
         id: `toolbox-item-${item.id}`,
         role: "option",
@@ -180,15 +184,14 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
         style: buttonStyle,
         onClick: handleButtonClick,
         onHoverStart: handleButtonHover,
-        className: `${isLoading ? 'loading' : ''} ${isActive ? 'active' : ''}`,
+        className: (0, external_utils_index_cjs_namespaceObject.cx)(ROW_BUTTON_CLASS, {
+            loading: !!isLoading
+        }),
         disabled: isLoading,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(IconContainerMemoized, {
-                bgColor: bgColor,
-                style: item.contentColor ? {
-                    color: item.contentColor
-                } : void 0,
-                "data-testid": "list-item-icon",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_ListViewIconContainer_cjs_namespaceObject.ListViewIconContainer, {
+                background: bgColor,
+                color: item.contentColor,
                 children: [
                     item.icon?.url && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                         src: item.icon?.url,
@@ -213,20 +216,22 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
                 overflow: "hidden",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "text-sm list-view-item-name",
+                        className: "truncate text-sm",
                         style: item.contentColor ? {
                             color: item.contentColor
                         } : void 0,
                         children: item.name
                     }),
                     item.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "text-xs list-view-item-name text-foreground-muted",
+                        className: "truncate text-xs text-foreground-muted",
                         children: item.description
                     })
                 ]
             }),
             item.badge && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "shrink-0 uppercase font-semibold text-[10px] py-px px-1 rounded border border-border text-foreground-muted",
+                className: (0, apollo_wind_namespaceObject.cn)((0, apollo_wind_namespaceObject.badgeVariants)({
+                    variant: 'outline'
+                }), 'shrink-0 rounded border-border px-1 py-1 text-[8px] uppercase text-foreground-muted'),
                 "data-testid": "list-item-badge",
                 children: item.badge
             }),
@@ -278,7 +283,7 @@ const ListItemSkeleton = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)
         "data-testid": "list-item-skeleton",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
-                className: "h-6 w-6 shrink-0 rounded-md"
+                className: "h-6 w-6 shrink-0 rounded-md future:rounded-lg"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
                 className: "h-3.5 w-1/2"
@@ -339,8 +344,9 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
             ]
         });
     }
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_window_namespaceObject.List, {
         id: "toolbox-listbox",
+        className: LIST_SCROLLBAR_CLASS,
         role: "listbox",
         "aria-busy": activeSkeleton ? true : void 0,
         listRef: listRef,

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

@@ -1,4 +1,4 @@
-import type { ListImperativeAPI } from 'react-window';
+import { type ListImperativeAPI } from 'react-window';
 export interface ListItemIcon {
     name?: string;
     url?: string;

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":"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"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"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"}

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

@@ -1,12 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Column } from "../../layouts/index.js";
-import { CanvasIcon, partition } from "../../utils/index.js";
-import { Skeleton } from "@uipath/apollo-wind";
+import { CanvasIcon, cx, partition } from "../../utils/index.js";
+import { Skeleton, badgeVariants, cn } from "@uipath/apollo-wind";
+import { motion } from "motion/react";
 import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "react";
+import { List } from "react-window";
 import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 import { InitialsBadge } from "../shared/InitialsBadge.js";
-import { IconContainer, ListItemButton, StyledList } from "./ListView.styles.js";
+import { ListViewIconContainer } from "./ListViewIconContainer.js";
 const DEFAULT_SKELETON_COUNT = 3;
 const ROW_HEIGHT_ITEM = 32;
 const ROW_HEIGHT_ITEM_TWO_LINE = 44;
@@ -84,7 +86,8 @@ function buildRenderedItems(items, enableSections, loadingSkeleton) {
     if (skeletonConfig && !skeletonConfig.sections) pushSkeletons(baseSkeletonCount);
     return result;
 }
-const IconContainerMemoized = /*#__PURE__*/ memo(IconContainer);
+const ROW_BUTTON_CLASS = "box-border flex w-full cursor-pointer items-center gap-2.5 border-none bg-transparent text-left rounded-lg outline-1 outline-transparent [outline-offset:-1px] hover:bg-(--canvas-background-hover) aria-selected:bg-(--canvas-background-hover) aria-selected:outline-(--canvas-primary) disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&:disabled_*]:opacity-70 transition-[background-color,opacity,outline-color] duration-150";
+const LIST_SCROLLBAR_CLASS = "[scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-(--canvas-border-de-emp) [&::-webkit-scrollbar-thumb:hover]:bg-(--canvas-border)";
 const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, renderedItems, activeIndex, isLoading, isDarkMode, onItemClick, onItemHover })=>{
     const renderItem = renderedItems[index];
     const buttonStyle = useMemo(()=>({
@@ -136,8 +139,9 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
     const item = renderItem.item;
     const bgColor = isDarkMode ? item.colorDark ?? item.color : item.color;
     const isActive = index === activeIndex;
-    const button = /*#__PURE__*/ jsxs(ListItemButton, {
+    const button = /*#__PURE__*/ jsxs(motion.button, {
         ...ariaAttributes,
+        type: "button",
         tabIndex: -1,
         id: `toolbox-item-${item.id}`,
         role: "option",
@@ -145,15 +149,14 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         style: buttonStyle,
         onClick: handleButtonClick,
         onHoverStart: handleButtonHover,
-        className: `${isLoading ? 'loading' : ''} ${isActive ? 'active' : ''}`,
+        className: cx(ROW_BUTTON_CLASS, {
+            loading: !!isLoading
+        }),
         disabled: isLoading,
         children: [
-            /*#__PURE__*/ jsxs(IconContainerMemoized, {
-                bgColor: bgColor,
-                style: item.contentColor ? {
-                    color: item.contentColor
-                } : void 0,
-                "data-testid": "list-item-icon",
+            /*#__PURE__*/ jsxs(ListViewIconContainer, {
+                background: bgColor,
+                color: item.contentColor,
                 children: [
                     item.icon?.url && /*#__PURE__*/ jsx("img", {
                         src: item.icon?.url,
@@ -178,20 +181,22 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
                 overflow: "hidden",
                 children: [
                     /*#__PURE__*/ jsx("span", {
-                        className: "text-sm list-view-item-name",
+                        className: "truncate text-sm",
                         style: item.contentColor ? {
                             color: item.contentColor
                         } : void 0,
                         children: item.name
                     }),
                     item.description && /*#__PURE__*/ jsx("span", {
-                        className: "text-xs list-view-item-name text-foreground-muted",
+                        className: "truncate text-xs text-foreground-muted",
                         children: item.description
                     })
                 ]
             }),
             item.badge && /*#__PURE__*/ jsx("span", {
-                className: "shrink-0 uppercase font-semibold text-[10px] py-px px-1 rounded border border-border text-foreground-muted",
+                className: cn(badgeVariants({
+                    variant: 'outline'
+                }), 'shrink-0 rounded border-border px-1 py-1 text-[8px] uppercase text-foreground-muted'),
                 "data-testid": "list-item-badge",
                 children: item.badge
             }),
@@ -243,7 +248,7 @@ const ListItemSkeleton = ()=>/*#__PURE__*/ jsxs("div", {
         "data-testid": "list-item-skeleton",
         children: [
             /*#__PURE__*/ jsx(Skeleton, {
-                className: "h-6 w-6 shrink-0 rounded-md"
+                className: "h-6 w-6 shrink-0 rounded-md future:rounded-lg"
             }),
             /*#__PURE__*/ jsx(Skeleton, {
                 className: "h-3.5 w-1/2"
@@ -304,8 +309,9 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
             ]
         });
     }
-    return /*#__PURE__*/ jsx(StyledList, {
+    return /*#__PURE__*/ jsx(List, {
         id: "toolbox-listbox",
+        className: LIST_SCROLLBAR_CLASS,
         role: "listbox",
         "aria-busy": activeSkeleton ? true : void 0,
         listRef: listRef,

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

@@ -0,0 +1,52 @@
+"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__, {
+    ListViewIconContainer: ()=>ListViewIconContainer_ListViewIconContainer
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const ListViewIconContainer_ListViewIconContainer = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ background, color, children }) {
+    const style = (0, external_react_namespaceObject.useMemo)(()=>background || color ? {
+            background,
+            color
+        } : void 0, [
+        background,
+        color
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "flex size-6 shrink-0 items-center justify-center rounded-md text-(--canvas-foreground-emp) opacity-90 [z-index:-1] future:rounded-lg",
+        style: style,
+        "data-testid": "list-item-icon",
+        children: children
+    });
+});
+exports.ListViewIconContainer = __webpack_exports__.ListViewIconContainer;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ListViewIconContainer"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/Toolbox/ListViewIconContainer.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+interface ListViewIconContainerProps {
+    background?: string;
+    color?: string;
+    children?: ReactNode;
+}
+export declare const ListViewIconContainer: import("react").NamedExoticComponent<ListViewIconContainerProps>;
+export {};
+//# sourceMappingURL=ListViewIconContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListViewIconContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListViewIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAEtD,UAAU,0BAA0B;IAKlC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,qBAAqB,kEAqBhC,CAAC"}

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+const ListViewIconContainer_ListViewIconContainer = /*#__PURE__*/ memo(function({ background, color, children }) {
+    const style = useMemo(()=>background || color ? {
+            background,
+            color
+        } : void 0, [
+        background,
+        color
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex size-6 shrink-0 items-center justify-center rounded-md text-(--canvas-foreground-emp) opacity-90 [z-index:-1] future:rounded-lg",
+        style: style,
+        "data-testid": "list-item-icon",
+        children: children
+    });
+});
+export { ListViewIconContainer_ListViewIconContainer as ListViewIconContainer };

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

@@ -31,6 +31,10 @@ const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
+const BLEED_TO_PANEL_EDGE_STYLE = {
+    paddingInline: external_constants_cjs_namespaceObject.TOOLBOX_PADDING_X,
+    marginInline: -external_constants_cjs_namespaceObject.TOOLBOX_PADDING_X
+};
 function QuickActionButton({ action, wide }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
         content: action.title,
@@ -54,18 +58,16 @@ const QuickActionsRow_QuickActionsRow = /*#__PURE__*/ (0, external_react_namespa
     const leading = actions.filter((a)=>!a.trailing);
     const trailing = actions.filter((a)=>a.trailing);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: "flex items-center justify-center gap-3 min-h-11 pb-2 border-b border-border shrink-0",
-        style: {
-            paddingInline: external_constants_cjs_namespaceObject.TOOLBOX_PADDING_X,
-            marginInline: -external_constants_cjs_namespaceObject.TOOLBOX_PADDING_X
-        },
+        className: "flex min-h-11 shrink-0 items-center justify-center gap-3 border-b border-border pb-2 future:border-border-subtle",
+        style: BLEED_TO_PANEL_EDGE_STYLE,
         "data-testid": "toolbox-quick-actions",
         children: [
             leading.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(QuickActionButton, {
                     action: action
                 }, action.id)),
-            trailing.length > 0 && leading.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: "w-px self-stretch mx-1 bg-border shrink-0",
+            trailing.length > 0 && leading.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Separator, {
+                orientation: "vertical",
+                className: "mx-1 h-auto shrink-0 self-stretch",
                 "data-testid": "toolbox-quick-actions-separator"
             }),
             trailing.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(QuickActionButton, {

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

@@ -1 +1 @@
-{"version":3,"file":"QuickActionsRow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/QuickActionsRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,oBAAoB;IAC5B,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B;AAuBD,eAAO,MAAM,eAAe,4DA0B1B,CAAC"}
+{"version":3,"file":"QuickActionsRow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/QuickActionsRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAY9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,oBAAoB;IAC5B,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B;AAuBD,eAAO,MAAM,eAAe,4DA2B1B,CAAC"}

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

@@ -1,8 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@uipath/apollo-wind";
+import { Button, Separator } from "@uipath/apollo-wind";
 import { memo } from "react";
 import { TOOLBOX_PADDING_X } from "../../constants.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
+const BLEED_TO_PANEL_EDGE_STYLE = {
+    paddingInline: TOOLBOX_PADDING_X,
+    marginInline: -TOOLBOX_PADDING_X
+};
 function QuickActionButton({ action, wide }) {
     return /*#__PURE__*/ jsx(CanvasTooltip, {
         content: action.title,
@@ -26,18 +30,16 @@ const QuickActionsRow_QuickActionsRow = /*#__PURE__*/ memo(function({ actions })
     const leading = actions.filter((a)=>!a.trailing);
     const trailing = actions.filter((a)=>a.trailing);
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex items-center justify-center gap-3 min-h-11 pb-2 border-b border-border shrink-0",
-        style: {
-            paddingInline: TOOLBOX_PADDING_X,
-            marginInline: -TOOLBOX_PADDING_X
-        },
+        className: "flex min-h-11 shrink-0 items-center justify-center gap-3 border-b border-border pb-2 future:border-border-subtle",
+        style: BLEED_TO_PANEL_EDGE_STYLE,
         "data-testid": "toolbox-quick-actions",
         children: [
             leading.map((action)=>/*#__PURE__*/ jsx(QuickActionButton, {
                     action: action
                 }, action.id)),
-            trailing.length > 0 && leading.length > 0 && /*#__PURE__*/ jsx("div", {
-                className: "w-px self-stretch mx-1 bg-border shrink-0",
+            trailing.length > 0 && leading.length > 0 && /*#__PURE__*/ jsx(Separator, {
+                orientation: "vertical",
+                className: "mx-1 h-auto shrink-0 self-stretch",
                 "data-testid": "toolbox-quick-actions-separator"
             }),
             trailing.map((action)=>/*#__PURE__*/ jsx(QuickActionButton, {

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

@@ -27,10 +27,9 @@ __webpack_require__.d(__webpack_exports__, {
     SearchBox: ()=>SearchBox_SearchBox
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../utils/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 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...', clearButtonAriaLabel = 'Clear search', inputRef: externalInputRef, clearButtonRef, onNavigationKeyDown, navigateToFirstItem, activeDescendantId }) {
     const internalRef = (0, external_react_namespaceObject.useRef)(null);
     const inputRef = externalInputRef ?? internalRef;
@@ -46,46 +45,47 @@ const SearchBox_SearchBox = /*#__PURE__*/ (0, external_react_namespaceObject.mem
             if (!e.shiftKey) navigateToFirstItem?.();
         }
     };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SearchBox_styles_cjs_namespaceObject.StyledSearchForm, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("form", {
         autoComplete: "off",
-        className: "searchbox-form",
+        className: "w-full",
         onSubmit: (e)=>e.preventDefault(),
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            className: (0, index_cjs_namespaceObject.cx)("searchbox-container", {
-                'has-value': !!value
-            }),
+        "data-testid": "toolbox-search",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.InputGroup, {
+            className: "h-8 future:h-9",
             children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                    className: "searchbox-icon",
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.InputGroupAddon, {
+                    align: "inline-start",
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                         icon: "search",
                         size: 16
                     })
                 }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.InputGroupInput, {
                     ref: inputRef,
                     autoComplete: "off",
                     type: "text",
                     role: "combobox",
                     "aria-controls": "toolbox-listbox",
                     "aria-expanded": true,
-                    className: "searchbox-input",
+                    "aria-activedescendant": activeDescendantId,
                     placeholder: placeholder,
                     value: value,
                     onChange: (e)=>onChange(e.target.value),
-                    onKeyDown: onNavigationKeyDown,
-                    "aria-activedescendant": activeDescendantId
+                    onKeyDown: onNavigationKeyDown
                 }),
-                value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                    ref: clearButtonRef,
-                    type: "button",
-                    className: "searchbox-clear",
-                    "aria-label": clearButtonAriaLabel,
-                    onClick: clear,
-                    onKeyDown: handleClearButtonKeyDown,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                        icon: "x",
-                        size: 16
+                value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.InputGroupAddon, {
+                    align: "inline-end",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.InputGroupButton, {
+                        ref: clearButtonRef,
+                        icon: true,
+                        size: "3xs",
+                        "aria-label": clearButtonAriaLabel,
+                        onClick: clear,
+                        onKeyDown: handleClearButtonKeyDown,
+                        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":"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,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,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,sDAqEpB,CAAC"}
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/SearchBox.tsx"],"names":[],"mappings":"AAUA,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,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,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,sDA4EpB,CAAC"}

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

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "../../utils/index.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@uipath/apollo-wind";
 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...', clearButtonAriaLabel = 'Clear search', inputRef: externalInputRef, clearButtonRef, onNavigationKeyDown, navigateToFirstItem, activeDescendantId }) {
     const internalRef = useRef(null);
     const inputRef = externalInputRef ?? internalRef;
@@ -18,46 +17,47 @@ const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear
             if (!e.shiftKey) navigateToFirstItem?.();
         }
     };
-    return /*#__PURE__*/ jsx(StyledSearchForm, {
+    return /*#__PURE__*/ jsx("form", {
         autoComplete: "off",
-        className: "searchbox-form",
+        className: "w-full",
         onSubmit: (e)=>e.preventDefault(),
-        children: /*#__PURE__*/ jsxs("div", {
-            className: cx("searchbox-container", {
-                'has-value': !!value
-            }),
+        "data-testid": "toolbox-search",
+        children: /*#__PURE__*/ jsxs(InputGroup, {
+            className: "h-8 future:h-9",
             children: [
-                /*#__PURE__*/ jsx("span", {
-                    className: "searchbox-icon",
+                /*#__PURE__*/ jsx(InputGroupAddon, {
+                    align: "inline-start",
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "search",
                         size: 16
                     })
                 }),
-                /*#__PURE__*/ jsx("input", {
+                /*#__PURE__*/ jsx(InputGroupInput, {
                     ref: inputRef,
                     autoComplete: "off",
                     type: "text",
                     role: "combobox",
                     "aria-controls": "toolbox-listbox",
                     "aria-expanded": true,
-                    className: "searchbox-input",
+                    "aria-activedescendant": activeDescendantId,
                     placeholder: placeholder,
                     value: value,
                     onChange: (e)=>onChange(e.target.value),
-                    onKeyDown: onNavigationKeyDown,
-                    "aria-activedescendant": activeDescendantId
+                    onKeyDown: onNavigationKeyDown
                 }),
-                value && /*#__PURE__*/ jsx("button", {
-                    ref: clearButtonRef,
-                    type: "button",
-                    className: "searchbox-clear",
-                    "aria-label": clearButtonAriaLabel,
-                    onClick: clear,
-                    onKeyDown: handleClearButtonKeyDown,
-                    children: /*#__PURE__*/ jsx(CanvasIcon, {
-                        icon: "x",
-                        size: 16
+                value && /*#__PURE__*/ jsx(InputGroupAddon, {
+                    align: "inline-end",
+                    children: /*#__PURE__*/ jsx(InputGroupButton, {
+                        ref: clearButtonRef,
+                        icon: true,
+                        size: "3xs",
+                        "aria-label": clearButtonAriaLabel,
+                        onClick: clear,
+                        onKeyDown: handleClearButtonKeyDown,
+                        children: /*#__PURE__*/ jsx(CanvasIcon, {
+                            icon: "x",
+                            size: 16
+                        })
                     })
                 })
             ]