@ncds/ui-admin 1.4.1 → 1.5.1

package/dist/esm/assets/scripts/utils/selectbox/UnifiedSelectBox.js

@@ -336,30 +336,27 @@ var UnifiedSelectBox = /** @class */function () {
     };
     this.controller = new SelectBoxController(controllerConfig);
   };
-  // 이벤트 핸들러들
-  UnifiedSelectBox.prototype.handleInput = function (value) {
-    var _this = this;
-    var _a, _b;
-    // 기존 디바운스 타이머 제거
+  /**
+   * 디바운싱 타이머 취소
+   */
+  UnifiedSelectBox.prototype.cancelDebounceTimer = function () {
     if (this.searchDebounceTimer) {
       clearTimeout(this.searchDebounceTimer);
       this.searchDebounceTimer = undefined;
+      this.currentDebounceTimerId = undefined;
     }
+  };
+  // 이벤트 핸들러들
+  UnifiedSelectBox.prototype.handleInput = function (value) {
+    var _this = this;
+    var _a, _b;
+    this.cancelDebounceTimer();
     // 필터링은 즉시 업데이트 (사용자가 입력하는 동안 필터링 결과를 즉시 보여줌)
     // 하지만 onSearch 콜백은 디바운싱 적용
     var isApiMode = this.config.type === 'combobox' && !this.hasInitialOptions;
-    if (isApiMode) {
-      // 텍스트가 변경되었거나 비워졌으면 즉시 옵션 완전히 제거
-      if (this.lastSearchValue !== value) {
-        if (!value.trim()) {
-          // 검색어가 비워졌으면 옵션 완전히 비우기
-          this.model.updateOptions([]);
-        } else {
-          // 검색어가 변경되었으면 이전 옵션 즉시 제거
-          this.model.updateOptions([]);
-        }
-        this.lastSearchValue = value;
-      }
+    // API 모드에서는 검색어 변경 추적만 하고, 옵션은 디바운싱 후 비우기
+    if (isApiMode && this.lastSearchValue !== value) {
+      this.lastSearchValue = value;
     }
     // 디바운싱이 설정되어 있으면 입력이 멈춘 후 onSearch 콜백만 실행
     if (this.config.searchDebounceMs > 0) {
@@ -367,26 +364,40 @@ var UnifiedSelectBox = /** @class */function () {
       var timerId_1 = Date.now() + Math.random();
       this.currentDebounceTimerId = timerId_1;
       this.searchDebounceTimer = window.setTimeout(function () {
-        var _a, _b;
-        // 타이머가 취소되었는지 확인 (다른 타이머가 시작되었으면 현재 타이머는 무시)
-        if (_this.currentDebounceTimerId !== timerId_1) {
-          return; // 이 타이머는 취소되었으므로 실행하지 않음
-        }
-        // 타이머가 여전히 유효하면 실행
-        _this.searchDebounceTimer = undefined;
-        _this.currentDebounceTimerId = undefined;
-        // API 모드인 경우 필터링 업데이트 (디바운싱 후 실행)
-        if (isApiMode) {
-          _this.model.updateSearchAndFilter(value);
-        }
-        // 텍스트가 있을 때만 드롭다운 열기
-        if (value.trim()) {
-          _this.controller.open();
-        } else if (!_this.model.getState().showAllItems) {
-          _this.controller.close();
-        }
-        // onSearch 콜백 호출 (디바운싱 적용, 최종 타이머만 실행)
-        (_b = (_a = _this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+        return __awaiter(_this, void 0, void 0, function () {
+          var _a, _b;
+          return __generator(this, function (_c) {
+            switch (_c.label) {
+              case 0:
+                // 타이머가 취소되었는지 확인 (다른 타이머가 시작되었으면 현재 타이머는 무시)
+                if (this.currentDebounceTimerId !== timerId_1) {
+                  return [2 /*return*/]; // 이 타이머는 취소되었으므로 실행하지 않음
+                }
+                // 타이머가 여전히 유효하면 실행
+                this.searchDebounceTimer = undefined;
+                this.currentDebounceTimerId = undefined;
+                // API 모드: 검색어만 업데이트 (필터링은 하지 않음, 서버에서 필터링된 결과를 받음)
+                // 일반 모드: 검색어 업데이트 + 로컬 필터링
+                if (isApiMode) {
+                  this.model.updateSearchValue(value);
+                } else {
+                  this.model.updateSearchAndFilter(value);
+                }
+                // onSearch 콜백 호출 및 완료 대기 (디바운싱 적용, 최종 타이머만 실행)
+                return [4 /*yield*/, (_b = (_a = this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value)];
+              case 1:
+                // onSearch 콜백 호출 및 완료 대기 (디바운싱 적용, 최종 타이머만 실행)
+                _c.sent();
+                // 텍스트가 있을 때만 드롭다운 열기
+                if (value.trim()) {
+                  this.controller.open();
+                } else if (!this.model.getState().showAllItems) {
+                  this.controller.close();
+                }
+                return [2 /*return*/];
+            }
+          });
+        });
       }, this.config.searchDebounceMs);
     } else {
       // 디바운싱이 0으로 명시적으로 설정되었으면 즉시 실행
@@ -415,6 +426,7 @@ var UnifiedSelectBox = /** @class */function () {
     }
   };
   UnifiedSelectBox.prototype.handleClearInput = function () {
+    this.cancelDebounceTimer();
     // input 필드 텍스트 지우기
     if (this.inputField) {
       this.inputField.setValue('');
@@ -459,6 +471,7 @@ var UnifiedSelectBox = /** @class */function () {
   };
   UnifiedSelectBox.prototype.handleSelectionChange = function (selectedValues) {
     var _a, _b;
+    this.cancelDebounceTimer();
     var result = this.config.multiple ? selectedValues : selectedValues[0] || '';
     (_b = (_a = this.config).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, result);
     // UI 업데이트
@@ -616,12 +629,7 @@ var UnifiedSelectBox = /** @class */function () {
     }
   };
   UnifiedSelectBox.prototype.destroy = function () {
-    // 디바운스 타이머 정리
-    if (this.searchDebounceTimer) {
-      clearTimeout(this.searchDebounceTimer);
-      this.searchDebounceTimer = undefined;
-    }
-    this.currentDebounceTimerId = undefined;
+    this.cancelDebounceTimer();
     this.controller.destroy();
     this.renderer.clearCache();
     this.inputField = undefined;
@@ -667,6 +675,32 @@ var UnifiedSelectBox = /** @class */function () {
       isOpen: this.model.getState().isOpen
     };
   };
+  /**
+   * 드롭다운을 스크롤의 바닥으로 이동
+   * 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
+   */
+  UnifiedSelectBox.prototype.scrollToBottom = function () {
+    if (!this.dropdownElement) return;
+    var optionsList = this.dropdownElement.querySelector('.ncua-select-dropdown__options');
+    if (!optionsList) return;
+    // 스크롤을 바닥으로 이동
+    optionsList.scrollTop = optionsList.scrollHeight;
+  };
+  /**
+   * 전체 선택 버튼의 텍스트를 외부에서 변경
+   * @param text 버튼에 표시할 텍스트
+   */
+  UnifiedSelectBox.prototype.setSelectAllButtonText = function (text) {
+    if (!this.config.multiple || !this.footerElement) return;
+    this.renderer.updateSelectAllButtonText(this.footerElement, text);
+  };
+  /**
+   * 특정 인덱스의 옵션으로 포커스 이동
+   * @param index 포커스를 이동할 옵션의 인덱스
+   */
+  UnifiedSelectBox.prototype.setFocusIndex = function (index) {
+    this.controller.setFocus(index);
+  };
   return UnifiedSelectBox;
 }();
 export { UnifiedSelectBox };

package/dist/esm/src/components/button/ButtonStepper.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classnames from 'classnames';
+export var ButtonStepper = function (_a) {
+  var size = _a.size,
+    direction = _a.direction,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    className = _a.className;
+  return _jsx("button", {
+    className: classnames('ncua-button-stepper', "ncua-button-stepper--".concat(size), "ncua-button-stepper--".concat(direction), className),
+    type: "button",
+    disabled: disabled,
+    onClick: onClick
+  });
+};

package/dist/esm/src/components/button/index.js

@@ -1,2 +1,4 @@
 export * from './Button';
-export * from './ButtonGroup';
+export * from './ButtonCloseX';
+export * from './ButtonGroup';
+export * from './ButtonStepper';

package/dist/esm/src/components/date-picker/DatePicker.js

@@ -19,10 +19,11 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Korean } from 'flatpickr/dist/l10n/ko';
-import { forwardRef, useId } from 'react';
+import moment from 'moment';
+import { forwardRef, useId, useMemo } from 'react';
 import Flatpickr from 'react-flatpickr';
-import { CustomInput } from './CustomInput';
 import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
+import { CustomInput } from './CustomInput';
 var isValidDate = function (dateString) {
   var date = new Date(dateString);
   return date instanceof Date && !isNaN(date.getTime());
@@ -35,7 +36,9 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     size = _c === void 0 ? 'xs' : _c,
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
-    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
+    _d = _a.isEndDate,
+    isEndDate = _d === void 0 ? false : _d,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate"]);
   var onChangeDateHandler = function (dateTimeStamp, dateStr) {
     var formattedDate = formatDateInput(dateStr);
     isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
@@ -83,27 +86,63 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       if (!hourInput || !minuteInput) return;
       hourInput.addEventListener('input', onHourInputHandler);
       minuteInput.addEventListener('input', onMinuteInputHandler);
+      var handleMouseDown = function (e) {
+        var _a;
+        var flatpickrCalendar = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-calendar.open');
+        if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
+          var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+          timeInputs.forEach(function (timeInput) {
+            if (document.activeElement === timeInput) {
+              timeInput.blur();
+            }
+          });
+        }
+      };
+      document.addEventListener('mousedown', handleMouseDown, true);
+      instance._handleMouseDown = handleMouseDown;
     },
     onDestroy: function (selectedDates, dateStr, instance) {
-      var _a, _b;
+      var _a;
       var input = instance.input;
       if (!input) return;
       // 메인 input 이벤트 리스너 제거
       input.removeEventListener('input', onInputHandler);
+      var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
+      if (!timeInputWrapper) return;
       // 시간 input 이벤트 리스너 제거
-      var hourInput = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-hour');
+      var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
       if (hourInput) {
         hourInput.removeEventListener('input', onHourInputHandler);
       }
       // 분 input 이벤트 리스너 제거
-      var minuteInput = (_b = input.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('.flatpickr-min');
+      var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
       if (minuteInput) {
         minuteInput.removeEventListener('input', onMinuteInputHandler);
       }
+      var handleMouseDown = instance._handleMouseDown;
+      if (handleMouseDown) {
+        document.removeEventListener('mousedown', handleMouseDown, true);
+      }
     }
   }, datePickerOptions);
   var hasTimeOption = datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('enableTime');
   var iconName = hasTimeOption && (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('noCalendar')) ? 'clock' : 'calendar';
+  var processedCurrentDate = useMemo(function () {
+    var hasTime = options.enableTime;
+    var isTimeOnly = options.noCalendar;
+    var hasSeconds = options.enableSeconds;
+    if (!hasTime && !isTimeOnly) return currentDate;
+    if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':')) return currentDate;
+    if (isTimeOnly) {
+      var endTime = hasSeconds ? '23:59:59' : '23:59';
+      var startTime = hasSeconds ? '00:00:00' : '00:00';
+      return isEndDate ? endTime : startTime;
+    }
+    if (!currentDate) return '';
+    var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+    var momentDate = moment(currentDate);
+    return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+  }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
   return _jsxs("div", __assign({
     className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
       'ncua-date-picker--disabled': attrs.disabled,
@@ -115,7 +154,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       ref: ref || undefined,
       className: classNames('ncua-date-picker__input'),
       options: options,
-      value: currentDate,
+      value: processedCurrentDate,
       render: function (_a, ref) {
         var defaultValue = _a.defaultValue,
           value = _a.value,

package/dist/esm/src/components/date-picker/RangeDatePicker.js

@@ -127,7 +127,9 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: [_jsx(DatePicker, __assign({}, startDateOptions, {
       ref: undefined,
       size: size
-    })), "~", _jsx(DatePicker, __assign({}, endDateOptions, {
+    })), "~", _jsx(DatePicker, __assign({
+      isEndDate: true
+    }, endDateOptions, {
       ref: undefined,
       size: size
     }))]

package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -15,8 +15,8 @@ import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
 import { ButtonGroup } from '../button';
 import { RangeDatePicker } from './RangeDatePicker';
 export var RangeDatePickerWithButtons = function (_a) {
-  var _b = _a.fixedEndDate,
-    fixedEndDate = _b === void 0 ? getDateFormat() : _b,
+  var _b = _a.useYesterdayAsEndDate,
+    useYesterdayAsEndDate = _b === void 0 ? false : _b,
     _c = _a.size,
     size = _c === void 0 ? 'xs' : _c,
     currentButtonId = _a.currentButtonId,
@@ -41,7 +41,11 @@ export var RangeDatePickerWithButtons = function (_a) {
       unit: currentPeriodItem.unit
     }));
     startDateOptions.onChangeDate(startDate);
-    endDateOptions.onChangeDate(fixedEndDate);
+    var endDate = useYesterdayAsEndDate ? getDateFormat(getSubtractDate({
+      period: 1,
+      unit: 'days'
+    })) : getDateFormat();
+    endDateOptions.onChangeDate(endDate);
   };
   var handleOnChangeDate = function (date, type) {
     type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);

package/dist/esm/src/components/index.js

@@ -27,4 +27,5 @@ export * from './switch';
 export * from './tab';
 export * from './tag';
 export * from './toggle';
-export * from './tooltip';
+export * from './tooltip';
+export * from './image-file-input';

package/dist/esm/src/components/input/InputBase.js

@@ -198,7 +198,7 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
             type: "text",
             disabled: disabled,
             maxLength: maxLength
-          }, props)), renderClearButton(), trailingElement && renderInsideSlot(trailingElement, 'right'), renderStatusIcon()]
+          }, props)), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
         })), trailingElement && renderOutsideSlot(trailingElement)]
       })), showTextCount && maxLength && _jsxs("div", __assign({
         className: "ncua-input__field-text-count"

package/dist/esm/src/components/input/NumberInput.js

@@ -0,0 +1,124 @@
+var __assign = this && this.__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 = this && this.__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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from 'react';
+import { useMergeRefs } from '../../hooks';
+import { ButtonStepper } from '../button';
+import { InputBase } from './InputBase';
+export var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'xs' : _b,
+    minValue = _a.minValue,
+    maxValue = _a.maxValue,
+    _c = _a.step,
+    step = _c === void 0 ? 1 : _c,
+    stepperPosition = _a.stepperPosition,
+    disabled = _a.disabled,
+    props = __rest(_a, ["size", "minValue", "maxValue", "step", "stepperPosition", "disabled"]);
+  var inputRef = useRef(null);
+  var mergedRef = useMergeRefs([ref, inputRef]);
+  var getCurrentValue = useCallback(function () {
+    var _a;
+    var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+    return value ? parseFloat(value) : 0;
+  }, []);
+  var updateValue = useCallback(function (newValue) {
+    if (!inputRef.current) return;
+    // min/max 범위 체크
+    var clampedValue = newValue;
+    if (minValue !== undefined && clampedValue < minValue) {
+      clampedValue = minValue;
+    }
+    if (maxValue !== undefined && clampedValue > maxValue) {
+      clampedValue = maxValue;
+    }
+    inputRef.current.value = clampedValue.toString();
+    // onChange 이벤트 트리거
+    var event = new Event('input', {
+      bubbles: true
+    });
+    inputRef.current.dispatchEvent(event);
+  }, [minValue, maxValue]);
+  var handleIncrement = useCallback(function () {
+    var currentValue = getCurrentValue();
+    var newValue = currentValue + step;
+    if (maxValue === undefined || newValue <= maxValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, maxValue, updateValue]);
+  var handleDecrement = useCallback(function () {
+    var currentValue = getCurrentValue();
+    var newValue = currentValue - step;
+    if (minValue === undefined || newValue >= minValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, minValue, updateValue]);
+  var handleKeyDown = useCallback(function (event) {
+    var _a;
+    if (disabled) return;
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      handleIncrement();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      handleDecrement();
+    }
+    // 기존 onKeyDown prop이 있으면 호출
+    (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+  }, [disabled, handleIncrement, handleDecrement, props]);
+  var renderStepperButtonGroup = function (position) {
+    if (position !== stepperPosition) {
+      return null;
+    }
+    return _jsxs("div", __assign({
+      className: "ncua-input__stepper-button-group"
+    }, {
+      children: [_jsx(ButtonStepper, {
+        size: size,
+        direction: "up",
+        onClick: handleIncrement,
+        disabled: disabled
+      }), _jsx(ButtonStepper, {
+        size: size,
+        direction: "down",
+        onClick: handleDecrement,
+        disabled: disabled
+      })]
+    }));
+  };
+  return _jsx(InputBase, __assign({
+    type: "number",
+    leadingElement: renderStepperButtonGroup('leading') ? {
+      type: 'custom',
+      children: renderStepperButtonGroup('leading')
+    } : props.leadingElement,
+    trailingElement: renderStepperButtonGroup('trailing') ? {
+      type: 'custom',
+      children: renderStepperButtonGroup('trailing')
+    } : props.trailingElement,
+    ref: mergedRef,
+    size: size,
+    disabled: disabled,
+    min: minValue,
+    max: maxValue,
+    step: step,
+    onKeyDown: handleKeyDown,
+    className: "ncua-input__number"
+  }, props));
+});

package/dist/esm/src/components/input/PasswordInput.js

@@ -17,11 +17,11 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import { InputBase } from './InputBase';
 import { Eye, EyeOff } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { useMergeRefs, useCallbackRef } from '../../hooks';
+import { forwardRef, useState } from 'react';
+import { useCallbackRef, useMergeRefs } from '../../hooks';
+import { InputBase } from './InputBase';
 var svgSize = {
   xs: 14,
   sm: 20
@@ -70,6 +70,7 @@ export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       placement: 'inside',
       children: _jsx("button", __assign({
         className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'),
+        type: "button",
         onClick: handleVisibilityChange
       }, {
         children: isVisible ? _jsx(Eye, __assign({}, svgProps)) : _jsx(EyeOff, __assign({}, svgProps))

package/dist/esm/src/components/input/index.js

@@ -1,3 +1,4 @@
 export * from './InputBase';
+export * from './NumberInput';
 export * from './PasswordInput';
 export * from './Textarea';

package/dist/esm/src/components/notification/MessageNotification.js

@@ -0,0 +1,130 @@
+var __assign = this && this.__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 = this && this.__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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon/dynamic';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Button } from '../button';
+import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+var iconNameMap = {
+  neutral: 'pin-02',
+  error: 'alert-triangle',
+  warning: 'alert-circle',
+  success: 'check-circle'
+};
+var iconColorMap = {
+  neutral: 'gray700',
+  error: 'red500',
+  warning: 'orange500',
+  success: 'green600'
+};
+export var MessageNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var title = _a.title,
+    supportingText = _a.supportingText,
+    icon = _a.icon,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
+    onClose = _a.onClose,
+    className = _a.className,
+    actions = _a.actions,
+    onHidePermanently = _a.onHidePermanently,
+    rest = __rest(_a, ["title", "supportingText", "icon", "color", "onClose", "className", "actions", "onHidePermanently"]);
+  // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+  var validColor = color === 'info' ? 'neutral' : color;
+  var iconColor = validColor;
+  var featuredIconProps = {
+    name: icon || iconNameMap[validColor] || 'pin-02',
+    size: 'lg',
+    color: iconColor,
+    theme: 'light-circle'
+  };
+  var closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
+  return _jsx("div", __assign({
+    ref: ref,
+    className: classNames('ncua-message-notification', "ncua-message-notification--".concat(validColor), className),
+    role: "alert"
+  }, rest, {
+    children: _jsx("div", __assign({
+      className: "ncua-message-notification__container"
+    }, {
+      children: _jsxs("div", __assign({
+        className: "ncua-message-notification__content"
+      }, {
+        children: [_jsxs("div", __assign({
+          className: "ncua-message-notification__content-wrapper"
+        }, {
+          children: [iconNameMap[validColor] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+            className: "ncua-message-notification__icon"
+          })), _jsxs("div", __assign({
+            className: "ncua-message-notification__text-container"
+          }, {
+            children: [_jsx("span", __assign({
+              className: "ncua-message-notification__title"
+            }, {
+              children: title
+            })), supportingText && _jsx("span", __assign({
+              className: "ncua-message-notification__supporting-text"
+            }, {
+              children: supportingText
+            }))]
+          }))]
+        })), _jsx("div", __assign({
+          className: "ncua-message-notification__actions-container"
+        }, {
+          children: actions && _jsx("div", __assign({
+            className: "ncua-message-notification__actions"
+          }, {
+            children: actions.map(function (action) {
+              return _jsx(Button, {
+                size: "xs",
+                hierarchy: action.hierarchy || 'text',
+                label: action.label,
+                onClick: action === null || action === void 0 ? void 0 : action.onClick
+              }, "".concat(action.label, "-").concat(action.hierarchy));
+            })
+          }))
+        })), _jsxs("div", __assign({
+          className: "ncua-message-notification__footer-container"
+        }, {
+          children: [onHidePermanently && _jsx("button", __assign({
+            type: "button",
+            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-message-notification__hide-link'),
+            onClick: onHidePermanently
+          }, {
+            children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
+          })), onClose && _jsx("button", __assign({
+            type: "button",
+            className: "ncua-message-notification__close-button",
+            onClick: onClose,
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
+          }, {
+            children: _jsx(Icon, {
+              name: "x-close",
+              width: 20,
+              height: 20,
+              color: closeIconColor
+            })
+          }))]
+        }))]
+      }))
+    }))
+  }));
+});
+MessageNotification.displayName = 'MessageNotification';