@ncds/ui-admin 1.7.0 → 1.8.1

package/dist/temp/src/components/image-file-input/ImageFileInput.js

@@ -1,34 +1,3 @@
-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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
@@ -38,87 +7,90 @@ import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/Fil
 import { HintText, Label } from '../shared';
 import { Tooltip } from '../tooltip';
 import { ImagePreview } from './components/ImagePreview';
-export var ImageFileInput = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, accept = _a.accept, _c = _a.multiple, multiple = _c === void 0 ? false : _c, maxFileSize = _a.maxFileSize, maxFileCount = _a.maxFileCount, value = _a.value, onChange = _a.onChange, onFileSelect = _a.onFileSelect, onFail = _a.onFail, _d = _a.buttonLabel, buttonLabel = _d === void 0 ? '파일 찾기' : _d, _e = _a.imagePreviewTooltipLabel, imagePreviewTooltipLabel = _e === void 0 ? '이미지 업로드' : _e, disabled = _a.disabled, label = _a.label, hintItems = _a.hintItems, validation = _a.validation, destructive = _a.destructive, isRequired = _a.isRequired, showHelpIcon = _a.showHelpIcon, hintText = _a.hintText, _f = _a.showFileTagList, showFileTagList = _f === void 0 ? true : _f, _g = _a.showHintText, showHintText = _g === void 0 ? true : _g, _h = _a.showFileInput, showFileInput = _h === void 0 ? true : _h, props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "imagePreviewTooltipLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText", "showFileTagList", "showHintText", "showFileInput"]);
-    var fileInputRef = useRef(null);
-    useImperativeHandle(ref, function () { return fileInputRef.current; });
-    var _j = useState([]), internalFiles = _j[0], setInternalFiles = _j[1];
-    var _k = useState(false), isButtonHovered = _k[0], setIsButtonHovered = _k[1];
+export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
+    const fileInputRef = useRef(null);
+    useImperativeHandle(ref, () => fileInputRef.current);
+    const [internalFiles, setInternalFiles] = useState([]);
+    const [isButtonHovered, setIsButtonHovered] = useState(false);
     // Determine if component is controlled or uncontrolled
-    var isControlled = value !== undefined;
-    var files = isControlled ? value : internalFiles;
+    const isControlled = value !== undefined;
+    const files = isControlled ? value : internalFiles;
     // Sync internal state with controlled value
-    useEffect(function () {
+    useEffect(() => {
         if (isControlled && value) {
             setInternalFiles(value);
         }
     }, [isControlled, value]);
-    var updateFiles = function (newFiles) {
+    const updateFiles = (newFiles) => {
         if (isControlled) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
+            onChange?.(newFiles);
         }
         else {
             setInternalFiles(newFiles);
-            onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(newFiles);
+            onFileSelect?.(newFiles);
         }
     };
-    var handleFileChange = function (event) {
-        var selectedFiles = event.target.files;
+    const handleFileChange = (event) => {
+        const selectedFiles = event.target.files;
         if (!selectedFiles || selectedFiles.length === 0)
             return;
-        var _a = validateFiles(Array.from(selectedFiles)), validFiles = _a.validFiles, invalidFiles = _a.invalidFiles;
+        const { validFiles, invalidFiles } = validateFiles(Array.from(selectedFiles));
         // Replace existing file if maxFileCount is 1
-        var nextFiles = maxFileCount === 1 ? validFiles : __spreadArray(__spreadArray([], files, true), validFiles, true);
+        const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
         updateFiles(nextFiles);
         if (onFail && invalidFiles.length > 0) {
             onFail(invalidFiles);
         }
         event.target.value = '';
     };
-    var validateFiles = function (fileList) {
-        var validFiles = [];
-        var invalidFiles = [];
-        var _loop_1 = function (file) {
-            if (files.some(function (f) { return f.name === file.name && f.size === file.size; })) {
-                invalidFiles.push(__assign(__assign({}, file), { errorType: ImageFileInputErrorType.ALREADY_UPLOADED }));
-                return "continue";
+    const validateFiles = (fileList) => {
+        const validFiles = [];
+        const invalidFiles = [];
+        for (const file of fileList) {
+            if (files.some((f) => f.name === file.name && f.size === file.size)) {
+                invalidFiles.push({
+                    ...file,
+                    errorType: ImageFileInputErrorType.ALREADY_UPLOADED,
+                });
+                continue;
             }
             if (!!maxFileSize && file.size > maxFileSize) {
-                invalidFiles.push(__assign(__assign({}, file), { errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE }));
-                return "continue";
+                invalidFiles.push({
+                    ...file,
+                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE,
+                });
+                continue;
             }
             // Skip max count check if maxFileCount is 1 (allow replacement)
             if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-                invalidFiles.push(__assign(__assign({}, file), { errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT }));
-                return "continue";
+                invalidFiles.push({
+                    ...file,
+                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT,
+                });
+                continue;
             }
             validFiles.push(file);
-        };
-        for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
-            var file = fileList_1[_i];
-            _loop_1(file);
         }
-        return { validFiles: validFiles, invalidFiles: invalidFiles };
+        return { validFiles, invalidFiles };
     };
-    var handleBrowseClick = function () {
+    const handleBrowseClick = () => {
         if (fileInputRef.current && !disabled) {
             fileInputRef.current.click();
         }
     };
-    var handleRemoveFile = function (index) {
-        var newFiles = __spreadArray([], files, true);
+    const handleRemoveFile = (index) => {
+        const newFiles = [...files];
         newFiles.splice(index, 1);
         updateFiles(newFiles);
     };
-    var renderImagePreview = function (files) {
-        if (files === void 0) { files = []; }
-        var showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
-        return (_jsxs("div", __assign({ className: "ncua-image-file-input__previews" }, { children: [files.map(function (file, index) { return (_jsx(ImagePreview, { file: file, onRemove: function () { return handleRemoveFile(index); } }, "".concat(file.name, "-").concat(index))); }), showEmptySlot && (_jsxs("div", __assign({ className: "ncua-image-file-input__empty-slot-wrapper", onMouseEnter: function () { return !disabled && setIsButtonHovered(true); }, onMouseLeave: function () { return setIsButtonHovered(false); }, onClick: handleBrowseClick }, { children: [_jsx(Button, { onlyIcon: true, size: size, className: classNames('ncua-image-file-input__preview-container'), onClick: handleBrowseClick, disabled: disabled, label: imagePreviewTooltipLabel }), isButtonHovered && !disabled && _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom" })] })))] })));
+    const renderImagePreview = (files = []) => {
+        const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
+        return (_jsxs("div", { className: "ncua-image-file-input__previews", children: [files.map((file, index) => (_jsx(ImagePreview, { file: file, onRemove: () => handleRemoveFile(index) }, `${file.name}-${index}`))), showEmptySlot && (_jsxs("div", { className: "ncua-image-file-input__empty-slot-wrapper", onMouseEnter: () => !disabled && setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), onClick: handleBrowseClick, children: [_jsx(Button, { onlyIcon: true, size: size, className: classNames('ncua-image-file-input__preview-container'), onClick: handleBrowseClick, disabled: disabled, label: imagePreviewTooltipLabel }), isButtonHovered && !disabled && _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom" })] }))] }));
     };
-    var renderHintList = function () {
+    const renderHintList = () => {
         if (!hintItems || hintItems.length === 0)
             return null;
-        return (_jsx("ul", __assign({ className: "ncua-file-input__hint-list" }, { children: hintItems.map(function (hint) { return (_jsx("li", __assign({ className: "ncua-file-input__hint-item" }, { children: hint }), hint)); }) })));
+        return (_jsx("ul", { className: "ncua-file-input__hint-list", children: hintItems.map((hint) => (_jsx("li", { className: "ncua-file-input__hint-item", children: hint }, hint))) }));
     };
-    return (_jsxs("div", __assign({ className: classNames('ncua-image-file-input', "ncua-image-file-input--".concat(size), { destructive: destructive }) }, { children: [renderImagePreview(files), showFileInput && (_jsxs("div", __assign({ className: classNames('ncua-file-input', "ncua-file-input--".concat(size)) }, { children: [_jsx("input", __assign({ hidden: true, ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, tabIndex: -1, "aria-hidden": "true" }, props)), _jsxs("div", __assign({ className: "ncua-file-input__input-container" }, { children: [_jsxs("div", __assign({ className: "ncua-file-input__label" }, { children: [_jsx(Label, __assign({ isRequired: isRequired }, { children: label })), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] })), _jsx(Button, { size: "xs", onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), showHintText && hintText && _jsx(HintText, __assign({ destructive: destructive }, { children: hintText }))] })), showHintText && renderHintList()] })))] })));
+    return (_jsxs("div", { className: classNames('ncua-image-file-input', `ncua-image-file-input--${size}`, { destructive: destructive }), children: [renderImagePreview(files), showFileInput && (_jsxs("div", { className: classNames('ncua-file-input', `ncua-file-input--${size}`), children: [_jsx("input", { hidden: true, ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, tabIndex: -1, "aria-hidden": "true", ...props }), _jsxs("div", { className: "ncua-file-input__input-container", children: [_jsxs("div", { className: "ncua-file-input__label", children: [_jsx(Label, { isRequired: isRequired, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }), _jsx(Button, { size: "xs", onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), showHintText && hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), showHintText && renderHintList()] }))] }));
 });

package/dist/temp/src/components/image-file-input/components/ImagePreview.js

@@ -1,18 +1,6 @@
-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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Trash03 } from '@ncds/ui-admin-icon';
 import { Button } from '../../button';
-export var ImagePreview = function (_a) {
-    var file = _a.file, onRemove = _a.onRemove;
-    return (_jsxs("div", __assign({ className: "ncua-image-file-input__preview-container" }, { children: [_jsx("img", { className: "ncua-image-file-input__preview-image", src: URL.createObjectURL(file), alt: file.name }), _jsx(Button, { size: "sm", hierarchy: "text", onlyIcon: true, leadingIcon: { type: 'icon', icon: Trash03, color: 'gray200' }, label: "Remove image", onClick: onRemove, className: "ncua-image-file-input__preview-remove-button" })] })));
+export const ImagePreview = ({ file, onRemove }) => {
+    return (_jsxs("div", { className: "ncua-image-file-input__preview-container", children: [_jsx("img", { className: "ncua-image-file-input__preview-image", src: URL.createObjectURL(file), alt: file.name }), _jsx(Button, { size: "sm", hierarchy: "text", onlyIcon: true, leadingIcon: { type: 'icon', icon: Trash03, color: 'gray200' }, label: "Remove image", onClick: onRemove, className: "ncua-image-file-input__preview-remove-button" })] }));
 };

package/dist/temp/src/components/index.d.ts

@@ -1,10 +1,14 @@
 export type { SideSlotType, SlotIconComponent } from '../types';
 export * from './badge';
-export * from './breadcrumb';
+export * from './badge-group';
+export * from './bread-crumb';
 export * from './button';
-export * from './carousel';
+export * from './button-group';
+export * from './carousel-arrow';
+export * from './carousel-number-group';
 export * from './checkbox';
-export * from './combobox';
+export * from './combo-box';
+export * from './data-grid';
 export * from './date-picker';
 export * from './divider';
 export * from './dot';
@@ -12,22 +16,30 @@ export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';
 export * from './file-input';
+export * from './horizontal-tab';
 export * from './image-file-input';
-export * from './input';
+export * from './input-base';
 export * from './modal';
 export * from './notification';
+export * from './number-input';
 export * from './pagination';
+export * from './password-input';
 export * from './progress-bar';
 export * from './progress-circle';
 export * from './radio';
+export * from './range-date-picker';
+export * from './range-date-picker-with-buttons';
 export * from './select';
+export * from './select-box';
 export * from './select-dropdown';
-export * from './selectbox';
 export * from './shared';
 export * from './slider';
 export * from './spinner';
 export * from './switch';
 export * from './tab';
+export * from './table';
 export * from './tag';
+export * from './textarea';
 export * from './toggle';
 export * from './tooltip';
+export * from './vertical-tab';

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

@@ -1,9 +1,13 @@
 export * from './badge';
-export * from './breadcrumb';
+export * from './badge-group';
+export * from './bread-crumb';
 export * from './button';
-export * from './carousel';
+export * from './button-group';
+export * from './carousel-arrow';
+export * from './carousel-number-group';
 export * from './checkbox';
-export * from './combobox';
+export * from './combo-box';
+export * from './data-grid';
 export * from './date-picker';
 export * from './divider';
 export * from './dot';
@@ -11,22 +15,30 @@ export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';
 export * from './file-input';
+export * from './horizontal-tab';
 export * from './image-file-input';
-export * from './input';
+export * from './input-base';
 export * from './modal';
 export * from './notification';
+export * from './number-input';
 export * from './pagination';
+export * from './password-input';
 export * from './progress-bar';
 export * from './progress-circle';
 export * from './radio';
+export * from './range-date-picker';
+export * from './range-date-picker-with-buttons';
 export * from './select';
+export * from './select-box';
 export * from './select-dropdown';
-export * from './selectbox';
 export * from './shared';
 export * from './slider';
 export * from './spinner';
 export * from './switch';
 export * from './tab';
+export * from './table';
 export * from './tag';
+export * from './textarea';
 export * from './toggle';
 export * from './tooltip';
+export * from './vertical-tab';

package/dist/temp/src/components/{input → input-base}/InputBase.d.ts

@@ -32,6 +32,7 @@ interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     hintText?: string;
     size?: Extract<Size, 'xs' | 'sm'>;
     disabled?: boolean;
+    fullWidth?: boolean;
     validation?: boolean;
     destructive?: boolean;
     leadingElement?: InputLeadingSlotType;

package/dist/temp/src/components/input-base/InputBase.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { COLOR } from '../../../constant/color';
+import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
+const validationSvgSize = {
+    xs: 14,
+    sm: 16,
+};
+const generalSvgSize = {
+    xs: 14,
+    sm: 20,
+};
+const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, className, ...props }, ref) => {
+    const inputRef = useRef(null);
+    const [textCount, setTextCount] = useState(0);
+    useEffect(() => {
+        if (inputRef.current && showTextCount) {
+            setTextCount(inputRef.current.value.length);
+            const handleInput = () => {
+                setTextCount(inputRef.current?.value.length ?? 0);
+            };
+            inputRef.current.addEventListener('input', handleInput);
+            return () => {
+                inputRef.current?.removeEventListener('input', handleInput);
+            };
+        }
+    }, [showTextCount]);
+    const renderOutsideSlot = (slot) => {
+        if (slot.type === 'custom' && slot.placement !== 'outside') {
+            return null;
+        }
+        switch (slot.type) {
+            case 'button':
+                return (_jsx("button", { type: slot.isSubmit ? 'submit' : 'button', className: classNames('ncua-input__button', `ncua-input__button--${size}`), onClick: slot.onClick, children: slot.label }));
+            case 'text':
+                return (_jsx("span", { className: classNames('ncua-input__leading-text', `ncua-input__leading-text--${size}`), children: slot.text }));
+            case 'custom':
+                return slot.children;
+            default:
+                return null;
+        }
+    };
+    const renderInsideSlot = (slot, position) => {
+        switch (slot.type) {
+            case 'icon': {
+                const SlotIcon = slot.icon;
+                return (_jsx("div", { className: "ncua-input__icon-wrap", children: _jsx(SlotIcon, { className: classNames(`ncua-input__${position}-icon`, slot.className), color: slot.color ? COLOR[slot.color] : undefined, width: slot.size ?? generalSvgSize[size], height: slot.size ?? generalSvgSize[size] }) }));
+            }
+            case 'custom':
+                if (slot.placement !== 'inside') {
+                    return null;
+                }
+                return slot.children;
+            default:
+                return null;
+        }
+    };
+    const renderClearButton = () => {
+        if (!props.clearText)
+            return null;
+        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: props.onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+    };
+    const renderStatusIcon = () => {
+        if (destructive) {
+            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(InfoCircle, { className: "ncua-input__destructive-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        }
+        if (validation) {
+            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(CheckCircle, { className: "ncua-input__validation-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        }
+        return null;
+    };
+    const renderLabel = () => {
+        if (!label)
+            return null;
+        return (_jsxs("div", { className: classNames('ncua-input__label', `ncua-input__label--${size}`), children: [_jsx(Label, { isRequired: required, htmlFor: props.id, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }));
+    };
+    return (_jsxs("div", { className: classNames('ncua-input', `ncua-input--${size}`, {
+            destructive: destructive,
+            'is-disabled': disabled,
+            'full-width': fullWidth,
+            'ncua-input__trailing-button': trailingElement?.type === 'button',
+            'ncua-input__leading-text-wrap': leadingElement?.type === 'text',
+        }, className), children: [renderLabel(), _jsxs("div", { className: "ncua-input__content-wrap", children: [_jsxs("div", { className: "ncua-input__content", children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", { className: classNames('ncua-input__field', `ncua-input__field--${size}`), children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", { ref: (node) => {
+                                            if (typeof ref === 'function') {
+                                                ref(node);
+                                            }
+                                            else if (ref) {
+                                                ref.current = node;
+                                            }
+                                            inputRef.current = node;
+                                        }, type: "text", disabled: disabled, maxLength: maxLength, ...props }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')] }), trailingElement && renderOutsideSlot(trailingElement)] }), showTextCount && maxLength && (_jsxs("div", { className: "ncua-input__field-text-count", children: [_jsx("output", { className: "ncua-input__field-text-count-current", children: textCount }), _jsxs("span", { children: ["/", maxLength] })] }))] }), hintText && (_jsx(HintText, { className: "ncua-input__hint-text", destructive: destructive, children: hintText }))] }));
+});
+export { InputBase };

package/dist/temp/src/components/input-base/index.d.ts

@@ -0,0 +1 @@
+export * from './InputBase';

package/dist/temp/src/components/input-base/index.js

@@ -0,0 +1 @@
+export * from './InputBase';

package/dist/temp/src/components/modal/Modal.js

@@ -1,41 +1,18 @@
-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, Fragment as _Fragment } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { ButtonCloseX } from '../button/ButtonCloseX';
 import { FeaturedIcon } from '../featured-icon';
-var Modal = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.closeOnBackdropClick, closeOnBackdropClick = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, className = _a.className, zIndex = _a.zIndex, restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className", "zIndex"]);
-    var modalRef = useRef(null);
-    var handleBackdropClick = function (e) {
+const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true, className, zIndex, ...restProps }) => {
+    const modalRef = useRef(null);
+    const handleBackdropClick = (e) => {
         if (closeOnBackdropClick && e.target === e.currentTarget) {
             onClose();
         }
     };
-    useEffect(function () {
-        var handleKeyDown = function (e) {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
             if (isOpen && closeOnEsc && e.key === 'Escape') {
                 onClose();
             }
@@ -44,25 +21,23 @@ var Modal = function (_a) {
             document.addEventListener('keydown', handleKeyDown);
             document.body.style.overflow = 'hidden';
         }
-        return function () {
+        return () => {
             document.removeEventListener('keydown', handleKeyDown);
             document.body.style.overflow = '';
         };
     }, [isOpen, closeOnEsc, onClose]);
     if (!isOpen)
         return null;
-    var modalContent = (_jsx("div", __assign({ className: classnames('ncua-modal-backdrop', className), onClick: handleBackdropClick, ref: modalRef, style: zIndex ? { zIndex: zIndex } : undefined }, restProps, { children: _jsx("div", __assign({ className: classnames('ncua-modal', "ncua-modal--".concat(size)) }, { children: children })) })));
+    const modalContent = (_jsx("div", { className: classnames('ncua-modal-backdrop', className), onClick: handleBackdropClick, ref: modalRef, style: zIndex ? { zIndex } : undefined, ...restProps, children: _jsx("div", { className: classnames('ncua-modal', `ncua-modal--${size}`), children: children }) }));
     return ReactDOM.createPortal(modalContent, document.body);
 };
-Modal.Header = function (_a) {
-    var children = _a.children, onClose = _a.onClose, featuredIcon = _a.featuredIcon, title = _a.title, subtitle = _a.subtitle, _b = _a.align, align = _b === void 0 ? 'left' : _b, _c = _a.showDivider, showDivider = _c === void 0 ? false : _c, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d;
-    return (_jsxs(_Fragment, { children: [_jsxs("header", __assign({ className: classnames('ncua-modal__header', "ncua-modal__header--".concat(align), {
+Modal.Header = ({ children, onClose, featuredIcon, title, subtitle, align = 'left', showDivider = false, hideCloseButton = false, }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
                     'ncua-modal__header--close-button': !hideCloseButton,
-                }) }, { children: [featuredIcon && (_jsx(FeaturedIcon, { icon: featuredIcon.icon, color: featuredIcon.color, theme: featuredIcon.theme, size: "sm" })), _jsxs("div", __assign({ className: "ncua-modal__title" }, { children: [_jsx("div", __assign({ className: "ncua-modal__title-text" }, { children: title })), subtitle && _jsx("div", __assign({ className: "ncua-modal__title-subtitle" }, { children: subtitle }))] })), children, !hideCloseButton && (_jsx(ButtonCloseX, { className: "ncua-modal__close-button", size: "sm", theme: "light", onClick: onClose }))] })), showDivider && _jsx("div", { className: "ncua-modal__header-divider" })] }));
+                }), children: [featuredIcon && (_jsx(FeaturedIcon, { icon: featuredIcon.icon, color: featuredIcon.color, theme: featuredIcon.theme, size: "sm" })), _jsxs("div", { className: "ncua-modal__title", children: [_jsx("div", { className: "ncua-modal__title-text", children: title }), subtitle && _jsx("div", { className: "ncua-modal__title-subtitle", children: subtitle })] }), children, !hideCloseButton && (_jsx(ButtonCloseX, { className: "ncua-modal__close-button", size: "sm", theme: "light", onClick: onClose }))] }), showDivider && _jsx("div", { className: "ncua-modal__header-divider" })] }));
 };
-Modal.Content = function (_a) {
-    var children = _a.children, className = _a.className;
-    return _jsx("div", __assign({ className: classnames('ncua-modal__content', className) }, { children: children }));
+Modal.Content = ({ children, className }) => {
+    return _jsx("div", { className: classnames('ncua-modal__content', className), children: children });
 };
 /**
  * Modal.Actions - The actions area of the modal
@@ -92,10 +67,9 @@ Modal.Content = function (_a) {
  *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
  * </Modal.Actions>
  */
-Modal.Actions = function (_a) {
-    var children = _a.children, _b = _a.layout, layout = _b === void 0 ? 'vertical' : _b, _c = _a.showDivider, showDivider = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? 'stretch' : _d, checkboxContent = _a.checkboxContent, className = _a.className;
-    return (_jsxs(_Fragment, { children: [showDivider && _jsx("div", { className: "ncua-modal__actions-divider" }), _jsxs("div", __assign({ className: classnames('ncua-modal__actions-wrapper', className, {
+Modal.Actions = ({ children, layout = 'vertical', showDivider = false, align = 'stretch', checkboxContent, className, }) => {
+    return (_jsxs(_Fragment, { children: [showDivider && _jsx("div", { className: "ncua-modal__actions-divider" }), _jsxs("div", { className: classnames('ncua-modal__actions-wrapper', className, {
                     'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox',
-                }) }, { children: [layout === 'checkbox' && (_jsx("div", __assign({ className: "ncua-modal__actions-checkbox" }, { children: _jsx("div", __assign({ className: "ncua-modal__actions-checkbox-content" }, { children: checkboxContent })) }))), _jsx("div", __assign({ className: classnames('ncua-modal__actions', "ncua-modal__actions--".concat(layout), "ncua-modal__actions--".concat(align)) }, { children: children }))] }))] }));
+                }), children: [layout === 'checkbox' && (_jsx("div", { className: "ncua-modal__actions-checkbox", children: _jsx("div", { className: "ncua-modal__actions-checkbox-content", children: checkboxContent }) })), _jsx("div", { className: classnames('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`), children: children })] })] }));
 };
 export { Modal };

package/dist/temp/src/components/notification/FloatingNotification.js

@@ -1,25 +1,3 @@
-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 { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
@@ -29,32 +7,31 @@ import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { Button } from '../button';
 import { ButtonCloseX } from '../button/ButtonCloseX';
 import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-var iconMap = {
+const iconMap = {
     neutral: Pin02,
     error: AlertTriangle,
     warning: AlertCircle,
     success: CheckCircle,
     // info는 floating에서는 지원하지 않음
 };
-var FloatingNotification = forwardRef(function (_a, ref) {
-    var title = _a.title, supportingText = _a.supportingText, _b = _a.color, color = _b === void 0 ? 'neutral' : _b, onClose = _a.onClose, className = _a.className, actions = _a.actions, _c = _a.autoClose, autoClose = _c === void 0 ? 0 : _c, rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose"]);
-    var _d = useState(false), shouldRemove = _d[0], setShouldRemove = _d[1];
-    var iconColor = color;
-    var featuredIconProps = {
+const FloatingNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, ...rest }, ref) => {
+    const [shouldRemove, setShouldRemove] = useState(false);
+    const iconColor = color;
+    const featuredIconProps = {
         icon: iconMap[color] || Pin02,
         size: 'sm',
         color: iconColor,
         theme: 'dark-circle',
     };
-    var isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
+    const isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
         onMatched: onClose,
     });
     // autoClose 타이머 관리
-    var timerRef = useRef(null);
-    useEffect(function () {
+    const timerRef = useRef(null);
+    useEffect(() => {
         // autoClose가 0보다 크면 무조건 타이머 설정
         if (autoClose > 0) {
-            timerRef.current = setTimeout(function () {
+            timerRef.current = setTimeout(() => {
                 if (onClose) {
                     onClose();
                 }
@@ -63,7 +40,7 @@ var FloatingNotification = forwardRef(function (_a, ref) {
             }, autoClose);
         }
         // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-        return function () {
+        return () => {
             if (timerRef.current) {
                 clearTimeout(timerRef.current);
                 timerRef.current = null;
@@ -74,6 +51,6 @@ var FloatingNotification = forwardRef(function (_a, ref) {
     if (shouldRemove) {
         return null;
     }
-    return (_jsxs("div", __assign({ ref: ref, className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(color), className), role: "alert" }, rest, { children: [_jsx("div", __assign({ className: "ncua-floating-notification__content" }, { children: _jsxs("div", __assign({ className: "ncua-floating-notification__container" }, { children: [iconMap[color] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, { size: isMobile ? 'md' : 'sm' })), _jsxs("div", __assign({ className: "ncua-floating-notification__text-container" }, { children: [_jsx("div", __assign({ className: "ncua-floating-notification__title-wrapper" }, { children: _jsx("span", __assign({ className: "ncua-floating-notification__title" }, { children: title })) })), supportingText && _jsx("span", __assign({ className: "ncua-floating-notification__supporting-text" }, { children: supportingText })), actions && (_jsx("div", __assign({ className: "ncua-floating-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))); }) })))] }))] })) })), onClose && (_jsx(ButtonCloseX, { theme: "light", className: "ncua-floating-notification__close-button", size: isMobile ? 'sm' : 'xs', onClick: onClose }))] })));
+    return (_jsxs("div", { ref: ref, className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className), role: "alert", ...rest, children: [_jsx("div", { className: "ncua-floating-notification__content", children: _jsxs("div", { className: "ncua-floating-notification__container", children: [iconMap[color] && _jsx(FeaturedIcon, { ...featuredIconProps, size: isMobile ? 'md' : 'sm' }), _jsxs("div", { className: "ncua-floating-notification__text-container", children: [_jsx("div", { className: "ncua-floating-notification__title-wrapper", children: _jsx("span", { className: "ncua-floating-notification__title", children: title }) }), supportingText && _jsx("span", { className: "ncua-floating-notification__supporting-text", children: supportingText }), actions && (_jsx("div", { className: "ncua-floating-notification__actions", children: actions.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) }))] })] }) }), onClose && (_jsx(ButtonCloseX, { theme: "light", className: "ncua-floating-notification__close-button", size: isMobile ? 'sm' : 'xs', onClick: onClose }))] }));
 });
 export { FloatingNotification };