@nurihaus/web-design-system 3.4.0 → 3.5.0

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

@@ -22,7 +22,6 @@ declare const meta: {
         title: import("react").ReactNode;
         track?: string | undefined;
         key?: import("react").Key | null | undefined;
-        value?: string | number | readonly string[] | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -286,10 +285,11 @@ declare const meta: {
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         variant?: (typeof variants)[number] | undefined;
-        trackProps?: Record<string, string | number | boolean> | undefined;
-        open?: boolean | undefined;
         defaultOpen?: boolean | undefined;
+        open?: 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

@@ -411,32 +411,6 @@
     border: var(--hairline) solid var(--color-grey-scale-300);
   }
 
-/* 버튼 같은 대상의 모서리에 띄우는 말풍선 (ADR 0006). 자리는 쓰는 쪽이 정하고, 꼬리는 아래 왼쪽에서 대상을 가리킨다.
-     흰 둘레로 밑에 깔린 같은 색 면(보라 버튼)과도 갈라 보인다. */
-
-.variant-callout:is(.option,.icon-text,.icon-text-option) {
-    padding: 0 var(--spacing-10);
-    border-color: transparent;
-    border-radius: var(--radius-6);
-    color: var(--color-white);
-    background-color: var(--color-purple-900);
-    box-shadow:
-      0 0 0 var(--spacing-2) var(--color-white),
-      var(--shadow-popover);
-  }
-
-.variant-callout:is(.option,.icon-text,.icon-text-option)::after {
-      content: '';
-      position: absolute;
-      /* 꼬리(--spacing-8 정사각형) 한 변의 절반만큼 아래로 내려 반이 밖으로 나온다 */
-      bottom: calc(var(--spacing-4) * -1);
-      left: var(--spacing-12);
-      width: var(--spacing-8);
-      height: var(--spacing-8);
-      background-color: inherit;
-      transform: rotate(45deg);
-    }
-
 .base-bottom-nav:where(.root) {
     position: fixed;
     left: var(--spacing-16);
@@ -788,6 +762,19 @@
       background-color: var(--color-grey-scale-100);
     }
 
+/* callout prop: 오른쪽 위 모서리에 반쯤 걸친 말풍선 (ADR 0007). 글자 흐름 밖이라 글자가 움직이지 않는다.
+     .base-callout 의 position: relative 를 순서와 상관없이 이기도록 .cta-button > 로 한 단계 높인다 */
+
+.cta-button.with-callout {
+    position: relative;
+  }
+
+.cta-button > .cta-button-callout {
+    position: absolute;
+    top: calc(var(--spacing-12) * -1);
+    right: var(--spacing-14);
+  }
+
 .cta-button.size-xl {
     height: var(--control-height-xl);
     padding: 0 var(--spacing-24);
@@ -840,6 +827,60 @@
     border: none;
   }
 
+/* 대상에 붙어 늘 떠 있는 작은 말풍선 (ADR 0007).
+   연보라(primary 뱃지·secondary 버튼과 같은 색)는 흰 면 위에서 묻혀서 purple-300 테두리로 윤곽을 잡는다. */
+
+.base-callout {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: var(--label-height-xs);
+  padding: 0 var(--spacing-10);
+  border: var(--hairline) solid var(--color-purple-300);
+  border-radius: var(--radius-6);
+
+  background-color: var(--color-purple-50);
+  color: var(--color-purple-900);
+  box-shadow: var(--shadow-popover);
+
+  font-size: var(--font-size-xsm);
+  line-height: var(--line-height-xsm);
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+
+  /* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+}
+
+.base-callout::after {
+    content: '';
+    position: absolute;
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    border: 0 solid var(--color-purple-300);
+    background-color: inherit;
+    transform: rotate(45deg);
+  }
+
+.base-callout:is(.tail-bottom-start,.tail-bottom-end)::after {
+    bottom: calc((var(--spacing-4) + var(--hairline)) * -1);
+    border-right-width: var(--hairline);
+    border-bottom-width: var(--hairline);
+  }
+
+.base-callout:is(.tail-top-start,.tail-top-end)::after {
+    top: calc((var(--spacing-4) + var(--hairline)) * -1);
+    border-left-width: var(--hairline);
+    border-top-width: var(--hairline);
+  }
+
+.base-callout:is(.tail-bottom-start,.tail-top-start)::after {
+    left: var(--spacing-12);
+  }
+
+.base-callout:is(.tail-bottom-end,.tail-top-end)::after {
+    right: var(--spacing-12);
+  }
+
 .base-check-box.label {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);

package/dist/cta-button.js

@@ -14,9 +14,10 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/j
 /* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(4560);
 /* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
 /* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
-/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(6302);
-/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(8933);
-/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(9976);
+/* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(1163);
+/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(6302);
+/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(8933);
+/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(9976);
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -43,30 +44,35 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_7__/* .ctaButtonProps */ .Lr),
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_8__/* .ctaButtonProps */ .Lr),
     className = _a.className,
     text = _a.text,
     leftIcon = _a.leftIcon,
     rightIcon = _a.rightIcon,
+    callout = _a.callout,
     _onClick = _a.onClick,
     track = _a.track,
     trackProps = _a.trackProps,
-    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon", "onClick", "track", "trackProps"]);
+    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon", "callout", "onClick", "track", "trackProps"]);
   var emit = (0,_helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__/* .useTrack */ .n)('CTAButton', {
     track: track,
     trackProps: trackProps
   });
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_button__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, __assign({
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_button__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, __assign({
     ref: ref,
-    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button'),
-    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {}),
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button', callout ? 'with-callout' : undefined),
+    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {}),
     onClick: function onClick(event) {
       emit('click');
       _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
     }
   }, restProps, {
-    children: [leftIcon, text, rightIcon]
+    children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+      className: 'cta-button-callout',
+      text: callout
+    }) : null]
   }));
 });
 CTAButton.displayName = 'CTAButton';
@@ -239,13 +245,15 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ __nuri_require__.C(__webpack_chunk_5__);
 /******/ import * as __webpack_chunk_6__ from "./chunk-6302.js";
 /******/ __nuri_require__.C(__webpack_chunk_6__);
-/******/ import * as __webpack_chunk_7__ from "./chunk-9976.js";
+/******/ import * as __webpack_chunk_7__ from "./chunk-2496.js";
 /******/ __nuri_require__.C(__webpack_chunk_7__);
+/******/ import * as __webpack_chunk_8__ from "./chunk-5226.js";
+/******/ __nuri_require__.C(__webpack_chunk_8__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,9976], () => (__nuri_require__(910)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,2496,5226], () => (__nuri_require__(910)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/icon-text-badge.js

@@ -23,7 +23,7 @@ var __assign = undefined && undefined.__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var variant = ['neutral', 'primary', 'danger', 'outlined', 'callout'];
+var variant = ['neutral', 'primary', 'danger', 'outlined'];
 var sizes = ['xs', 's', 'm', 'l', 'xl'];
 var commonBadgeProps = {
   variant: {

package/dist/icon-text-option-badge.js

@@ -22,7 +22,7 @@ var __assign = undefined && undefined.__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var variant = ['neutral', 'primary', 'danger', 'outlined', 'callout'];
+var variant = ['neutral', 'primary', 'danger', 'outlined'];
 var sizes = ['xs', 's', 'm', 'l', 'xl'];
 var commonBadgeProps = {
   variant: {

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Avatar } from './components/avatar/avatar';
 export { default as CTAButton } from './components/button/cta-button';
+export { default as Callout } from './components/callout/callout';
 export { default as OptionBadge } from './components/badge/option-badge';
 export { default as IconTextBadge } from './components/badge/icon-text-badge';
 export { default as IconTextOptionBadge } from './components/badge/icon-text-option-badge';
@@ -29,6 +30,7 @@ export { default as ChipGroup } from './components/chip-group/chip-group';
 export { LogProvider, useLog } from './components/logging/logging';
 export type { AvatarProps } from './components/avatar/avatar-type';
 export type { CTAButtonProps } from './components/button/button-type';
+export type { CalloutProps } from './components/callout/callout-type';
 export type { OptionBadgeProps, IconTextBadgeProps, IconTextOptionBadgeProps, } from './components/badge/badge-type';
 export type { DataTableProps, RowItem } from './components/table/table-type';
 export type { TextFieldProps } from './components/text-field/text-field-type';

package/dist/index.js

@@ -268,7 +268,7 @@ var __assign = undefined && undefined.__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var variant = ['neutral', 'primary', 'danger', 'outlined', 'callout'];
+var variant = ['neutral', 'primary', 'danger', 'outlined'];
 var sizes = ['xs', 's', 'm', 'l', 'xl'];
 var commonBadgeProps = {
   variant: {
@@ -1014,9 +1014,10 @@ var ctaButtonProps = {
 /* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(4560);
 /* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
 /* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
-/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(6302);
-/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(8933);
-/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(9976);
+/* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(1163);
+/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(6302);
+/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(8933);
+/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(9976);
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -1043,30 +1044,35 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_7__/* .ctaButtonProps */ .Lr),
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_8__/* .ctaButtonProps */ .Lr),
     className = _a.className,
     text = _a.text,
     leftIcon = _a.leftIcon,
     rightIcon = _a.rightIcon,
+    callout = _a.callout,
     _onClick = _a.onClick,
     track = _a.track,
     trackProps = _a.trackProps,
-    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon", "onClick", "track", "trackProps"]);
+    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon", "callout", "onClick", "track", "trackProps"]);
   var emit = (0,_helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__/* .useTrack */ .n)('CTAButton', {
     track: track,
     trackProps: trackProps
   });
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_button__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, __assign({
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_button__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, __assign({
     ref: ref,
-    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button'),
-    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {}),
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button', callout ? 'with-callout' : undefined),
+    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {}),
     onClick: function onClick(event) {
       emit('click');
       _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
     }
   }, restProps, {
-    children: [leftIcon, text, rightIcon]
+    children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+      className: 'cta-button-callout',
+      text: callout
+    }) : null]
   }));
 });
 CTAButton.displayName = 'CTAButton';
@@ -1074,6 +1080,120 @@ CTAButton.displayName = 'CTAButton';
 
 /***/ },
 
+/***/ 1211
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(612);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
+/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(3274);
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+// span 이다 — CTAButton 처럼 button 안에도 들어간다 (button 안에는 div 를 둘 수 없다)
+var BaseCallout = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)('nuri-theme base-callout', className)
+  }, restProps));
+});
+BaseCallout.displayName = 'BaseCallout';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BaseCallout);
+
+/***/ },
+
+/***/ 7810
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   B: () => (/* binding */ calloutProps)
+/* harmony export */ });
+/* unused harmony export tail */
+/** 꼬리가 나오는 자리. `bottom-start` 는 말풍선 아래 왼쪽에서 아래를 가리킨다 */
+var tail = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
+var calloutProps = {
+  tail: {
+    type: 'className',
+    className: 'tail',
+    values: tail,
+    "default": 'bottom-start'
+  }
+};
+
+/***/ },
+
+/***/ 1163
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(612);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(7335);
+/* harmony import */ var _base_callout__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(1211);
+/* harmony import */ var _callout_props__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7810);
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+/** 대상에 붙어 늘 떠 있는 작은 말풍선 (ADR 0007). 자리는 쓰는 쪽이 정한다 — CTAButton 은 `callout` prop 으로 모서리에 끼운다 */
+var Callout = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_2__/* .getMergedProps */ .p)(props, _callout_props__WEBPACK_IMPORTED_MODULE_4__/* .calloutProps */ .B),
+    text = _a.text,
+    restProps = __rest(_a, ["text"]);
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_callout__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A, __assign({
+    ref: ref
+  }, restProps, {
+    children: text
+  }));
+});
+Callout.displayName = 'Callout';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Callout);
+
+/***/ },
+
 /***/ 445
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
@@ -6015,6 +6135,8 @@ var __webpack_exports__ = {};
 var avatar = __nuri_require__(5468);
 // EXTERNAL MODULE: ./components/button/cta-button.tsx
 var cta_button = __nuri_require__(910);
+// EXTERNAL MODULE: ./components/callout/callout.tsx
+var callout = __nuri_require__(1163);
 // EXTERNAL MODULE: ./components/badge/option-badge.tsx
 var option_badge = __nuri_require__(9401);
 // EXTERNAL MODULE: ./components/badge/icon-text-badge.tsx
@@ -6668,6 +6790,7 @@ var colors = __nuri_require__(7232);
 
 
 
+
 
 
 const __webpack_exports__colors = colors/* colors */.T;
@@ -6676,6 +6799,7 @@ export const Avatar = avatar/* default */.A;
 export const BottomNav = bottom_nav/* default */.A;
 export const Breadcrumb = breadcrumb/* default */.A;
 export const CTAButton = cta_button/* default */.A;
+export const Callout = callout/* default */.A;
 export const Checkbox = check_box/* default */.A;
 export const ChipGroup = chip_group/* default */.A;
 export const CollapsibleMenu = collapsible_menu/* default */.A;

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

@@ -315,19 +315,21 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ __nuri_require__.C(__webpack_chunk_5__);
 /******/ import * as __webpack_chunk_6__ from "./chunk-6302.js";
 /******/ __nuri_require__.C(__webpack_chunk_6__);
-/******/ import * as __webpack_chunk_7__ from "./chunk-6713.js";
+/******/ import * as __webpack_chunk_7__ from "./chunk-2496.js";
 /******/ __nuri_require__.C(__webpack_chunk_7__);
-/******/ import * as __webpack_chunk_8__ from "./chunk-9976.js";
+/******/ import * as __webpack_chunk_8__ from "./chunk-6713.js";
 /******/ __nuri_require__.C(__webpack_chunk_8__);
-/******/ import * as __webpack_chunk_9__ from "./chunk-1657.js";
+/******/ import * as __webpack_chunk_9__ from "./chunk-5226.js";
 /******/ __nuri_require__.C(__webpack_chunk_9__);
-/******/ import * as __webpack_chunk_10__ from "./chunk-910.js";
+/******/ import * as __webpack_chunk_10__ from "./chunk-1657.js";
 /******/ __nuri_require__.C(__webpack_chunk_10__);
+/******/ import * as __webpack_chunk_11__ from "./chunk-910.js";
+/******/ __nuri_require__.C(__webpack_chunk_11__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,6713,9976,1657,910], () => (__nuri_require__(8949)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,2496,6713,5226,1657,910], () => (__nuri_require__(8949)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/option-badge.js

@@ -23,7 +23,7 @@ var __assign = undefined && undefined.__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var variant = ['neutral', 'primary', 'danger', 'outlined', 'callout'];
+var variant = ['neutral', 'primary', 'danger', 'outlined'];
 var sizes = ['xs', 's', 'm', 'l', 'xl'];
 var commonBadgeProps = {
   variant: {

package/dist/styles.css

@@ -789,29 +789,6 @@ p {
     background-color: var(--color-white);
     border: var(--hairline) solid var(--color-grey-scale-300);
   }
-/* 버튼 같은 대상의 모서리에 띄우는 말풍선 (ADR 0006). 자리는 쓰는 쪽이 정하고, 꼬리는 아래 왼쪽에서 대상을 가리킨다.
-     흰 둘레로 밑에 깔린 같은 색 면(보라 버튼)과도 갈라 보인다. */
-.variant-callout:is(.option,.icon-text,.icon-text-option) {
-    padding: 0 var(--spacing-10);
-    border-color: transparent;
-    border-radius: var(--radius-6);
-    color: var(--color-white);
-    background-color: var(--color-purple-900);
-    box-shadow:
-      0 0 0 var(--spacing-2) var(--color-white),
-      var(--shadow-popover);
-  }
-.variant-callout:is(.option,.icon-text,.icon-text-option)::after {
-      content: '';
-      position: absolute;
-      /* 꼬리(--spacing-8 정사각형) 한 변의 절반만큼 아래로 내려 반이 밖으로 나온다 */
-      bottom: calc(var(--spacing-4) * -1);
-      left: var(--spacing-12);
-      width: var(--spacing-8);
-      height: var(--spacing-8);
-      background-color: inherit;
-      transform: rotate(45deg);
-    }
 .base-bottom-nav:where(.root) {
     position: fixed;
     left: var(--spacing-16);
@@ -1108,6 +1085,16 @@ p {
 .cta-button.variant-social:not(:disabled):hover {
       background-color: var(--color-grey-scale-100);
     }
+/* callout prop: 오른쪽 위 모서리에 반쯤 걸친 말풍선 (ADR 0007). 글자 흐름 밖이라 글자가 움직이지 않는다.
+     .base-callout 의 position: relative 를 순서와 상관없이 이기도록 .cta-button > 로 한 단계 높인다 */
+.cta-button.with-callout {
+    position: relative;
+  }
+.cta-button > .cta-button-callout {
+    position: absolute;
+    top: calc(var(--spacing-12) * -1);
+    right: var(--spacing-14);
+  }
 .cta-button.size-xl {
     height: var(--control-height-xl);
     padding: 0 var(--spacing-24);
@@ -1154,6 +1141,53 @@ p {
     cursor: not-allowed;
     border: none;
   }
+/* 대상에 붙어 늘 떠 있는 작은 말풍선 (ADR 0007).
+   연보라(primary 뱃지·secondary 버튼과 같은 색)는 흰 면 위에서 묻혀서 purple-300 테두리로 윤곽을 잡는다. */
+.base-callout {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: var(--label-height-xs);
+  padding: 0 var(--spacing-10);
+  border: var(--hairline) solid var(--color-purple-300);
+  border-radius: var(--radius-6);
+
+  background-color: var(--color-purple-50);
+  color: var(--color-purple-900);
+  box-shadow: var(--shadow-popover);
+
+  font-size: var(--font-size-xsm);
+  line-height: var(--line-height-xsm);
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+
+  /* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+}
+.base-callout::after {
+    content: '';
+    position: absolute;
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    border: 0 solid var(--color-purple-300);
+    background-color: inherit;
+    transform: rotate(45deg);
+  }
+.base-callout:is(.tail-bottom-start,.tail-bottom-end)::after {
+    bottom: calc((var(--spacing-4) + var(--hairline)) * -1);
+    border-right-width: var(--hairline);
+    border-bottom-width: var(--hairline);
+  }
+.base-callout:is(.tail-top-start,.tail-top-end)::after {
+    top: calc((var(--spacing-4) + var(--hairline)) * -1);
+    border-left-width: var(--hairline);
+    border-top-width: var(--hairline);
+  }
+.base-callout:is(.tail-bottom-start,.tail-top-start)::after {
+    left: var(--spacing-12);
+  }
+.base-callout:is(.tail-bottom-end,.tail-top-end)::after {
+    right: var(--spacing-12);
+  }
 .base-check-box.label {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);

package/dist/toast.js

@@ -494,19 +494,21 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ __nuri_require__.C(__webpack_chunk_5__);
 /******/ import * as __webpack_chunk_6__ from "./chunk-6302.js";
 /******/ __nuri_require__.C(__webpack_chunk_6__);
-/******/ import * as __webpack_chunk_7__ from "./chunk-6713.js";
+/******/ import * as __webpack_chunk_7__ from "./chunk-2496.js";
 /******/ __nuri_require__.C(__webpack_chunk_7__);
-/******/ import * as __webpack_chunk_8__ from "./chunk-9976.js";
+/******/ import * as __webpack_chunk_8__ from "./chunk-6713.js";
 /******/ __nuri_require__.C(__webpack_chunk_8__);
-/******/ import * as __webpack_chunk_9__ from "./chunk-910.js";
+/******/ import * as __webpack_chunk_9__ from "./chunk-5226.js";
 /******/ __nuri_require__.C(__webpack_chunk_9__);
-/******/ import * as __webpack_chunk_10__ from "./chunk-5077.js";
+/******/ import * as __webpack_chunk_10__ from "./chunk-910.js";
 /******/ __nuri_require__.C(__webpack_chunk_10__);
+/******/ import * as __webpack_chunk_11__ from "./chunk-5077.js";
+/******/ __nuri_require__.C(__webpack_chunk_11__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,6713,9976,910,5077], () => (__nuri_require__(4012)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,2496,6713,5226,910,5077], () => (__nuri_require__(4012)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__ToastProvider = __webpack_exports__.t;
 /******/ const __webpack_exports__default = __webpack_exports__.A;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurihaus/web-design-system",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Nurihaus 디자인 시스템 — 컴포넌트와 디자인 토큰",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -118,6 +118,10 @@
       "types": "./dist/components/button/cta-button.d.ts",
       "default": "./dist/cta-button.js"
     },
+    "./callout": {
+      "types": "./dist/components/callout/callout.d.ts",
+      "default": "./dist/callout.js"
+    },
     "./option-badge": {
       "types": "./dist/components/badge/option-badge.d.ts",
       "default": "./dist/option-badge.js"