@uipath/apollo-wind 2.29.0 → 2.30.0

package/dist/components/ui/dropdown-menu.cjs

@@ -45,6 +45,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_dropdown_menu_namespaceObject = require("@radix-ui/react-dropdown-menu");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
+const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const DropdownMenu = react_dropdown_menu_namespaceObject.Root;
 const DropdownMenuTrigger = react_dropdown_menu_namespaceObject.Trigger;
@@ -70,14 +71,18 @@ const DropdownMenuSubContent = /*#__PURE__*/ external_react_namespaceObject.forw
         ...props
     }));
 DropdownMenuSubContent.displayName = react_dropdown_menu_namespaceObject.SubContent.displayName;
-const DropdownMenuContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Portal, {
+const DropdownMenuContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, sideOffset = 4, container, ...props }, ref)=>{
+    const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Portal, {
+        container: resolvedContainer,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Content, {
             ref: ref,
             sideOffset: sideOffset,
             className: (0, index_cjs_namespaceObject.cn)('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]', className),
             ...props
         })
-    }));
+    });
+});
 DropdownMenuContent.displayName = react_dropdown_menu_namespaceObject.Content.displayName;
 const DropdownMenuItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, inset, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Item, {
         ref: ref,

package/dist/components/ui/dropdown-menu.d.ts

@@ -1,5 +1,6 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as React from 'react';
+import { type PortalContainerOverride } from './portal-container';
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -10,7 +11,9 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: PortalContainerOverride;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/dropdown-menu.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger } from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { forwardRef } from "react";
+import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
 const DropdownMenu = Root;
 const DropdownMenuTrigger = Trigger;
@@ -28,14 +29,18 @@ const DropdownMenuSubContent = /*#__PURE__*/ forwardRef(({ className, ...props }
         ...props
     }));
 DropdownMenuSubContent.displayName = SubContent.displayName;
-const DropdownMenuContent = /*#__PURE__*/ forwardRef(({ className, sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ jsx(Portal, {
+const DropdownMenuContent = /*#__PURE__*/ forwardRef(({ className, sideOffset = 4, container, ...props }, ref)=>{
+    const resolvedContainer = useResolvedPortalContainer(container);
+    return /*#__PURE__*/ jsx(Portal, {
+        container: resolvedContainer,
         children: /*#__PURE__*/ jsx(Content, {
             ref: ref,
             sideOffset: sideOffset,
             className: cn('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]', className),
             ...props
         })
-    }));
+    });
+});
 DropdownMenuContent.displayName = Content.displayName;
 const DropdownMenuItem = /*#__PURE__*/ forwardRef(({ className, inset, ...props }, ref)=>/*#__PURE__*/ jsx(Item, {
         ref: ref,

package/dist/components/ui/index.cjs

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "./badge" (module) {
+    "@/components/ui/badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -27,16 +27,16 @@ var __webpack_modules__ = {
     "@/components/ui/button" (module) {
         module.exports = require("./button.cjs");
     },
-    "./calendar" (module) {
+    "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
-    "./checkbox" (module) {
+    "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "./collapsible" (module) {
+    "@/components/ui/collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -45,7 +45,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -60,10 +60,10 @@ var __webpack_modules__ = {
     "./dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
-    "./dropdown-menu" (module) {
+    "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "./editable-cell" (module) {
+    "@/components/ui/editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -72,16 +72,16 @@ var __webpack_modules__ = {
     "./file-upload" (module) {
         module.exports = require("./file-upload.cjs");
     },
-    "./hover-card" (module) {
+    "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "@/components/ui/input-group" (module) {
+    "./input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
-    "./input" (module) {
+    "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -144,7 +144,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -156,7 +156,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -247,7 +247,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _badge__rspack_import_5 = __webpack_require__("./badge");
+    var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -275,28 +275,28 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_9 = __webpack_require__("./calendar");
+    var _calendar__rspack_import_9 = __webpack_require__("@/components/ui/calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_9)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_card__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_11 = __webpack_require__("./checkbox");
+    var _checkbox__rspack_import_11 = __webpack_require__("@/components/ui/checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_11)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_12 = __webpack_require__("./collapsible");
+    var _collapsible__rspack_import_12 = __webpack_require__("@/components/ui/collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_12)if ([
         "TreeView",
@@ -317,7 +317,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_15)if ([
         "TreeView",
@@ -352,14 +352,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
+    var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
         "TreeView",
@@ -380,28 +380,28 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_23[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_24 = __webpack_require__("./hover-card");
+    var _hover_card__rspack_import_24 = __webpack_require__("@/components/ui/hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_24)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_24[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_25 = __webpack_require__("./input");
+    var _input__rspack_import_25 = __webpack_require__("@/components/ui/input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_25)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_25[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input_group__rspack_import_26 = __webpack_require__("@/components/ui/input-group");
+    var _input_group__rspack_import_26 = __webpack_require__("./input-group");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input_group__rspack_import_26)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_26[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_27 = __webpack_require__("./label");
+    var _label__rspack_import_27 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_27)if ([
         "TreeView",
@@ -548,7 +548,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_47[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_48 = __webpack_require__("./table");
+    var _table__rspack_import_48 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_48)if ([
         "TreeView",
@@ -569,7 +569,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_50[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_51 = __webpack_require__("@/components/ui/toggle");
+    var _toggle__rspack_import_51 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_51)if ([
         "TreeView",

package/dist/components/ui/popover.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __webpack_require__ = {};
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
@@ -32,11 +33,15 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_popover_namespaceObject = require("@radix-ui/react-popover");
 const external_react_namespaceObject = require("react");
+const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const Popover = react_popover_namespaceObject.Root;
 const PopoverTrigger = react_popover_namespaceObject.Trigger;
 const PopoverAnchor = react_popover_namespaceObject.Anchor;
-const PopoverContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Portal, {
+const PopoverContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, align = 'center', sideOffset = 4, container, ...props }, ref)=>{
+    const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Portal, {
+        container: resolvedContainer,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Content, {
             ref: ref,
             align: align,
@@ -44,7 +49,8 @@ const PopoverContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef((
             className: (0, index_cjs_namespaceObject.cn)('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]', className),
             ...props
         })
-    }));
+    });
+});
 PopoverContent.displayName = react_popover_namespaceObject.Content.displayName;
 exports.Popover = __webpack_exports__.Popover;
 exports.PopoverAnchor = __webpack_exports__.PopoverAnchor;

package/dist/components/ui/popover.d.ts

@@ -1,7 +1,10 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as React from 'react';
+import { type PortalContainerOverride } from './portal-container';
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
-declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: PortalContainerOverride;
+} & React.RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/dist/components/ui/popover.js

@@ -1,11 +1,16 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { Anchor, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
 import { forwardRef } from "react";
+import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
 const Popover = Root;
 const PopoverTrigger = Trigger;
 const PopoverAnchor = Anchor;
-const PopoverContent = /*#__PURE__*/ forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ jsx(Portal, {
+const PopoverContent = /*#__PURE__*/ forwardRef(({ className, align = 'center', sideOffset = 4, container, ...props }, ref)=>{
+    const resolvedContainer = useResolvedPortalContainer(container);
+    return /*#__PURE__*/ jsx(Portal, {
+        container: resolvedContainer,
         children: /*#__PURE__*/ jsx(Content, {
             ref: ref,
             align: align,
@@ -13,6 +18,7 @@ const PopoverContent = /*#__PURE__*/ forwardRef(({ className, align = 'center',
             className: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]', className),
             ...props
         })
-    }));
+    });
+});
 PopoverContent.displayName = Content.displayName;
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/components/ui/portal-container.cjs

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+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__, {
+    PortalContainerProvider: ()=>PortalContainerProvider,
+    useResolvedPortalContainer: ()=>useResolvedPortalContainer
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const PortalContainerContext = /*#__PURE__*/ external_react_namespaceObject.createContext(null);
+const usePortalContainer = ()=>external_react_namespaceObject.useContext(PortalContainerContext);
+function useResolvedPortalContainer(container) {
+    const portalContainer = usePortalContainer();
+    if ('body' === container) return;
+    return container ?? portalContainer ?? void 0;
+}
+function PortalContainerProvider({ children, container }) {
+    const [boundary, setBoundary] = external_react_namespaceObject.useState(null);
+    const value = container ?? boundary;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(PortalContainerContext.Provider, {
+        value: value,
+        children: [
+            children,
+            null == container && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                ref: setBoundary,
+                className: "contents"
+            })
+        ]
+    });
+}
+exports.PortalContainerProvider = __webpack_exports__.PortalContainerProvider;
+exports.useResolvedPortalContainer = __webpack_exports__.useResolvedPortalContainer;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PortalContainerProvider",
+    "useResolvedPortalContainer"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/portal-container.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+/**
+ * Per-overlay portal target: `undefined`/`null` inherit the nearest
+ * {@link PortalContainerProvider} (or `document.body` if none), `'body'` forces
+ * `document.body`, an element portals into it. `null` inherits rather than
+ * forcing body so `container={ref.current}` is safe before the ref attaches.
+ */
+export type PortalContainerOverride = HTMLElement | 'body' | null;
+/**
+ * Resolves an overlay's portal target from its `container` and the ambient
+ * provider, shared so the behavior stays identical across overlays. `undefined`
+ * is Radix's default (`document.body`) and keeps SSR clear of `document`.
+ */
+export declare function useResolvedPortalContainer(container?: PortalContainerOverride): HTMLElement | undefined;
+export interface PortalContainerProviderProps {
+    children: React.ReactNode;
+    /** Node to portal into; omit (or pass a not-yet-attached ref, i.e. `null`) for an auto in-tree boundary. */
+    container?: HTMLElement | null;
+}
+/**
+ * Portals Popover/Select/DropdownMenu content (and Combobox/MultiSelect built on
+ * them) into its own subtree instead of `document.body`, keeping overlays in the
+ * trigger's DOM root and focus boundary. Without it they break under shadow-DOM
+ * or focus-trapped hosts, where body-level content escapes the root. Mount one
+ * per React root.
+ *
+ * Known limitation: an overlay open *on mount* portals to `document.body` for
+ * the first commit (the boundary ref hasn't attached yet) then remounts; pass a
+ * stable `container` you own for that case.
+ */
+export declare function PortalContainerProvider({ children, container }: PortalContainerProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/portal-container.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const PortalContainerContext = /*#__PURE__*/ createContext(null);
+const usePortalContainer = ()=>useContext(PortalContainerContext);
+function useResolvedPortalContainer(container) {
+    const portalContainer = usePortalContainer();
+    if ('body' === container) return;
+    return container ?? portalContainer ?? void 0;
+}
+function PortalContainerProvider({ children, container }) {
+    const [boundary, setBoundary] = useState(null);
+    const value = container ?? boundary;
+    return /*#__PURE__*/ jsxs(PortalContainerContext.Provider, {
+        value: value,
+        children: [
+            children,
+            null == container && /*#__PURE__*/ jsx("div", {
+                ref: setBoundary,
+                className: "contents"
+            })
+        ]
+    });
+}
+export { PortalContainerProvider, useResolvedPortalContainer };

package/dist/components/ui/select.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __webpack_require__ = {};
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
@@ -39,6 +40,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_select_namespaceObject = require("@radix-ui/react-select");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
+const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const Select = react_select_namespaceObject.Root;
 const SelectGroup = react_select_namespaceObject.Group;
@@ -76,7 +78,10 @@ const SelectScrollDownButton = /*#__PURE__*/ external_react_namespaceObject.forw
         })
     }));
 SelectScrollDownButton.displayName = react_select_namespaceObject.ScrollDownButton.displayName;
-const SelectContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, position = 'popper', ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Portal, {
+const SelectContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, position = 'popper', container, ...props }, ref)=>{
+    const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Portal, {
+        container: resolvedContainer,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Content, {
             ref: ref,
             className: (0, index_cjs_namespaceObject.cn)('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', 'popper' === position && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
@@ -91,7 +96,8 @@ const SelectContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SelectScrollDownButton, {})
             ]
         })
-    }));
+    });
+});
 SelectContent.displayName = react_select_namespaceObject.Content.displayName;
 const SelectLabel = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Label, {
         ref: ref,

package/dist/components/ui/select.d.ts

@@ -1,12 +1,15 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as React from 'react';
+import { type PortalContainerOverride } from './portal-container';
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: PortalContainerOverride;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/select.js

@@ -1,7 +1,9 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Content, Group, Icon, Item, ItemIndicator, ItemText, Label, Portal, Root, ScrollDownButton, ScrollUpButton, Separator, Trigger, Value, Viewport } from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { forwardRef } from "react";
+import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
 const Select = Root;
 const SelectGroup = Group;
@@ -39,7 +41,10 @@ const SelectScrollDownButton = /*#__PURE__*/ forwardRef(({ className, ...props }
         })
     }));
 SelectScrollDownButton.displayName = ScrollDownButton.displayName;
-const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position = 'popper', ...props }, ref)=>/*#__PURE__*/ jsx(Portal, {
+const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position = 'popper', container, ...props }, ref)=>{
+    const resolvedContainer = useResolvedPortalContainer(container);
+    return /*#__PURE__*/ jsx(Portal, {
+        container: resolvedContainer,
         children: /*#__PURE__*/ jsxs(Content, {
             ref: ref,
             className: cn('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', 'popper' === position && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
@@ -54,7 +59,8 @@ const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position
                 /*#__PURE__*/ jsx(SelectScrollDownButton, {})
             ]
         })
-    }));
+    });
+});
 SelectContent.displayName = Content.displayName;
 const SelectLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Label, {
         ref: ref,

package/dist/index.cjs

@@ -33,6 +33,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    autoSavePlugin: ()=>form_plugins_cjs_namespaceObject.autoSavePlugin,
     PaginationLink: ()=>pagination_cjs_namespaceObject.PaginationLink,
     ContextMenuCheckboxItem: ()=>context_menu_cjs_namespaceObject.ContextMenuCheckboxItem,
     AlertDialogContent: ()=>alert_dialog_cjs_namespaceObject.AlertDialogContent,
@@ -246,13 +247,13 @@ __webpack_require__.d(__webpack_exports__, {
     Breadcrumb: ()=>breadcrumb_cjs_namespaceObject.Breadcrumb,
     ContextMenuShortcut: ()=>context_menu_cjs_namespaceObject.ContextMenuShortcut,
     HoverCardTrigger: ()=>hover_card_cjs_namespaceObject.HoverCardTrigger,
-    ResizablePanelGroup: ()=>resizable_cjs_namespaceObject.ResizablePanelGroup,
+    PortalContainerProvider: ()=>portal_container_cjs_namespaceObject.PortalContainerProvider,
     CardHeader: ()=>card_cjs_namespaceObject.CardHeader,
     HoverCardContent: ()=>hover_card_cjs_namespaceObject.HoverCardContent,
-    ScrollBar: ()=>scroll_area_cjs_namespaceObject.ScrollBar,
+    ResizablePanelGroup: ()=>resizable_cjs_namespaceObject.ResizablePanelGroup,
     FileUpload: ()=>file_upload_cjs_namespaceObject.FileUpload,
     InputGroupInput: ()=>input_group_cjs_namespaceObject.InputGroupInput,
-    autoSavePlugin: ()=>form_plugins_cjs_namespaceObject.autoSavePlugin
+    ScrollBar: ()=>scroll_area_cjs_namespaceObject.ScrollBar
 });
 const utils_cjs_namespaceObject = require("./lib/utils.cjs");
 const row_cjs_namespaceObject = require("./components/ui/layout/row.cjs");
@@ -296,6 +297,7 @@ const dialog_cjs_namespaceObject = require("./components/ui/dialog.cjs");
 const alert_dialog_cjs_namespaceObject = require("./components/ui/alert-dialog.cjs");
 const sheet_cjs_namespaceObject = require("./components/ui/sheet.cjs");
 const popover_cjs_namespaceObject = require("./components/ui/popover.cjs");
+const portal_container_cjs_namespaceObject = require("./components/ui/portal-container.cjs");
 const tooltip_cjs_namespaceObject = require("./components/ui/tooltip.cjs");
 const hover_card_cjs_namespaceObject = require("./components/ui/hover-card.cjs");
 const alert_cjs_namespaceObject = require("./components/ui/alert.cjs");
@@ -458,6 +460,7 @@ exports.Popover = __webpack_exports__.Popover;
 exports.PopoverAnchor = __webpack_exports__.PopoverAnchor;
 exports.PopoverContent = __webpack_exports__.PopoverContent;
 exports.PopoverTrigger = __webpack_exports__.PopoverTrigger;
+exports.PortalContainerProvider = __webpack_exports__.PortalContainerProvider;
 exports.Progress = __webpack_exports__.Progress;
 exports.PromptEditor = __webpack_exports__.PromptEditor;
 exports.RadioGroup = __webpack_exports__.RadioGroup;
@@ -679,6 +682,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "PopoverAnchor",
     "PopoverContent",
     "PopoverTrigger",
+    "PortalContainerProvider",
     "Progress",
     "PromptEditor",
     "RadioGroup",

package/dist/index.d.ts

@@ -59,6 +59,8 @@ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from './components/ui/alert-dialog';
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, } from './components/ui/sheet';
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from './components/ui/popover';
+export { PortalContainerProvider } from './components/ui/portal-container';
+export type { PortalContainerProviderProps } from './components/ui/portal-container';
 export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, } from './components/ui/tooltip';
 export { HoverCard, HoverCardContent, HoverCardTrigger, } from './components/ui/hover-card';
 export { Alert, AlertDescription, AlertTitle } from './components/ui/alert';

package/dist/index.js

@@ -39,6 +39,7 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/ui/alert-dialog.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./components/ui/sheet.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./components/ui/popover.js";
+import { PortalContainerProvider } from "./components/ui/portal-container.js";
 import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip.js";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./components/ui/hover-card.js";
 import { Alert, AlertDescription, AlertTitle } from "./components/ui/alert.js";
@@ -64,4 +65,4 @@ import { ExpressionBuilder, RuleBuilder, RulesEngine } from "./components/forms/
 import { DataFetcher, DataSourceBuilder, DataTransformers, FetchAdapter } from "./components/forms/data-fetcher.js";
 import { analyticsPlugin, auditPlugin, autoSavePlugin, formattingPlugin, validationPlugin, workflowPlugin } from "./components/forms/form-plugins.js";
 import { hasMinMaxStep, hasOptions, isCustomField, isFileField } from "./components/forms/form-schema.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, PromptEditor, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, ScrollableTabsList, Search, SearchWithSuggestions, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, Progress, PromptEditor, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, ScrollableTabsList, Search, SearchWithSuggestions, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };

package/dist/styles.css

@@ -6847,7 +6847,7 @@
     }
   }
 }
-:root {
+:root, :host {
   --color-orange-100: #fee3dc;
   --color-orange-200: #fda891;
   --color-orange-300: #ff8f70;
@@ -7864,6 +7864,18 @@
   --color-gradient-human-end-dark-hc: #2b5372;
   --color-gradient-human-end-future-dark: #2b5372;
   --color-gradient-human-end-future-light: #d8eeff;
+  --color-canvas-background-light: #f4f5f7;
+  --color-canvas-background-light-hc: #f4f5f7;
+  --color-canvas-background-dark: #10151a;
+  --color-canvas-background-dark-hc: #10151a;
+  --color-canvas-background-future-dark: #09090b;
+  --color-canvas-background-future-light: #fafafa;
+  --color-dot-grid-light: #dce5eb;
+  --color-dot-grid-light-hc: #dce5eb;
+  --color-dot-grid-dark: #2f3133;
+  --color-dot-grid-dark-hc: #2f3133;
+  --color-dot-grid-future-dark: #27272a;
+  --color-dot-grid-future-light: #e4e4e7;
   --color-background-overlay-light: #f4f5f7;
   --color-background-overlay-light-hc: #f4f5f7;
   --color-background-overlay-dark: #374652;
@@ -8310,6 +8322,8 @@ body.light, .apollo-design.light, :where(.light:not(.react-flow)) {
   --color-gradient-invoked-end: #daf3ff;
   --color-gradient-human-start: #f6faff;
   --color-gradient-human-end: #d8eeff;
+  --color-canvas-background: #f4f5f7;
+  --color-dot-grid: #dce5eb;
   --color-background-overlay: #f4f5f7;
   --color-foreground-secondary: #182027;
   --color-foreground-hover: #526069;
@@ -8442,6 +8456,8 @@ body.light-hc, .apollo-design.light-hc, :where(.light-hc) {
   --color-gradient-invoked-end: #daf3ff;
   --color-gradient-human-start: #f6faff;
   --color-gradient-human-end: #d8eeff;
+  --color-canvas-background: #f4f5f7;
+  --color-dot-grid: #dce5eb;
   --color-background-overlay: #f4f5f7;
   --color-foreground-secondary: #182027;
   --color-foreground-hover: #374652;
@@ -8574,6 +8590,8 @@ body.dark, .apollo-design.dark, :where(.dark:not(.react-flow)) {
   --color-gradient-invoked-end: #35667d;
   --color-gradient-human-start: #6885ab;
   --color-gradient-human-end: #2b5372;
+  --color-canvas-background: #10151a;
+  --color-dot-grid: #2f3133;
   --color-background-overlay: #374652;
   --color-foreground-secondary: #f8f9fa;
   --color-foreground-hover: #cfd8dd;
@@ -8706,6 +8724,8 @@ body.dark-hc, .apollo-design.dark-hc, :where(.dark-hc) {
   --color-gradient-invoked-end: #35667d;
   --color-gradient-human-start: #6885ab;
   --color-gradient-human-end: #2b5372;
+  --color-canvas-background: #10151a;
+  --color-dot-grid: #2f3133;
   --color-background-overlay: #374652;
   --color-foreground-secondary: #f8f9fa;
   --color-foreground-hover: #cfd8dd;
@@ -8838,6 +8858,8 @@ body.future-dark, .future-dark {
   --color-gradient-invoked-end: #35667d;
   --color-gradient-human-start: #6885ab;
   --color-gradient-human-end: #2b5372;
+  --color-canvas-background: #09090b;
+  --color-dot-grid: #27272a;
   --color-background-overlay: #27272a;
   --color-foreground-secondary: #f4f4f5;
   --color-foreground-hover: #d4d4d8;
@@ -8970,6 +8992,8 @@ body.future-light, .future-light {
   --color-gradient-invoked-end: #daf3ff;
   --color-gradient-human-start: #f6faff;
   --color-gradient-human-end: #d8eeff;
+  --color-canvas-background: #fafafa;
+  --color-dot-grid: #e4e4e7;
   --color-background-overlay: #e4e4e7;
   --color-foreground-secondary: #18181b;
   --color-foreground-hover: #52525c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.29.0",
+  "version": "2.30.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -124,7 +124,7 @@
     "tailwindcss": "^4.1.17",
     "vaul": "^1.1.2",
     "zod": "^4.3.5",
-    "@uipath/apollo-core": "5.10.0"
+    "@uipath/apollo-core": "5.11.1"
   },
   "devDependencies": {
     "@codemirror/lang-javascript": "^6.2.5",