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

package/dist/index.mjs

@@ -1,17 +1,19 @@
-import { ConditionalTooltip, overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea } from './chunk-4JSE66SD.mjs';
+import { overlayListVariants, commonInputVariants, textFieldVariants, ScrollArea, ConditionalTooltip } from './chunk-4JSE66SD.mjs';
 export { ColorPalette, ColorPaletteColors, Combobox, ComboboxContent, ComboboxDescription, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSearch, ComboboxTrigger, ComboboxValue, DEFAULT_COLOR, ScrollArea, ScrollBar, Segment, Select, Tabs, Tooltip, colorPaletteColorClasses, getColorPaletteColor, isInPalette } from './chunk-4JSE66SD.mjs';
 import { X, MoreHorizontal, iconSizes, Minus, Check, Person, Loading, Warning, Info, Error as Error$1, ChevronLeft, ChevronRight } from './chunk-4QQPDTTI.mjs';
 import { cva, cn } from '@exem-ui/core/utils';
 import * as React from 'react';
-import { forwardRef, Fragment, cloneElement, useId, createContext, useContext, useState } from 'react';
+import { forwardRef, Fragment, useId, createContext, useContext, useState, cloneElement } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
+import { Button as Button$1 } from '@base-ui/react/button';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { DayPicker } from 'react-day-picker';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Dialog } from '@base-ui/react/dialog';
+import * as DialogPrimitive2 from '@radix-ui/react-dialog';
 import { Resizable } from 're-resizable';
 import { Progress as Progress$1 } from '@base-ui/react/progress';
 import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
@@ -403,185 +405,114 @@ Breadcrumb.Ellipsis.displayName = "Breadcrumb.Ellipsis";
 var colorStyles = {
   primary: {
     solid: {
-      button: "bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled",
-      icon: "text-icon-inverse group-disabled/button:text-icon-inverse",
-      text: "text-text-inverse group-disabled/button:text-text-inverse"
+      root: "bg-solid-primary-default text-text-inverse hover:bg-solid-primary-hovered data-[disabled]:bg-solid-primary-disabled data-[disabled]:text-text-inverse",
+      icon: "text-icon-inverse group-data-[disabled]/button:text-icon-inverse"
     },
     assistive: {
-      button: "bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "bg-elevation-elevation-2 text-text-secondary hover:bg-elevation-elevation-3 data-[disabled]:bg-elevation-elevation-2 data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "border border-border-primary text-text-secondary hover:bg-elevation-elevation-2 data-[disabled]:border-border-primary data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-elevation-2",
-      icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
-      text: "text-text-secondary group-disabled/button:text-text-disabled"
+      root: "text-text-secondary hover:bg-elevation-elevation-2 data-[disabled]:text-text-disabled",
+      icon: "text-icon-secondary group-data-[disabled]/button:text-icon-disabled"
     }
   },
   accent: {
     solid: {
-      button: "bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled",
-      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
-      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+      root: "bg-solid-accent-default text-text-static-light hover:bg-solid-accent-hovered data-[disabled]:bg-solid-accent-disabled data-[disabled]:text-text-inverse-disabled",
+      icon: "text-icon-static-light group-data-[disabled]/button:text-icon-inverse-disabled"
     },
     assistive: {
-      button: "bg-elevation-accent-0 hover:bg-elevation-accent-1 disabled:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "bg-elevation-accent-0 text-text-accent hover:bg-elevation-accent-1 data-[disabled]:bg-elevation-accent-0 data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "border border-border-primary text-text-accent hover:bg-elevation-accent-0 data-[disabled]:border-border-primary data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-accent-0",
-      icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
-      text: "text-text-accent group-disabled/button:text-text-accent-disabled"
+      root: "text-text-accent hover:bg-elevation-accent-0 data-[disabled]:text-text-accent-disabled",
+      icon: "text-text-accent group-data-[disabled]/button:text-text-accent-disabled"
     }
   },
   critical: {
     solid: {
-      button: "bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled",
-      icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
-      text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
+      root: "bg-solid-critical-default text-text-static-light hover:bg-solid-critical-hovered data-[disabled]:bg-solid-critical-disabled data-[disabled]:text-text-inverse-disabled",
+      icon: "text-icon-static-light group-data-[disabled]/button:text-icon-inverse-disabled"
     },
     assistive: {
-      button: "bg-elevation-critical-0 hover:bg-elevation-critical-1 disabled:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "bg-elevation-critical-0 text-text-critical hover:bg-elevation-critical-1 data-[disabled]:bg-elevation-critical-0 data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     },
     outlined: {
-      button: "border border-border-primary disabled:border-border-primary hover:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "border border-border-primary text-text-critical hover:bg-elevation-critical-0 data-[disabled]:border-border-primary data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     },
     invisible: {
-      button: "hover:bg-elevation-critical-0",
-      icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
-      text: "text-text-critical group-disabled/button:text-text-critical-disabled"
+      root: "text-text-critical hover:bg-elevation-critical-0 data-[disabled]:text-text-critical-disabled",
+      icon: "text-text-critical group-data-[disabled]/button:text-text-critical-disabled"
     }
   }
 };
 var buttonVariants = cva(
-  "inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+  "inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
   {
-    compoundVariants: [
-      // Primary 색상 조합
-      { className: colorStyles.primary.solid.button, color: "primary", variant: "solid" },
-      { className: colorStyles.primary.assistive.button, color: "primary", variant: "assistive" },
-      { className: colorStyles.primary.outlined.button, color: "primary", variant: "outlined" },
-      { className: colorStyles.primary.invisible.button, color: "primary", variant: "invisible" },
-      // Accent 색상 조합
-      { className: colorStyles.accent.solid.button, color: "accent", variant: "solid" },
-      { className: colorStyles.accent.assistive.button, color: "accent", variant: "assistive" },
-      { className: colorStyles.accent.outlined.button, color: "accent", variant: "outlined" },
-      { className: colorStyles.accent.invisible.button, color: "accent", variant: "invisible" },
-      // Critical 색상 조합
-      { className: colorStyles.critical.solid.button, color: "critical", variant: "solid" },
-      { className: colorStyles.critical.assistive.button, color: "critical", variant: "assistive" },
-      { className: colorStyles.critical.outlined.button, color: "critical", variant: "outlined" },
-      { className: colorStyles.critical.invisible.button, color: "critical", variant: "invisible" },
-      // background 표면은 outlined/invisible 에서만 추가
-      {
-        className: "bg-elevation-elevation-0",
-        background: "fill",
-        variant: ["outlined", "invisible"]
-      }
-    ],
     defaultVariants: {
-      background: "none",
-      color: "primary",
-      size: "medium",
-      variant: "solid"
+      size: "medium"
     },
     variants: {
-      background: {
-        none: "",
-        fill: ""
-      },
-      color: {
-        accent: "",
-        critical: "",
-        primary: ""
-      },
       size: {
         xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
         small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
         medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
         large: "h-10 gap-1 px-2.5 text-body-1 font-medium",
         xlarge: "h-12 gap-1 px-3 text-title-2 font-medium"
-      },
-      variant: {
-        solid: "",
-        assistive: "",
-        outlined: "",
-        invisible: ""
       }
     }
   }
 );
-var IconSizeMap = {
+var iconSizeMap = {
   xsmall: iconSizes.sm,
   small: iconSizes.sm,
   medium: iconSizes.sm,
   large: iconSizes.md,
   xlarge: iconSizes.lg
 };
-var Button = forwardRef(
-  ({
-    className,
-    variant = "solid",
-    color = "primary",
-    background,
-    size = "medium",
-    icon,
-    children,
-    ...props
-  }, ref) => {
-    const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      icon && cloneElement(icon, {
-        className: cn("shrink-0", colorStyles[color][variant].icon, icon.props.className),
-        size: icon.props.size ?? IconSizeMap[size]
-      }),
-      children != null && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "min-w-0 truncate",
-            size === "xlarge" ? "px-1" : "px-0.5",
-            colorStyles[color][variant].text
-          ),
-          children
-        }
-      )
-    ] });
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: cn(
-          buttonVariants({
-            background,
-            className,
-            color,
-            size,
-            variant
-          }),
-          "group/button"
-        ),
-        ref,
-        ...props,
-        children: content
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+function Button({
+  className,
+  variant = "solid",
+  color = "primary",
+  background,
+  size = "medium",
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button$1,
+    {
+      className: cn(
+        buttonVariants({ size }),
+        colorStyles[color][variant].root,
+        background === "fill" && (variant === "outlined" || variant === "invisible") && "bg-elevation-elevation-0",
+        "group/button",
+        className
+      ),
+      ...props,
+      children: [
+        icon && cloneElement(icon, {
+          className: cn("shrink-0", colorStyles[color][variant].icon, icon.props.className),
+          size: icon.props.size ?? iconSizeMap[size]
+        }),
+        children != null && /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", size === "xlarge" ? "px-1" : "px-0.5"), children })
+      ]
+    }
+  );
+}
 var iconButtonSizeClasses = {
   xsmall: "size-6",
   small: "size-7",
@@ -589,73 +520,85 @@ var iconButtonSizeClasses = {
   large: "size-10",
   xlarge: "size-12"
 };
-var IconButton = forwardRef(
-  ({ className, tooltip, icon, size = "medium", ...props }, ref) => {
-    const buttonProps = {
+function IconButton({
+  className,
+  tooltip,
+  icon,
+  size = "medium",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
+  return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": ariaLabel ?? (ariaLabelledBy === void 0 ? tooltipLabel : void 0),
+      "aria-labelledby": ariaLabelledBy,
       className: cn(iconButtonSizeClasses[size], "px-0", className),
       icon,
       size,
       ...props
-    };
-    return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsx(Button, { ref, ...buttonProps }) });
-  }
-);
-IconButton.displayName = "IconButton";
-var ButtonGroup = forwardRef(
-  ({
-    variant = "contained",
-    iconOnly = false,
-    hasBackground = false,
-    size = "medium",
-    items,
-    className
-  }, ref) => {
-    if (items.length === 0) {
-      return null;
     }
-    const isOutlined = variant === "outlined";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "inline-flex items-center overflow-hidden rounded-medium",
-          hasBackground && "bg-elevation-elevation-0",
-          className
-        ),
-        role: "group",
-        children: items.map((item, index) => {
-          const isFirst = index === 0;
-          const isLast = index === items.length - 1;
-          const roundedClasses = cn("rounded-none", {
-            "rounded-l-medium": isFirst,
-            "rounded-r-medium": isLast
-          });
-          const dividerClasses = !isOutlined && !isLast ? "border-r border-border-primary" : "";
-          const mergeClasses = isOutlined && !isFirst ? "-ml-px" : "";
-          const hoverClasses = isOutlined ? "relative hover:z-10" : "";
-          if (iconOnly) {
-            const iconBaseProps = {
-              className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
-              icon: item.icon,
-              onClick: item.onClick,
-              size
-            };
-            return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, variant: "assistive" }) : /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
-          }
-          const buttonBaseProps = {
-            className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
-            icon: item.icon,
-            onClick: item.onClick,
-            size
-          };
-          return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, variant: "assistive", children: item.label }) : /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
-        })
-      }
-    );
+  ) });
+}
+function ButtonGroup({
+  variant = "contained",
+  iconOnly = false,
+  hasBackground = false,
+  size = "medium",
+  items,
+  className,
+  ...props
+}) {
+  if (items.length === 0) {
+    return null;
   }
-);
-ButtonGroup.displayName = "ButtonGroup";
+  const isOutlined = variant === "outlined";
+  const buttonVariantProps = isOutlined ? { color: "primary", variant: "outlined" } : { variant: "assistive" };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn(
+        "inline-flex items-center overflow-hidden rounded-medium",
+        hasBackground && "bg-elevation-elevation-0",
+        className
+      ),
+      role: "group",
+      children: items.map((item, index) => {
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
+        const roundedClasses = cn("rounded-none", {
+          "rounded-l-medium": isFirst,
+          "rounded-r-medium": isLast
+        });
+        const dividerClasses = !isOutlined && !isLast ? "border-r border-border-primary" : "";
+        const mergeClasses = isOutlined && !isFirst ? "-ml-px" : "";
+        const hoverClasses = isOutlined ? "relative hover:z-10" : "";
+        const buttonBaseProps = {
+          className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
+          onClick: item.onClick,
+          size,
+          ...buttonVariantProps
+        };
+        if (iconOnly) {
+          return /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              ...buttonBaseProps,
+              "aria-label": item.label,
+              icon: item.icon,
+              tooltip: item.tooltip
+            },
+            item.id
+          );
+        }
+        return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, icon: item.icon, children: item.label }) }, item.id);
+      })
+    }
+  );
+}
 var containerVariants = cva("inline-flex items-center", {
   variants: {
     size: {
@@ -1432,113 +1375,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 = createContext({ size: "default" });
-var ModalRoot = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
-var Modal = ModalRoot;
-Modal.Trigger = forwardRef(
-  (props, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...props })
-);
-Modal.Portal = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Portal, { ...props });
-Modal.Close = forwardRef(({ size, ...props }, ref) => {
-  const { size: modalSize } = useContext(ModalContext);
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-    Button,
-    {
-      ...props,
-      ref,
-      variant: "assistive",
-      size: size ?? (modalSize === "fullsize" ? "large" : "medium")
-    }
-  ) });
-});
-Modal.Overlay = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+function ModalRoot(props) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+function ModalTrigger(props) {
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "modal-trigger", ...props });
+}
+function ModalPortal(props) {
+  return /* @__PURE__ */ jsx(Dialog.Portal, { ...props });
+}
+function ModalOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Backdrop,
     {
-      ref,
-      className: 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: cn("fixed inset-0 z-50 bg-component-dim", MODAL_TRANSITION, className),
       ...props
     }
-  )
-);
-Modal.Content = forwardRef(
-  ({ className, children, size = "default", onInteractOutside, onEscapeKeyDown, ...props }, ref) => {
-    const isFullSize = size === "fullsize";
-    const dismissGuard = useOverlayDismissGuard({ onEscapeKeyDown, onInteractOutside });
-    return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxs(Modal.Portal, { children: [
-      /* @__PURE__ */ jsx(Modal.Overlay, {}),
-      /* @__PURE__ */ jsx(
-        DialogPrimitive.Content,
+  );
+}
+function ModalClose({ size, ...props }) {
+  const { size: modalSize } = useContext(ModalContext);
+  return /* @__PURE__ */ jsx(
+    Dialog.Close,
+    {
+      render: /* @__PURE__ */ jsx(
+        Button,
         {
-          ref,
-          className: 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 = forwardRef(
-  ({ className, line = false, rightSlot, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    }
+  );
+}
+function ModalContent({ className, children, size = "default", ...props }) {
+  const isFullSize = size === "fullsize";
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxs(ModalPortal, { children: [
+    /* @__PURE__ */ jsx(ModalOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Dialog.Popup,
+      {
+        "data-slot": "modal-content",
+        className: 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__ */ jsxs(
     "div",
     {
-      ref,
+      "data-slot": "modal-header",
       className: cn(
         "flex shrink-0 flex-row items-center gap-2 pl-4 pr-2 min-h-12",
         line && "border-b border-border-primary",
@@ -1548,8 +1454,9 @@ Modal.Header = forwardRef(
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children }),
         rightSlot === void 0 ? /* @__PURE__ */ jsx(
-          DialogPrimitive.Close,
+          Dialog.Close,
           {
+            "data-slot": "modal-close-icon",
             className: 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"
             ),
@@ -1558,42 +1465,57 @@ Modal.Header = forwardRef(
         ) : rightSlot
       ]
     }
-  )
-);
-Modal.Body = forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  );
+}
+function ModalBody({
+  className,
+  children,
+  scroll = true,
+  horizontalScroll = false,
+  ...props
+}) {
+  const content = /* @__PURE__ */ jsx("div", { className: cn(MODAL_PADDING.body, className), children });
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      "data-slot": "modal-body",
       className: 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__ */ jsx(ScrollArea, { className: "h-full flex flex-col", children: /* @__PURE__ */ jsx("div", { className: cn(MODAL_PADDING.body, className), children }) })
+      children: scroll ? /* @__PURE__ */ jsx(ScrollArea, { className: "h-full flex flex-col", disableHorizontalScroll: !horizontalScroll, children: content }) : content
     }
-  )
-);
-Modal.Footer = forwardRef(
-  ({ className, line = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  );
+}
+function ModalFooter({ className, line = true, ...props }) {
+  const { size } = useContext(ModalContext);
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      "data-slot": "modal-footer",
       className: 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 = forwardRef(
-  ({ className, error = false, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  );
+}
+function ModalFooterDescription({
+  className,
+  error = false,
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
+      "data-slot": "modal-footer-description",
       className: cn(
         "flex flex-row items-center gap-1 text-body-3",
         error ? "text-text-critical" : "text-text-tertiary",
@@ -1605,59 +1527,125 @@ Modal.FooterDescription = forwardRef(
         children
       ]
     }
-  )
-);
-Modal.Actions = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("ml-auto flex flex-row items-center gap-2", className), ...props }));
-Modal.Action = forwardRef(
-  ({ color = "primary", size, ...props }, ref) => {
-    const { size: modalSize } = useContext(ModalContext);
-    return /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        ...props,
-        ref,
-        color,
-        variant: "solid",
-        size: size ?? (modalSize === "fullsize" ? "large" : "medium")
-      }
-    ) });
-  }
-);
-Modal.Title = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
+  );
+}
+function ModalActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      ref,
+      "data-slot": "modal-actions",
+      className: cn("ml-auto flex flex-row items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ModalAction({ color = "primary", size, ...props }) {
+  const { size: modalSize } = useContext(ModalContext);
+  return /* @__PURE__ */ jsx(
+    Dialog.Close,
+    {
+      render: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          color,
+          variant: "solid",
+          size: size ?? (modalSize === "fullsize" ? "large" : "medium")
+        }
+      )
+    }
+  );
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      "data-slot": "modal-title",
       className: cn(
         "text-body-1 font-semibold leading-none tracking-tight text-text-primary",
         className
       ),
       ...props
     }
-  )
+  );
+}
+function ModalDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
+    {
+      "data-slot": "modal-description",
+      className: 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 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: 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]";
@@ -1784,18 +1772,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 = createContext({ side: "right" });
-var SheetRoot = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
+var SheetRoot = (props) => /* @__PURE__ */ jsx(DialogPrimitive2.Root, { ...props });
 var Sheet = SheetRoot;
 Sheet.Trigger = forwardRef(
-  (props, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...props })
+  (props, ref) => /* @__PURE__ */ jsx(DialogPrimitive2.Trigger, { ref, ...props })
 );
-Sheet.Portal = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Portal, { ...props });
+Sheet.Portal = (props) => /* @__PURE__ */ jsx(DialogPrimitive2.Portal, { ...props });
 Sheet.Close = forwardRef(
-  (props, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, ...props })
+  (props, ref) => /* @__PURE__ */ jsx(DialogPrimitive2.Close, { ref, ...props })
 );
 Sheet.Overlay = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+    DialogPrimitive2.Overlay,
     {
       ref,
       className: cn(
@@ -1822,7 +1810,7 @@ Sheet.Content = forwardRef(
     return /* @__PURE__ */ jsx(SheetContext.Provider, { value: { side }, children: /* @__PURE__ */ jsxs(Sheet.Portal, { children: [
       /* @__PURE__ */ jsx(Sheet.Overlay, {}),
       /* @__PURE__ */ jsx(
-        DialogPrimitive.Content,
+        DialogPrimitive2.Content,
         {
           ref,
           className: cn(
@@ -1842,7 +1830,7 @@ Sheet.Content = forwardRef(
 Sheet.Header = forwardRef(
   ({ className, line = true, rightSlot, children, ...props }, ref) => {
     const rightElement = rightSlot === void 0 ? /* @__PURE__ */ jsx(
-      DialogPrimitive.Close,
+      DialogPrimitive2.Close,
       {
         className: 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"
@@ -1928,7 +1916,7 @@ Sheet.FooterDescription = forwardRef(
 Sheet.Actions = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("ml-auto flex flex-row items-center gap-2", className), ...props }));
 Sheet.Title = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
+    DialogPrimitive2.Title,
     {
       ref,
       className: cn(
@@ -1940,7 +1928,7 @@ Sheet.Title = forwardRef(
   )
 );
 Sheet.Description = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
+  DialogPrimitive2.Description,
   {
     ref,
     className: cn("text-body-2 text-text-tertiary", className),
@@ -1960,77 +1948,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 = createContext({ variant: "default" });
-var MessageBoxRoot = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
-var MessageBox = MessageBoxRoot;
-MessageBox.Trigger = forwardRef((props, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...props }));
-MessageBox.Content = forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
-  /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+function MessageBoxRoot(props) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+function MessageBoxTrigger(props) {
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "message-box-trigger", ...props });
+}
+function MessageBoxContent({
+  className,
+  children,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog.Backdrop,
+      {
+        "data-slot": "message-box-overlay",
+        className: cn("fixed inset-0 z-50 bg-component-dim", MESSAGE_BOX_TRANSITION)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog.Popup,
+      {
+        "data-slot": "message-box-content",
+        className: 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__ */ jsx(
+    Dialog.Title,
     {
-      className: 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: cn("w-full text-body-1 font-semibold text-text-primary", className),
+      ...props
     }
-  ),
-  /* @__PURE__ */ jsx(
-    DialogPrimitive.Content,
+  );
+}
+function MessageBoxDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
     {
-      ref,
-      className: 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: cn("w-full text-body-2 text-text-secondary", className),
+      ...props
     }
-  )
-] }) }));
-MessageBox.Title = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: cn("w-full text-body-1 font-semibold text-text-primary", className),
-    ...props
-  }
-));
-MessageBox.Description = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: cn("w-full text-body-2 text-text-secondary", className),
-    ...props
-  }
-));
-MessageBox.Actions = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-row gap-2", className), ...props })
-);
-MessageBox.Cancel = forwardRef(
-  ({ size = "medium", ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, variant: "assistive", size, ...props }) })
-);
-MessageBox.Action = forwardRef(
-  ({ size = "medium", ...props }, ref) => {
-    const { variant } = useContext(MessageBoxContext);
-    return /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      "data-slot": "message-box-actions",
+      className: cn("flex flex-row gap-2", className),
+      ...props
+    }
+  );
+}
+function MessageBoxCancel({ size = "medium", ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(Button, { ...props, variant: "assistive", size }) });
+}
+function MessageBoxAction({ size = "medium", ...props }) {
+  const { variant } = useContext(MessageBoxContext);
+  return /* @__PURE__ */ jsx(
+    Dialog.Close,
+    {
+      render: /* @__PURE__ */ 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 = cva("inset-0 z-[49] flex items-center justify-center", {
   variants: {
     position: {