@ncds/ui-admin 1.4.1 → 1.5.0

package/dist/types/assets/scripts/notification/index.d.ts

@@ -1,6 +1,7 @@
 export { Notification, type NotificationOptions } from './Notification';
 export { FullWidthNotification, type FullWidthNotificationOptions } from './FullWidthNotification';
 export { FloatingNotification, type FloatingNotificationOptions } from './FloatingNotification';
+export { MessageNotification, type MessageNotificationOptions } from './MessageNotification';
 export * from './utils';
 export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './const';
 export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';

package/dist/types/assets/scripts/utils/selectbox/DropdownModel.d.ts

@@ -114,6 +114,10 @@ export declare class DropdownModel {
      * 검색 및 필터링 업데이트 (SearchFilterUtils에서 이동)
      */
     updateSearchAndFilter(searchValue: string, showAllItems?: boolean): void;
+    /**
+     * 검색어만 업데이트 (필터링 없이, API 모드용)
+     */
+    updateSearchValue(searchValue: string): void;
     /**
      * 드롭다운이 열릴 수 있는지 확인 (ComboBox용)
      */

package/dist/types/assets/scripts/utils/selectbox/UnifiedSelectBox.d.ts

@@ -5,7 +5,7 @@ export interface UnifiedSelectBoxConfig {
     placeholder?: string;
     value?: OptionValue;
     onChange?: (value: OptionValue) => void;
-    onSearch?: (searchValue: string) => void;
+    onSearch?: (searchValue: string) => void | Promise<void>;
     onEdit?: () => void;
     onSelectAll?: () => void;
     onSearchAll?: () => void;
@@ -48,6 +48,10 @@ export declare class UnifiedSelectBox {
     private createSelectBoxUI;
     private createDropdown;
     private setupController;
+    /**
+     * 디바운싱 타이머 취소
+     */
+    private cancelDebounceTimer;
     private handleInput;
     private handleInputClick;
     private handleClearInput;
@@ -76,5 +80,20 @@ export declare class UnifiedSelectBox {
         modelState: any;
         isOpen: boolean;
     };
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     * 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
+     */
+    scrollToBottom(): void;
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     * @param text 버튼에 표시할 텍스트
+     */
+    setSelectAllButtonText(text: string): void;
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     * @param index 포커스를 이동할 옵션의 인덱스
+     */
+    setFocusIndex(index: number): void;
 }
 //# sourceMappingURL=UnifiedSelectBox.d.ts.map

package/dist/types/src/components/button/ButtonStepper.d.ts

@@ -0,0 +1,10 @@
+import { Size } from '../../../constant/size';
+export type ButtonStepperProps = {
+    size: Extract<Size, 'xs' | 'sm'>;
+    direction: 'up' | 'down';
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+};
+export declare const ButtonStepper: ({ size, direction, disabled, onClick, className }: ButtonStepperProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonStepper.d.ts.map

package/dist/types/src/components/button/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Button';
+export * from './ButtonCloseX';
 export * from './ButtonGroup';
+export * from './ButtonStepper';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/date-picker/DatePicker.d.ts

@@ -8,6 +8,7 @@ export type DatePickerProps = {
     datePickerOptions?: Options;
     destructive?: string;
     placeholder?: string;
+    isEndDate?: boolean;
     onChangeDate: (date: string) => void;
 } & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
 export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;

package/dist/types/src/components/date-picker/RangeDatePickerWithButtons.d.ts

@@ -1,14 +1,14 @@
-import { Dispatch, SetStateAction } from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
 import { PERIOD_ITEM } from '../../constant/date-picker';
-import { RangeDatePickerProps } from './RangeDatePicker';
+import { type RangeDatePickerProps } from './RangeDatePicker';
 export type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps = {
-    fixedEndDate?: string;
+    useYesterdayAsEndDate?: boolean;
     currentButtonId: PeriodKeyType;
     setCurrentButtonId: Dispatch<SetStateAction<PeriodKeyType>>;
     periodKeys: PeriodKeyType[];
     size?: 'xs' | 'sm';
 } & RangeDatePickerProps;
-export declare const RangeDatePickerWithButtons: ({ fixedEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeDatePickerWithButtons: ({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map

package/dist/types/src/components/input/NumberInput.d.ts

@@ -0,0 +1,10 @@
+import { InputBaseProps } from './InputBase';
+type NumberInputProps = InputBaseProps & {
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    stepperPosition?: 'leading' | 'trailing';
+};
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=NumberInput.d.ts.map

package/dist/types/src/components/input/index.d.ts

@@ -1,4 +1,5 @@
 export * from './InputBase';
+export * from './NumberInput';
 export * from './PasswordInput';
 export * from './Textarea';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/notification/MessageNotification.d.ts

@@ -0,0 +1,40 @@
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { NotificationAction, NotificationColor } from './Notification';
+export interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 이름 (지정하지 않으면 color에 따라 기본 아이콘 사용)
+     */
+    icon?: IconName;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     */
+    actions?: NotificationAction[];
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     */
+    onHidePermanently?: () => void;
+}
+export declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=MessageNotification.d.ts.map

package/dist/types/src/components/notification/Notification.d.ts

@@ -2,7 +2,7 @@ import type { IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ColorTone } from '../../../constant/color';
 import { ButtonTheme } from '../button';
-export type NotificationType = 'floating' | 'full-width';
+export type NotificationType = 'floating' | 'full-width' | 'message';
 export type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
 export type NotificationSize = 'desktop' | 'mobile';
 export interface NotificationAction {
@@ -61,6 +61,11 @@ export interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * @default 0
      */
     autoClose?: number;
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     * message, full-width 타입에서 사용 가능
+     */
+    onHidePermanently?: () => void;
 }
 export declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Notification.d.ts.map

package/dist/types/src/components/notification/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Notification';
 export * from './FloatingNotification';
 export * from './FullWidthNotification';
+export * from './MessageNotification';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/selectbox/SelectBox.d.ts

@@ -1,6 +1,6 @@
-import { Size } from '@ncds/ui-admin/constant/size';
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
+import { Size } from '../../../constant/size';
 import { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
 export declare const DEFAULT_MAX_HEIGHT = 275;
 type BaseSelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'>;

package/dist/types/src/components/tooltip/Tooltip.d.ts

@@ -5,10 +5,12 @@ interface TooltipProps {
     size?: 'sm' | 'md';
     hideArrow?: boolean;
     title?: string;
-    content?: string;
+    content?: React.ReactNode;
     type?: 'long' | 'short';
     className?: string;
+    iconColor?: string;
+    iconStyle?: 'help-circle' | 'alert-circle';
 }
-export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -754,6 +754,62 @@ button {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
+.ncua-button-stepper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 10px;
+  cursor: pointer;
+  background-color: var(--gray-100);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 6px 4px;
+  border-radius: 4px 4px 1px 1px;
+}
+.ncua-button-stepper:hover:not(:disabled), .ncua-button-stepper:focus:not(:disabled) {
+  background-color: var(--gray-200);
+}
+.ncua-button-stepper:disabled {
+  background-color: var(--gray-100);
+}
+.ncua-button-stepper--xs {
+  width: 20px;
+  height: 10px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
+  background-size: 6px 4px;
+}
+.ncua-button-stepper--xs:hover:not(:disabled), .ncua-button-stepper--xs:focus:not(:disabled) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23171818'/%3E%3C/svg%3E");
+}
+.ncua-input:focus-within .ncua-button-stepper--xs {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%232f2f30'/%3E%3C/svg%3E");
+}
+.ncua-input.is-disabled .ncua-button-stepper--xs, .ncua-button-stepper--xs:disabled {
+  cursor: not-allowed;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23a4a5a8'/%3E%3C/svg%3E");
+}
+.ncua-button-stepper--sm {
+  width: 22px;
+  height: 14px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
+  background-size: 8.2px 4.7px;
+}
+.ncua-button-stepper--sm:hover:not(:disabled), .ncua-button-stepper--sm:focus:not(:disabled) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23171818'/%3E%3C/svg%3E");
+}
+.ncua-input:focus-within .ncua-button-stepper--sm {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%232f2f30'/%3E%3C/svg%3E");
+}
+.ncua-input.is-disabled .ncua-button-stepper--sm, .ncua-button-stepper--sm:disabled {
+  cursor: not-allowed;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23a4a5a8'/%3E%3C/svg%3E");
+}
+.ncua-button-stepper--down {
+  transform: rotate(180deg);
+}
+
 .ncua-checkbox-input {
   --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23171818' stroke-width='1.6666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
   --check-icon-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23d3d4d8' stroke-width='1.6666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
@@ -1317,6 +1373,16 @@ button {
 .ncua-input__field--sm {
   padding: 6px 12px;
 }
+.ncua-input__field:has(.ncua-input__stepper-button-group ~ .ncua-input__number) {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 2px;
+}
+.ncua-input__field:has(.ncua-input__number ~ .ncua-input__stepper-button-group) {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 2px;
+}
 .ncua-input__field {
   position: relative;
   flex: 1;
@@ -1449,16 +1515,6 @@ button {
 .ncua-input.is-disabled .ncua-input__field {
   overflow: hidden;
 }
-.ncua-input.is-disabled .ncua-input__field::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: "";
-  width: 100%;
-  height: 100%;
-  background: inherit;
-  opacity: 0.5;
-}
 .ncua-input.is-disabled input,
 .ncua-input.is-disabled textarea {
   color: var(--gray-300);
@@ -1473,6 +1529,31 @@ button {
 .ncua-input.full-width {
   width: 100%;
 }
+.ncua-input__number::-webkit-inner-spin-button, .ncua-input__number::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.ncua-input__number {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.ncua-input__stepper-button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ncua-input__field--xs .ncua-input__stepper-button-group ~ .ncua-input__number {
+  padding-left: 10px;
+}
+.ncua-input__field--sm .ncua-input__stepper-button-group ~ .ncua-input__number {
+  padding-left: 12px;
+}
+.ncua-input__field--xs .ncua-input__icon-wrap + .ncua-input__stepper-button-group {
+  margin-left: 10px;
+}
+.ncua-input__field--sm .ncua-input__icon-wrap + .ncua-input__stepper-button-group {
+  margin-left: 12px;
+}
 
 .ncua-input__leading-text-wrap .ncua-input__leading-text {
   display: flex;
@@ -2207,6 +2288,207 @@ button {
   }
 }
 
+.ncua-message-notification {
+  width: 100%;
+}
+.ncua-message-notification__container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  padding: 16px 24px;
+}
+@media (max-width: 768px) {
+  .ncua-message-notification__container {
+    padding: 16px;
+  }
+}
+.ncua-message-notification__content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+@media (max-width: 768px) {
+  .ncua-message-notification__content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+}
+.ncua-message-notification__content-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.ncua-message-notification__icon {
+  flex-shrink: 0;
+}
+.ncua-message-notification__text-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.ncua-message-notification__title {
+  font-size: var(--font-size-md);
+  line-height: var(--line-heights-md);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-message-notification__supporting-text {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-message-notification__actions-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+@media (max-width: 768px) {
+  .ncua-message-notification__actions-container {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+.ncua-message-notification__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-message-notification__footer-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.ncua-message-notification__hide-link {
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-message-notification__close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 8px;
+  flex-shrink: 0;
+}
+.ncua-message-notification--neutral {
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+  border-radius: 8px;
+  border: 1px solid var(--gray-300);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-message-notification--neutral .ncua-message-notification__title {
+  color: var(--gray-600);
+}
+.ncua-message-notification--neutral .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+  opacity: 0.8;
+}
+.ncua-message-notification--neutral .ncua-notification__action-button {
+  color: var(--gray-500);
+}
+.ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
+  color: var(--gray-600);
+}
+.ncua-message-notification--neutral .ncua-message-notification__hide-link {
+  color: var(--gray-500);
+}
+.ncua-message-notification--error {
+  color: var(--primary-red-600);
+  background-color: var(--primary-red-50);
+  border-radius: 8px;
+  border: 1px solid var(--primary-red-300);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-message-notification--error .ncua-message-notification__title {
+  color: var(--primary-red-600);
+}
+.ncua-message-notification--error .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+  opacity: 0.8;
+}
+.ncua-message-notification--error .ncua-notification__action-button {
+  color: var(--primary-red-500);
+}
+.ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
+  color: var(--primary-red-600);
+}
+.ncua-message-notification--error .ncua-message-notification__hide-link {
+  color: var(--gray-500);
+}
+.ncua-message-notification--warning {
+  color: var(--orange-600);
+  background-color: var(--orange-50);
+  border-radius: 8px;
+  border: 1px solid var(--orange-300);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-message-notification--warning .ncua-message-notification__title {
+  color: var(--orange-600);
+}
+.ncua-message-notification--warning .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+  opacity: 0.8;
+}
+.ncua-message-notification--warning .ncua-notification__action-button {
+  color: var(--orange-500);
+}
+.ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
+  color: var(--orange-600);
+}
+.ncua-message-notification--warning .ncua-message-notification__hide-link {
+  color: var(--gray-500);
+}
+.ncua-message-notification--success {
+  color: var(--green-600);
+  background-color: var(--green-50);
+  border-radius: 8px;
+  border: 1px solid var(--green-300);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-message-notification--success .ncua-message-notification__title {
+  color: var(--green-600);
+}
+.ncua-message-notification--success .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+  opacity: 0.8;
+}
+.ncua-message-notification--success .ncua-notification__action-button {
+  color: var(--green-500);
+}
+.ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
+  color: var(--green-600);
+}
+.ncua-message-notification--success .ncua-message-notification__hide-link {
+  color: var(--gray-500);
+}
+.ncua-message-notification .ncua-notification__action-button {
+  background: transparent;
+  border: none;
+  padding: 0;
+  vertical-align: middle;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+
 .ncua-radio-input {
   position: relative;
   flex: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",