@exem-ui/react 0.3.4-next.20260902003121 → 0.3.4-next.20260903042316

package/dist/index.js

@@ -11,7 +11,8 @@ var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var reactDayPicker = require('react-day-picker');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var DialogPrimitive = require('@radix-ui/react-dialog');
+var dialog = require('@base-ui/react/dialog');
+var DialogPrimitive2 = require('@radix-ui/react-dialog');
 var reResizable = require('re-resizable');
 var progress = require('@base-ui/react/progress');
 var sonner = require('sonner');
@@ -39,7 +40,7 @@ var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimit
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var DialogPrimitive2__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive2);
 
 var SIZE_CONFIG = {
   xsmall: {
@@ -1457,113 +1458,76 @@ TextField.displayName = "TextField";
 TextField.Label.displayName = "TextField.Label";
 TextField.Input.displayName = "TextField.Input";
 TextField.Description.displayName = "TextField.Description";
-
-// src/hooks/useOverlayDismissGuard.ts
-var isBaseUiPopupOpen = () => Boolean(
-  document.querySelector('[data-base-ui-portal] [data-slot="combobox-content"][data-open]')
-);
-var isTargetInsideBaseUiPopup = (target) => target instanceof Element && Boolean(target.closest("[data-base-ui-portal]"));
-var shouldPreventDismissForSelect = (target) => {
-  const isSelectOpen = Boolean(
-    document.querySelector('[data-radix-select-content][data-state="open"]')
-  );
-  if (isSelectOpen) {
-    return true;
-  }
-  if (!(target instanceof Element)) {
-    return false;
-  }
-  return Boolean(
-    target.closest("[data-radix-select-content]") || target.closest("[data-radix-select-viewport]")
-  );
-};
-function useOverlayDismissGuard({
-  onInteractOutside,
-  onEscapeKeyDown
-}) {
-  const handleInteractOutside = (event) => {
-    if (shouldPreventDismissForSelect(event.target) || isTargetInsideBaseUiPopup(event.target)) {
-      event.preventDefault();
-    }
-    onInteractOutside?.(event);
-  };
-  const handleEscapeKeyDown = (event) => {
-    if (isBaseUiPopupOpen()) {
-      event.preventDefault();
-    }
-    onEscapeKeyDown?.(event);
-  };
-  return { onEscapeKeyDown: handleEscapeKeyDown, onInteractOutside: handleInteractOutside };
-}
 var MODAL_PADDING = {
   body: "px-4 pb-4",
   footer: "px-4 py-3"
 };
+var MODAL_TRANSITION = "transition-[transform,scale,opacity] duration-200 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
 var ModalContext = React.createContext({ size: "default" });
-var ModalRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
-var Modal = ModalRoot;
-Modal.Trigger = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props })
-);
-Modal.Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { ...props });
-Modal.Close = React.forwardRef(({ size, ...props }, ref) => {
-  const { size: modalSize } = React.useContext(ModalContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
-    {
-      ...props,
-      ref,
-      variant: "assistive",
-      size: size ?? (modalSize === "fullsize" ? "large" : "medium")
-    }
-  ) });
-});
-Modal.Overlay = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
+function ModalRoot(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { ...props });
+}
+function ModalTrigger(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "modal-trigger", ...props });
+}
+function ModalPortal(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { ...props });
+}
+function ModalOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Backdrop,
     {
-      ref,
-      className: utils.cn(
-        "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        className
-      ),
+      "data-slot": "modal-overlay",
+      className: utils.cn("fixed inset-0 z-50 bg-component-dim", MODAL_TRANSITION, className),
       ...props
     }
-  )
-);
-Modal.Content = React.forwardRef(
-  ({ className, children, size = "default", onInteractOutside, onEscapeKeyDown, ...props }, ref) => {
-    const isFullSize = size === "fullsize";
-    const dismissGuard = useOverlayDismissGuard({ onEscapeKeyDown, onInteractOutside });
-    return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxRuntime.jsxs(Modal.Portal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Modal.Overlay, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DialogPrimitive__namespace.Content,
+  );
+}
+function ModalClose({ size, ...props }) {
+  const { size: modalSize } = React.useContext(ModalContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Close,
+    {
+      render: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
         {
-          ref,
-          className: utils.cn(
-            // 공통 스타일
-            "fixed z-50 flex flex-col rounded-strong border border-border-primary bg-background-primary duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            // fullsize일 때
-            isFullSize ? "inset-0 m-10" : (
-              // 일반 모달일 때
-              "left-[50%] top-[50%] max-w-[calc(100vw-32px)] max-h-[calc(100vh-80px)] w-[800px] h-[560px] translate-x-[-50%] translate-y-[-50%] shadow-strong data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"
-            ),
-            className
-          ),
           ...props,
-          ...dismissGuard,
-          children
+          variant: "assistive",
+          size: size ?? (modalSize === "fullsize" ? "large" : "medium")
         }
       )
-    ] }) });
-  }
-);
-Modal.Header = React.forwardRef(
-  ({ className, line = false, rightSlot, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    }
+  );
+}
+function ModalContent({ className, children, size = "default", ...props }) {
+  const isFullSize = size === "fullsize";
+  return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog.Popup,
+      {
+        "data-slot": "modal-content",
+        className: utils.cn(
+          // 공통 스타일
+          "fixed z-50 flex flex-col rounded-strong border border-border-primary bg-background-primary",
+          MODAL_TRANSITION,
+          isFullSize ? "inset-0 m-10" : (
+            // 콘텐츠 높이를 따르되 뷰포트를 넘지 않는다. 넘치면 Body만 스크롤된다.
+            "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] max-w-[calc(100vw-80px)] max-h-[calc(100vh-80px)] shadow-strong data-[starting-style]:scale-95 data-[ending-style]:scale-95"
+          ),
+          className
+        ),
+        ...props,
+        children
+      }
+    )
+  ] }) });
+}
+function ModalHeader({ className, line = false, rightSlot, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      "data-slot": "modal-header",
       className: utils.cn(
         "flex shrink-0 flex-row items-center gap-2 pl-4 pr-2 min-h-12",
         line && "border-b border-border-primary",
@@ -1573,8 +1537,9 @@ Modal.Header = React.forwardRef(
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children }),
         rightSlot === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-          DialogPrimitive__namespace.Close,
+          dialog.Dialog.Close,
           {
+            "data-slot": "modal-close-icon",
             className: utils.cn(
               "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
             ),
@@ -1583,42 +1548,57 @@ Modal.Header = React.forwardRef(
         ) : rightSlot
       ]
     }
-  )
-);
-Modal.Body = React.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  );
+}
+function ModalBody({
+  className,
+  children,
+  scroll = true,
+  horizontalScroll = false,
+  ...props
+}) {
+  const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(MODAL_PADDING.body, className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
+      "data-slot": "modal-body",
       className: utils.cn(
-        "flex-1 flex flex-col min-h-0 h-full",
-        "[&_[data-slot=scroll-area-viewport]>div]:h-full"
+        "flex-1 flex flex-col min-h-0",
+        scroll && "h-full [&_[data-slot=scroll-area-viewport]>div]:h-full"
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(chunkSX23SDUY_js.ScrollArea, { className: "h-full flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(MODAL_PADDING.body, className), children }) })
+      children: scroll ? /* @__PURE__ */ jsxRuntime.jsx(chunkSX23SDUY_js.ScrollArea, { className: "h-full flex flex-col", disableHorizontalScroll: !horizontalScroll, children: content }) : content
     }
-  )
-);
-Modal.Footer = React.forwardRef(
-  ({ className, line = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  );
+}
+function ModalFooter({ className, line = true, ...props }) {
+  const { size } = React.useContext(ModalContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
+      "data-slot": "modal-footer",
       className: utils.cn(
-        "flex flex-row items-center justify-between min-h-14 gap-3",
+        "flex flex-row items-center justify-between gap-3",
+        size === "fullsize" ? "min-h-16" : "min-h-14",
         line && "border-t border-border-primary",
         MODAL_PADDING.footer,
         className
       ),
       ...props
     }
-  )
-);
-Modal.FooterDescription = React.forwardRef(
-  ({ className, error = false, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  );
+}
+function ModalFooterDescription({
+  className,
+  error = false,
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      "data-slot": "modal-footer-description",
       className: utils.cn(
         "flex flex-row items-center gap-1 text-body-3",
         error ? "text-text-critical" : "text-text-tertiary",
@@ -1630,59 +1610,125 @@ Modal.FooterDescription = React.forwardRef(
         children
       ]
     }
-  )
-);
-Modal.Actions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("ml-auto flex flex-row items-center gap-2", className), ...props }));
-Modal.Action = React.forwardRef(
-  ({ color = "primary", size, ...props }, ref) => {
-    const { size: modalSize } = React.useContext(ModalContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        ...props,
-        ref,
-        color,
-        variant: "solid",
-        size: size ?? (modalSize === "fullsize" ? "large" : "medium")
-      }
-    ) });
-  }
-);
-Modal.Title = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
+  );
+}
+function ModalActions({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      ref,
+      "data-slot": "modal-actions",
+      className: utils.cn("ml-auto flex flex-row items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ModalAction({ color = "primary", size, ...props }) {
+  const { size: modalSize } = React.useContext(ModalContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Close,
+    {
+      render: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          ...props,
+          color,
+          variant: "solid",
+          size: size ?? (modalSize === "fullsize" ? "large" : "medium")
+        }
+      )
+    }
+  );
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Title,
+    {
+      "data-slot": "modal-title",
       className: utils.cn(
         "text-body-1 font-semibold leading-none tracking-tight text-text-primary",
         className
       ),
       ...props
     }
-  )
+  );
+}
+function ModalDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Description,
+    {
+      "data-slot": "modal-description",
+      className: utils.cn("text-body-2 text-text-tertiary", className),
+      ...props
+    }
+  );
+}
+ModalRoot.displayName = "Modal";
+ModalTrigger.displayName = "Modal.Trigger";
+ModalPortal.displayName = "Modal.Portal";
+ModalClose.displayName = "Modal.Close";
+ModalOverlay.displayName = "Modal.Overlay";
+ModalContent.displayName = "Modal.Content";
+ModalHeader.displayName = "Modal.Header";
+ModalBody.displayName = "Modal.Body";
+ModalFooter.displayName = "Modal.Footer";
+ModalFooterDescription.displayName = "Modal.FooterDescription";
+ModalActions.displayName = "Modal.Actions";
+ModalAction.displayName = "Modal.Action";
+ModalTitle.displayName = "Modal.Title";
+ModalDescription.displayName = "Modal.Description";
+var Modal = Object.assign(ModalRoot, {
+  Trigger: ModalTrigger,
+  Portal: ModalPortal,
+  Close: ModalClose,
+  Overlay: ModalOverlay,
+  Content: ModalContent,
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter,
+  FooterDescription: ModalFooterDescription,
+  Actions: ModalActions,
+  Action: ModalAction,
+  Title: ModalTitle,
+  Description: ModalDescription
+});
+
+// src/hooks/useOverlayDismissGuard.ts
+var isBaseUiPopupOpen = () => Boolean(
+  document.querySelector('[data-base-ui-portal] [data-slot="combobox-content"][data-open]')
 );
-Modal.Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Description,
-  {
-    ref,
-    className: utils.cn("text-body-2 text-text-tertiary", className),
-    ...props
+var isTargetInsideBaseUiPopup = (target) => target instanceof Element && Boolean(target.closest("[data-base-ui-portal]"));
+var shouldPreventDismissForSelect = (target) => {
+  const isSelectOpen = Boolean(
+    document.querySelector('[data-radix-select-content][data-state="open"]')
+  );
+  if (isSelectOpen) {
+    return true;
   }
-));
-Modal.displayName = "Modal";
-Modal.Trigger.displayName = "Modal.Trigger";
-Modal.Portal.displayName = "Modal.Portal";
-Modal.Close.displayName = "Modal.Close";
-Modal.Overlay.displayName = "Modal.Overlay";
-Modal.Content.displayName = "Modal.Content";
-Modal.Header.displayName = "Modal.Header";
-Modal.Body.displayName = "Modal.Body";
-Modal.Footer.displayName = "Modal.Footer";
-Modal.FooterDescription.displayName = "Modal.FooterDescription";
-Modal.Actions.displayName = "Modal.Actions";
-Modal.Action.displayName = "Modal.Action";
-Modal.Title.displayName = "Modal.Title";
-Modal.Description.displayName = "Modal.Description";
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  return Boolean(
+    target.closest("[data-radix-select-content]") || target.closest("[data-radix-select-viewport]")
+  );
+};
+function useOverlayDismissGuard({
+  onInteractOutside,
+  onEscapeKeyDown
+}) {
+  const handleInteractOutside = (event) => {
+    if (shouldPreventDismissForSelect(event.target) || isTargetInsideBaseUiPopup(event.target)) {
+      event.preventDefault();
+    }
+    onInteractOutside?.(event);
+  };
+  const handleEscapeKeyDown = (event) => {
+    if (isBaseUiPopupOpen()) {
+      event.preventDefault();
+    }
+    onEscapeKeyDown?.(event);
+  };
+  return { onEscapeKeyDown: handleEscapeKeyDown, onInteractOutside: handleInteractOutside };
+}
 
 // src/sheet/sheetResize.ts
 var SHEET_EDGE_GAP = "[--sheet-edge-gap:40px]";
@@ -1809,18 +1855,18 @@ var SHEET_RESIZE_SIDE_CLASSES = {
   bottom: "inset-x-0 bottom-0 max-h-[calc(100vh-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
 };
 var SheetContext = React.createContext({ side: "right" });
-var SheetRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
+var SheetRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Root, { ...props });
 var Sheet = SheetRoot;
 Sheet.Trigger = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props })
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Trigger, { ref, ...props })
 );
-Sheet.Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { ...props });
+Sheet.Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Portal, { ...props });
 Sheet.Close = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { ref, ...props })
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Close, { ref, ...props })
 );
 Sheet.Overlay = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
+    DialogPrimitive2__namespace.Overlay,
     {
       ref,
       className: utils.cn(
@@ -1847,7 +1893,7 @@ Sheet.Content = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: { side }, children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet.Portal, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Sheet.Overlay, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
-        DialogPrimitive__namespace.Content,
+        DialogPrimitive2__namespace.Content,
         {
           ref,
           className: utils.cn(
@@ -1867,7 +1913,7 @@ Sheet.Content = React.forwardRef(
 Sheet.Header = React.forwardRef(
   ({ className, line = true, rightSlot, children, ...props }, ref) => {
     const rightElement = rightSlot === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      DialogPrimitive__namespace.Close,
+      DialogPrimitive2__namespace.Close,
       {
         className: utils.cn(
           "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
@@ -1953,7 +1999,7 @@ Sheet.FooterDescription = React.forwardRef(
 Sheet.Actions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("ml-auto flex flex-row items-center gap-2", className), ...props }));
 Sheet.Title = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
+    DialogPrimitive2__namespace.Title,
     {
       ref,
       className: utils.cn(
@@ -1965,7 +2011,7 @@ Sheet.Title = React.forwardRef(
   )
 );
 Sheet.Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Description,
+  DialogPrimitive2__namespace.Description,
   {
     ref,
     className: utils.cn("text-body-2 text-text-tertiary", className),
@@ -1985,77 +2031,111 @@ Sheet.FooterDescription.displayName = "Sheet.FooterDescription";
 Sheet.Actions.displayName = "Sheet.Actions";
 Sheet.Title.displayName = "Sheet.Title";
 Sheet.Description.displayName = "Sheet.Description";
+var MESSAGE_BOX_TRANSITION = "transition-[transform,scale,opacity] duration-200 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
 var MessageBoxContext = React.createContext({ variant: "default" });
-var MessageBoxRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
-var MessageBox = MessageBoxRoot;
-MessageBox.Trigger = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props }));
-MessageBox.Content = React.forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
+function MessageBoxRoot(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { ...props });
+}
+function MessageBoxTrigger(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "message-box-trigger", ...props });
+}
+function MessageBoxContent({
+  className,
+  children,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog.Backdrop,
+      {
+        "data-slot": "message-box-overlay",
+        className: utils.cn("fixed inset-0 z-50 bg-component-dim", MESSAGE_BOX_TRANSITION)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog.Popup,
+      {
+        "data-slot": "message-box-content",
+        className: utils.cn(
+          "fixed left-1/2 top-1/2 z-50 flex w-[400px] -translate-x-1/2 -translate-y-1/2 flex-col items-end gap-4 rounded-medium border border-border-primary bg-elevation-elevation-0 p-4 shadow-strong",
+          MESSAGE_BOX_TRANSITION,
+          "data-[starting-style]:scale-95 data-[ending-style]:scale-95",
+          className
+        ),
+        ...props,
+        children
+      }
+    )
+  ] }) });
+}
+function MessageBoxTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Title,
     {
-      className: utils.cn(
-        "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-      )
+      "data-slot": "message-box-title",
+      className: utils.cn("w-full text-body-1 font-semibold text-text-primary", className),
+      ...props
     }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Content,
+  );
+}
+function MessageBoxDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Description,
     {
-      ref,
-      className: utils.cn(
-        "fixed left-[50%] top-[50%] z-50 flex w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col items-end gap-4 rounded-medium border border-border-primary bg-elevation-elevation-0 p-4 shadow-strong duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-        className
-      ),
-      ...props,
-      children
+      "data-slot": "message-box-description",
+      className: utils.cn("w-full text-body-2 text-text-secondary", className),
+      ...props
     }
-  )
-] }) }));
-MessageBox.Title = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Title,
-  {
-    ref,
-    className: utils.cn("w-full text-body-1 font-semibold text-text-primary", className),
-    ...props
-  }
-));
-MessageBox.Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Description,
-  {
-    ref,
-    className: utils.cn("w-full text-body-2 text-text-secondary", className),
-    ...props
-  }
-));
-MessageBox.Actions = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("flex flex-row gap-2", className), ...props })
-);
-MessageBox.Cancel = React.forwardRef(
-  ({ size = "medium", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, variant: "assistive", size, ...props }) })
-);
-MessageBox.Action = React.forwardRef(
-  ({ size = "medium", ...props }, ref) => {
-    const { variant } = React.useContext(MessageBoxContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        ref,
-        color: variant === "critical" ? "critical" : "primary",
-        variant: "solid",
-        size,
-        ...props
-      }
-    ) });
-  }
-);
-MessageBox.displayName = "MessageBox";
-MessageBox.Trigger.displayName = "MessageBox.Trigger";
-MessageBox.Content.displayName = "MessageBox.Content";
-MessageBox.Title.displayName = "MessageBox.Title";
-MessageBox.Description.displayName = "MessageBox.Description";
-MessageBox.Actions.displayName = "MessageBox.Actions";
-MessageBox.Cancel.displayName = "MessageBox.Cancel";
-MessageBox.Action.displayName = "MessageBox.Action";
+  );
+}
+function MessageBoxActions({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "message-box-actions",
+      className: utils.cn("flex flex-row gap-2", className),
+      ...props
+    }
+  );
+}
+function MessageBoxCancel({ size = "medium", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { render: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...props, variant: "assistive", size }) });
+}
+function MessageBoxAction({ size = "medium", ...props }) {
+  const { variant } = React.useContext(MessageBoxContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Close,
+    {
+      render: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          ...props,
+          color: variant === "critical" ? "critical" : "primary",
+          variant: "solid",
+          size
+        }
+      )
+    }
+  );
+}
+MessageBoxRoot.displayName = "MessageBox";
+MessageBoxTrigger.displayName = "MessageBox.Trigger";
+MessageBoxContent.displayName = "MessageBox.Content";
+MessageBoxTitle.displayName = "MessageBox.Title";
+MessageBoxDescription.displayName = "MessageBox.Description";
+MessageBoxActions.displayName = "MessageBox.Actions";
+MessageBoxCancel.displayName = "MessageBox.Cancel";
+MessageBoxAction.displayName = "MessageBox.Action";
+var MessageBox = Object.assign(MessageBoxRoot, {
+  Trigger: MessageBoxTrigger,
+  Content: MessageBoxContent,
+  Title: MessageBoxTitle,
+  Description: MessageBoxDescription,
+  Actions: MessageBoxActions,
+  Cancel: MessageBoxCancel,
+  Action: MessageBoxAction
+});
 var containerVariants4 = utils.cva("inset-0 z-[49] flex items-center justify-center", {
   variants: {
     position: {