@nurihaus/web-design-system 3.5.0 → 3.7.0

package/dist/ai/components.md

@@ -164,7 +164,7 @@ import { Callout } from '@nurihaus/web-design-system/callout';   // 이 컴포
 import { Callout } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
 ```
 
-**언제 쓴다.** 버튼 같은 대상에 붙어 늘 떠 있는 짧은 라벨 말풍선에 쓴다(예: 로그인 버튼의 "최근 사용"). 꼬리 자리는 `tail`(`bottom-start` 기본·`bottom-end`·`top-start`·`top-end`)로 고른다. 버튼에 붙일 때는 Callout 을 직접 놓지 말고 CTAButton 의 `callout` prop 을 쓴다 — 모서리 자리를 DS 가 잡는다. 그 밖의 대상에 놓을 때는 자리(`position: absolute`·위치)를 쓰는 쪽이 `className` 으로 정한다. `.base-callout` 이 꼬리 기준으로 `position: relative` 를 가지므로 한 단계 구체적인 선택자(`.slot > .x`)로 덮는다.
+**언제 쓴다.** 버튼 같은 대상에 붙어 늘 떠 있는 짧은 라벨 말풍선에 쓴다(예: 로그인 버튼의 "최근 사용"). 꼬리 자리는 `tail`(`bottom-start` 기본·`bottom-end`·`top-start`·`top-end`)로 고른다. 나타날 때 꼬리에서 튀어나온 뒤 세 번 둥실 움직이고 멈춘다(동작 줄이기 설정이면 움직이지 않는다). 모션은 쓰는 쪽이 고르지 않는다. 버튼에 붙일 때는 Callout 을 직접 놓지 말고 CTAButton 의 `callout` prop 을 쓴다 — 모서리 자리를 DS 가 잡는다. 그 밖의 대상에 놓을 때는 자리(`position: absolute`·위치)를 쓰는 쪽이 `className` 으로 정한다. 위치는 `top`·`right` 같은 값으로 잡는다 — `transform` 은 등장 모션이 쓰므로 덮어써진다. `.base-callout` 이 꼬리 기준으로 `position: relative` 를 가지므로 한 단계 구체적인 선택자(`.slot > .x`)로 덮는다.
 
 **쓰지 않는다.** 마우스를 올리거나 포커스했을 때만 설명을 보여 주려면 Tooltip 을 쓴다. 상태값·분류 라벨은 OptionBadge 를 쓴다.
 
@@ -1019,7 +1019,22 @@ import { ModalWithDoubleButton } from '@nurihaus/web-design-system';
 
 **언제 쓴다.** 삭제 확인처럼 제목, 설명, 버튼 두 개로 된 확인 대화상자에 쓴다. `ModalWithDoubleButton.Row`는 버튼을 가로로, `ModalWithDoubleButton.Column`은 세로로 배치하며, `left`와 `right`는 CTAButton props를 그대로 받는다.
 
-**쓰지 않는다.** `open` prop이 없고 렌더되는 동안 항상 보이므로, 표시 여부는 부모가 조건부 렌더링으로 정하고 버튼 `onClick`에서 언마운트한다. `showCloseIcon`의 X 아이콘은 클릭해도 동작이 없으므로 닫기 수단으로 쓰지 않는다. 일반 모달은 Modal 을 쓴다.
+**열고 닫기.** `open`·`onOpenChange`를 넘기면 부모가 열림을 정한다. 열리면 포커스가 창 안으로 들어가고, Esc·바깥 누름·X 아이콘(`showCloseIcon`)·두 버튼이 `onOpenChange(false)`를 부르며, 닫히면 포커스가 연 요소로 돌아온다. 바텀시트 안의 삭제 확인처럼 키보드로 닿아야 하는 곳은 이 방식으로 쓴다.
+
+```tsx
+<ModalWithDoubleButton.Row
+  open
+  onOpenChange={() => {}}
+  showCloseIcon
+  title="항목을 삭제할까요?"
+  left={{ text: '취소' }}
+  right={{ text: '삭제', onClick: () => {} }}
+/>
+```
+
+`open`을 넘기지 않으면 예전처럼 렌더되는 동안 항상 보이고 포커스를 가두지 않는다. 이때는 부모가 조건부 렌더링으로 정하고 버튼 `onClick`에서 언마운트하며, X 아이콘은 동작이 없다.
+
+**쓰지 않는다.** 제목·설명·버튼 두 개를 벗어나는 일반 모달은 Modal 을 쓴다.
 
 ```tsx
 <ModalWithDoubleButton.Row
@@ -1034,6 +1049,8 @@ import { ModalWithDoubleButton } from '@nurihaus/web-design-system';
 
 | prop | 타입 | 필수 | 기본값 |
 | --- | --- | --- | --- |
+| `open` | `boolean` |  |  |
+| `onOpenChange` | `((open: boolean) => void)` |  |  |
 | `title` | `string` |  |  |
 | `subTitle` | `ReactNode` |  |  |
 | `titleIcon` | `ReactNode` |  |  |
@@ -1050,6 +1067,8 @@ import { ModalWithDoubleButton } from '@nurihaus/web-design-system';
 
 | prop | 타입 | 필수 | 기본값 |
 | --- | --- | --- | --- |
+| `open` | `boolean` |  |  |
+| `onOpenChange` | `((open: boolean) => void)` |  |  |
 | `title` | `string` |  |  |
 | `subTitle` | `ReactNode` |  |  |
 | `titleIcon` | `ReactNode` |  |  |

package/dist/components/modal/modal-type.d.ts

@@ -10,6 +10,9 @@ export interface ModalRootProps {
 }
 export interface ModalContainerProps extends AsChildProps, StyleProps {
     forceMount?: true;
+    /** 열릴 때·닫힐 때 포커스를 옮기기 직전. Radix `Dialog.Content` 에 그대로 넘긴다 */
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
 }
 export interface ModalTriggerProps extends AsChildProps {
     className?: string;
@@ -27,6 +30,14 @@ export interface ModalCloseProps extends AsChildProps {
     className?: string;
 }
 export interface ModalWithDoubleButtonProps {
+    /**
+     * 넘기면 열림을 부모가 정한다. 열리면 포커스가 창 안으로 들어가고 닫히면 연 요소로 돌아오며,
+     * Esc·바깥 누름·X 아이콘·두 버튼이 `onOpenChange(false)` 를 부른다.
+     * 안 넘기면 예전처럼 렌더되는 동안 항상 보인다 (포커스를 가두지 않는다).
+     * `onOpenChange` 를 함께 넘겨야 닫힌다.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     title?: string;
     subTitle?: string | ReactNode;
     titleIcon?: ReactNode;

package/dist/components/skeleton/skeleton.stories.d.ts

@@ -38,10 +38,9 @@ declare const meta: {
         animated: true;
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
-        slot?: string | undefined | undefined;
+        className?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        key?: import("react").Key | null | undefined;
+        children?: import("react").ReactNode;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -49,7 +48,6 @@ declare const meta: {
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
-        className?: string | undefined | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
@@ -59,8 +57,10 @@ declare const meta: {
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -143,7 +143,6 @@ declare const meta: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        children?: import("react").ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;
@@ -305,6 +304,7 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+        key?: import("react").Key | null | undefined;
         height?: number | string | undefined;
         width?: number | string | undefined;
         shape?: (typeof shapes)[number] | undefined;

package/dist/components/toast/toast.stories.d.ts

@@ -17,11 +17,8 @@ declare const meta: {
         variant: "default";
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
-        slot?: string | undefined | undefined;
+        className?: string | undefined;
         style?: import("react").CSSProperties | undefined;
-        title: import("react").ReactNode;
-        track?: string | undefined;
-        key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -29,7 +26,6 @@ declare const meta: {
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
-        className?: string | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
@@ -39,8 +35,10 @@ declare const meta: {
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        title: import("react").ReactNode;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -284,12 +282,14 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
+        track?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        value?: string | number | readonly string[] | undefined;
         variant?: (typeof variants)[number] | undefined;
-        defaultOpen?: boolean | undefined;
+        trackProps?: Record<string, string | number | boolean> | undefined;
         open?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
         onOpenChange?: ((open: boolean) => void) | undefined;
-        trackProps?: Record<string, string | number | boolean> | undefined;
-        value?: string | number | readonly string[] | undefined;
         onResume?: (() => void) | undefined;
         duration?: number | undefined;
         description?: import("react").ReactNode;

package/dist/components.css

@@ -848,9 +848,33 @@
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
 
-  /* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+  /* 나타날 때 꼬리에서 튀어나온 뒤 세 번 둥실 움직이고 멈춘다 (ADR 0007). 계속 움직이면 거슬린다.
+     둥실 지연 = 팝 지연 + 팝 시간. 팝 쪽을 바꾸면 둥실 지연도 같이 바꾼다 */
+  --callout-origin: var(--spacing-16) 100%;
+  --callout-enter: translateY(var(--spacing-4));
+
+  transform-origin: var(--callout-origin);
+  animation:
+    callout-pop var(--motion-slow) var(--motion-spring) var(--motion-fast) both,
+    callout-float calc(var(--motion-base) * 8) var(--motion-ease)
+      calc(var(--motion-fast) + var(--motion-slow)) 3;
 }
 
+.base-callout.tail-bottom-end {
+    --callout-origin: calc(100% - var(--spacing-16)) 100%;
+  }
+
+.base-callout:is(.tail-top-start,.tail-top-end) {
+    --callout-origin: var(--spacing-16) 0;
+    --callout-enter: translateY(calc(var(--spacing-4) * -1));
+  }
+
+.base-callout.tail-top-end {
+    --callout-origin: calc(100% - var(--spacing-16)) 0;
+  }
+
+/* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+
 .base-callout::after {
     content: '';
     position: absolute;
@@ -881,6 +905,35 @@
     right: var(--spacing-12);
   }
 
+@keyframes callout-pop {
+  from {
+    opacity: 0;
+    transform: var(--callout-enter) scale(0.6);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes callout-float {
+  0%,
+  100% {
+    transform: none;
+  }
+
+  50% {
+    transform: translateY(calc(var(--spacing-6) / -2));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .base-callout {
+    animation: none;
+  }
+}
+
 .base-check-box.label {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
@@ -2185,6 +2238,14 @@
   width: 100%;
 }
 
+/* open 을 넘기면 X 가 진짜 닫기 버튼이 된다. 버튼 기본 모양을 지워 예전 아이콘과 같게 보이게 한다 */
+
+button.modal-with-double-button-close-button {
+  padding: 0;
+  background-color: transparent;
+  color: var(--color-grey-scale-600);
+}
+
 .modal-with-double-button-container.size-s {
     width: var(--modal-width-s);
   }

package/dist/index.js

@@ -3183,9 +3183,28 @@ var GHOST_SIDE = {
   row: 'left',
   column: 'right'
 };
+// Radix 는 Dialog.Trigger 로 열었을 때만 포커스를 돌려준다. 부모가 연 경우를 위해 연 요소를 기억한다
+var useReturnFocus = function useReturnFocus() {
+  var opener = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var rememberOpener = function rememberOpener() {
+    opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  };
+  var returnFocus = function returnFocus(event) {
+    var _a;
+    if (!((_a = opener.current) === null || _a === void 0 ? void 0 : _a.isConnected)) return;
+    event.preventDefault();
+    opener.current.focus();
+  };
+  return {
+    rememberOpener: rememberOpener,
+    returnFocus: returnFocus
+  };
+};
 var ModalWithDoubleButtonBody = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _modal_props__WEBPACK_IMPORTED_MODULE_8__/* .modalWithDoubleButtonProps */ .r4),
     layout = _a.layout,
+    open = _a.open,
+    onOpenChange = _a.onOpenChange,
     content = _a.content,
     title = _a.title,
     subTitle = _a.subTitle,
@@ -3195,16 +3214,32 @@ var ModalWithDoubleButtonBody = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1
     right = _a.right,
     className = _a.className;
   var ghostSide = GHOST_SIDE[layout];
+  // open 을 넘기면 Radix 가 열림·포커스·Esc 를 맡는다. 안 넘기면 예전처럼 forceMount 로 늘 보인다.
+  var controlled = open !== undefined;
+  var _b = useReturnFocus(),
+    rememberOpener = _b.rememberOpener,
+    returnFocus = _b.returnFocus;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {
+    open: open,
+    onOpenChange: onOpenChange,
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Container, {
       ref: ref,
       className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'modal-with-double-button-container'),
-      forceMount: true,
-      children: [showCloseIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+      forceMount: controlled ? undefined : true,
+      onOpenAutoFocus: controlled ? rememberOpener : undefined,
+      onCloseAutoFocus: controlled ? returnFocus : undefined,
+      children: [showCloseIcon && (controlled ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Close, {
+        className: 'modal-with-double-button-close-button',
+        "aria-label": "\uB2EB\uAE30",
+        asChild: true,
+        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
+        })
+      }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
         className: 'modal-with-double-button-close-button',
         asChild: true,
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
-      }), titleIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
+      })), titleIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
         className: 'modal-with-double-button-title-icon',
         asChild: true,
         children: titleIcon

package/dist/modal-with-double-button.js

@@ -62,9 +62,28 @@ var GHOST_SIDE = {
   row: 'left',
   column: 'right'
 };
+// Radix 는 Dialog.Trigger 로 열었을 때만 포커스를 돌려준다. 부모가 연 경우를 위해 연 요소를 기억한다
+var useReturnFocus = function useReturnFocus() {
+  var opener = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var rememberOpener = function rememberOpener() {
+    opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  };
+  var returnFocus = function returnFocus(event) {
+    var _a;
+    if (!((_a = opener.current) === null || _a === void 0 ? void 0 : _a.isConnected)) return;
+    event.preventDefault();
+    opener.current.focus();
+  };
+  return {
+    rememberOpener: rememberOpener,
+    returnFocus: returnFocus
+  };
+};
 var ModalWithDoubleButtonBody = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _modal_props__WEBPACK_IMPORTED_MODULE_8__/* .modalWithDoubleButtonProps */ .r4),
     layout = _a.layout,
+    open = _a.open,
+    onOpenChange = _a.onOpenChange,
     content = _a.content,
     title = _a.title,
     subTitle = _a.subTitle,
@@ -74,16 +93,32 @@ var ModalWithDoubleButtonBody = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1
     right = _a.right,
     className = _a.className;
   var ghostSide = GHOST_SIDE[layout];
+  // open 을 넘기면 Radix 가 열림·포커스·Esc 를 맡는다. 안 넘기면 예전처럼 forceMount 로 늘 보인다.
+  var controlled = open !== undefined;
+  var _b = useReturnFocus(),
+    rememberOpener = _b.rememberOpener,
+    returnFocus = _b.returnFocus;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {
+    open: open,
+    onOpenChange: onOpenChange,
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Container, {
       ref: ref,
       className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'modal-with-double-button-container'),
-      forceMount: true,
-      children: [showCloseIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+      forceMount: controlled ? undefined : true,
+      onOpenAutoFocus: controlled ? rememberOpener : undefined,
+      onCloseAutoFocus: controlled ? returnFocus : undefined,
+      children: [showCloseIcon && (controlled ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Close, {
+        className: 'modal-with-double-button-close-button',
+        "aria-label": "\uB2EB\uAE30",
+        asChild: true,
+        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
+        })
+      }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
         className: 'modal-with-double-button-close-button',
         asChild: true,
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
-      }), titleIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
+      })), titleIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
         className: 'modal-with-double-button-title-icon',
         asChild: true,
         children: titleIcon

package/dist/styles.css

@@ -1161,8 +1161,28 @@ p {
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
 
-  /* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+  /* 나타날 때 꼬리에서 튀어나온 뒤 세 번 둥실 움직이고 멈춘다 (ADR 0007). 계속 움직이면 거슬린다.
+     둥실 지연 = 팝 지연 + 팝 시간. 팝 쪽을 바꾸면 둥실 지연도 같이 바꾼다 */
+  --callout-origin: var(--spacing-16) 100%;
+  --callout-enter: translateY(var(--spacing-4));
+
+  transform-origin: var(--callout-origin);
+  animation:
+    callout-pop var(--motion-slow) var(--motion-spring) var(--motion-fast) both,
+    callout-float calc(var(--motion-base) * 8) var(--motion-ease)
+      calc(var(--motion-fast) + var(--motion-slow)) 3;
 }
+.base-callout.tail-bottom-end {
+    --callout-origin: calc(100% - var(--spacing-16)) 100%;
+  }
+.base-callout:is(.tail-top-start,.tail-top-end) {
+    --callout-origin: var(--spacing-16) 0;
+    --callout-enter: translateY(calc(var(--spacing-4) * -1));
+  }
+.base-callout.tail-top-end {
+    --callout-origin: calc(100% - var(--spacing-16)) 0;
+  }
+/* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
 .base-callout::after {
     content: '';
     position: absolute;
@@ -1188,6 +1208,32 @@ p {
 .base-callout:is(.tail-bottom-end,.tail-top-end)::after {
     right: var(--spacing-12);
   }
+@keyframes callout-pop {
+  from {
+    opacity: 0;
+    transform: var(--callout-enter) scale(0.6);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes callout-float {
+  0%,
+  100% {
+    transform: none;
+  }
+
+  50% {
+    transform: translateY(calc(var(--spacing-6) / -2));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .base-callout {
+    animation: none;
+  }
+}
 .base-check-box.label {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
@@ -2234,6 +2280,12 @@ p {
   align-items: center;
   width: 100%;
 }
+/* open 을 넘기면 X 가 진짜 닫기 버튼이 된다. 버튼 기본 모양을 지워 예전 아이콘과 같게 보이게 한다 */
+button.modal-with-double-button-close-button {
+  padding: 0;
+  background-color: transparent;
+  color: var(--color-grey-scale-600);
+}
 .modal-with-double-button-container.size-s {
     width: var(--modal-width-s);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurihaus/web-design-system",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "Nurihaus 디자인 시스템 — 컴포넌트와 디자인 토큰",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",