@uipath/apollo-wind 2.47.2 → 2.48.0

package/dist/components/ui/dialog.cjs

@@ -25,21 +25,33 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    DialogDescription: ()=>dialog_DialogDescription,
     DialogTitle: ()=>dialog_DialogTitle,
     DialogHeader: ()=>DialogHeader,
     DialogClose: ()=>dialog_DialogClose,
+    ModalOverlay: ()=>ModalOverlay,
+    Dialog: ()=>Dialog,
+    ModalTrigger: ()=>ModalTrigger,
+    Modal: ()=>Modal,
+    ModalDescription: ()=>ModalDescription,
+    DialogFooter: ()=>DialogFooter,
+    DialogPortal: ()=>DialogPortal,
+    ModalTitle: ()=>ModalTitle,
+    DialogDescription: ()=>dialog_DialogDescription,
+    ModalPortal: ()=>ModalPortal,
+    ModalContent: ()=>ModalContent,
     DialogOverlay: ()=>dialog_DialogOverlay,
     DialogTrigger: ()=>dialog_DialogTrigger,
-    Dialog: ()=>Dialog,
     DialogContent: ()=>dialog_DialogContent,
-    DialogFooter: ()=>DialogFooter,
-    DialogPortal: ()=>DialogPortal
+    ModalClose: ()=>ModalClose,
+    ModalHeader: ()=>ModalHeader,
+    ModalFooter: ()=>ModalFooter
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_dialog_namespaceObject = require("@radix-ui/react-dialog");
+const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
+const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function Dialog({ ...props }) {
@@ -61,6 +73,38 @@ function DialogPortal({ ...props }) {
         ...props
     });
 }
+const dialogContentVariants = (0, external_class_variance_authority_namespaceObject.cva)('bg-surface-raised text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 border border-border-subtle shadow-xl duration-200', {
+    variants: {
+        variant: {
+            default: 'grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg',
+            takeover: 'flex min-h-0 w-full flex-col overflow-hidden'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+const OVERLAY_BACKDROP_HANDLER_KEYS = [
+    'onClick',
+    'onMouseDown',
+    'onMouseUp',
+    'onPointerDown',
+    'onPointerUp'
+];
+function guardOverlayBackdropHandlers(overlayProps) {
+    if (!overlayProps) return overlayProps;
+    const guarded = {
+        ...overlayProps
+    };
+    for (const key of OVERLAY_BACKDROP_HANDLER_KEYS){
+        const handler = overlayProps[key];
+        if ('function' == typeof handler) guarded[key] = (event)=>{
+            if (event.target !== event.currentTarget) return;
+            handler(event);
+        };
+    }
+    return guarded;
+}
 const dialog_DialogClose = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function(props, ref) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Close, {
         "data-slot": "dialog-close",
@@ -76,17 +120,97 @@ const dialog_DialogOverlay = /*#__PURE__*/ external_react_namespaceObject.forwar
         ...props
     });
 });
-const dialog_DialogContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ className, children, showCloseButton = true, container, ...props }, ref) {
+const dialog_DialogContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ className, children, showCloseButton = true, container, variant = 'default', headerTitle, headerActions, sidebar, sidebarClassName, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, closeOnBackdropClick = true, overlayProps, overlayTestId, 'data-expanded': dataExpanded, 'aria-labelledby': ariaLabelledBy, onPointerDownOutside, ...props }, ref) {
     const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DialogPortal, {
-        "data-slot": "dialog-portal",
-        container: resolvedContainer,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dialog_DialogOverlay, {
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_dialog_namespaceObject.Content, {
-                "data-slot": "dialog-content",
-                className: (0, index_cjs_namespaceObject.cn)('bg-background 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 relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className),
-                ref: ref,
-                ...props,
+    const [uncontrolledExpanded, setUncontrolledExpanded] = external_react_namespaceObject.useState(defaultExpanded);
+    const expanded = controlledExpanded ?? uncontrolledExpanded;
+    const isTakeover = 'takeover' === variant;
+    const setExpanded = (nextExpanded)=>{
+        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
+        onExpandedChange?.(nextExpanded);
+    };
+    const content = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dialog_DialogOverlay, {
+        ...guardOverlayBackdropHandlers(overlayProps),
+        "data-testid": overlayTestId,
+        className: (0, index_cjs_namespaceObject.cn)(isTakeover ? (0, index_cjs_namespaceObject.cn)('!absolute !bg-curtain items-center justify-center', expanded ? 'p-0' : 'p-3') : void 0, overlayProps?.className),
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Content, {
+            "data-slot": "dialog-content",
+            "data-variant": variant,
+            "data-expanded": isTakeover ? expanded : dataExpanded,
+            className: (0, index_cjs_namespaceObject.cn)(dialogContentVariants({
+                variant
+            }), isTakeover && (expanded ? 'h-full w-full' : 'h-[95%] w-[95%] rounded-2xl'), className),
+            onPointerDownOutside: (event)=>{
+                if (isTakeover && !closeOnBackdropClick) event.preventDefault();
+                onPointerDownOutside?.(event);
+            },
+            ref: ref,
+            ...props,
+            ...isTakeover && null == headerTitle ? {
+                'aria-labelledby': ariaLabelledBy
+            } : ariaLabelledBy ? {
+                'aria-labelledby': ariaLabelledBy
+            } : {},
+            children: isTakeover ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("header", {
+                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
+                        children: [
+                            null != headerTitle ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Title, {
+                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
+                                children: headerTitle
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "min-w-0 flex-1",
+                                "aria-hidden": "true"
+                            }),
+                            headerActions,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "-mr-1 flex shrink-0 items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                        variant: "ghost",
+                                        size: "xs",
+                                        icon: true,
+                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
+                                        title: expanded ? 'Collapse modal' : 'Expand modal',
+                                        onClick: ()=>setExpanded(!expanded),
+                                        children: expanded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Minimize2, {
+                                            size: 16
+                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Maximize2, {
+                                            size: 16
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Close, {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                            variant: "ghost",
+                                            size: "xs",
+                                            icon: true,
+                                            "aria-label": "Close modal",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XIcon, {
+                                                size: 16
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex min-h-0 flex-1",
+                        children: [
+                            null != sidebar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("aside", {
+                                className: (0, index_cjs_namespaceObject.cn)('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
+                                children: sidebar
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("main", {
+                                className: "min-w-0 flex-1 overflow-auto",
+                                children: children
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                 children: [
                     children,
                     showCloseButton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_dialog_namespaceObject.Close, {
@@ -104,6 +228,11 @@ const dialog_DialogContent = /*#__PURE__*/ external_react_namespaceObject.forwar
             })
         })
     });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DialogPortal, {
+        "data-slot": "dialog-portal",
+        container: resolvedContainer,
+        children: content
+    });
 });
 function DialogHeader({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -130,11 +259,21 @@ const dialog_DialogTitle = /*#__PURE__*/ external_react_namespaceObject.forwardR
 const dialog_DialogDescription = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Description, {
         "data-slot": "dialog-description",
-        className: (0, index_cjs_namespaceObject.cn)('text-muted-foreground text-sm', className),
+        className: (0, index_cjs_namespaceObject.cn)('text-foreground-muted text-sm', className),
         ref: ref,
         ...props
     });
 });
+const Modal = Dialog;
+const ModalClose = dialog_DialogClose;
+const ModalContent = dialog_DialogContent;
+const ModalDescription = dialog_DialogDescription;
+const ModalFooter = DialogFooter;
+const ModalHeader = DialogHeader;
+const ModalOverlay = dialog_DialogOverlay;
+const ModalPortal = DialogPortal;
+const ModalTitle = dialog_DialogTitle;
+const ModalTrigger = dialog_DialogTrigger;
 exports.Dialog = __webpack_exports__.Dialog;
 exports.DialogClose = __webpack_exports__.DialogClose;
 exports.DialogContent = __webpack_exports__.DialogContent;
@@ -145,6 +284,16 @@ exports.DialogOverlay = __webpack_exports__.DialogOverlay;
 exports.DialogPortal = __webpack_exports__.DialogPortal;
 exports.DialogTitle = __webpack_exports__.DialogTitle;
 exports.DialogTrigger = __webpack_exports__.DialogTrigger;
+exports.Modal = __webpack_exports__.Modal;
+exports.ModalClose = __webpack_exports__.ModalClose;
+exports.ModalContent = __webpack_exports__.ModalContent;
+exports.ModalDescription = __webpack_exports__.ModalDescription;
+exports.ModalFooter = __webpack_exports__.ModalFooter;
+exports.ModalHeader = __webpack_exports__.ModalHeader;
+exports.ModalOverlay = __webpack_exports__.ModalOverlay;
+exports.ModalPortal = __webpack_exports__.ModalPortal;
+exports.ModalTitle = __webpack_exports__.ModalTitle;
+exports.ModalTrigger = __webpack_exports__.ModalTrigger;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "Dialog",
     "DialogClose",
@@ -155,7 +304,17 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "DialogOverlay",
     "DialogPortal",
     "DialogTitle",
-    "DialogTrigger"
+    "DialogTrigger",
+    "Modal",
+    "ModalClose",
+    "ModalContent",
+    "ModalDescription",
+    "ModalFooter",
+    "ModalHeader",
+    "ModalOverlay",
+    "ModalPortal",
+    "ModalTitle",
+    "ModalTrigger"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -1,17 +1,59 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { type PortalContainerOverride } from './portal-container';
 declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare const dialogContentVariants: (props?: ({
+    variant?: "default" | "takeover" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: VariantProps<typeof dialogContentVariants>["variant"];
     showCloseButton?: boolean;
     container?: PortalContainerOverride;
+    headerTitle?: React.ReactNode;
+    headerActions?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    sidebarClassName?: string;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    closeOnBackdropClick?: boolean;
+    overlayProps?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+    overlayTestId?: string;
+    'data-expanded'?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+declare const Modal: typeof Dialog;
+declare const ModalClose: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: VariantProps<typeof dialogContentVariants>["variant"];
+    showCloseButton?: boolean;
+    container?: PortalContainerOverride;
+    headerTitle?: React.ReactNode;
+    headerActions?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    sidebarClassName?: string;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    closeOnBackdropClick?: boolean;
+    overlayProps?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+    overlayTestId?: string;
+    'data-expanded'?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ModalDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const ModalFooter: typeof DialogFooter;
+declare const ModalHeader: typeof DialogHeader;
+declare const ModalOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ModalPortal: typeof DialogPortal;
+declare const ModalTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ModalTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, };

package/dist/components/ui/dialog.js

@@ -1,8 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Close, Content, Description, Overlay, Portal, Root, Title, Trigger } from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { Maximize2, Minimize2, XIcon } from "lucide-react";
+import { forwardRef, useState } from "react";
+import { Button } from "./button.js";
 import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
 function Dialog({ ...props }) {
@@ -24,6 +26,38 @@ function DialogPortal({ ...props }) {
         ...props
     });
 }
+const dialogContentVariants = cva('bg-surface-raised text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 border border-border-subtle shadow-xl duration-200', {
+    variants: {
+        variant: {
+            default: 'grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg',
+            takeover: 'flex min-h-0 w-full flex-col overflow-hidden'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+const OVERLAY_BACKDROP_HANDLER_KEYS = [
+    'onClick',
+    'onMouseDown',
+    'onMouseUp',
+    'onPointerDown',
+    'onPointerUp'
+];
+function guardOverlayBackdropHandlers(overlayProps) {
+    if (!overlayProps) return overlayProps;
+    const guarded = {
+        ...overlayProps
+    };
+    for (const key of OVERLAY_BACKDROP_HANDLER_KEYS){
+        const handler = overlayProps[key];
+        if ('function' == typeof handler) guarded[key] = (event)=>{
+            if (event.target !== event.currentTarget) return;
+            handler(event);
+        };
+    }
+    return guarded;
+}
 const dialog_DialogClose = /*#__PURE__*/ forwardRef(function(props, ref) {
     return /*#__PURE__*/ jsx(Close, {
         "data-slot": "dialog-close",
@@ -39,17 +73,97 @@ const dialog_DialogOverlay = /*#__PURE__*/ forwardRef(function({ className, ...p
         ...props
     });
 });
-const dialog_DialogContent = /*#__PURE__*/ forwardRef(function({ className, children, showCloseButton = true, container, ...props }, ref) {
+const dialog_DialogContent = /*#__PURE__*/ forwardRef(function({ className, children, showCloseButton = true, container, variant = 'default', headerTitle, headerActions, sidebar, sidebarClassName, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, closeOnBackdropClick = true, overlayProps, overlayTestId, 'data-expanded': dataExpanded, 'aria-labelledby': ariaLabelledBy, onPointerDownOutside, ...props }, ref) {
     const resolvedContainer = useResolvedPortalContainer(container);
-    return /*#__PURE__*/ jsx(DialogPortal, {
-        "data-slot": "dialog-portal",
-        container: resolvedContainer,
-        children: /*#__PURE__*/ jsx(dialog_DialogOverlay, {
-            children: /*#__PURE__*/ jsxs(Content, {
-                "data-slot": "dialog-content",
-                className: cn('bg-background 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 relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className),
-                ref: ref,
-                ...props,
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+    const expanded = controlledExpanded ?? uncontrolledExpanded;
+    const isTakeover = 'takeover' === variant;
+    const setExpanded = (nextExpanded)=>{
+        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
+        onExpandedChange?.(nextExpanded);
+    };
+    const content = /*#__PURE__*/ jsx(dialog_DialogOverlay, {
+        ...guardOverlayBackdropHandlers(overlayProps),
+        "data-testid": overlayTestId,
+        className: cn(isTakeover ? cn('!absolute !bg-curtain items-center justify-center', expanded ? 'p-0' : 'p-3') : void 0, overlayProps?.className),
+        children: /*#__PURE__*/ jsx(Content, {
+            "data-slot": "dialog-content",
+            "data-variant": variant,
+            "data-expanded": isTakeover ? expanded : dataExpanded,
+            className: cn(dialogContentVariants({
+                variant
+            }), isTakeover && (expanded ? 'h-full w-full' : 'h-[95%] w-[95%] rounded-2xl'), className),
+            onPointerDownOutside: (event)=>{
+                if (isTakeover && !closeOnBackdropClick) event.preventDefault();
+                onPointerDownOutside?.(event);
+            },
+            ref: ref,
+            ...props,
+            ...isTakeover && null == headerTitle ? {
+                'aria-labelledby': ariaLabelledBy
+            } : ariaLabelledBy ? {
+                'aria-labelledby': ariaLabelledBy
+            } : {},
+            children: isTakeover ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("header", {
+                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
+                        children: [
+                            null != headerTitle ? /*#__PURE__*/ jsx(Title, {
+                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
+                                children: headerTitle
+                            }) : /*#__PURE__*/ jsx("div", {
+                                className: "min-w-0 flex-1",
+                                "aria-hidden": "true"
+                            }),
+                            headerActions,
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "-mr-1 flex shrink-0 items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "ghost",
+                                        size: "xs",
+                                        icon: true,
+                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
+                                        title: expanded ? 'Collapse modal' : 'Expand modal',
+                                        onClick: ()=>setExpanded(!expanded),
+                                        children: expanded ? /*#__PURE__*/ jsx(Minimize2, {
+                                            size: 16
+                                        }) : /*#__PURE__*/ jsx(Maximize2, {
+                                            size: 16
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Close, {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            variant: "ghost",
+                                            size: "xs",
+                                            icon: true,
+                                            "aria-label": "Close modal",
+                                            children: /*#__PURE__*/ jsx(XIcon, {
+                                                size: 16
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex min-h-0 flex-1",
+                        children: [
+                            null != sidebar && /*#__PURE__*/ jsx("aside", {
+                                className: cn('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
+                                children: sidebar
+                            }),
+                            /*#__PURE__*/ jsx("main", {
+                                className: "min-w-0 flex-1 overflow-auto",
+                                children: children
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     children,
                     showCloseButton && /*#__PURE__*/ jsxs(Close, {
@@ -67,6 +181,11 @@ const dialog_DialogContent = /*#__PURE__*/ forwardRef(function({ className, chil
             })
         })
     });
+    return /*#__PURE__*/ jsx(DialogPortal, {
+        "data-slot": "dialog-portal",
+        container: resolvedContainer,
+        children: content
+    });
 });
 function DialogHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
@@ -93,9 +212,19 @@ const dialog_DialogTitle = /*#__PURE__*/ forwardRef(function({ className, ...pro
 const dialog_DialogDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Description, {
         "data-slot": "dialog-description",
-        className: cn('text-muted-foreground text-sm', className),
+        className: cn('text-foreground-muted text-sm', className),
         ref: ref,
         ...props
     });
 });
-export { Dialog, dialog_DialogClose as DialogClose, dialog_DialogContent as DialogContent, dialog_DialogDescription as DialogDescription, DialogFooter, DialogHeader, dialog_DialogOverlay as DialogOverlay, DialogPortal, dialog_DialogTitle as DialogTitle, dialog_DialogTrigger as DialogTrigger };
+const Modal = Dialog;
+const ModalClose = dialog_DialogClose;
+const ModalContent = dialog_DialogContent;
+const ModalDescription = dialog_DialogDescription;
+const ModalFooter = DialogFooter;
+const ModalHeader = DialogHeader;
+const ModalOverlay = dialog_DialogOverlay;
+const ModalPortal = DialogPortal;
+const ModalTitle = dialog_DialogTitle;
+const ModalTrigger = dialog_DialogTrigger;
+export { Dialog, dialog_DialogClose as DialogClose, dialog_DialogContent as DialogContent, dialog_DialogDescription as DialogDescription, DialogFooter, DialogHeader, dialog_DialogOverlay as DialogOverlay, DialogPortal, dialog_DialogTitle as DialogTitle, dialog_DialogTrigger as DialogTrigger, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger };

package/dist/components/ui/index.cjs

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "@/components/ui/badge" (module) {
+    "./badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -30,7 +30,7 @@ var __webpack_modules__ = {
     "./calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "@/components/ui/card" (module) {
+    "./card" (module) {
         module.exports = require("./card.cjs");
     },
     "./chart" (module) {
@@ -69,7 +69,7 @@ var __webpack_modules__ = {
     "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "@/components/ui/editable-cell" (module) {
+    "./editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -81,7 +81,7 @@ var __webpack_modules__ = {
     "./form-field" (module) {
         module.exports = require("./form-field.cjs");
     },
-    "@/components/ui/hover-card" (module) {
+    "./hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
     "@/components/ui/input-group" (module) {
@@ -90,7 +90,7 @@ var __webpack_modules__ = {
     "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -159,13 +159,13 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "@/components/ui/table" (module) {
+    "./table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "@/components/ui/textarea" (module) {
+    "./textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
@@ -265,7 +265,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__("@/components/ui/badge");
+    var _badge__rspack_import_5 = __webpack_require__("./badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -300,7 +300,7 @@ var __webpack_exports__ = {};
         "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__("@/components/ui/card");
+    var _card__rspack_import_10 = __webpack_require__("./card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
@@ -391,7 +391,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_23 = __webpack_require__("@/components/ui/editable-cell");
+    var _editable_cell__rspack_import_23 = __webpack_require__("./editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_23)if ([
         "TreeView",
@@ -419,7 +419,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_26[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_27 = __webpack_require__("@/components/ui/hover-card");
+    var _hover_card__rspack_import_27 = __webpack_require__("./hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_27)if ([
         "TreeView",
@@ -440,7 +440,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_30 = __webpack_require__("./label");
+    var _label__rspack_import_30 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_30)if ([
         "TreeView",
@@ -601,7 +601,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_52[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_53 = __webpack_require__("@/components/ui/table");
+    var _table__rspack_import_53 = __webpack_require__("./table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_53)if ([
         "TreeView",
@@ -615,7 +615,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_54[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_55 = __webpack_require__("@/components/ui/textarea");
+    var _textarea__rspack_import_55 = __webpack_require__("./textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_55)if ([
         "TreeView",

package/dist/index.cjs

@@ -50,15 +50,17 @@ __webpack_require__.d(__webpack_exports__, {
     toast: ()=>sonner_cjs_namespaceObject.toast,
     CardDescription: ()=>card_cjs_namespaceObject.CardDescription,
     SheetFooter: ()=>sheet_cjs_namespaceObject.SheetFooter,
+    ModalOverlay: ()=>dialog_cjs_namespaceObject.ModalOverlay,
     CommandSeparator: ()=>command_cjs_namespaceObject.CommandSeparator,
     PromptEditor: ()=>prompt_editor_index_cjs_namespaceObject.PromptEditor,
     Spinner: ()=>spinner_cjs_namespaceObject.Spinner,
     DrawerContent: ()=>drawer_cjs_namespaceObject.DrawerContent,
     DrawerDescription: ()=>drawer_cjs_namespaceObject.DrawerDescription,
-    buttonVariants: ()=>button_cjs_namespaceObject.buttonVariants,
+    ModalTitle: ()=>dialog_cjs_namespaceObject.ModalTitle,
     SheetOverlay: ()=>sheet_cjs_namespaceObject.SheetOverlay,
     AlertDialogPortal: ()=>alert_dialog_cjs_namespaceObject.AlertDialogPortal,
     OutputTokenNode: ()=>prompt_editor_index_cjs_namespaceObject.OutputTokenNode,
+    buttonVariants: ()=>button_cjs_namespaceObject.buttonVariants,
     TabsList: ()=>tabs_cjs_namespaceObject.TabsList,
     TableBody: ()=>table_cjs_namespaceObject.TableBody,
     AvatarImage: ()=>avatar_cjs_namespaceObject.AvatarImage,
@@ -100,6 +102,7 @@ __webpack_require__.d(__webpack_exports__, {
     AccordionContent: ()=>accordion_cjs_namespaceObject.AccordionContent,
     DialogPortal: ()=>dialog_cjs_namespaceObject.DialogPortal,
     DropdownMenuSub: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuSub,
+    ModalContent: ()=>dialog_cjs_namespaceObject.ModalContent,
     SelectLabel: ()=>select_cjs_namespaceObject.SelectLabel,
     CardTitle: ()=>card_cjs_namespaceObject.CardTitle,
     ExpressionBuilder: ()=>rules_engine_cjs_namespaceObject.ExpressionBuilder,
@@ -114,8 +117,10 @@ __webpack_require__.d(__webpack_exports__, {
     createResourceTokenNode: ()=>prompt_editor_index_cjs_namespaceObject.createResourceTokenNode,
     TableCell: ()=>table_cjs_namespaceObject.TableCell,
     TooltipPortal: ()=>tooltip_cjs_namespaceObject.TooltipPortal,
+    ModalTrigger: ()=>dialog_cjs_namespaceObject.ModalTrigger,
     Toggle: ()=>toggle_cjs_namespaceObject.Toggle,
     Switch: ()=>switch_cjs_namespaceObject.Switch,
+    ModalPortal: ()=>dialog_cjs_namespaceObject.ModalPortal,
     AlertDialogHeader: ()=>alert_dialog_cjs_namespaceObject.AlertDialogHeader,
     AlertDialogAction: ()=>alert_dialog_cjs_namespaceObject.AlertDialogAction,
     TableHead: ()=>table_cjs_namespaceObject.TableHead,
@@ -204,6 +209,7 @@ __webpack_require__.d(__webpack_exports__, {
     TooltipContent: ()=>tooltip_cjs_namespaceObject.TooltipContent,
     DropdownMenuGroup: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuGroup,
     ContextMenuItem: ()=>context_menu_cjs_namespaceObject.ContextMenuItem,
+    ModalClose: ()=>dialog_cjs_namespaceObject.ModalClose,
     BreadcrumbEllipsis: ()=>breadcrumb_cjs_namespaceObject.BreadcrumbEllipsis,
     BreadcrumbLink: ()=>breadcrumb_cjs_namespaceObject.BreadcrumbLink,
     AccordionItem: ()=>accordion_cjs_namespaceObject.AccordionItem,
@@ -240,9 +246,10 @@ __webpack_require__.d(__webpack_exports__, {
     BreadcrumbSeparator: ()=>breadcrumb_cjs_namespaceObject.BreadcrumbSeparator,
     DataTable: ()=>data_table_cjs_namespaceObject.DataTable,
     PaginationItem: ()=>pagination_cjs_namespaceObject.PaginationItem,
+    ModalFooter: ()=>dialog_cjs_namespaceObject.ModalFooter,
     SheetTrigger: ()=>sheet_cjs_namespaceObject.SheetTrigger,
-    TabsTrigger: ()=>tabs_cjs_namespaceObject.TabsTrigger,
     Calendar: ()=>calendar_cjs_namespaceObject.Calendar,
+    TabsTrigger: ()=>tabs_cjs_namespaceObject.TabsTrigger,
     Tooltip: ()=>tooltip_cjs_namespaceObject.Tooltip,
     InputGroupAddon: ()=>input_group_cjs_namespaceObject.InputGroupAddon,
     AlertTitle: ()=>alert_cjs_namespaceObject.AlertTitle,
@@ -259,13 +266,16 @@ __webpack_require__.d(__webpack_exports__, {
     SheetDescription: ()=>sheet_cjs_namespaceObject.SheetDescription,
     validationPlugin: ()=>form_plugins_cjs_namespaceObject.validationPlugin,
     hasOptions: ()=>form_schema_cjs_namespaceObject.hasOptions,
+    Modal: ()=>dialog_cjs_namespaceObject.Modal,
+    ModalDescription: ()=>dialog_cjs_namespaceObject.ModalDescription,
     Table: ()=>table_cjs_namespaceObject.Table,
     getAllPromptTokenNodes: ()=>prompt_editor_index_cjs_namespaceObject.getAllPromptTokenNodes,
     BreadcrumbPage: ()=>breadcrumb_cjs_namespaceObject.BreadcrumbPage,
     ToggleGroupItem: ()=>toggle_group_cjs_namespaceObject.ToggleGroupItem,
     ContextMenuPortal: ()=>context_menu_cjs_namespaceObject.ContextMenuPortal,
-    SelectContent: ()=>select_cjs_namespaceObject.SelectContent,
+    ModalHeader: ()=>dialog_cjs_namespaceObject.ModalHeader,
     ContextMenuRadioGroup: ()=>context_menu_cjs_namespaceObject.ContextMenuRadioGroup,
+    SelectContent: ()=>select_cjs_namespaceObject.SelectContent,
     InputGroup: ()=>input_group_cjs_namespaceObject.InputGroup,
     CommandList: ()=>command_cjs_namespaceObject.CommandList,
     AccordionTrigger: ()=>accordion_cjs_namespaceObject.AccordionTrigger,
@@ -282,8 +292,8 @@ __webpack_require__.d(__webpack_exports__, {
     DialogContent: ()=>dialog_cjs_namespaceObject.DialogContent,
     DialogTrigger: ()=>dialog_cjs_namespaceObject.DialogTrigger,
     DropdownMenuRadioGroup: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuRadioGroup,
-    TableRow: ()=>table_cjs_namespaceObject.TableRow,
     FormDesigner: ()=>form_designer_cjs_namespaceObject.FormDesigner,
+    TableRow: ()=>table_cjs_namespaceObject.TableRow,
     ToggleGroup: ()=>toggle_group_cjs_namespaceObject.ToggleGroup,
     Search: ()=>search_cjs_namespaceObject.Search,
     AlertDialogCancel: ()=>alert_dialog_cjs_namespaceObject.AlertDialogCancel,
@@ -530,6 +540,16 @@ exports.InputTokenNode = __webpack_exports__.InputTokenNode;
 exports.Label = __webpack_exports__.Label;
 exports.LockableValueField = __webpack_exports__.LockableValueField;
 exports.MetadataForm = __webpack_exports__.MetadataForm;
+exports.Modal = __webpack_exports__.Modal;
+exports.ModalClose = __webpack_exports__.ModalClose;
+exports.ModalContent = __webpack_exports__.ModalContent;
+exports.ModalDescription = __webpack_exports__.ModalDescription;
+exports.ModalFooter = __webpack_exports__.ModalFooter;
+exports.ModalHeader = __webpack_exports__.ModalHeader;
+exports.ModalOverlay = __webpack_exports__.ModalOverlay;
+exports.ModalPortal = __webpack_exports__.ModalPortal;
+exports.ModalTitle = __webpack_exports__.ModalTitle;
+exports.ModalTrigger = __webpack_exports__.ModalTrigger;
 exports.MultiSelect = __webpack_exports__.MultiSelect;
 exports.OutputTokenNode = __webpack_exports__.OutputTokenNode;
 exports.PROMPT_EDITOR_RICH_TRANSFORMERS = __webpack_exports__.PROMPT_EDITOR_RICH_TRANSFORMERS;
@@ -803,6 +823,16 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "Label",
     "LockableValueField",
     "MetadataForm",
+    "Modal",
+    "ModalClose",
+    "ModalContent",
+    "ModalDescription",
+    "ModalFooter",
+    "ModalHeader",
+    "ModalOverlay",
+    "ModalPortal",
+    "ModalTitle",
+    "ModalTrigger",
     "MultiSelect",
     "OutputTokenNode",
     "PROMPT_EDITOR_RICH_TRANSFORMERS",

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { DataTable, DataTableColumnHeader, DataTableSelectColumn, } from './comp
 export { DatePicker } from './components/ui/date-picker';
 export type { DateTimePickerProps } from './components/ui/datetime-picker';
 export { DateTimePicker } from './components/ui/datetime-picker';
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './components/ui/dialog';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, } from './components/ui/dialog';
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, } from './components/ui/drawer';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from './components/ui/dropdown-menu';
 export type { EditableCellMeta, EditableCellType, } from './components/ui/editable-cell';

package/dist/index.js

@@ -26,7 +26,7 @@ import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGr
 import { DataTable, DataTableColumnHeader, DataTableSelectColumn } from "./components/ui/data-table.js";
 import { DatePicker } from "./components/ui/date-picker.js";
 import { DateTimePicker } from "./components/ui/datetime-picker.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger } from "./components/ui/dialog.js";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/ui/drawer.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/ui/dropdown-menu.js";
 import { EditableCell, createEditableColumn } from "./components/ui/editable-cell.js";
@@ -70,4 +70,4 @@ import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger
 import tree_view from "./components/ui/tree-view.js";
 import { VariablePicker, VariablePickerContent } from "./components/ui/variable-picker/index.js";
 import { cn } from "./lib/utils.js";
-export { $insertTokenAtCursor, 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, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, 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, DEFAULT_PROMPT_EDITOR_STRINGS, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FIELD_TYPE_META, FIELD_TYPE_ORDER, FetchAdapter, FileUpload, FormDesigner, FormField, FormFieldDescription, FormFieldError, FormFieldLabel, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputTokenNode, Label, LockableValueField, MetadataForm, MultiSelect, OutputTokenNode, PROMPT_EDITOR_RICH_TRANSFORMERS, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, Progress, PromptEditor, RadioGroup, RadioGroupItem, RequiredIndicator, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceTokenNode, 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, StateTokenNode, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, TokenPill, TokenPillWithTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, VARIABLE_PATH_REGEX, VariablePicker, VariablePickerContent, WORD_JOINER, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, createInputTokenNode, createOutputTokenNode, createResourceTokenNode, createStateTokenNode, createTokenNodeForOption, formattingPlugin, getAllPromptTokenNodes, getEditorTokens, getPromptEditorTokenColors, getPromptEditorTokenTypeLabel, hasMinMaxStep, hasOptions, inferTokenTypeFromPath, isCustomField, isFileField, isPromptTokenNode, normalizeRichTextTokens, normalizeVariablePath, setEditorTokens, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };
+export { $insertTokenAtCursor, 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, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, 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, DEFAULT_PROMPT_EDITOR_STRINGS, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FIELD_TYPE_META, FIELD_TYPE_ORDER, FetchAdapter, FileUpload, FormDesigner, FormField, FormFieldDescription, FormFieldError, FormFieldLabel, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputTokenNode, Label, LockableValueField, MetadataForm, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, MultiSelect, OutputTokenNode, PROMPT_EDITOR_RICH_TRANSFORMERS, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, Progress, PromptEditor, RadioGroup, RadioGroupItem, RequiredIndicator, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceTokenNode, 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, StateTokenNode, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, TokenPill, TokenPillWithTooltip, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, VARIABLE_PATH_REGEX, VariablePicker, VariablePickerContent, WORD_JOINER, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, createInputTokenNode, createOutputTokenNode, createResourceTokenNode, createStateTokenNode, createTokenNodeForOption, formattingPlugin, getAllPromptTokenNodes, getEditorTokens, getPromptEditorTokenColors, getPromptEditorTokenTypeLabel, hasMinMaxStep, hasOptions, inferTokenTypeFromPath, isCustomField, isFileField, isPromptTokenNode, normalizeRichTextTokens, normalizeVariablePath, setEditorTokens, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };

package/dist/styles.css

@@ -277,6 +277,7 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-surface-overlay: var(--surface-overlay);
     --color-brand: var(--brand);
     --color-foreground-secondary: var(--foreground-secondary);
     --color-foreground-hover: var(--foreground-hover);
@@ -585,6 +586,9 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .\!absolute {
+    position: absolute !important;
+  }
   .absolute {
     position: absolute;
   }
@@ -831,6 +835,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .-mr-1 {
+    margin-right: calc(var(--spacing) * -1);
+  }
   .-mr-2 {
     margin-right: calc(var(--spacing) * -2);
   }
@@ -1103,6 +1110,9 @@
   .h-\[60px\] {
     height: 60px;
   }
+  .h-\[95\%\] {
+    height: 95%;
+  }
   .h-\[120px\] {
     height: 120px;
   }
@@ -1205,6 +1215,9 @@
   .min-h-12 {
     min-height: calc(var(--spacing) * 12);
   }
+  .min-h-14 {
+    min-height: calc(var(--spacing) * 14);
+  }
   .min-h-28 {
     min-height: calc(var(--spacing) * 28);
   }
@@ -1223,9 +1236,15 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .min-h-\[360px\] {
+    min-height: 360px;
+  }
   .min-h-\[400px\] {
     min-height: 400px;
   }
+  .min-h-\[560px\] {
+    min-height: 560px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -1379,6 +1398,9 @@
   .w-\[80px\] {
     width: 80px;
   }
+  .w-\[95\%\] {
+    width: 95%;
+  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -2444,6 +2466,9 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
+  .\!bg-curtain {
+    background-color: var(--color-curtain) !important;
+  }
   .bg-\(--color-bg\) {
     background-color: var(--color-bg);
   }
@@ -3418,6 +3443,9 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-\[radial-gradient\(circle_at_center\,var\(--color-surface-overlay\)_1px\,transparent_1px\)\] {
+    background-image: radial-gradient(circle at center,var(--color-surface-overlay) 1px,transparent 1px);
+  }
   .bg-gradient-1 {
     background-image: var(--gradient-1);
   }
@@ -3493,6 +3521,9 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .bg-\[length\:20px_20px\] {
+    background-size: 20px 20px;
+  }
   .bg-clip-text {
     background-clip: text;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.47.2",
+  "version": "2.48.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",