@ncds/ui-admin 1.4.1 → 1.5.1

package/dist/cjs/src/components/button/ButtonGroup.js

@@ -10,8 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../../constant/color");
 var _dot = require("../dot");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonStepper = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var ButtonStepper = function (_a) {
+  var size = _a.size,
+    direction = _a.direction,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    className = _a.className;
+  return (0, _jsxRuntime.jsx)("button", {
+    className: (0, _classnames.default)('ncua-button-stepper', "ncua-button-stepper--".concat(size), "ncua-button-stepper--".concat(direction), className),
+    type: "button",
+    disabled: disabled,
+    onClick: onClick
+  });
+};
+exports.ButtonStepper = ButtonStepper;

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

@@ -14,6 +14,17 @@ Object.keys(_Button).forEach(function (key) {
     }
   });
 });
+var _ButtonCloseX = require("./ButtonCloseX");
+Object.keys(_ButtonCloseX).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonCloseX[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ButtonCloseX[key];
+    }
+  });
+});
 var _ButtonGroup = require("./ButtonGroup");
 Object.keys(_ButtonGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,4 +35,15 @@ Object.keys(_ButtonGroup).forEach(function (key) {
       return _ButtonGroup[key];
     }
   });
+});
+var _ButtonStepper = require("./ButtonStepper");
+Object.keys(_ButtonStepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonStepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ButtonStepper[key];
+    }
+  });
 });

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

@@ -7,10 +7,11 @@ exports.DatePicker = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ko = require("flatpickr/dist/l10n/ko");
+var _moment = _interopRequireDefault(require("moment"));
 var _react = require("react");
 var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
-var _CustomInput = require("./CustomInput");
 var _datePicker = require("../../utils/date-picker");
+var _CustomInput = require("./CustomInput");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -42,7 +43,9 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     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 = (0, _datePicker.formatDateInput)(dateStr);
     isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
@@ -90,27 +93,63 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       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 = (0, _react.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 = (0, _moment.default)(currentDate);
+    return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+  }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
   return (0, _jsxRuntime.jsxs)("div", __assign({
     className: (0, _classnames.default)('ncua-date-picker', "ncua-date-picker--".concat(size), {
       'ncua-date-picker--disabled': attrs.disabled,
@@ -122,7 +161,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       ref: ref || undefined,
       className: (0, _classnames.default)('ncua-date-picker__input'),
       options: options,
-      value: currentDate,
+      value: processedCurrentDate,
       render: function (_a, ref) {
         var defaultValue = _a.defaultValue,
           value = _a.value,

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

@@ -134,7 +134,9 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
     children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
       ref: undefined,
       size: size
-    })), "~", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions, {
+    })), "~", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({
+      isEndDate: true
+    }, endDateOptions, {
       ref: undefined,
       size: size
     }))]

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

@@ -21,8 +21,8 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var RangeDatePickerWithButtons = function (_a) {
-  var _b = _a.fixedEndDate,
-    fixedEndDate = _b === void 0 ? (0, _datePicker2.getDateFormat)() : _b,
+  var _b = _a.useYesterdayAsEndDate,
+    useYesterdayAsEndDate = _b === void 0 ? false : _b,
     _c = _a.size,
     size = _c === void 0 ? 'xs' : _c,
     currentButtonId = _a.currentButtonId,
@@ -47,7 +47,11 @@ var RangeDatePickerWithButtons = function (_a) {
       unit: currentPeriodItem.unit
     }));
     startDateOptions.onChangeDate(startDate);
-    endDateOptions.onChangeDate(fixedEndDate);
+    var endDate = useYesterdayAsEndDate ? (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
+      period: 1,
+      unit: 'days'
+    })) : (0, _datePicker2.getDateFormat)();
+    endDateOptions.onChangeDate(endDate);
   };
   var handleOnChangeDate = function (date, type) {
     type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);

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

@@ -332,4 +332,15 @@ Object.keys(_tooltip).forEach(function (key) {
       return _tooltip[key];
     }
   });
+});
+var _imageFileInput = require("./image-file-input");
+Object.keys(_imageFileInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _imageFileInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _imageFileInput[key];
+    }
+  });
 });

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

@@ -205,7 +205,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
             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 && (0, _jsxRuntime.jsxs)("div", __assign({
         className: "ncua-input__field-text-count"

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

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _hooks = require("../../hooks");
+var _button = require("../button");
+var _InputBase = require("./InputBase");
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(null);
+  var mergedRef = (0, _hooks.useMergeRefs)([ref, inputRef]);
+  var getCurrentValue = (0, _react.useCallback)(function () {
+    var _a;
+    var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+    return value ? parseFloat(value) : 0;
+  }, []);
+  var updateValue = (0, _react.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 = (0, _react.useCallback)(function () {
+    var currentValue = getCurrentValue();
+    var newValue = currentValue + step;
+    if (maxValue === undefined || newValue <= maxValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, maxValue, updateValue]);
+  var handleDecrement = (0, _react.useCallback)(function () {
+    var currentValue = getCurrentValue();
+    var newValue = currentValue - step;
+    if (minValue === undefined || newValue >= minValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, minValue, updateValue]);
+  var handleKeyDown = (0, _react.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 (0, _jsxRuntime.jsxs)("div", __assign({
+      className: "ncua-input__stepper-button-group"
+    }, {
+      children: [(0, _jsxRuntime.jsx)(_button.ButtonStepper, {
+        size: size,
+        direction: "up",
+        onClick: handleIncrement,
+        disabled: disabled
+      }), (0, _jsxRuntime.jsx)(_button.ButtonStepper, {
+        size: size,
+        direction: "down",
+        onClick: handleDecrement,
+        disabled: disabled
+      })]
+    }));
+  };
+  return (0, _jsxRuntime.jsx)(_InputBase.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/cjs/src/components/input/PasswordInput.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PasswordInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _InputBase = require("./InputBase");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _hooks = require("../../hooks");
+var _InputBase = require("./InputBase");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -77,6 +77,7 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
       placement: 'inside',
       children: (0, _jsxRuntime.jsx)("button", __assign({
         className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'),
+        type: "button",
         onClick: handleVisibilityChange
       }, {
         children: isVisible ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Eye, __assign({}, svgProps)) : (0, _jsxRuntime.jsx)(_uiAdminIcon.EyeOff, __assign({}, svgProps))

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

@@ -14,6 +14,17 @@ Object.keys(_InputBase).forEach(function (key) {
     }
   });
 });
+var _NumberInput = require("./NumberInput");
+Object.keys(_NumberInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NumberInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NumberInput[key];
+    }
+  });
+});
 var _PasswordInput = require("./PasswordInput");
 Object.keys(_PasswordInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageNotification = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _color = require("../../../constant/color");
+var _button = require("../button");
+var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 iconNameMap = {
+  neutral: 'pin-02',
+  error: 'alert-triangle',
+  warning: 'alert-circle',
+  success: 'check-circle'
+};
+var iconColorMap = {
+  neutral: 'gray700',
+  error: 'red500',
+  warning: 'orange500',
+  success: 'green600'
+};
+var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.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.COLOR[iconColorMap[validColor] || 'gray700'];
+  return (0, _jsxRuntime.jsx)("div", __assign({
+    ref: ref,
+    className: (0, _classnames.default)('ncua-message-notification', "ncua-message-notification--".concat(validColor), className),
+    role: "alert"
+  }, rest, {
+    children: (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-message-notification__container"
+    }, {
+      children: (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-message-notification__content"
+      }, {
+        children: [(0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-message-notification__content-wrapper"
+        }, {
+          children: [iconNameMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
+            className: "ncua-message-notification__icon"
+          })), (0, _jsxRuntime.jsxs)("div", __assign({
+            className: "ncua-message-notification__text-container"
+          }, {
+            children: [(0, _jsxRuntime.jsx)("span", __assign({
+              className: "ncua-message-notification__title"
+            }, {
+              children: title
+            })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
+              className: "ncua-message-notification__supporting-text"
+            }, {
+              children: supportingText
+            }))]
+          }))]
+        })), (0, _jsxRuntime.jsx)("div", __assign({
+          className: "ncua-message-notification__actions-container"
+        }, {
+          children: actions && (0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-message-notification__actions"
+          }, {
+            children: actions.map(function (action) {
+              return (0, _jsxRuntime.jsx)(_button.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));
+            })
+          }))
+        })), (0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-message-notification__footer-container"
+        }, {
+          children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", __assign({
+            type: "button",
+            className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-message-notification__hide-link'),
+            onClick: onHidePermanently
+          }, {
+            children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
+          })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
+            type: "button",
+            className: "ncua-message-notification__close-button",
+            onClick: onClose,
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
+          }, {
+            children: (0, _jsxRuntime.jsx)(_dynamic.default, {
+              name: "x-close",
+              width: 20,
+              height: 20,
+              color: closeIconColor
+            })
+          }))]
+        }))]
+      }))
+    }))
+  }));
+});
+MessageNotification.displayName = 'MessageNotification';

package/dist/cjs/src/components/notification/Notification.js

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
+var _MessageNotification = require("./MessageNotification");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -32,14 +33,27 @@ var Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(fu
     _c = _a.color,
     color = _c === void 0 ? 'neutral' : _c,
     rest = __rest(_a, ["type", "color"]);
-  return type === 'floating' ? (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
-    color: color
-  }, rest, {
-    ref: ref
-  })) : (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
-    color: color
-  }, rest, {
-    ref: ref
-  }));
+  if (type === 'floating') {
+    return (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  if (type === 'full-width') {
+    return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  if (type === 'message') {
+    return (0, _jsxRuntime.jsx)(_MessageNotification.MessageNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  return null;
 });
 Notification.displayName = 'Notification';

package/dist/cjs/src/components/notification/index.js

@@ -35,4 +35,15 @@ Object.keys(_FullWidthNotification).forEach(function (key) {
       return _FullWidthNotification[key];
     }
   });
+});
+var _MessageNotification = require("./MessageNotification");
+Object.keys(_MessageNotification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MessageNotification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MessageNotification[key];
+    }
+  });
 });