@doscientos/ui 0.1.8 → 0.1.9

package/dist/index.js

@@ -184,17 +184,75 @@ function AlertAction({ className, children, ...props }) {
 
 // src/ui/app-shell/app-shell.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-function AppShell({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("div", { "data-slot": "app-shell", className: cn("flex min-h-screen w-full bg-muted/30 text-foreground", className), ...props });
+function AppShell({
+  className,
+  sidebarBreakpoint = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "app-shell",
+      "data-sidebar-breakpoint": sidebarBreakpoint,
+      className: cn("bg-background text-foreground", className),
+      ...props
+    }
+  );
+}
+function AppShellSidebar({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "aside",
+    {
+      "data-slot": "app-shell-sidebar",
+      className: cn("w-56 shrink-0 border-r border-border bg-card text-foreground", className),
+      ...props
+    }
+  );
 }
 function AppShellMain({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("main", { "data-slot": "app-shell-main", className: cn("min-w-0 flex-1", className), ...props });
+  return /* @__PURE__ */ jsx3("main", { "data-slot": "app-shell-main", className: cn("bg-background", className), ...props });
 }
 function AppShellHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("header", { "data-slot": "app-shell-header", className: cn("sticky top-0 z-10 flex min-h-14 items-center border-b border-border bg-background/85 px-4 backdrop-blur-md supports-[backdrop-filter]:bg-background/70", className), ...props });
+  return /* @__PURE__ */ jsx3(
+    "header",
+    {
+      "data-slot": "app-shell-header",
+      className: cn("border-b border-border bg-background px-4", className),
+      ...props
+    }
+  );
+}
+function AppShellMobileHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "header",
+    {
+      "data-slot": "app-shell-mobile-header",
+      className: cn("h-14 shrink-0 items-center gap-2 border-b border-border bg-background px-3", className),
+      ...props
+    }
+  );
 }
-function AppShellContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx3("div", { "data-slot": "app-shell-content", className: cn("mx-auto w-full max-w-[1600px] p-4 md:p-6", className), ...props });
+function AppShellContent({
+  className,
+  size = "wide",
+  padded = true,
+  scrollable = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "app-shell-content",
+      "data-size": size,
+      "data-padded": padded || void 0,
+      "data-scrollable": scrollable || void 0,
+      className,
+      ...props
+    }
+  );
 }
 
 // src/ui/avatar/avatar.tsx
@@ -262,10 +320,19 @@ function BreadcrumbSeparator({ children = "/", className, ...props }) {
   return /* @__PURE__ */ jsx6("span", { "data-slot": "breadcrumb-separator", "aria-hidden": "true", className: cn("text-muted-foreground/60", className), ...props, children });
 }
 
+// src/ui/button-group/button-group.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ButtonGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx7("div", { role: "group", "data-slot": "button-group", className: cn("inline-flex items-center gap-2", className), ...props });
+}
+function ButtonGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx7("span", { "data-slot": "button-group-text", className: cn("text-sm text-muted-foreground", className), ...props });
+}
+
 // src/ui/button/button.tsx
 import { cva as cva2 } from "class-variance-authority";
 import { Button as AriaButton } from "react-aria-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var buttonVariants = cva2(
   "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-transparent text-sm font-medium whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] duration-150 outline-none focus-visible:ring-3 focus-visible:ring-ring/50 data-pressed:scale-[0.98] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none motion-reduce:data-pressed:transform-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -290,16 +357,7 @@ var buttonVariants = cva2(
   }
 );
 function Button2({ className, variant, size, ...props }) {
-  return /* @__PURE__ */ jsx7(AriaButton, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), className), ...props });
-}
-
-// src/ui/button-group/button-group.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function ButtonGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("div", { role: "group", "data-slot": "button-group", className: cn("inline-flex items-center gap-2", className), ...props });
-}
-function ButtonGroupText({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("span", { "data-slot": "button-group-text", className: cn("text-sm text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx8(AriaButton, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), className), ...props });
 }
 
 // src/ui/card/card.tsx
@@ -414,8 +472,7 @@ function CommandItem({ className, ...props }) {
   return /* @__PURE__ */ jsx12(ListBoxItem2, { "data-slot": "command-item", className: cn("flex cursor-default items-center rounded-md px-2 py-1.5 text-sm outline-none data-focused:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50", className), ...props });
 }
 
-// src/ui/dialog/dialog.tsx
-import { createContext, useContext } from "react";
+// src/ui/modal-dialog/modal-dialog.tsx
 import { X } from "lucide-react";
 import {
   Dialog as AriaDialog,
@@ -424,50 +481,114 @@ import {
   ModalOverlay,
   Text as Text2
 } from "react-aria-components";
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
-var DialogCloseContext = createContext(null);
-function Dialog({ open, children, ...props }) {
-  return /* @__PURE__ */ jsx13(ModalOverlay, { isOpen: open, className: "fixed inset-0 z-50 grid place-items-center bg-black/20 p-4 backdrop-blur-[1px] motion-safe:data-entering:animate-ui-overlay-in motion-safe:data-exiting:animate-ui-overlay-out", ...props, children });
-}
-function DialogClose({ onPress, ...props }) {
-  const close = useContext(DialogCloseContext);
-  return /* @__PURE__ */ jsx13(Button2, { onPress: (event) => {
-    onPress?.(event);
-    close?.();
-  }, ...props });
-}
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-  return /* @__PURE__ */ jsx13(Modal, { className: "w-full max-w-md outline-none motion-safe:data-entering:animate-ui-surface-in motion-safe:data-exiting:animate-ui-surface-out", children: /* @__PURE__ */ jsx13(AriaDialog, { "data-slot": "dialog-content", className: cn("relative grid max-h-[calc(100dvh-2rem)] gap-4 overflow-y-auto rounded-xl bg-background p-5 text-foreground shadow-xl outline-none", className), ...props, children: ({ close }) => /* @__PURE__ */ jsxs4(DialogCloseContext.Provider, { value: close, children: [
-    typeof children === "function" ? children({ close }) : children,
-    showCloseButton && /* @__PURE__ */ jsx13(DialogClose, { "aria-label": "Cerrar di\xE1logo", variant: "ghost", size: "icon", className: "absolute top-2 right-2", children: /* @__PURE__ */ jsx13(X, { "aria-hidden": "true", className: "size-4" }) })
-  ] }) }) });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx13("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props });
-}
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx13("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
-}
-function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx13(Heading, { slot: "title", className: cn("text-base font-semibold", className), ...props });
-}
-function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx13(Text2, { slot: "description", className: cn("text-sm text-muted-foreground", className), ...props });
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "w-[min(calc(100dvw-2rem),24rem)]",
+  md: "w-[min(calc(100dvw-2rem),28rem)]",
+  lg: "w-[min(calc(100dvw-2rem),36rem)]"
+};
+function ModalDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "sm",
+  showCloseButton = true,
+  className,
+  footerClassName,
+  ...props
+}) {
+  const layoutClass = children ? footer ? "grid-rows-[auto_minmax(0,1fr)_auto]" : "grid-rows-[auto_minmax(0,1fr)]" : "grid-rows-[auto_auto]";
+  return /* @__PURE__ */ jsx13(
+    ModalOverlay,
+    {
+      isOpen: open,
+      onOpenChange,
+      className: "fixed inset-0 z-50 grid place-items-center bg-black/20 p-4 backdrop-blur-[1px] motion-safe:data-entering:animate-ui-overlay-in motion-safe:data-exiting:animate-ui-overlay-out",
+      ...props,
+      children: /* @__PURE__ */ jsx13(
+        Modal,
+        {
+          className: cn(
+            "max-h-[calc(100dvh-2rem)] outline-none motion-safe:data-entering:animate-ui-surface-in motion-safe:data-exiting:animate-ui-surface-out",
+            sizeClasses[size],
+            className
+          ),
+          children: /* @__PURE__ */ jsx13(
+            AriaDialog,
+            {
+              className: cn(
+                "grid max-h-[calc(100dvh-2rem)] overflow-hidden rounded-xl bg-background text-foreground shadow-xl outline-none",
+                layoutClass
+              ),
+              children: ({ close }) => /* @__PURE__ */ jsxs4(Fragment4, { children: [
+                /* @__PURE__ */ jsxs4("header", { "data-slot": "modal-dialog-header", className: "flex items-start gap-3 border-b border-border px-5 py-4", children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx13(Heading, { slot: "title", className: "font-heading text-base leading-none font-medium", children: title }),
+                    description ? /* @__PURE__ */ jsx13(Text2, { slot: "description", className: "mt-2 text-sm text-muted-foreground", children: description }) : null
+                  ] }),
+                  showCloseButton ? /* @__PURE__ */ jsx13(
+                    Button2,
+                    {
+                      "aria-label": "Cerrar di\xE1logo",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "-mr-2 -mt-1",
+                      onPress: close,
+                      children: /* @__PURE__ */ jsx13(X, { "aria-hidden": "true", className: "size-4" })
+                    }
+                  ) : null
+                ] }),
+                children ? /* @__PURE__ */ jsx13("div", { "data-slot": "modal-dialog-body", className: "min-h-0 overflow-y-auto px-5 py-4", children }) : null,
+                footer ? /* @__PURE__ */ jsx13(
+                  "footer",
+                  {
+                    "data-slot": "modal-dialog-footer",
+                    className: cn(
+                      "flex flex-col-reverse gap-2 border-t border-border bg-muted/50 px-5 py-4 sm:flex-row sm:flex-wrap sm:justify-end",
+                      footerClassName
+                    ),
+                    children: footer
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
 }
 
 // src/ui/confirm-dialog/confirm-dialog.tsx
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
-function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel = "Confirmar", cancelLabel = "Cancelar", destructive = false, pending = false, onConfirm }) {
-  return /* @__PURE__ */ jsx14(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs5(DialogContent, { showCloseButton: false, children: [
-    /* @__PURE__ */ jsxs5(DialogHeader, { children: [
-      /* @__PURE__ */ jsx14(DialogTitle, { children: title }),
-      description && /* @__PURE__ */ jsx14(DialogDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsxs5(DialogFooter, { children: [
-      /* @__PURE__ */ jsx14(Button2, { variant: "outline", isDisabled: pending, onPress: () => onOpenChange(false), children: cancelLabel }),
-      /* @__PURE__ */ jsx14(Button2, { variant: destructive ? "destructive" : "default", isDisabled: pending, onPress: onConfirm, children: confirmLabel })
-    ] })
-  ] }) });
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirmar",
+  cancelLabel = "Cancelar",
+  destructive = false,
+  pending = false,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsx14(
+    ModalDialog,
+    {
+      open,
+      onOpenChange,
+      title,
+      description,
+      showCloseButton: false,
+      footer: /* @__PURE__ */ jsxs5(Fragment5, { children: [
+        /* @__PURE__ */ jsx14(Button2, { variant: "outline", isDisabled: pending, onPress: () => onOpenChange(false), children: cancelLabel }),
+        /* @__PURE__ */ jsx14(Button2, { variant: destructive ? "destructive" : "default", isDisabled: pending, onPress: onConfirm, children: confirmLabel })
+      ] })
+    }
+  );
 }
 
 // src/ui/drawer/drawer.tsx
@@ -586,14 +707,14 @@ function FormFeedback({ state, className, pendingLabel = "Guardando\u2026", succ
 }
 
 // src/ui/form-row/form-row.tsx
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 function FormRow({ label, htmlFor, required, hint, error, className, children }) {
   const hintId = hint ? `${htmlFor}-hint` : void 0;
   const errorId = error ? `${htmlFor}-error` : void 0;
   return /* @__PURE__ */ jsxs7("div", { "data-slot": "form-row", className: cn("flex flex-col gap-1.5", className), children: [
     /* @__PURE__ */ jsxs7("label", { htmlFor, className: "text-sm font-medium text-foreground", children: [
       label,
-      required && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      required && /* @__PURE__ */ jsxs7(Fragment6, { children: [
         /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" }),
         /* @__PURE__ */ jsx21("span", { className: "sr-only", children: " (obligatorio)" })
       ] })
@@ -659,6 +780,9 @@ function IconButton({
   ] });
 }
 
+// src/ui/input-group/input-group.tsx
+import { cva as cva3 } from "class-variance-authority";
+
 // src/ui/input/input.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { Input as AriaInput2 } from "react-aria-components";
@@ -668,9 +792,6 @@ var InputImpl = forwardRef2(function Input2({ className, type, ...props }, ref)
 });
 var Input3 = InputImpl;
 
-// src/ui/input-group/input-group.tsx
-import { cva as cva3 } from "class-variance-authority";
-
 // src/ui/textarea/textarea.tsx
 import { forwardRef as forwardRef3 } from "react";
 import { TextArea as AriaTextArea } from "react-aria-components";
@@ -858,10 +979,10 @@ import {
   Popover as Popover5
 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs12 } from "react/jsx-runtime";
 var Select = AriaSelect;
 function SelectTrigger({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx35(AriaButton3, { "data-slot": "select-trigger", className: cn("group/select-trigger flex h-8 w-full min-w-36 items-center gap-2 rounded-lg border border-border bg-background px-2.5 text-left text-sm text-foreground outline-none data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: (state) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  return /* @__PURE__ */ jsx35(AriaButton3, { "data-slot": "select-trigger", className: cn("group/select-trigger flex h-8 w-full min-w-36 items-center gap-2 rounded-lg border border-border bg-background px-2.5 text-left text-sm text-foreground outline-none data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: (state) => /* @__PURE__ */ jsxs12(Fragment7, { children: [
     typeof children === "function" ? children(state) : children,
     /* @__PURE__ */ jsx35(ChevronDown2, { "aria-hidden": "true", className: "ml-auto size-4 text-muted-foreground transition-transform group-data-pressed/select-trigger:rotate-180 motion-reduce:transition-none" })
   ] }) });
@@ -894,16 +1015,16 @@ import {
   Search
 } from "lucide-react";
 import {
-  createContext as createContext2,
-  useContext as useContext2,
+  createContext,
+  useContext,
   useMemo as useMemo2,
   useState as useState7
 } from "react";
 import { Link as Link2 } from "react-aria-components";
-import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
-var SidebarContext = createContext2(null);
+import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
+var SidebarContext = createContext(null);
 function useSidebar() {
-  const context = useContext2(SidebarContext);
+  const context = useContext(SidebarContext);
   if (!context)
     throw new Error("useSidebar must be used inside SidebarProvider");
   return context;
@@ -1060,7 +1181,7 @@ function SidebarItem({
         typeof className === "function" ? className : className
       ),
       ...props,
-      children: (values) => /* @__PURE__ */ jsxs13(Fragment6, { children: [
+      children: (values) => /* @__PURE__ */ jsxs13(Fragment8, { children: [
         /* @__PURE__ */ jsx37("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
         /* @__PURE__ */ jsx37(
           "span",
@@ -1144,11 +1265,11 @@ function Skeleton({ className, ...props }) {
 // src/ui/submit-button/submit-button.tsx
 import { useFormStatus } from "react-dom";
 import { LoaderCircle as LoaderCircle3 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs14 } from "react/jsx-runtime";
 function SubmitButton({ pendingLabel = "Guardando\u2026", loading = false, children, isDisabled, size = "sm", ...props }) {
   const { pending } = useFormStatus();
   const busy = pending || loading;
-  return /* @__PURE__ */ jsx39(Button2, { type: "submit", size, isDisabled: busy || isDisabled, "aria-busy": busy || void 0, ...props, children: busy ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  return /* @__PURE__ */ jsx39(Button2, { type: "submit", size, isDisabled: busy || isDisabled, "aria-busy": busy || void 0, ...props, children: busy ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
     /* @__PURE__ */ jsx39(LoaderCircle3, { "aria-hidden": "true", className: "size-3.5 animate-spin" }),
     pendingLabel
   ] }) : children });
@@ -1159,7 +1280,7 @@ import {
   SwitchButton as AriaSwitchButton,
   SwitchField as AriaSwitchField
 } from "react-aria-components";
-import { Fragment as Fragment8, jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
 var sizeStyles = {
   sm: { track: "h-5 w-9 p-0.5", thumb: "size-4", travel: "group-data-selected/switch:translate-x-4" },
   md: { track: "h-6 w-11 p-0.5", thumb: "size-5", travel: "group-data-selected/switch:translate-x-5" }
@@ -1176,7 +1297,7 @@ function Switch({ className, children, size = "sm", ...props }) {
         "data-disabled:cursor-not-allowed data-disabled:opacity-50",
         typeof className === "function" ? className(state) : className
       ),
-      children: (state) => /* @__PURE__ */ jsxs15(Fragment8, { children: [
+      children: (state) => /* @__PURE__ */ jsxs15(Fragment10, { children: [
         /* @__PURE__ */ jsx40(
           "span",
           {
@@ -1266,7 +1387,7 @@ function TabsContent({ className, ...props }) {
 // src/ui/toast/toast.tsx
 import { useEffect as useEffect4, useSyncExternalStore } from "react";
 import { CheckCircle as CheckCircle2, Info, CircleAlert as CircleAlert2, XCircle, X as X3 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx43, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs16 } from "react/jsx-runtime";
 var records = [];
 var listeners = /* @__PURE__ */ new Set();
 var snapshot = () => records;
@@ -1311,7 +1432,7 @@ function useToast() {
   return toast;
 }
 function ToastProvider({ children }) {
-  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment11, { children: [
     children,
     /* @__PURE__ */ jsx43(Toaster, {})
   ] });
@@ -1325,7 +1446,7 @@ var positionClasses = {
   "bottom-right": "bottom-4 right-4 items-end"
 };
 function Toaster({ position = "bottom-right" }) {
-  return /* @__PURE__ */ jsx43(Fragment9, { children: Object.keys(positionClasses).map((item) => /* @__PURE__ */ jsx43(ToastViewport, { position: item, visiblePosition: position }, item)) });
+  return /* @__PURE__ */ jsx43(Fragment11, { children: Object.keys(positionClasses).map((item) => /* @__PURE__ */ jsx43(ToastViewport, { position: item, visiblePosition: position }, item)) });
 }
 function ToastViewport({ position, visiblePosition, className }) {
   const toasts = useSyncExternalStore(subscribe, snapshot, snapshot).filter((item) => item.position === position);
@@ -1374,6 +1495,8 @@ export {
   AppShellContent,
   AppShellHeader,
   AppShellMain,
+  AppShellMobileHeader,
+  AppShellSidebar,
   AutocompleteCombobox,
   Avatar,
   AvatarBadge,
@@ -1409,13 +1532,6 @@ export {
   CommandItem,
   CommandList,
   ConfirmDialog,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
   Drawer,
   DrawerDescription,
   DrawerFooter,
@@ -1452,6 +1568,7 @@ export {
   MenuContent,
   MenuItem,
   MenuTrigger,
+  ModalDialog,
   PageHeader,
   PageHeaderActions,
   PageHeaderDescription,