@exem-ui/react 0.3.4-next.20260612070750 → 0.3.4-next.20260617061749

package/dist/index.d.mts

@@ -567,7 +567,7 @@ declare function ScrollBar({ className, orientation, ...props }: React__default.
  */
 declare function ScrollArea({ className, children, onScroll, scrollRef, hideVerticalScrollbar, hideHorizontalScrollbar, disableHorizontalScroll, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
 
-type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'fullsize';
+type ModalSize = 'default' | 'fullsize';
 type ModalRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 type ModalTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
 type ModalPortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
@@ -575,7 +575,7 @@ type ModalOverlayProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
 type ModalContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     /**
      * 모달 크기
-     * @default 'medium'
+     * @default 'default'
      */
     size?: ModalSize;
 };
@@ -587,10 +587,12 @@ type ModalHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
      */
     line?: boolean;
     /**
-     * 닫기 아이콘 표시 여부
-     * @default true
+     * 헤더 오른쪽 끝 영역에 렌더링할 콘텐츠
+     * - `undefined` (미전달): 기본 닫기(X) 아이콘 렌더링
+     * - `null`: 닫기 버튼 없이 빈 영역 (기존 `showCloseIcon={false}` 대응)
+     * - `ReactNode`: 전달된 콘텐츠로 대체 (닫기 동작이 필요하면 `Modal.Close`를 직접 포함)
      */
-    showCloseIcon?: boolean;
+    rightSlot?: React__default.ReactNode;
 };
 type ModalBodyProps = React__default.HTMLAttributes<HTMLDivElement>;
 type ModalFooterProps = React__default.HTMLAttributes<HTMLDivElement> & {
@@ -617,8 +619,8 @@ type ModalActionProps = Omit<ButtonProps, 'color' | 'variant'> & {
 type ModalTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 type ModalDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
 type ModalComponent = typeof DialogPrimitive.Root & {
-    Trigger: typeof DialogPrimitive.Trigger;
-    Portal: typeof DialogPrimitive.Portal;
+    Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalTriggerProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Trigger>>>;
+    Portal: React__default.FC<ModalPortalProps>;
     Close: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalCloseProps> & React__default.RefAttributes<HTMLButtonElement>>;
     Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalOverlayProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Overlay>>>;
     Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalContentProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Content>>>;
@@ -631,30 +633,6 @@ type ModalComponent = typeof DialogPrimitive.Root & {
     Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalTitleProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Title>>>;
     Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalDescriptionProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Description>>>;
 };
-/**
- * 사용자 인터랙션이 필요한 오버레이 다이얼로그 컴포넌트입니다.
- * Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.
- *
- * @example
- * ```tsx
- * <Modal>
- *   <Modal.Trigger>열기</Modal.Trigger>
- *   <Modal.Content size="medium">
- *     <Modal.Header>
- *       <Modal.Title>제목</Modal.Title>
- *     </Modal.Header>
- *     <Modal.Body>내용</Modal.Body>
- *     <Modal.Footer>
- *       <Modal.Actions>
- *         <Modal.Close>닫기</Modal.Close>
- *       </Modal.Actions>
- *     </Modal.Footer>
- *   </Modal.Content>
- * </Modal>
- * ```
- *
- * @see {@link ModalContentProps} Content props 상세
- */
 declare const Modal: ModalComponent;
 
 type SheetSide = 'top' | 'right' | 'bottom' | 'left';
@@ -669,7 +647,7 @@ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
      */
     side?: SheetSide;
 };
-type SheetCloseProps = ButtonProps;
+type SheetCloseProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
 type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
     /**
      * 하단 구분선 표시 여부
@@ -702,9 +680,9 @@ type SheetActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
 type SheetTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 type SheetDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
 type SheetComponent = typeof DialogPrimitive.Root & {
-    Trigger: typeof DialogPrimitive.Trigger;
-    Portal: typeof DialogPrimitive.Portal;
-    Close: typeof DialogPrimitive.Close;
+    Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTriggerProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Trigger>>>;
+    Portal: React__default.FC<SheetPortalProps>;
+    Close: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetCloseProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Close>>>;
     Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetOverlayProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Overlay>>>;
     Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetContentProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Content>>>;
     Header: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetHeaderProps> & React__default.RefAttributes<HTMLDivElement>>;
@@ -715,31 +693,6 @@ type SheetComponent = typeof DialogPrimitive.Root & {
     Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTitleProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Title>>>;
     Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetDescriptionProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Description>>>;
 };
-/**
- * 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
- * Radix UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
- *
- * @example
- * ```tsx
- * <Sheet>
- *   <Sheet.Trigger>열기</Sheet.Trigger>
- *   <Sheet.Content side="right">
- *     <Sheet.Header>
- *       <Sheet.Title>제목</Sheet.Title>
- *     </Sheet.Header>
- *     <Sheet.Body>내용</Sheet.Body>
- *     <Sheet.Footer>
- *       <Sheet.Actions>
- *         <Sheet.Close>닫기</Sheet.Close>
- *         <Button>확인</Button>
- *       </Sheet.Actions>
- *     </Sheet.Footer>
- *   </Sheet.Content>
- * </Sheet>
- * ```
- *
- * @see {@link SheetContentProps} Content props 상세
- */
 declare const Sheet: SheetComponent;
 
 type MessageBoxVariant = 'default' | 'critical';
@@ -758,7 +711,7 @@ type MessageBoxActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
 type MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant'>;
 type MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant'>;
 type MessageBoxComponent = React__default.FC<MessageBoxRootProps> & {
-    Trigger: typeof DialogPrimitive.Trigger;
+    Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxTriggerProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Trigger>>>;
     Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxContentProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Content>>>;
     Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxTitleProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Title>>>;
     Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxDescriptionProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Description>>>;

package/dist/index.d.ts

@@ -567,7 +567,7 @@ declare function ScrollBar({ className, orientation, ...props }: React__default.
  */
 declare function ScrollArea({ className, children, onScroll, scrollRef, hideVerticalScrollbar, hideHorizontalScrollbar, disableHorizontalScroll, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
 
-type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'fullsize';
+type ModalSize = 'default' | 'fullsize';
 type ModalRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 type ModalTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
 type ModalPortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
@@ -575,7 +575,7 @@ type ModalOverlayProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
 type ModalContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     /**
      * 모달 크기
-     * @default 'medium'
+     * @default 'default'
      */
     size?: ModalSize;
 };
@@ -587,10 +587,12 @@ type ModalHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
      */
     line?: boolean;
     /**
-     * 닫기 아이콘 표시 여부
-     * @default true
+     * 헤더 오른쪽 끝 영역에 렌더링할 콘텐츠
+     * - `undefined` (미전달): 기본 닫기(X) 아이콘 렌더링
+     * - `null`: 닫기 버튼 없이 빈 영역 (기존 `showCloseIcon={false}` 대응)
+     * - `ReactNode`: 전달된 콘텐츠로 대체 (닫기 동작이 필요하면 `Modal.Close`를 직접 포함)
      */
-    showCloseIcon?: boolean;
+    rightSlot?: React__default.ReactNode;
 };
 type ModalBodyProps = React__default.HTMLAttributes<HTMLDivElement>;
 type ModalFooterProps = React__default.HTMLAttributes<HTMLDivElement> & {
@@ -617,8 +619,8 @@ type ModalActionProps = Omit<ButtonProps, 'color' | 'variant'> & {
 type ModalTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 type ModalDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
 type ModalComponent = typeof DialogPrimitive.Root & {
-    Trigger: typeof DialogPrimitive.Trigger;
-    Portal: typeof DialogPrimitive.Portal;
+    Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalTriggerProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Trigger>>>;
+    Portal: React__default.FC<ModalPortalProps>;
     Close: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalCloseProps> & React__default.RefAttributes<HTMLButtonElement>>;
     Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalOverlayProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Overlay>>>;
     Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalContentProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Content>>>;
@@ -631,30 +633,6 @@ type ModalComponent = typeof DialogPrimitive.Root & {
     Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalTitleProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Title>>>;
     Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalDescriptionProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Description>>>;
 };
-/**
- * 사용자 인터랙션이 필요한 오버레이 다이얼로그 컴포넌트입니다.
- * Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.
- *
- * @example
- * ```tsx
- * <Modal>
- *   <Modal.Trigger>열기</Modal.Trigger>
- *   <Modal.Content size="medium">
- *     <Modal.Header>
- *       <Modal.Title>제목</Modal.Title>
- *     </Modal.Header>
- *     <Modal.Body>내용</Modal.Body>
- *     <Modal.Footer>
- *       <Modal.Actions>
- *         <Modal.Close>닫기</Modal.Close>
- *       </Modal.Actions>
- *     </Modal.Footer>
- *   </Modal.Content>
- * </Modal>
- * ```
- *
- * @see {@link ModalContentProps} Content props 상세
- */
 declare const Modal: ModalComponent;
 
 type SheetSide = 'top' | 'right' | 'bottom' | 'left';
@@ -669,7 +647,7 @@ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
      */
     side?: SheetSide;
 };
-type SheetCloseProps = ButtonProps;
+type SheetCloseProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
 type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
     /**
      * 하단 구분선 표시 여부
@@ -702,9 +680,9 @@ type SheetActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
 type SheetTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 type SheetDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
 type SheetComponent = typeof DialogPrimitive.Root & {
-    Trigger: typeof DialogPrimitive.Trigger;
-    Portal: typeof DialogPrimitive.Portal;
-    Close: typeof DialogPrimitive.Close;
+    Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTriggerProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Trigger>>>;
+    Portal: React__default.FC<SheetPortalProps>;
+    Close: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetCloseProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Close>>>;
     Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetOverlayProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Overlay>>>;
     Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetContentProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Content>>>;
     Header: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetHeaderProps> & React__default.RefAttributes<HTMLDivElement>>;
@@ -715,31 +693,6 @@ type SheetComponent = typeof DialogPrimitive.Root & {
     Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTitleProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Title>>>;
     Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetDescriptionProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Description>>>;
 };
-/**
- * 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
- * Radix UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
- *
- * @example
- * ```tsx
- * <Sheet>
- *   <Sheet.Trigger>열기</Sheet.Trigger>
- *   <Sheet.Content side="right">
- *     <Sheet.Header>
- *       <Sheet.Title>제목</Sheet.Title>
- *     </Sheet.Header>
- *     <Sheet.Body>내용</Sheet.Body>
- *     <Sheet.Footer>
- *       <Sheet.Actions>
- *         <Sheet.Close>닫기</Sheet.Close>
- *         <Button>확인</Button>
- *       </Sheet.Actions>
- *     </Sheet.Footer>
- *   </Sheet.Content>
- * </Sheet>
- * ```
- *
- * @see {@link SheetContentProps} Content props 상세
- */
 declare const Sheet: SheetComponent;
 
 type MessageBoxVariant = 'default' | 'critical';
@@ -758,7 +711,7 @@ type MessageBoxActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
 type MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant'>;
 type MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant'>;
 type MessageBoxComponent = React__default.FC<MessageBoxRootProps> & {
-    Trigger: typeof DialogPrimitive.Trigger;
+    Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxTriggerProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Trigger>>>;
     Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxContentProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Content>>>;
     Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxTitleProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Title>>>;
     Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxDescriptionProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Description>>>;

package/dist/index.js

@@ -1682,10 +1682,13 @@ var MODAL_PADDING = {
   body: "px-4 pb-4",
   footer: "px-4 py-3"
 };
-var ModalContext = React.createContext({ size: "medium" });
-var Modal = DialogPrimitive__namespace.Root;
-Modal.Trigger = DialogPrimitive__namespace.Trigger;
-Modal.Portal = DialogPrimitive__namespace.Portal;
+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(
@@ -1713,14 +1716,8 @@ Modal.Overlay = React.forwardRef(
   )
 );
 Modal.Content = React.forwardRef(
-  ({ className, children, size = "medium", onInteractOutside, onFocusOutside, ...props }, ref) => {
+  ({ className, children, size = "default", onInteractOutside, onFocusOutside, ...props }, ref) => {
     const isFullSize = size === "fullsize";
-    const sizeWidthMap = {
-      small: "max-w-[640px]",
-      medium: "max-w-[800px]",
-      large: "max-w-[960px]",
-      xlarge: "max-w-[1120px]"
-    };
     const shouldPreventDismissForSelect = (target) => {
       const isSelectOpen = Boolean(
         document.querySelector('[data-radix-select-content][data-state="open"]')
@@ -1753,10 +1750,7 @@ Modal.Content = React.forwardRef(
             // fullsize일 때
             isFullSize ? "inset-0 m-10" : (
               // 일반 모달일 때
-              utils.cn(
-                "left-[50%] top-[50%] w-full max-h-[90vh] 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%]",
-                sizeWidthMap[size]
-              )
+              "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
           ),
@@ -1769,34 +1763,30 @@ Modal.Content = React.forwardRef(
   }
 );
 Modal.Header = React.forwardRef(
-  ({ className, line = false, showCloseIcon = true, children, ...props }, ref) => {
-    const { size } = React.useContext(ModalContext);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "flex shrink-0 flex-row items-center gap-2 pl-4 pr-3",
-          line && "border-b border-border-primary",
-          size === "fullsize" ? "h-16" : "h-14",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children }),
-          showCloseIcon && /* @__PURE__ */ jsxRuntime.jsx(
-            DialogPrimitive__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"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(chunkTAZFRRWT_js.X, { type: "regular", size: 20 })
-            }
-          )
-        ]
-      }
-    );
-  }
+  ({ className, line = false, rightSlot, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      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",
+        className
+      ),
+      ...props,
+      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,
+          {
+            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"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkTAZFRRWT_js.X, { type: "regular", size: 20 })
+          }
+        ) : rightSlot
+      ]
+    }
+  )
 );
 Modal.Body = React.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1813,62 +1803,39 @@ Modal.Body = React.forwardRef(
   )
 );
 Modal.Footer = React.forwardRef(
-  ({ className, line = true, ...props }, ref) => {
-    const { size } = React.useContext(ModalContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "flex flex-row items-center justify-between",
-          line && "border-t border-border-primary",
-          size === "fullsize" ? "gap-3" : "h-14 gap-3",
-          MODAL_PADDING.footer,
-          className
-        ),
-        ...props
-      }
-    );
-  }
+  ({ className, line = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils.cn(
+        "flex flex-row items-center justify-between min-h-14 gap-3",
+        line && "border-t border-border-primary",
+        MODAL_PADDING.footer,
+        className
+      ),
+      ...props
+    }
+  )
 );
 Modal.FooterDescription = React.forwardRef(
-  ({ className, error = false, icon, children, ...props }, ref) => {
-    const { size } = React.useContext(ModalContext);
-    const isLargeFooter = size === "fullsize";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "flex flex-row items-center gap-1",
-          isLargeFooter ? "text-body-2" : "text-body-3",
-          error ? "text-text-critical" : "text-text-tertiary",
-          className
-        ),
-        ...props,
-        children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-4 items-center justify-center [&>svg]:size-4", children: icon }),
-          children
-        ]
-      }
-    );
-  }
-);
-Modal.Actions = React.forwardRef(({ className, ...props }, ref) => {
-  const { size } = React.useContext(ModalContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  ({ className, error = false, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
       className: utils.cn(
-        "ml-auto flex flex-row items-center",
-        size === "fullsize" ? "gap-3" : "gap-2",
+        "flex flex-row items-center gap-1 text-body-3",
+        error ? "text-text-critical" : "text-text-tertiary",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-4 items-center justify-center [&>svg]:size-4", children: icon }),
+        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);
@@ -1927,10 +1894,15 @@ var SHEET_SIDE_CLASSES = {
   bottom: "inset-x-0 bottom-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
 };
 var SheetContext = React.createContext({ side: "right" });
-var Sheet = DialogPrimitive__namespace.Root;
-Sheet.Trigger = DialogPrimitive__namespace.Trigger;
-Sheet.Portal = DialogPrimitive__namespace.Portal;
-Sheet.Close = DialogPrimitive__namespace.Close;
+var SheetRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
+var Sheet = SheetRoot;
+Sheet.Trigger = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props })
+);
+Sheet.Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { ...props });
+Sheet.Close = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { ref, ...props })
+);
 Sheet.Overlay = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -2113,7 +2085,7 @@ Sheet.Description.displayName = "Sheet.Description";
 var MessageBoxContext = React.createContext({ variant: "default" });
 var MessageBoxRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
 var MessageBox = MessageBoxRoot;
-MessageBox.Trigger = DialogPrimitive__namespace.Trigger;
+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,