@nurihaus/web-design-system 3.7.0 → 3.9.0

package/dist/index.js

@@ -2,6 +2,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_radix_ui_3bc96d1b__ from "radix-ui";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
+import { LazyMotion as __WEBPACK_EXTERNAL_MODULE_motion_react_de020c0a_LazyMotion__, MotionConfig as __WEBPACK_EXTERNAL_MODULE_motion_react_de020c0a_MotionConfig__, domMax as __WEBPACK_EXTERNAL_MODULE_motion_react_de020c0a_domMax__ } from "motion/react";
 /******/ var __webpack_modules__ = ({
 
 /***/ 5077
@@ -268,7 +269,7 @@ var __assign = undefined && undefined.__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var variant = ['neutral', 'primary', 'danger', 'outlined'];
+var variant = ['neutral', 'primary', 'danger', 'success', 'warning', 'outlined'];
 var sizes = ['xs', 's', 'm', 'l', 'xl'];
 var commonBadgeProps = {
   variant: {
@@ -529,6 +530,97 @@ OptionBadge.displayName = 'OptionBadge';
 
 /***/ },
 
+/***/ 3577
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ bottom_bar)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+;// ./components/bottom-bar/base-bottom-bar.tsx
+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;
+};
+
+
+
+var BaseBottomBar = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,jsx_runtime_.jsx)("div", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-bottom-bar', className)
+  }, restProps));
+});
+BaseBottomBar.displayName = 'BaseBottomBar';
+/* harmony default export */ const base_bottom_bar = (BaseBottomBar);
+;// ./components/bottom-bar/bottom-bar-props.ts
+var bottomBarProps = {};
+;// ./components/bottom-bar/bottom-bar.tsx
+var bottom_bar_assign = undefined && undefined.__assign || function () {
+  bottom_bar_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 bottom_bar_assign.apply(this, arguments);
+};
+var bottom_bar_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;
+};
+
+
+
+
+
+
+/** 화면 아래에 붙는 바. 주 행동 버튼이나 입력 줄을 담는다. 바로 아래 자식들이 폭을 나눠 갖는다 */
+var BottomBar = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, bottomBarProps),
+    className = _a.className,
+    restProps = bottom_bar_rest(_a, ["className"]);
+  return (0,jsx_runtime_.jsx)(base_bottom_bar, bottom_bar_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'bottom-bar')
+  }, restProps));
+});
+BottomBar.displayName = 'BottomBar';
+/* harmony default export */ const bottom_bar = (BottomBar);
+
+/***/ },
+
 /***/ 1768
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
@@ -1013,11 +1105,12 @@ var ctaButtonProps = {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
 /* 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 _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);
+/* harmony import */ var _helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(1176);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(7335);
+/* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(1163);
+/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(6302);
+/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(8933);
+/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_9__ = __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++) {
@@ -1045,34 +1138,46 @@ 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_8__/* .ctaButtonProps */ .Lr),
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_9__/* .ctaButtonProps */ .Lr),
     className = _a.className,
     text = _a.text,
     leftIcon = _a.leftIcon,
     rightIcon = _a.rightIcon,
     callout = _a.callout,
+    asChild = _a.asChild,
+    children = _a.children,
+    loading = _a.loading,
     _onClick = _a.onClick,
     track = _a.track,
     trackProps = _a.trackProps,
-    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon", "callout", "onClick", "track", "trackProps"]);
+    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon", "callout", "asChild", "children", "loading", "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_7__/* ["default"] */ .A, __assign({
+  var content = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
+    children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
+      className: 'cta-button-callout',
+      text: callout
+    }) : null]
+  });
+  // asChild 면 넘겨받은 링크 요소 안에 버튼 글자를 넣고, 그 요소가 버튼 클래스·핸들러를 받는다
+  var link = (0,_helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__/* .fillLinkChild */ .Q)(asChild, children, content);
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_button__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .A, __assign({
     ref: ref,
     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, {}),
+    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {}),
+    asChild: link !== null,
+    // 링크는 로딩을 그리지 않는다. 그리면 Spinner 가 링크 자리를 차지한다
+    loading: link ? undefined : loading,
     onClick: function onClick(event) {
       emit('click');
       _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
     }
   }, restProps, {
-    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]
+    children: link !== null && link !== void 0 ? link : content
   }));
 });
 CTAButton.displayName = 'CTAButton';
@@ -1194,6 +1299,112 @@ Callout.displayName = 'Callout';
 
 /***/ },
 
+/***/ 329
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ card)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: ./components/core/composer/index.tsx
+var composer = __nuri_require__(2777);
+;// ./components/card/base-card.tsx
+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;
+};
+
+
+
+
+var BaseCard = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = props.asChild,
+    asChild = _a === void 0 ? false : _a,
+    className = props.className,
+    restProps = __rest(props, ["asChild", "className"]);
+  var Comp = asChild ? composer/* default */.A : 'div';
+  return (0,jsx_runtime_.jsx)(Comp, __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-card', className)
+  }, restProps));
+});
+BaseCard.displayName = 'BaseCard';
+/* harmony default export */ const base_card = (BaseCard);
+;// ./components/card/card-props.ts
+// 크기·안쪽 여백 prop 은 두지 않는다. 카드는 한 모양이다(여백 --spacing-16).
+var variant = ['default', 'tinted'];
+var cardProps = {
+  variant: {
+    type: 'className',
+    className: 'variant',
+    values: variant,
+    "default": 'default'
+  }
+};
+;// ./components/card/card.tsx
+var card_assign = undefined && undefined.__assign || function () {
+  card_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 card_assign.apply(this, arguments);
+};
+var card_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;
+};
+
+
+
+
+
+
+/** 목록·홈의 카드 면. 누르는 카드는 asChild 로 링크·버튼 하나를 children 으로 준다 — 그 요소가 카드가 된다 */
+var Card = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, cardProps),
+    className = _a.className,
+    restProps = card_rest(_a, ["className"]);
+  return (0,jsx_runtime_.jsx)(base_card, card_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'card')
+  }, restProps));
+});
+Card.displayName = 'Card';
+/* harmony default export */ const card = (Card);
+
+/***/ },
+
 /***/ 445
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
@@ -1863,6 +2074,110 @@ var composeRefs = function composeRefs() {
 
 /***/ },
 
+/***/ 6143
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ description_list)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+;// ./components/description-list/base-description-list.tsx
+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;
+};
+
+
+
+var BaseDescriptionList = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,jsx_runtime_.jsx)("dl", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-description-list', className)
+  }, restProps));
+});
+BaseDescriptionList.displayName = 'BaseDescriptionList';
+/* harmony default export */ const base_description_list = (BaseDescriptionList);
+;// ./components/description-list/description-list-props.ts
+// 크기·변형이 없다. 이름은 왼쪽, 값은 오른쪽 한 모양이다.
+var descriptionListProps = {};
+;// ./components/description-list/description-list.tsx
+var description_list_assign = undefined && undefined.__assign || function () {
+  description_list_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 description_list_assign.apply(this, arguments);
+};
+var description_list_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;
+};
+
+
+
+
+
+
+/** 이름–값 요약. 이름은 왼쪽, 값은 오른쪽. total 줄은 구분선 아래 굵게 */
+var DescriptionList = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, descriptionListProps),
+    className = _a.className,
+    items = _a.items,
+    restProps = description_list_rest(_a, ["className", "items"]);
+  return (0,jsx_runtime_.jsx)(base_description_list, description_list_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'description-list')
+  }, restProps, {
+    children: items.map(function (item) {
+      return (0,jsx_runtime_.jsxs)("div", {
+        className: (0,classNames/* classNames */.x)('description-list-item', item.total && 'total'),
+        children: [(0,jsx_runtime_.jsx)("dt", {
+          children: item.label
+        }), (0,jsx_runtime_.jsx)("dd", {
+          children: item.value
+        })]
+      }, item.id);
+    })
+  }));
+});
+DescriptionList.displayName = 'DescriptionList';
+/* harmony default export */ const description_list = (DescriptionList);
+
+/***/ },
+
 /***/ 6622
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
@@ -2468,13 +2783,13 @@ Text.displayName = 'Text';
 
 /***/ },
 
-/***/ 9896
+/***/ 5589
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
 
 // EXPORTS
 __nuri_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ base_icon)
+  A: () => (/* binding */ empty_state)
 });
 
 // EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
@@ -2483,24 +2798,304 @@ var jsx_runtime_ = __nuri_require__(612);
 var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
 // EXTERNAL MODULE: ./helpers/utils/classNames.js
 var classNames = __nuri_require__(3274);
-;// ./components/icon/icon-paths.ts
-// scripts/build-icons.mjs 가 만든다. 손으로 고치지 않는다.
-// Phosphor Icons (MIT, https://phosphoricons.com) — viewBox 0 0 256 256
-var iconPaths = {
-  house: {
-    regular: ['M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'],
-    fill: ['M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z']
-  },
-  'megaphone-simple': {
-    regular: ['M228.54,86.66l-176.06-54A16,16,0,0,0,32,48V192a16,16,0,0,0,16,16,16,16,0,0,0,4.52-.65L136,181.73V192a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16v-29.9l28.54-8.75A16.09,16.09,0,0,0,240,138V102A16.09,16.09,0,0,0,228.54,86.66ZM136,165,48,192V48l88,27Zm48,27H152V176.82L184,167Zm40-54-.11,0L152,160.08V79.92l71.89,22,.11,0v36Z'],
-    fill: ['M228.54,86.66l-176.06-54A16,16,0,0,0,32,48V192a16,16,0,0,0,16,16,16,16,0,0,0,4.52-.65L136,181.73V192a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16v-29.9l28.54-8.75A16.09,16.09,0,0,0,240,138V102A16.09,16.09,0,0,0,228.54,86.66ZM184,192H152V176.82L184,167Zm40-54-.11,0L152,160.08V79.91L223.89,102l.11,0v36Z']
-  },
-  'chats-circle': {
-    regular: ['M232.07,186.76a80,80,0,0,0-62.5-114.17A80,80,0,1,0,23.93,138.76l-7.27,24.71a16,16,0,0,0,19.87,19.87l24.71-7.27a80.39,80.39,0,0,0,25.18,7.35,80,80,0,0,0,108.34,40.65l24.71,7.27a16,16,0,0,0,19.87-19.86ZM62,159.5a8.28,8.28,0,0,0-2.26.32L32,168l8.17-27.76a8,8,0,0,0-.63-6,64,64,0,1,1,26.26,26.26A8,8,0,0,0,62,159.5Zm153.79,28.73L224,216l-27.76-8.17a8,8,0,0,0-6,.63,64.05,64.05,0,0,1-85.87-24.88A79.93,79.93,0,0,0,174.7,89.71a64,64,0,0,1,41.75,92.48A8,8,0,0,0,215.82,188.23Z'],
-    fill: ['M232.07,186.76a80,80,0,0,0-62.5-114.17A80,80,0,1,0,23.93,138.76l-7.27,24.71a16,16,0,0,0,19.87,19.87l24.71-7.27a80.39,80.39,0,0,0,25.18,7.35,80,80,0,0,0,108.34,40.65l24.71,7.27a16,16,0,0,0,19.87-19.86Zm-16.25,1.47L224,216l-27.76-8.17a8,8,0,0,0-6,.63,64.05,64.05,0,0,1-85.87-24.88A79.93,79.93,0,0,0,174.7,89.71a64,64,0,0,1,41.75,92.48A8,8,0,0,0,215.82,188.23Z']
-  },
-  'user-circle': {
-    regular: ['M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z'],
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: ./components/icon/icon.tsx
+var icon_icon = __nuri_require__(3547);
+;// ./components/empty-state/base-empty-state.tsx
+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;
+};
+
+
+
+var BaseEmptyState = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,jsx_runtime_.jsx)("div", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-empty-state', className)
+  }, restProps));
+});
+BaseEmptyState.displayName = 'BaseEmptyState';
+/* harmony default export */ const base_empty_state = (BaseEmptyState);
+;// ./components/empty-state/empty-state-props.ts
+/** 아이콘 원의 색. default 는 연보라, neutral 은 회색(오류·준비 중처럼 힘을 뺄 때) */
+var variant = ['default', 'neutral'];
+var emptyStateProps = {
+  variant: {
+    type: 'className',
+    className: 'variant',
+    values: variant,
+    "default": 'default'
+  }
+};
+;// ./components/empty-state/empty-state.tsx
+var empty_state_assign = undefined && undefined.__assign || function () {
+  empty_state_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 empty_state_assign.apply(this, arguments);
+};
+var empty_state_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;
+};
+
+
+
+
+
+
+
+/** 빈 목록·오류 뒤 다시 시도·찾을 수 없음·준비 중 화면 */
+var EmptyState = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, emptyStateProps),
+    className = _a.className,
+    icon = _a.icon,
+    title = _a.title,
+    description = _a.description,
+    action = _a.action,
+    restProps = empty_state_rest(_a, ["className", "icon", "title", "description", "action"]);
+  return (0,jsx_runtime_.jsxs)(base_empty_state, empty_state_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'empty-state')
+  }, restProps, {
+    children: [(0,jsx_runtime_.jsx)("span", {
+      className: 'empty-state-icon',
+      children: (0,jsx_runtime_.jsx)(icon_icon/* default */.A, {
+        name: icon,
+        size: 'xl'
+      })
+    }), (0,jsx_runtime_.jsx)("p", {
+      className: 'empty-state-title',
+      children: title
+    }), description && (0,jsx_runtime_.jsx)("p", {
+      className: 'empty-state-description',
+      children: description
+    }), action && (0,jsx_runtime_.jsx)("div", {
+      className: 'empty-state-action',
+      children: action
+    })]
+  }));
+});
+EmptyState.displayName = 'EmptyState';
+/* harmony default export */ const empty_state = (EmptyState);
+
+/***/ },
+
+/***/ 8173
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ icon_button)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/fillLinkChild.ts
+var fillLinkChild = __nuri_require__(1176);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: ./components/icon/icon.tsx
+var icon_icon = __nuri_require__(3547);
+// EXTERNAL MODULE: ./components/core/composer/index.tsx
+var composer = __nuri_require__(2777);
+;// ./components/icon-button/base-icon-button.tsx
+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;
+};
+
+
+
+
+var BaseIconButton = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = props.asChild,
+    asChild = _a === void 0 ? false : _a,
+    className = props.className,
+    disabled = props.disabled,
+    restProps = __rest(props, ["asChild", "className", "disabled"]);
+  var Comp = asChild ? composer/* default */.A : 'button';
+  return (0,jsx_runtime_.jsx)(Comp, __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-icon-button', className),
+    type: asChild ? undefined : 'button',
+    disabled: disabled,
+    "data-disabled": disabled || undefined
+  }, restProps));
+});
+BaseIconButton.displayName = 'BaseIconButton';
+/* harmony default export */ const base_icon_button = (BaseIconButton);
+// EXTERNAL MODULE: ./helpers/props/common-props.ts
+var common_props = __nuri_require__(7298);
+;// ./components/icon-button/icon-button-props.ts
+
+var variant = ['ghost', 'secondary', 'primary'];
+var sizes = ['s', 'm', 'l'];
+// 아이콘 크기도 이 값으로 고르므로 기본 크기를 한 곳에 둔다
+var defaultSize = 'm';
+var iconButtonProps = {
+  variant: {
+    type: 'className',
+    className: 'variant',
+    values: variant,
+    "default": 'ghost'
+  },
+  size: (0,common_props/* sizeProp */.lw)(sizes, defaultSize)
+};
+;// ./components/icon-button/icon-button.tsx
+var icon_button_assign = undefined && undefined.__assign || function () {
+  icon_button_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 icon_button_assign.apply(this, arguments);
+};
+var icon_button_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;
+};
+
+
+
+
+
+
+
+
+
+// 버튼 크기마다 아이콘 크기. 버튼 지름은 size.css 의 --icon-button-size-*
+var ICON_SIZE = {
+  s: 's',
+  m: 'l',
+  l: 'xl'
+};
+/** 아이콘 하나뿐인 버튼. 누르는 자리는 늘 터치 44 이상이다 */
+var IconButton = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a;
+  var _b = (0,getMergedProps/* getMergedProps */.p)(props, iconButtonProps),
+    className = _b.className,
+    icon = _b.icon,
+    label = _b.label,
+    asChild = _b.asChild,
+    children = _b.children,
+    _onClick = _b.onClick,
+    track = _b.track,
+    trackProps = _b.trackProps,
+    restProps = icon_button_rest(_b, ["className", "icon", "label", "asChild", "children", "onClick", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('IconButton', {
+    track: track,
+    trackProps: trackProps
+  });
+  var content = (0,jsx_runtime_.jsx)(icon_icon/* default */.A, {
+    name: icon,
+    size: ICON_SIZE[(_a = props.size) !== null && _a !== void 0 ? _a : defaultSize]
+  });
+  var link = (0,fillLinkChild/* fillLinkChild */.Q)(asChild, children, content);
+  return (0,jsx_runtime_.jsx)(base_icon_button, icon_button_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'icon-button'),
+    "aria-label": label,
+    asChild: link !== null,
+    onClick: function onClick(event) {
+      emit('click');
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+    }
+  }, restProps, {
+    children: link !== null && link !== void 0 ? link : content
+  }));
+});
+IconButton.displayName = 'IconButton';
+/* harmony default export */ const icon_button = (IconButton);
+
+/***/ },
+
+/***/ 9896
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ base_icon)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+;// ./components/icon/icon-paths.ts
+// scripts/build-icons.mjs 가 만든다. 손으로 고치지 않는다.
+// Phosphor Icons (MIT, https://phosphoricons.com) — viewBox 0 0 256 256
+var iconPaths = {
+  house: {
+    regular: ['M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'],
+    fill: ['M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z']
+  },
+  'megaphone-simple': {
+    regular: ['M228.54,86.66l-176.06-54A16,16,0,0,0,32,48V192a16,16,0,0,0,16,16,16,16,0,0,0,4.52-.65L136,181.73V192a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16v-29.9l28.54-8.75A16.09,16.09,0,0,0,240,138V102A16.09,16.09,0,0,0,228.54,86.66ZM136,165,48,192V48l88,27Zm48,27H152V176.82L184,167Zm40-54-.11,0L152,160.08V79.92l71.89,22,.11,0v36Z'],
+    fill: ['M228.54,86.66l-176.06-54A16,16,0,0,0,32,48V192a16,16,0,0,0,16,16,16,16,0,0,0,4.52-.65L136,181.73V192a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16v-29.9l28.54-8.75A16.09,16.09,0,0,0,240,138V102A16.09,16.09,0,0,0,228.54,86.66ZM184,192H152V176.82L184,167Zm40-54-.11,0L152,160.08V79.91L223.89,102l.11,0v36Z']
+  },
+  'chats-circle': {
+    regular: ['M232.07,186.76a80,80,0,0,0-62.5-114.17A80,80,0,1,0,23.93,138.76l-7.27,24.71a16,16,0,0,0,19.87,19.87l24.71-7.27a80.39,80.39,0,0,0,25.18,7.35,80,80,0,0,0,108.34,40.65l24.71,7.27a16,16,0,0,0,19.87-19.86ZM62,159.5a8.28,8.28,0,0,0-2.26.32L32,168l8.17-27.76a8,8,0,0,0-.63-6,64,64,0,1,1,26.26,26.26A8,8,0,0,0,62,159.5Zm153.79,28.73L224,216l-27.76-8.17a8,8,0,0,0-6,.63,64.05,64.05,0,0,1-85.87-24.88A79.93,79.93,0,0,0,174.7,89.71a64,64,0,0,1,41.75,92.48A8,8,0,0,0,215.82,188.23Z'],
+    fill: ['M232.07,186.76a80,80,0,0,0-62.5-114.17A80,80,0,1,0,23.93,138.76l-7.27,24.71a16,16,0,0,0,19.87,19.87l24.71-7.27a80.39,80.39,0,0,0,25.18,7.35,80,80,0,0,0,108.34,40.65l24.71,7.27a16,16,0,0,0,19.87-19.86Zm-16.25,1.47L224,216l-27.76-8.17a8,8,0,0,0-6,.63,64.05,64.05,0,0,1-85.87-24.88A79.93,79.93,0,0,0,174.7,89.71a64,64,0,0,1,41.75,92.48A8,8,0,0,0,215.82,188.23Z']
+  },
+  'user-circle': {
+    regular: ['M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z'],
     fill: ['M172,120a44,44,0,1,1-44-44A44.05,44.05,0,0,1,172,120Zm60,8A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88.09,88.09,0,0,0-91.47-87.93C77.43,41.89,39.87,81.12,40,128.25a87.65,87.65,0,0,0,22.24,58.16A79.71,79.71,0,0,1,84,165.1a4,4,0,0,1,4.83.32,59.83,59.83,0,0,0,78.28,0,4,4,0,0,1,4.83-.32,79.71,79.71,0,0,1,21.79,21.31A87.62,87.62,0,0,0,216,128Z']
   },
   bell: {
@@ -2611,6 +3206,10 @@ var iconPaths = {
     regular: ['M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'],
     fill: ['M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z']
   },
+  circle: {
+    regular: ['M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z'],
+    fill: ['M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z']
+  },
   check: {
     regular: ['M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'],
     fill: ['M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM205.66,85.66l-96,96a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L104,164.69l90.34-90.35a8,8,0,0,1,11.32,11.32Z']
@@ -2762,7 +3361,1125 @@ var iconProps = {
 
 /***/ },
 
-/***/ 3547
+/***/ 3547
+(__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);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(7335);
+/* harmony import */ var _base_icon__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(9896);
+/* harmony import */ var _icon_props__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(6722);
+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;
+};
+
+
+
+
+
+
+var Icon = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__/* .getMergedProps */ .p)(props, _icon_props__WEBPACK_IMPORTED_MODULE_5__/* .iconProps */ .u1),
+    className = _a.className,
+    restProps = __rest(_a, ["className"]);
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_icon__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, 'icon')
+  }, restProps));
+});
+Icon.displayName = 'Icon';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);
+
+/***/ },
+
+/***/ 9497
+(__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);
+/* harmony import */ var _core_composer__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(2777);
+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;
+};
+
+
+
+
+var ListRootBase = /*#__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)("div", __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)('nuri-theme base-list group', className)
+  }, restProps));
+});
+ListRootBase.displayName = 'ListRoot';
+var ListRow = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var _a = props.asChild,
+    asChild = _a === void 0 ? false : _a,
+    className = props.className,
+    restProps = __rest(props, ["asChild", "className"]);
+  var Comp = asChild ? _core_composer__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A : 'div';
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Comp, __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)('nuri-theme base-list row', className)
+  }, restProps));
+});
+ListRow.displayName = 'ListRow';
+var ListRoot = Object.assign(ListRootBase, {
+  Row: ListRow
+});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ListRoot);
+
+/***/ },
+
+/***/ 2779
+(__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);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(7335);
+/* harmony import */ var _base_list__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(9497);
+/* harmony import */ var _list_props__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(1212);
+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;
+};
+
+
+
+
+
+
+/** ListRow 를 흰 면 하나에 묶는다. label 을 주면 면 위에 작은 제목을 달고 그룹 이름으로 쓴다 */
+var ListGroup = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__/* .getMergedProps */ .p)(props, _list_props__WEBPACK_IMPORTED_MODULE_5__/* .listGroupProps */ .e),
+    className = _a.className,
+    label = _a.label,
+    children = _a.children,
+    restProps = __rest(_a, ["className", "label", "children"]);
+  var labelId = (0,react__WEBPACK_IMPORTED_MODULE_1__.useId)();
+  var hasLabel = label !== undefined && label !== null;
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_list__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, 'list-group'),
+    role: hasLabel ? 'group' : undefined,
+    "aria-labelledby": hasLabel ? labelId : undefined
+  }, restProps, {
+    children: [hasLabel ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
+      id: labelId,
+      className: 'list-group-label',
+      children: label
+    }) : null, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
+      className: 'list-group-surface',
+      children: children
+    })]
+  }));
+});
+ListGroup.displayName = 'ListGroup';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ListGroup);
+
+/***/ },
+
+/***/ 1212
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   R: () => (/* binding */ listRowProps),
+/* harmony export */   e: () => (/* binding */ listGroupProps)
+/* harmony export */ });
+// 크기·변형이 없다. 행 높이는 --list-row-height 부터, 면은 한 모양이다.
+var listGroupProps = {};
+var listRowProps = {};
+
+/***/ },
+
+/***/ 2082
+(__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_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_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(1176);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(7335);
+/* harmony import */ var _icon_icon__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(3547);
+/* harmony import */ var _base_list__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(9497);
+/* harmony import */ var _list_props__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(1212);
+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;
+};
+
+
+
+
+
+
+
+
+
+/** 목록 한 줄. onClick 이면 button, asChild 면 넘긴 링크가 행이 된다. 둘 다 없으면 div 다 */
+var ListRow = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__/* .getMergedProps */ .p)(props, _list_props__WEBPACK_IMPORTED_MODULE_8__/* .listRowProps */ .R),
+    className = _a.className,
+    label = _a.label,
+    description = _a.description,
+    leading = _a.leading,
+    trailing = _a.trailing,
+    chevron = _a.chevron,
+    asChild = _a.asChild,
+    onClick = _a.onClick,
+    children = _a.children,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = __rest(_a, ["className", "label", "description", "leading", "trailing", "chevron", "asChild", "onClick", "children", "track", "trackProps"]);
+  var emit = (0,_helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__/* .useTrack */ .n)('ListRow', {
+    track: track,
+    trackProps: trackProps
+  });
+  // 링크 요소를 받았을 때만 링크 행이다. 아니면 div 로 그리고 화살표도 없다
+  var isLink = asChild === true && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.isValidElement)(children);
+  var showChevron = chevron !== null && chevron !== void 0 ? chevron : isLink || onClick !== undefined;
+  var content = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
+    children: [leading ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
+      className: 'list-row-leading',
+      children: leading
+    }) : null, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", {
+      className: 'list-row-text',
+      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
+        className: 'list-row-label',
+        children: label
+      }), description ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
+        className: 'list-row-description',
+        children: description
+      }) : null]
+    }), trailing ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
+      className: 'list-row-trailing',
+      children: trailing
+    }) : null, showChevron ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icon_icon__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
+      className: 'list-row-chevron',
+      name: 'caret-right',
+      size: 's'
+    }) : null]
+  });
+  // 넘겨받은 링크가 있으면 그 안에, onClick 이면 button 안에 행 내용을 넣는다. 둘 다 없으면 base 의 div 다
+  var buttonRow = onClick ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
+    type: 'button',
+    children: content
+  }) : null;
+  var link = (0,_helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__/* .fillLinkChild */ .Q)(asChild, children, content);
+  var rowElement = link !== null && link !== void 0 ? link : buttonRow;
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_list__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Row, __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'list-row'),
+    asChild: rowElement !== null,
+    // 링크 행은 다른 화면으로 옮기고 버튼 행은 그 자리에서 동작한다. 보기만 하는 행은 보내지 않는다
+    onClick: rowElement ? function (event) {
+      emit(link ? 'navigate' : 'click');
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    } : undefined
+  }, restProps, {
+    children: rowElement !== null && rowElement !== void 0 ? rowElement : content
+  }));
+});
+ListRow.displayName = 'ListRow';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ListRow);
+
+/***/ },
+
+/***/ 6302
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ spinner)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+;// ./components/loading/spinner/base-spinner.tsx
+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;
+};
+
+
+
+var BaseSpinner = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,jsx_runtime_.jsx)("div", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-spinner', className)
+  }, restProps, {
+    children: (0,jsx_runtime_.jsx)("div", {
+      className: 'loading-indicator-ring',
+      children: [0, 1, 2, 3].map(function (i) {
+        return (0,jsx_runtime_.jsx)("div", {
+          className: 'loading-indicator-single-ring'
+        }, i);
+      })
+    })
+  }));
+});
+BaseSpinner.displayName = 'BaseSpinner';
+/* harmony default export */ const base_spinner = (BaseSpinner);
+;// ./components/loading/spinner/spinner-props.ts
+var spinnerProps = {};
+;// ./components/loading/spinner/spinner.tsx
+var spinner_assign = undefined && undefined.__assign || function () {
+  spinner_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 spinner_assign.apply(this, arguments);
+};
+var spinner_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;
+};
+
+
+
+
+
+
+var Spinner = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, spinnerProps),
+    className = _a.className,
+    restProps = spinner_rest(_a, ["className"]);
+  return (0,jsx_runtime_.jsx)(base_spinner, spinner_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'component-loading-container')
+  }, restProps));
+});
+Spinner.displayName = 'Spinner';
+/* harmony default export */ const spinner = (Spinner);
+
+/***/ },
+
+/***/ 4804
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   _: () => (/* binding */ LogProvider),
+/* harmony export */   e: () => (/* binding */ useLogEmitter)
+/* 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);
+var _a;
+
+
+// 진입점(`/logging`, `/cta-button`, 루트)마다 이 파일이 따로 들어가므로 context 는 전역 키 하나에 둔다.
+var CONTEXT_KEY = Symbol["for"]('@nurihaus/web-design-system/log-provider');
+var registry = globalThis;
+var LogContext = (_a = registry[CONTEXT_KEY]) !== null && _a !== void 0 ? _a : registry[CONTEXT_KEY] = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(null);
+var LogProvider = function LogProvider(props) {
+  var onEvent = props.onEvent,
+    children = props.children;
+  // context 값이 Provider 렌더마다 바뀌면 track 을 단 컴포넌트가 모두 다시 그려진다. 최신 onEvent 는 ref 로 읽는다.
+  var onEventRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(onEvent);
+  onEventRef.current = onEvent;
+  var emit = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (event) {
+    // 로그 수집기가 던져도 클릭·열기 같은 UI 동작은 이어져야 한다.
+    try {
+      onEventRef.current(event);
+    } catch (error) {
+      console.error('[LogProvider] onEvent threw', error);
+    }
+  }, []);
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(LogContext.Provider, {
+    value: emit,
+    children: children
+  });
+};
+LogProvider.displayName = 'LogProvider';
+/** LogProvider 가 둔 emit 함수. Provider 밖이면 null 이다. */
+var useLogEmitter = function useLogEmitter() {
+  return (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(LogContext);
+};
+
+/***/ },
+
+/***/ 7111
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   e: () => (/* binding */ useLog)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(1041);
+/* harmony import */ var _log_context__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(4804);
+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);
+};
+
+
+
+/** 컴포넌트 밖의 사용 로그를 남긴다. LogProvider 밖이면 아무것도 하지 않는다. */
+var useLog = function useLog() {
+  var emit = (0,_log_context__WEBPACK_IMPORTED_MODULE_1__/* .useLogEmitter */ .e)();
+  return (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {
+    return emit === null || emit === void 0 ? void 0 : emit(__assign(__assign({}, event), {
+      timestamp: Date.now()
+    }));
+  }, [emit]);
+};
+
+/***/ },
+
+/***/ 6459
+(__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 radix_ui__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(0);
+/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __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;
+};
+
+
+
+
+// Dialog.Root 는 DOM 을 그리지 않아 ref 를 받을 곳이 없다.
+var MediaViewerRootBase = function MediaViewerRootBase(props) {
+  var children = props.children,
+    open = props.open,
+    defaultOpen = props.defaultOpen,
+    onOpenChange = props.onOpenChange;
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Dialog.Root, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    children: children
+  });
+};
+MediaViewerRootBase.displayName = 'MediaViewerRoot';
+var MediaViewerTrigger = /*#__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)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Dialog.Trigger, __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-media trigger', className)
+  }, restProps));
+});
+MediaViewerTrigger.displayName = 'MediaViewerTrigger';
+// Portal 과 Overlay 를 같이 그린다. 화면 전체를 덮는 Dialog.Content 가 ref 를 받는다.
+var MediaViewerContent = /*#__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__.jsxs)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Dialog.Portal, {
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Dialog.Overlay, {
+      className: 'nuri-theme base-media overlay'
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Dialog.Content, __assign({
+      ref: ref,
+      className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-media content', className)
+    }, restProps))]
+  });
+});
+MediaViewerContent.displayName = 'MediaViewerContent';
+// 접근성 이름만 준다. 화면에는 사진만 보인다.
+var MediaViewerTitle = /*#__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)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.VisuallyHidden.Root, {
+    asChild: true,
+    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Dialog.Title, __assign({
+      ref: ref,
+      className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-media title', className)
+    }, restProps))
+  });
+});
+MediaViewerTitle.displayName = 'MediaViewerTitle';
+var MediaViewerClose = /*#__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)(radix_ui__WEBPACK_IMPORTED_MODULE_2__.Dialog.Close, __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)('nuri-theme base-media close', className)
+  }, restProps));
+});
+MediaViewerClose.displayName = 'MediaViewerClose';
+var MediaViewerRoot = Object.assign(MediaViewerRootBase, {
+  Trigger: MediaViewerTrigger,
+  Content: MediaViewerContent,
+  Title: MediaViewerTitle,
+  Close: MediaViewerClose
+});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MediaViewerRoot);
+
+/***/ },
+
+/***/ 946
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ media_thumbnail)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: ./components/button/base-button.tsx
+var base_button = __nuri_require__(8933);
+// EXTERNAL MODULE: ./components/icon/icon.tsx
+var icon = __nuri_require__(3547);
+// EXTERNAL MODULE: ./components/loading/spinner/spinner.tsx + 2 modules
+var spinner = __nuri_require__(6302);
+// EXTERNAL MODULE: ./helpers/props/common-props.ts
+var common_props = __nuri_require__(7298);
+;// ./components/media/media-props.ts
+
+var sizes = ['s', 'm', 'l'];
+var mediaTypes = (/* unused pure expression or super */ null && (['image', 'video']));
+var mediaThumbnailProps = {
+  size: (0,common_props/* sizeProp */.lw)(sizes, 'm')
+};
+// EXTERNAL MODULE: ./components/media/media-viewer.tsx
+var media_viewer = __nuri_require__(4268);
+;// ./components/media/media-thumbnail.tsx
+
+
+
+
+
+
+
+
+
+
+// 버튼 안에 버튼을 둘 수 없어 여는 버튼과 지우기 버튼을 형제로 두고 div 로 감싼다. ref 는 그 div 다.
+var MediaThumbnail = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, mediaThumbnailProps),
+    src = _a.src,
+    _b = _a.type,
+    type = _b === void 0 ? 'image' : _b,
+    alt = _a.alt,
+    viewLabel = _a.viewLabel,
+    closeLabel = _a.closeLabel,
+    loading = _a.loading,
+    invalid = _a.invalid,
+    onRemove = _a.onRemove,
+    removeLabel = _a.removeLabel,
+    className = _a.className,
+    style = _a.style,
+    track = _a.track,
+    trackProps = _a.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('MediaThumbnail', {
+    track: track,
+    trackProps: trackProps
+  });
+  return (0,jsx_runtime_.jsxs)("div", {
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-media', className, 'media-thumbnail'),
+    style: style,
+    children: [(0,jsx_runtime_.jsx)(media_viewer/* default */.A, {
+      src: src,
+      type: type,
+      alt: alt,
+      title: alt !== null && alt !== void 0 ? alt : viewLabel,
+      closeLabel: closeLabel,
+      onOpenChange: function onOpenChange(next) {
+        return next && emit('open');
+      },
+      trigger: (0,jsx_runtime_.jsxs)(base_button/* default */.A, {
+        className: 'media-thumbnail-open',
+        "aria-label": alt !== null && alt !== void 0 ? alt : viewLabel,
+        "aria-busy": loading || undefined,
+        disabled: loading || invalid,
+        "data-invalid": invalid || undefined,
+        children: [type === 'video' ? (0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, {
+          children: [(0,jsx_runtime_.jsx)("video", {
+            className: 'media-thumbnail-media',
+            src: "".concat(src, "#t=0.001"),
+            preload: 'metadata',
+            muted: true,
+            playsInline: true
+          }), (0,jsx_runtime_.jsx)("span", {
+            className: 'media-thumbnail-play',
+            children: (0,jsx_runtime_.jsx)(icon/* default */.A, {
+              name: 'play',
+              weight: 'fill',
+              size: 's'
+            })
+          })]
+        }) : (0,jsx_runtime_.jsx)("img", {
+          className: 'media-thumbnail-media',
+          src: src,
+          alt: '',
+          loading: 'lazy'
+        }), loading && (0,jsx_runtime_.jsx)("span", {
+          className: 'media-thumbnail-loading',
+          children: (0,jsx_runtime_.jsx)(spinner/* default */.A, {
+            className: 'media-thumbnail-spinner'
+          })
+        })]
+      })
+    }), onRemove && (0,jsx_runtime_.jsx)(base_button/* default */.A, {
+      className: 'media-thumbnail-remove',
+      type: 'button',
+      "aria-label": removeLabel,
+      onClick: onRemove,
+      children: (0,jsx_runtime_.jsx)(icon/* default */.A, {
+        name: 'x',
+        size: 'xs'
+      })
+    })]
+  });
+});
+MediaThumbnail.displayName = 'MediaThumbnail';
+/* harmony default export */ const media_thumbnail = (MediaThumbnail);
+
+/***/ },
+
+/***/ 4268
+(__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_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 _icon_icon__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(3547);
+/* harmony import */ var _base_media__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(6459);
+
+
+
+
+
+
+// ref 는 화면 전체를 덮는 Dialog.Content div 에 붙는다. Root 는 DOM 을 그리지 않는다.
+// 닫히면 Content 가 빠지므로 영상도 함께 빠져 재생이 멈춘다.
+var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var trigger = props.trigger,
+    open = props.open,
+    defaultOpen = props.defaultOpen,
+    _onOpenChange = props.onOpenChange,
+    src = props.src,
+    _a = props.type,
+    type = _a === void 0 ? 'image' : _a,
+    alt = props.alt,
+    title = props.title,
+    closeLabel = props.closeLabel,
+    className = props.className,
+    style = props.style,
+    track = props.track,
+    trackProps = props.trackProps;
+  var emit = (0,_helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__/* .useTrack */ .n)('MediaViewer', {
+    track: track,
+    trackProps: trackProps
+  });
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_media__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: function onOpenChange(next) {
+      emit(next ? 'open' : 'close');
+      _onOpenChange === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(next);
+    },
+    children: [trigger && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_media__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A.Trigger, {
+      asChild: true,
+      children: trigger
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_media__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A.Content, {
+      ref: ref,
+      className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'media-viewer'),
+      style: style,
+      "aria-describedby": undefined,
+      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_media__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A.Title, {
+        children: title !== null && title !== void 0 ? title : alt
+      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_media__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A.Close, {
+        className: 'media-viewer-close',
+        "aria-label": closeLabel,
+        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icon_icon__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, {
+          name: 'x',
+          size: 'l'
+        })
+      }), type === 'video' ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("video", {
+        className: 'media-viewer-media',
+        src: src,
+        controls: true,
+        autoPlay: true,
+        playsInline: true
+      }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", {
+        className: 'media-viewer-media',
+        src: src,
+        alt: alt !== null && alt !== void 0 ? alt : ''
+      })]
+    })]
+  });
+});
+MediaViewer.displayName = 'MediaViewer';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MediaViewer);
+
+/***/ },
+
+/***/ 2045
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ message_composer)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useExternalState.ts
+var useExternalState = __nuri_require__(9387);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: ./components/icon/icon.tsx
+var icon = __nuri_require__(3547);
+// EXTERNAL MODULE: ./components/loading/spinner/spinner.tsx + 2 modules
+var spinner = __nuri_require__(6302);
+;// ./components/message-composer/base-message-composer.tsx
+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;
+};
+
+
+
+var MessageComposerRootBase = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,jsx_runtime_.jsx)("div", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-message-composer root', className)
+  }, restProps));
+});
+MessageComposerRootBase.displayName = 'MessageComposerRoot';
+var MessageComposerTextarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    disabled = props.disabled,
+    restProps = __rest(props, ["className", "disabled"]);
+  return (0,jsx_runtime_.jsx)("textarea", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-message-composer textarea', className),
+    rows: 1,
+    disabled: disabled,
+    "data-disabled": disabled || undefined
+  }, restProps));
+});
+MessageComposerTextarea.displayName = 'MessageComposerTextarea';
+var MessageComposerSend = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    _onMouseDown = props.onMouseDown,
+    restProps = __rest(props, ["className", "onMouseDown"]);
+  return (0,jsx_runtime_.jsx)("button", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-message-composer send', className),
+    type: 'button'
+  }, restProps, {
+    // 눌러도 입력 칸 포커스를 빼앗지 않는다(휴대폰 자판이 닫히지 않게). 넘겨받은 onMouseDown 이 덮지 않게 spread 뒤에 둔다.
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+      _onMouseDown === null || _onMouseDown === void 0 ? void 0 : _onMouseDown(e);
+    }
+  }));
+});
+MessageComposerSend.displayName = 'MessageComposerSend';
+var MessageComposerRoot = Object.assign(MessageComposerRootBase, {
+  Textarea: MessageComposerTextarea,
+  Send: MessageComposerSend
+});
+/* harmony default export */ const base_message_composer = (MessageComposerRoot);
+;// ./components/message-composer/message-composer-props.ts
+var messageComposerProps = {};
+;// ./components/message-composer/message-composer.tsx
+var message_composer_assign = undefined && undefined.__assign || function () {
+  message_composer_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 message_composer_assign.apply(this, arguments);
+};
+var message_composer_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;
+};
+
+
+
+
+
+
+
+
+
+
+/** 대화 입력 줄. Enter 는 줄바꿈이고 보내기는 버튼으로만 한다. 보낸 뒤 값을 비우는 것은 쓰는 쪽이다 */
+var MessageComposer = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, messageComposerProps),
+    className = _a.className,
+    valueProp = _a.value,
+    defaultValue = _a.defaultValue,
+    onValueChange = _a.onValueChange,
+    onSend = _a.onSend,
+    canSend = _a.canSend,
+    loading = _a.loading,
+    placeholder = _a.placeholder,
+    label = _a.label,
+    sendLabel = _a.sendLabel,
+    leading = _a.leading,
+    attachments = _a.attachments,
+    disabled = _a.disabled,
+    autoFocus = _a.autoFocus,
+    maxLength = _a.maxLength,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = message_composer_rest(_a, ["className", "value", "defaultValue", "onValueChange", "onSend", "canSend", "loading", "placeholder", "label", "sendLabel", "leading", "attachments", "disabled", "autoFocus", "maxLength", "track", "trackProps"]);
+  var _b = (0,useExternalState/* useExternalState */.C)({
+      prop: valueProp,
+      handler: onValueChange,
+      defaultProp: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''
+    }),
+    value = _b[0],
+    setValue = _b[1];
+  var emit = (0,useTrack/* useTrack */.n)('MessageComposer', {
+    track: track,
+    trackProps: trackProps
+  });
+  var _c = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.useState)(false),
+    rejecting = _c[0],
+    setRejecting = _c[1];
+  var blocked = disabled || !(canSend !== null && canSend !== void 0 ? canSend : value.trim() !== '');
+  var handleSend = function handleSend() {
+    if (loading) return;
+    if (blocked) {
+      setRejecting(true);
+      return;
+    }
+    emit('click');
+    onSend(value);
+  };
+  return (0,jsx_runtime_.jsxs)(base_message_composer, message_composer_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'message-composer')
+  }, restProps, {
+    children: [attachments && (0,jsx_runtime_.jsx)("div", {
+      className: 'message-composer-attachments',
+      children: attachments
+    }), (0,jsx_runtime_.jsxs)("div", {
+      className: 'message-composer-row',
+      children: [leading, (0,jsx_runtime_.jsx)(base_message_composer.Textarea, {
+        className: 'message-composer-textarea',
+        "aria-label": label,
+        placeholder: placeholder,
+        disabled: disabled,
+        autoFocus: autoFocus,
+        maxLength: maxLength,
+        value: value,
+        onChange: function onChange(e) {
+          return setValue(e.target.value);
+        }
+      }), (0,jsx_runtime_.jsx)(base_message_composer.Send, {
+        className: 'message-composer-send',
+        "aria-label": sendLabel,
+        "aria-disabled": blocked || undefined,
+        "aria-busy": loading || undefined,
+        "data-rejecting": rejecting || undefined,
+        onClick: handleSend,
+        // 막힌 누름마다 흔들림을 처음부터 다시 돌리려고, 끝나면 표시를 지운다
+        onAnimationEnd: function onAnimationEnd() {
+          return setRejecting(false);
+        },
+        children: (0,jsx_runtime_.jsx)("span", {
+          className: 'message-composer-send-circle',
+          children: loading ? (0,jsx_runtime_.jsx)(spinner/* default */.A, {
+            className: 'message-composer-spinner'
+          }) : (0,jsx_runtime_.jsx)(icon/* default */.A, {
+            name: 'paper-plane-tilt',
+            weight: 'fill',
+            size: 's'
+          })
+        })
+      })]
+    })]
+  }));
+});
+MessageComposer.displayName = 'MessageComposer';
+/* harmony default export */ const message_composer = (MessageComposer);
+
+/***/ },
+
+/***/ 345
+(__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;
+};
+
+
+
+var MessageRootBase = /*#__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)("ol", __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)('nuri-theme base-message root', className)
+  }, restProps));
+});
+MessageRootBase.displayName = 'MessageRoot';
+/** 대화 한 줄. 메시지와 상태 줄이 모두 이것이다 */
+var MessageItem = /*#__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)("li", __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)('nuri-theme base-message item', className)
+  }, restProps));
+});
+MessageItem.displayName = 'MessageItem';
+var MessageBubble = /*#__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)("div", __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)('nuri-theme base-message bubble', className)
+  }, restProps));
+});
+MessageBubble.displayName = 'MessageBubble';
+var MessageRoot = Object.assign(MessageRootBase, {
+  Item: MessageItem,
+  Bubble: MessageBubble
+});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MessageRoot);
+
+/***/ },
+
+/***/ 6524
+(__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);
+/* harmony import */ var _base_message__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(345);
+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;
+};
+
+
+
+
+/** 대화 가운데 상태·날짜 줄. MessageThread 안에 둔다 */
+var MessageEvent = /*#__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)(_base_message__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A.Item, __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, 'message-event')
+  }, restProps));
+});
+MessageEvent.displayName = 'MessageEvent';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MessageEvent);
+
+/***/ },
+
+/***/ 6178
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
 /* harmony export */ __nuri_require__.d(__webpack_exports__, {
@@ -2771,9 +4488,7 @@ var iconProps = {
 /* 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);
-/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(7335);
-/* harmony import */ var _base_icon__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(9896);
-/* harmony import */ var _icon_props__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(6722);
+/* harmony import */ var _base_message__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(345);
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -2796,29 +4511,27 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-
-
-var Icon = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__/* .getMergedProps */ .p)(props, _icon_props__WEBPACK_IMPORTED_MODULE_5__/* .iconProps */ .u1),
-    className = _a.className,
-    restProps = __rest(_a, ["className"]);
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_icon__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, __assign({
+/** 대화 목록. children 은 Message · MessageEvent 다 */
+var MessageThread = /*#__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)(_base_message__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A, __assign({
     ref: ref,
-    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, 'icon')
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, 'message-thread')
   }, restProps));
 });
-Icon.displayName = 'Icon';
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);
+MessageThread.displayName = 'MessageThread';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MessageThread);
 
 /***/ },
 
-/***/ 6302
+/***/ 8154
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
 
 // EXPORTS
 __nuri_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ spinner)
+  A: () => (/* binding */ message)
 });
 
 // EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
@@ -2829,7 +4542,27 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ =
 var classNames = __nuri_require__(3274);
 // EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
 var getMergedProps = __nuri_require__(7335);
-;// ./components/loading/spinner/base-spinner.tsx
+// EXTERNAL MODULE: ./components/message/base-message.tsx
+var base_message = __nuri_require__(345);
+;// ./components/message/message-props.ts
+/** 말풍선 자리. `end` 는 내가 보낸 메시지다 */
+var side = ['start', 'end'];
+/** 등장 모션 세기(ADR 0008). 방금 보내거나 받은 메시지에만 준다 */
+var motion = ['weak', 'strong'];
+var messageProps = {
+  side: {
+    type: 'className',
+    className: 'side',
+    values: side,
+    "default": 'start'
+  },
+  motion: {
+    type: 'className',
+    className: 'motion',
+    values: motion
+  }
+};
+;// ./components/message/message.tsx
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -2851,139 +4584,43 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-var BaseSpinner = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
-  var className = props.className,
-    restProps = __rest(props, ["className"]);
-  return (0,jsx_runtime_.jsx)("div", __assign({
-    ref: ref,
-    className: (0,classNames/* classNames */.x)('nuri-theme base-spinner', className)
-  }, restProps, {
-    children: (0,jsx_runtime_.jsx)("div", {
-      className: 'loading-indicator-ring',
-      children: [0, 1, 2, 3].map(function (i) {
-        return (0,jsx_runtime_.jsx)("div", {
-          className: 'loading-indicator-single-ring'
-        }, i);
-      })
-    })
-  }));
-});
-BaseSpinner.displayName = 'BaseSpinner';
-/* harmony default export */ const base_spinner = (BaseSpinner);
-;// ./components/loading/spinner/spinner-props.ts
-var spinnerProps = {};
-;// ./components/loading/spinner/spinner.tsx
-var spinner_assign = undefined && undefined.__assign || function () {
-  spinner_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 spinner_assign.apply(this, arguments);
-};
-var spinner_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;
-};
-
-
-
 
 
 
-var Spinner = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
-  var _a = (0,getMergedProps/* getMergedProps */.p)(props, spinnerProps),
+/** 말풍선 하나. MessageThread 안에 둔다 */
+var Message = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, messageProps),
     className = _a.className,
-    restProps = spinner_rest(_a, ["className"]);
-  return (0,jsx_runtime_.jsx)(base_spinner, spinner_assign({
+    name = _a.name,
+    time = _a.time,
+    dateTime = _a.dateTime,
+    media = _a.media,
+    children = _a.children,
+    restProps = __rest(_a, ["className", "name", "time", "dateTime", "media", "children"]);
+  // 글 없이 썸네일만 있으면 안쪽 여백을 줄인다
+  var mediaOnly = Boolean(media) && !children;
+  return (0,jsx_runtime_.jsxs)(base_message/* default */.A.Item, __assign({
     ref: ref,
-    className: (0,classNames/* classNames */.x)(className, 'component-loading-container')
-  }, restProps));
+    className: (0,classNames/* classNames */.x)(className, 'message')
+  }, restProps, {
+    children: [name && (0,jsx_runtime_.jsx)("span", {
+      className: 'message-name',
+      children: name
+    }), (0,jsx_runtime_.jsxs)("div", {
+      className: 'message-row',
+      children: [(0,jsx_runtime_.jsxs)(base_message/* default */.A.Bubble, {
+        className: (0,classNames/* classNames */.x)('message-bubble', mediaOnly && 'media-only'),
+        children: [children, media]
+      }), time && (0,jsx_runtime_.jsx)("time", {
+        className: 'message-time',
+        dateTime: dateTime,
+        children: time
+      })]
+    })]
+  }));
 });
-Spinner.displayName = 'Spinner';
-/* harmony default export */ const spinner = (Spinner);
-
-/***/ },
-
-/***/ 4804
-(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
-
-/* harmony export */ __nuri_require__.d(__webpack_exports__, {
-/* harmony export */   _: () => (/* binding */ LogProvider),
-/* harmony export */   e: () => (/* binding */ useLogEmitter)
-/* 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);
-var _a;
-
-
-// 진입점(`/logging`, `/cta-button`, 루트)마다 이 파일이 따로 들어가므로 context 는 전역 키 하나에 둔다.
-var CONTEXT_KEY = Symbol["for"]('@nurihaus/web-design-system/log-provider');
-var registry = globalThis;
-var LogContext = (_a = registry[CONTEXT_KEY]) !== null && _a !== void 0 ? _a : registry[CONTEXT_KEY] = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(null);
-var LogProvider = function LogProvider(props) {
-  var onEvent = props.onEvent,
-    children = props.children;
-  // context 값이 Provider 렌더마다 바뀌면 track 을 단 컴포넌트가 모두 다시 그려진다. 최신 onEvent 는 ref 로 읽는다.
-  var onEventRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(onEvent);
-  onEventRef.current = onEvent;
-  var emit = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (event) {
-    // 로그 수집기가 던져도 클릭·열기 같은 UI 동작은 이어져야 한다.
-    try {
-      onEventRef.current(event);
-    } catch (error) {
-      console.error('[LogProvider] onEvent threw', error);
-    }
-  }, []);
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(LogContext.Provider, {
-    value: emit,
-    children: children
-  });
-};
-LogProvider.displayName = 'LogProvider';
-/** LogProvider 가 둔 emit 함수. Provider 밖이면 null 이다. */
-var useLogEmitter = function useLogEmitter() {
-  return (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(LogContext);
-};
-
-/***/ },
-
-/***/ 7111
-(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
-
-/* harmony export */ __nuri_require__.d(__webpack_exports__, {
-/* harmony export */   e: () => (/* binding */ useLog)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(1041);
-/* harmony import */ var _log_context__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(4804);
-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);
-};
-
-
-
-/** 컴포넌트 밖의 사용 로그를 남긴다. LogProvider 밖이면 아무것도 하지 않는다. */
-var useLog = function useLog() {
-  var emit = (0,_log_context__WEBPACK_IMPORTED_MODULE_1__/* .useLogEmitter */ .e)();
-  return (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {
-    return emit === null || emit === void 0 ? void 0 : emit(__assign(__assign({}, event), {
-      timestamp: Date.now()
-    }));
-  }, [emit]);
-};
+Message.displayName = 'Message';
+/* harmony default export */ const message = (Message);
 
 /***/ },
 
@@ -3360,29 +4997,183 @@ var Modal = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(funct
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
           className: 'modal-title',
           children: title
-        }), showCloseIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Close, {
-          className: 'modal-close-icon',
-          "aria-label": "\uB2EB\uAE30",
-          asChild: true,
-          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
-            children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
-          })
+        }), showCloseIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Close, {
+          className: 'modal-close-icon',
+          "aria-label": "\uB2EB\uAE30",
+          asChild: true,
+          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
+            children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
+          })
+        })]
+      }), description && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Description, {
+        className: 'modal-description',
+        children: description
+      }), children && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
+        className: 'modal-body',
+        children: children
+      }), footer && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
+        className: 'modal-footer',
+        children: footer
+      })]
+    })]
+  });
+});
+Modal.displayName = 'Modal';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Modal);
+
+/***/ },
+
+/***/ 2980
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ notice)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: ./components/button/cta-button.tsx
+var cta_button = __nuri_require__(910);
+// EXTERNAL MODULE: ./components/icon/icon.tsx
+var icon = __nuri_require__(3547);
+;// ./components/notice/base-notice.tsx
+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;
+};
+
+
+
+var BaseNotice = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,jsx_runtime_.jsx)("div", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-notice', className)
+  }, restProps));
+});
+BaseNotice.displayName = 'BaseNotice';
+/* harmony default export */ const base_notice = (BaseNotice);
+;// ./components/notice/notice-props.ts
+var variant = ['neutral', 'success', 'warning', 'danger'];
+/** 나타날 때 모션 세기. 주지 않으면 움직이지 않는다 (ADR 0008) */
+var motion = ['weak', 'strong'];
+var noticeProps = {
+  variant: {
+    type: 'className',
+    className: 'variant',
+    values: variant,
+    "default": 'neutral'
+  },
+  motion: {
+    type: 'className',
+    className: 'motion',
+    values: motion
+  }
+};
+;// ./components/notice/notice.tsx
+var notice_assign = undefined && undefined.__assign || function () {
+  notice_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 notice_assign.apply(this, arguments);
+};
+var notice_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;
+};
+
+
+
+
+
+
+
+
+var VARIANT_ICON = {
+  neutral: 'info',
+  success: 'check-circle',
+  warning: 'warning',
+  danger: 'warning'
+};
+/** 카드·시트 안에 머무는 안내. 스스로 사라지는 알림은 Toast 다 */
+var Notice = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a;
+  var _b = (0,getMergedProps/* getMergedProps */.p)(props, noticeProps),
+    className = _b.className,
+    title = _b.title,
+    children = _b.children,
+    action = _b.action,
+    restProps = notice_rest(_b, ["className", "title", "children", "action"]);
+  var variant = (_a = props.variant) !== null && _a !== void 0 ? _a : 'neutral';
+  return (0,jsx_runtime_.jsxs)(base_notice, notice_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'notice'),
+    // danger 는 바로 읽어 준다. 쓰는 쪽이 role 을 주면 그 값이 앞선다
+    role: variant === 'danger' ? 'alert' : undefined
+  }, restProps, {
+    children: [(0,jsx_runtime_.jsx)(icon/* default */.A, {
+      className: 'notice-icon',
+      name: VARIANT_ICON[variant],
+      size: 's',
+      weight: 'fill'
+    }), (0,jsx_runtime_.jsxs)("div", {
+      className: 'notice-body',
+      children: [(0,jsx_runtime_.jsxs)("div", {
+        className: 'notice-text',
+        children: [title && (0,jsx_runtime_.jsx)("div", {
+          className: 'notice-title',
+          children: title
+        }), (0,jsx_runtime_.jsx)("div", {
+          className: 'notice-description',
+          children: children
         })]
-      }), description && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Description, {
-        className: 'modal-description',
-        children: description
-      }), children && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-        className: 'modal-body',
-        children: children
-      }), footer && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-        className: 'modal-footer',
-        children: footer
+      }), action && (0,jsx_runtime_.jsx)(cta_button/* default */.A, {
+        className: 'notice-action',
+        size: 'xs',
+        variant: 'neutral',
+        text: action.label,
+        // CTAButton 은 loading 중에도 누름을 받으므로 처리 중에는 다시 부르지 않는다
+        onClick: action.loading ? undefined : action.onClick,
+        loading: action.loading,
+        track: action.track,
+        trackProps: action.trackProps
       })]
     })]
-  });
+  }));
 });
-Modal.displayName = 'Modal';
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Modal);
+Notice.displayName = 'Notice';
+/* harmony default export */ const notice = (Notice);
 
 /***/ },
 
@@ -3662,6 +5453,24 @@ var base_button = __nuri_require__(8933);
 // EXTERNAL MODULE: ./components/core/composer/index.tsx
 var composer = __nuri_require__(2777);
 ;// ./components/radio/base-radio.tsx
+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;
+};
 
 
 
@@ -3703,13 +5512,15 @@ RadioRootBase.displayName = 'RadioRoot';
 var RadioOptionGroup = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var children = props.children,
     asChild = props.asChild,
-    className = props.className;
+    className = props.className,
+    restProps = __rest(props, ["children", "asChild", "className"]);
   var Comp = asChild ? composer/* default */.A : 'ul';
-  return (0,jsx_runtime_.jsx)(Comp, {
+  return (0,jsx_runtime_.jsx)(Comp, __assign({
     ref: ref,
-    className: (0,classNames/* classNames */.x)('nuri-theme base-radio option-group', className),
+    className: (0,classNames/* classNames */.x)('nuri-theme base-radio option-group', className)
+  }, restProps, {
     children: children
-  });
+  }));
 });
 RadioOptionGroup.displayName = 'RadioOptionGroup';
 var RadioButton = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
@@ -3733,6 +5544,31 @@ var RadioButton = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_r
   });
 });
 RadioButton.displayName = 'RadioButton';
+// 칩 전체가 라디오 하나다. 점 없이 라벨만 그리고 role·aria-checked 로 선택을 알린다.
+var RadioChip = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    id = props.id,
+    disabled = props.disabled,
+    restProps = __rest(props, ["className", "id", "disabled"]);
+  var _a = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.useContext)(RadioContext),
+    selected = _a.selected,
+    onChange = _a.onChange;
+  var checked = id === selected;
+  return (0,jsx_runtime_.jsx)(base_button/* default */.A, __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-radio chip', className),
+    type: 'button',
+    role: 'radio',
+    "aria-checked": checked,
+    "data-state": checked ? 'checked' : 'unchecked',
+    disabled: disabled,
+    "data-disabled": disabled || undefined,
+    onClick: function onClick() {
+      return onChange(id);
+    }
+  }, restProps));
+});
+RadioChip.displayName = 'RadioChip';
 var RadioIndicator = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var children = props.children,
     asChild = props.asChild,
@@ -3771,13 +5607,21 @@ RadioLabel.displayName = 'RadioLabel';
 var RadioRoot = Object.assign(RadioRootBase, {
   OptionGroup: RadioOptionGroup,
   Button: RadioButton,
+  Chip: RadioChip,
   Indicator: RadioIndicator,
   Label: RadioLabel
 });
 /* harmony default export */ const base_radio = (RadioRoot);
 ;// ./components/radio/radio-props.ts
-// CSS 가 아직 크기·방향을 나누지 않아 className 으로 바뀌는 prop 이 없다.
-var radioProps = {};
+var variant = ['default', 'chip'];
+var radioProps = {
+  variant: {
+    type: 'className',
+    className: 'variant',
+    values: variant,
+    "default": 'default'
+  }
+};
 ;// ./components/radio/radio.tsx
 
 
@@ -3786,18 +5630,60 @@ var radioProps = {};
 
 
 
+// 칩은 버튼 자체가 role='radio' 라 li 는 목록 의미를 빼고 자리만 잡는다.
+var ChipOption = function ChipOption(props) {
+  var option = props.option;
+  return (0,jsx_runtime_.jsx)("li", {
+    className: 'radio radio-option',
+    role: 'none',
+    children: (0,jsx_runtime_.jsx)(base_radio.Chip, {
+      className: 'radio radio-chip',
+      id: option.id,
+      disabled: option.disabled,
+      children: option.label
+    })
+  });
+};
+ChipOption.displayName = 'RadioChipOption';
+var DefaultOption = function DefaultOption(props) {
+  var option = props.option;
+  return (0,jsx_runtime_.jsxs)("li", {
+    className: 'radio radio-option',
+    children: [(0,jsx_runtime_.jsx)(base_radio.Button, {
+      className: 'radio radio-button',
+      id: option.id,
+      disabled: option.disabled,
+      children: (0,jsx_runtime_.jsx)(base_radio.Indicator, {
+        className: 'radio radio-indicator',
+        id: option.id,
+        asChild: true,
+        children: (0,jsx_runtime_.jsx)("div", {})
+      })
+    }), (0,jsx_runtime_.jsx)(base_radio.Label, {
+      className: 'radio radio-label',
+      id: option.id,
+      disabled: option.disabled,
+      children: option.label
+    })]
+  });
+};
+DefaultOption.displayName = 'RadioDefaultOption';
 var Radio = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var _a = (0,getMergedProps/* getMergedProps */.p)(props, radioProps),
     className = _a.className,
     selected = _a.selected,
     _onChange = _a.onChange,
     options = _a.options,
+    label = _a.label,
     track = _a.track,
     trackProps = _a.trackProps;
+  // getMergedProps 가 variant 를 클래스로 바꾸며 지우므로 원래 props 에서 읽는다.
+  var isChip = props.variant === 'chip';
   var emit = (0,useTrack/* useTrack */.n)('Radio', {
     track: track,
     trackProps: trackProps
   });
+  var Option = isChip ? ChipOption : DefaultOption;
   return (0,jsx_runtime_.jsx)(base_radio, {
     options: options,
     selected: selected,
@@ -3808,25 +5694,12 @@ var Radio = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
     children: (0,jsx_runtime_.jsx)(base_radio.OptionGroup, {
       ref: ref,
       className: (0,classNames/* classNames */.x)(className, 'radio radio-group'),
+      // 칩은 버튼마다 role='radio' 라 묶음도 radiogroup 이다. 기본형은 목록 그대로 둔다.
+      role: isChip ? 'radiogroup' : undefined,
+      "aria-label": label,
       children: options.map(function (option) {
-        return (0,jsx_runtime_.jsxs)("li", {
-          className: 'radio radio-option',
-          children: [(0,jsx_runtime_.jsx)(base_radio.Button, {
-            className: 'radio radio-button',
-            id: option.id,
-            disabled: option.disabled,
-            children: (0,jsx_runtime_.jsx)(base_radio.Indicator, {
-              className: 'radio radio-indicator',
-              id: option.id,
-              asChild: true,
-              children: (0,jsx_runtime_.jsx)("div", {})
-            })
-          }), (0,jsx_runtime_.jsx)(base_radio.Label, {
-            className: 'radio radio-label',
-            id: option.id,
-            disabled: option.disabled,
-            children: option.label
-          })]
+        return (0,jsx_runtime_.jsx)(Option, {
+          option: option
         }, option.id);
       })
     })
@@ -4774,6 +6647,139 @@ Tabs.displayName = 'Tabs';
 
 /***/ },
 
+/***/ 8205
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ tag)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: ./components/icon/icon.tsx
+var icon = __nuri_require__(3547);
+;// ./components/tag/base-tag.tsx
+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;
+};
+
+
+
+var TagRootBase = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,jsx_runtime_.jsx)("span", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-tag', className)
+  }, restProps));
+});
+TagRootBase.displayName = 'TagRoot';
+var TagRemove = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    restProps = __rest(props, ["className"]);
+  return (0,jsx_runtime_.jsx)("button", __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-tag remove', className),
+    type: 'button'
+  }, restProps));
+});
+TagRemove.displayName = 'TagRemove';
+var TagRoot = Object.assign(TagRootBase, {
+  Remove: TagRemove
+});
+/* harmony default export */ const base_tag = (TagRoot);
+;// ./components/tag/tag-props.ts
+// 크기·변형이 없다. 태그는 한 모양이다(높이 --label-height-s).
+var tagProps = {};
+;// ./components/tag/tag.tsx
+var tag_assign = undefined && undefined.__assign || function () {
+  tag_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 tag_assign.apply(this, arguments);
+};
+var tag_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;
+};
+
+
+
+
+
+
+
+
+/** 고른 값 하나. onRemove 를 주면 지우기 버튼이 붙는다 */
+var Tag = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, tagProps),
+    className = _a.className,
+    text = _a.text,
+    onRemove = _a.onRemove,
+    removeLabel = _a.removeLabel,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = tag_rest(_a, ["className", "text", "onRemove", "removeLabel", "track", "trackProps"]);
+  var emit = (0,useTrack/* useTrack */.n)('Tag', {
+    track: track,
+    trackProps: trackProps
+  });
+  return (0,jsx_runtime_.jsxs)(base_tag, tag_assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)(className, 'tag', onRemove ? 'removable' : undefined)
+  }, restProps, {
+    children: [text, onRemove && (0,jsx_runtime_.jsx)(base_tag.Remove, {
+      className: 'tag-remove',
+      "aria-label": removeLabel,
+      onClick: function onClick() {
+        emit('click');
+        onRemove();
+      },
+      children: (0,jsx_runtime_.jsx)(icon/* default */.A, {
+        name: 'x',
+        size: 'xs'
+      })
+    })]
+  }));
+});
+Tag.displayName = 'Tag';
+/* harmony default export */ const tag = (Tag);
+
+/***/ },
+
 /***/ 4794
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
@@ -5850,6 +7856,24 @@ var widthProp = function widthProp(defaultValue) {
 
 /***/ },
 
+/***/ 1176
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   Q: () => (/* binding */ fillLinkChild)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(1041);
+
+/**
+ * asChild 로 받은 요소 하나(`<a>`·라우터 Link)에 컴포넌트의 내용을 채운다.
+ * 요소가 아니면 null — 쓰는 쪽은 null 이면 자기 기본 요소를 그린다.
+ */
+var fillLinkChild = function fillLinkChild(asChild, children, content) {
+  return asChild && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(children) ? /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(children, undefined, content) : null;
+};
+
+/***/ },
+
 /***/ 7335
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
@@ -6039,7 +8063,7 @@ var x = (y) => {
 	var x = {}; __nuri_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Fragment), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Fragment), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useId"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useId), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -6170,6 +8194,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/icon-button/icon-button.tsx + 2 modules
+var icon_button = __nuri_require__(8173);
 // EXTERNAL MODULE: ./components/callout/callout.tsx
 var callout = __nuri_require__(1163);
 // EXTERNAL MODULE: ./components/badge/option-badge.tsx
@@ -6412,10 +8438,58 @@ var bottom_nav = __nuri_require__(1768);
 var step_progress = __nuri_require__(7131);
 // EXTERNAL MODULE: ./components/chip-group/chip-group.tsx + 2 modules
 var chip_group = __nuri_require__(3894);
+// EXTERNAL MODULE: ./components/card/card.tsx + 2 modules
+var card = __nuri_require__(329);
+// EXTERNAL MODULE: ./components/list/list-group.tsx
+var list_group = __nuri_require__(2779);
+// EXTERNAL MODULE: ./components/list/list-row.tsx
+var list_row = __nuri_require__(2082);
+// EXTERNAL MODULE: ./components/description-list/description-list.tsx + 2 modules
+var description_list = __nuri_require__(6143);
+// EXTERNAL MODULE: ./components/notice/notice.tsx + 2 modules
+var notice = __nuri_require__(2980);
+// EXTERNAL MODULE: ./components/empty-state/empty-state.tsx + 2 modules
+var empty_state = __nuri_require__(5589);
+// EXTERNAL MODULE: ./components/tag/tag.tsx + 2 modules
+var tag = __nuri_require__(8205);
+// EXTERNAL MODULE: ./components/message/message-thread.tsx
+var message_thread = __nuri_require__(6178);
+// EXTERNAL MODULE: ./components/message/message.tsx + 1 modules
+var message = __nuri_require__(8154);
+// EXTERNAL MODULE: ./components/message/message-event.tsx
+var message_event = __nuri_require__(6524);
+// EXTERNAL MODULE: ./components/message-composer/message-composer.tsx + 2 modules
+var message_composer = __nuri_require__(2045);
+// EXTERNAL MODULE: ./components/bottom-bar/bottom-bar.tsx + 2 modules
+var bottom_bar = __nuri_require__(3577);
+// EXTERNAL MODULE: ./components/media/media-thumbnail.tsx + 1 modules
+var media_thumbnail = __nuri_require__(946);
+// EXTERNAL MODULE: ./components/media/media-viewer.tsx
+var media_viewer = __nuri_require__(4268);
 // EXTERNAL MODULE: ./components/logging/logging.tsx
 var logging = __nuri_require__(7111);
 // EXTERNAL MODULE: ./components/logging/log-context.tsx
 var log_context = __nuri_require__(4804);
+;// external "motion/react"
+
+;// ./components/motion/motion-provider.tsx
+
+
+// DOM 을 그리지 않아 base- 로 짓지 않는다. base-*.tsx 는 forwardRef 가 있어야 빌드를 통과한다(R2). log-context.tsx 와 같다.
+var MotionProvider = function MotionProvider(props) {
+  var _a = props.reducedMotion,
+    reducedMotion = _a === void 0 ? 'user' : _a,
+    children = props.children;
+  return (0,jsx_runtime_.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_de020c0a_LazyMotion__, {
+    features: __WEBPACK_EXTERNAL_MODULE_motion_react_de020c0a_domMax__,
+    strict: true,
+    children: (0,jsx_runtime_.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_de020c0a_MotionConfig__, {
+      reducedMotion: reducedMotion,
+      children: children
+    })
+  });
+};
+MotionProvider.displayName = 'MotionProvider';
 ;// ./tokens/generated/primitive.ts
 // tokens/figma.json 에서 생성됨 — 손으로 고치지 않는다. `npm run tokens`
 var primitive = {
@@ -6788,6 +8862,160 @@ var semanticAdmin = {
     }
   }
 };
+;// ./tokens/generated/motion.ts
+// tokens/motion.json 에서 생성됨 — 손으로 고치지 않는다. `yarn tokens`
+/** 원시값. 컴포넌트는 motionTokens 만 쓴다(빌드 R17). 시간은 초다(motion 의 transition 단위). */
+var motionPresets = {
+  "duration": {
+    "xs": 0.12,
+    "s": 0.16,
+    "m": 0.24,
+    "l": 0.35,
+    "xl": 0.5
+  },
+  "ease": {
+    "out": [0.25, 0.1, 0.25, 1],
+    "in": [0.4, 0, 1, 1],
+    "in-out": [0.4, 0, 0.1, 1],
+    "back": [0.34, 1.56, 0.64, 1],
+    "symmetric": [0.5, 0, 0.5, 1],
+    "linear": "linear"
+  },
+  "spring": {
+    "rapid": {
+      "type": "spring",
+      "stiffness": 1000,
+      "damping": 55,
+      "mass": 1
+    },
+    "quick": {
+      "type": "spring",
+      "stiffness": 800,
+      "damping": 55,
+      "mass": 1
+    },
+    "small": {
+      "type": "spring",
+      "stiffness": 480,
+      "damping": 50,
+      "mass": 1
+    },
+    "medium": {
+      "type": "spring",
+      "stiffness": 270,
+      "damping": 25,
+      "mass": 1
+    },
+    "basic": {
+      "type": "spring",
+      "stiffness": 200,
+      "damping": 30,
+      "mass": 1
+    },
+    "large": {
+      "type": "spring",
+      "stiffness": 100,
+      "damping": 15,
+      "mass": 1
+    },
+    "bounce": {
+      "type": "spring",
+      "stiffness": 300,
+      "damping": 15,
+      "mass": 1
+    },
+    "slow": {
+      "type": "spring",
+      "stiffness": 70,
+      "damping": 20,
+      "mass": 1
+    }
+  }
+};
+/** 의미 토큰. 참조를 실제 값으로 풀었다. 시간은 초라 motion 의 transition 에 그대로 넣는다. */
+var motionTokens = {
+  "press": {
+    "duration": 0.12,
+    "ease": [0.25, 0.1, 0.25, 1],
+    "scale": 0.98,
+    "dim": 0.12
+  },
+  "confirm": {
+    "weak": {
+      "type": "spring",
+      "stiffness": 480,
+      "damping": 50,
+      "mass": 1
+    },
+    "strong": {
+      "type": "spring",
+      "stiffness": 300,
+      "damping": 15,
+      "mass": 1
+    }
+  },
+  "reject": {
+    "duration": 0.35,
+    "ease": "linear",
+    "distance": "2px"
+  },
+  "enter": {
+    "duration": 0.24,
+    "ease": [0.25, 0.1, 0.25, 1],
+    "strong": {
+      "type": "spring",
+      "stiffness": 300,
+      "damping": 15,
+      "mass": 1
+    },
+    "scale-from": 0.96,
+    "offset": "16px",
+    "pop-scale": 0.6
+  },
+  "exit": {
+    "duration": 0.16,
+    "ease": [0.4, 0, 1, 1]
+  },
+  "appear": {
+    "duration": 0.24,
+    "ease": [0.25, 0.1, 0.25, 1]
+  },
+  "reveal": {
+    "duration": 0.24,
+    "ease": [0.25, 0.1, 0.25, 1],
+    "gap": 0.08
+  },
+  "progress": {
+    "duration": 0.24,
+    "spring": {
+      "type": "spring",
+      "stiffness": 200,
+      "damping": 30,
+      "mass": 1
+    }
+  },
+  "expand": {
+    "duration": 0.24,
+    "ease": [0.25, 0.1, 0.25, 1],
+    "rotate": "180deg"
+  },
+  "dismiss-on-scroll": {
+    "duration": 0.24,
+    "ease": [0.25, 0.1, 0.25, 1],
+    "threshold": "1px"
+  },
+  "attention": {
+    "shine": 2.5,
+    "blink": 0.3,
+    "float-distance": "3px"
+  },
+  "busy": {
+    "ring": 1.2,
+    "ring-ease": [0.5, 0, 0.5, 1],
+    "shimmer": 1.5,
+    "dots": 0.6
+  }
+};
 // EXTERNAL MODULE: ./tokens/generated/colors.ts
 var colors = __nuri_require__(7232);
 ;// ./index.tsx
@@ -6817,6 +9045,22 @@ var colors = __nuri_require__(7232);
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -6829,24 +9073,38 @@ var colors = __nuri_require__(7232);
 
 
 const __webpack_exports__colors = colors/* colors */.T;
-export { inline_loading as InlineLoading, overlay_loading as OverlayLoading, __webpack_exports__colors as colors, primitive, semanticAdmin, semanticApp };
+export { inline_loading as InlineLoading, MotionProvider, overlay_loading as OverlayLoading, __webpack_exports__colors as colors, motionPresets, motionTokens, primitive, semanticAdmin, semanticApp };
 export const Avatar = avatar/* default */.A;
+export const BottomBar = bottom_bar/* 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 Card = card/* default */.A;
 export const Checkbox = check_box/* default */.A;
 export const ChipGroup = chip_group/* default */.A;
 export const CollapsibleMenu = collapsible_menu/* default */.A;
 export const DataTable = data_table/* default */.A;
+export const DescriptionList = description_list/* default */.A;
 export const Drawer = drawer/* default */.A;
 export const DropDown = drop_down/* default */.A;
+export const EmptyState = empty_state/* default */.A;
 export const Icon = icon/* default */.A;
+export const IconButton = icon_button/* default */.A;
 export const IconTextBadge = icon_text_badge/* default */.A;
 export const IconTextOptionBadge = icon_text_option_badge/* default */.A;
+export const ListGroup = list_group/* default */.A;
+export const ListRow = list_row/* default */.A;
 export const LogProvider = log_context/* LogProvider */._;
+export const MediaThumbnail = media_thumbnail/* default */.A;
+export const MediaViewer = media_viewer/* default */.A;
+export const Message = message/* default */.A;
+export const MessageComposer = message_composer/* default */.A;
+export const MessageEvent = message_event/* default */.A;
+export const MessageThread = message_thread/* default */.A;
 export const Modal = modal/* default */.A;
 export const ModalWithDoubleButton = modal_with_double_button/* default */.A;
+export const Notice = notice/* default */.A;
 export const OptionBadge = option_badge/* default */.A;
 export const Pagination = pagination/* default */.A;
 export const Radio = radio_radio/* default */.A;
@@ -6855,6 +9113,7 @@ export const Spinner = spinner/* default */.A;
 export const StepProgress = step_progress/* default */.A;
 export const Switch = switch_switch/* default */.A;
 export const Tabs = tabs/* default */.A;
+export const Tag = tag/* default */.A;
 export const Text = text_text/* default */.A;
 export const TextArea = text_area/* default */.A;
 export const TextField = text_field/* default */.A;