@nurihaus/web-design-system 3.8.0 → 3.9.0

package/dist/index.js

@@ -1105,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++) {
@@ -1137,8 +1138,9 @@ 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,
@@ -1156,26 +1158,26 @@ var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
     trackProps: trackProps
   });
   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_5__/* ["default"] */ .A, {
+    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 linkChild = asChild && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.isValidElement)(children) ? children : null;
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_button__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, __assign({
+  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, {}),
-    asChild: linkChild !== null,
+    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {}),
+    asChild: link !== null,
     // 링크는 로딩을 그리지 않는다. 그리면 Spinner 가 링크 자리를 차지한다
-    loading: linkChild ? undefined : loading,
+    loading: link ? undefined : loading,
     onClick: function onClick(event) {
       emit('click');
       _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
     }
   }, restProps, {
-    children: linkChild ? /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(linkChild, undefined, content) : content
+    children: link !== null && link !== void 0 ? link : content
   }));
 });
 CTAButton.displayName = 'CTAButton';
@@ -2905,6 +2907,162 @@ EmptyState.displayName = '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__) {
 
@@ -3402,10 +3560,11 @@ var listRowProps = {};
 /* 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 _icon_icon__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(3547);
-/* harmony import */ var _base_list__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(9497);
-/* harmony import */ var _list_props__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(1212);
+/* 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++) {
@@ -3432,9 +3591,10 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 /** 목록 한 줄. 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_4__/* .getMergedProps */ .p)(props, _list_props__WEBPACK_IMPORTED_MODULE_7__/* .listRowProps */ .R),
+  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,
@@ -3451,8 +3611,9 @@ var ListRow = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(fun
     track: track,
     trackProps: trackProps
   });
-  var linkChild = asChild && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.isValidElement)(children) ? children : null;
-  var showChevron = chevron !== null && chevron !== void 0 ? chevron : linkChild !== null || onClick !== undefined;
+  // 링크 요소를 받았을 때만 링크 행이다. 아니면 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',
@@ -3469,7 +3630,7 @@ var ListRow = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(fun
     }), 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_5__/* ["default"] */ .A, {
+    }) : 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'
@@ -3480,14 +3641,15 @@ var ListRow = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(fun
     type: 'button',
     children: content
   }) : null;
-  var rowElement = linkChild ? /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(linkChild, undefined, content) : buttonRow;
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_list__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.Row, __assign({
+  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(linkChild ? 'navigate' : 'click');
+      emit(link ? 'navigate' : 'click');
       onClick === null || onClick === void 0 ? void 0 : onClick(event);
     } : undefined
   }, restProps, {
@@ -4126,9 +4288,11 @@ var MessageComposer = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     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", "track", "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,
@@ -4167,6 +4331,8 @@ var MessageComposer = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         "aria-label": label,
         placeholder: placeholder,
         disabled: disabled,
+        autoFocus: autoFocus,
+        maxLength: maxLength,
         value: value,
         onChange: function onChange(e) {
           return setValue(e.target.value);
@@ -4997,7 +5163,9 @@ var Notice = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         size: 'xs',
         variant: 'neutral',
         text: action.label,
-        onClick: action.onClick,
+        // CTAButton 은 loading 중에도 누름을 받으므로 처리 중에는 다시 부르지 않는다
+        onClick: action.loading ? undefined : action.onClick,
+        loading: action.loading,
         track: action.track,
         trackProps: action.trackProps
       })]
@@ -7688,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__) {
 
@@ -8008,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
@@ -8881,6 +9069,7 @@ var colors = __nuri_require__(7232);
 
 
 
+
 
 
 const __webpack_exports__colors = colors/* colors */.T;
@@ -8901,6 +9090,7 @@ 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;

package/dist/list-row.js

@@ -26,10 +26,11 @@ var listRowProps = {};
 /* 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 _icon_icon__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(3547);
-/* harmony import */ var _base_list__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(9497);
-/* harmony import */ var _list_props__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(1212);
+/* 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++) {
@@ -56,9 +57,10 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 /** 목록 한 줄. 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_4__/* .getMergedProps */ .p)(props, _list_props__WEBPACK_IMPORTED_MODULE_7__/* .listRowProps */ .R),
+  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,
@@ -75,8 +77,9 @@ var ListRow = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(fun
     track: track,
     trackProps: trackProps
   });
-  var linkChild = asChild && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.isValidElement)(children) ? children : null;
-  var showChevron = chevron !== null && chevron !== void 0 ? chevron : linkChild !== null || onClick !== undefined;
+  // 링크 요소를 받았을 때만 링크 행이다. 아니면 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',
@@ -93,7 +96,7 @@ var ListRow = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(fun
     }), 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_5__/* ["default"] */ .A, {
+    }) : 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'
@@ -104,14 +107,15 @@ var ListRow = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(fun
     type: 'button',
     children: content
   }) : null;
-  var rowElement = linkChild ? /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(linkChild, undefined, content) : buttonRow;
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_list__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.Row, __assign({
+  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(linkChild ? 'navigate' : 'click');
+      emit(link ? 'navigate' : 'click');
       onClick === null || onClick === void 0 ? void 0 : onClick(event);
     } : undefined
   }, restProps, {
@@ -289,13 +293,15 @@ module.exports = x({ ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_ru
 /******/ __nuri_require__.C(__webpack_chunk_6__);
 /******/ import * as __webpack_chunk_7__ from "./chunk-3547.js";
 /******/ __nuri_require__.C(__webpack_chunk_7__);
-/******/ import * as __webpack_chunk_8__ from "./chunk-9497.js";
+/******/ import * as __webpack_chunk_8__ from "./chunk-1176.js";
 /******/ __nuri_require__.C(__webpack_chunk_8__);
+/******/ import * as __webpack_chunk_9__ from "./chunk-9497.js";
+/******/ __nuri_require__.C(__webpack_chunk_9__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,7653,3547,9497], () => (__nuri_require__(2082)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,7653,3547,1176,9497], () => (__nuri_require__(2082)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/message-composer.js

@@ -141,9 +141,11 @@ var MessageComposer = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     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", "track", "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,
@@ -182,6 +184,8 @@ var MessageComposer = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         "aria-label": label,
         placeholder: placeholder,
         disabled: disabled,
+        autoFocus: autoFocus,
+        maxLength: maxLength,
         value: value,
         onChange: function onChange(e) {
           return setValue(e.target.value);

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

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

package/dist/notice.js

@@ -143,7 +143,9 @@ var Notice = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         size: 'xs',
         variant: 'neutral',
         text: action.label,
-        onClick: action.onClick,
+        // CTAButton 은 loading 중에도 누름을 받으므로 처리 중에는 다시 부르지 않는다
+        onClick: action.loading ? undefined : action.onClick,
+        loading: action.loading,
         track: action.track,
         trackProps: action.trackProps
       })]
@@ -325,17 +327,19 @@ module.exports = x({ ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_ru
 /******/ __nuri_require__.C(__webpack_chunk_8__);
 /******/ import * as __webpack_chunk_9__ from "./chunk-8933.js";
 /******/ __nuri_require__.C(__webpack_chunk_9__);
-/******/ import * as __webpack_chunk_10__ from "./chunk-2496.js";
+/******/ import * as __webpack_chunk_10__ from "./chunk-1176.js";
 /******/ __nuri_require__.C(__webpack_chunk_10__);
-/******/ import * as __webpack_chunk_11__ from "./chunk-5226.js";
+/******/ import * as __webpack_chunk_11__ from "./chunk-2496.js";
 /******/ __nuri_require__.C(__webpack_chunk_11__);
-/******/ import * as __webpack_chunk_12__ from "./chunk-910.js";
+/******/ import * as __webpack_chunk_12__ from "./chunk-5226.js";
 /******/ __nuri_require__.C(__webpack_chunk_12__);
+/******/ import * as __webpack_chunk_13__ from "./chunk-910.js";
+/******/ __nuri_require__.C(__webpack_chunk_13__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,7653,3547,6302,8933,2496,5226,910], () => (__nuri_require__(2980)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,7653,3547,6302,8933,1176,2496,5226,910], () => (__nuri_require__(2980)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/styles.css

@@ -302,6 +302,11 @@
   --composer-send-size: 36px;
   --composer-max-height: 132px;
 
+  /* 아이콘 버튼: icon-button. 보이는 원의 지름. 누르는 자리는 --touch-target 이상 */
+  --icon-button-size-s: 36px;
+  --icon-button-size-m: 44px;
+  --icon-button-size-l: 56px;
+
   /* 빈 화면: empty-state 아이콘 원 */
   --empty-state-icon-box: 64px;
 
@@ -2554,6 +2559,84 @@ p {
     width: var(--icon-size-xl);
     height: var(--icon-size-xl);
   }
+.base-icon-button {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  cursor: var(--cursor-button);
+
+  /* 보이는 크기가 작아도(s 36) 누르는 자리는 터치 44 */
+}
+.base-icon-button::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--touch-target);
+    height: var(--touch-target);
+    transform: translate(-50%, -50%);
+  }
+.base-icon-button[data-disabled] {
+    cursor: var(--cursor-disabled);
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * icon-button                                                                                     *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.icon-button {
+  border-radius: var(--radius-full);
+  transition:
+    transform var(--motion-press-duration) var(--motion-press-ease),
+    background-color var(--motion-press-duration) var(--motion-press-ease);
+}
+.icon-button:active:not([data-disabled]) {
+    transform: scale(var(--motion-press-scale));
+  }
+.icon-button:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-600);
+    outline-offset: var(--spacing-2);
+  }
+.icon-button.size-s {
+    width: var(--icon-button-size-s);
+    height: var(--icon-button-size-s);
+  }
+.icon-button.size-m {
+    width: var(--icon-button-size-m);
+    height: var(--icon-button-size-m);
+  }
+.icon-button.size-l {
+    width: var(--icon-button-size-l);
+    height: var(--icon-button-size-l);
+  }
+/* 바탕 없이 아이콘만. 누르는 동안 회색 원이 보인다 */
+.icon-button.variant-ghost {
+    background-color: transparent;
+    color: var(--color-grey-scale-700);
+  }
+.icon-button.variant-ghost:active:not([data-disabled]) {
+      background-color: var(--color-grey-scale-100);
+    }
+/* CTAButton secondary 와 같은 연보라 */
+.icon-button.variant-secondary {
+    background-color: var(--color-purple-50);
+    color: var(--color-purple-900);
+  }
+.icon-button.variant-primary {
+    background-color: var(--color-purple-900);
+    color: var(--color-white);
+  }
+.icon-button[data-disabled] {
+    color: var(--color-grey-scale-300);
+  }
+.icon-button[data-disabled]:is(.variant-secondary,.variant-primary) {
+      background-color: var(--color-grey-scale-200);
+      color: var(--color-white);
+    }
 .base-list:where(.group) {
     display: flex;
     flex-direction: column;