@ncds/ui-admin 1.1.3 → 1.2.1

package/dist/cjs/index.js

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

package/dist/cjs/src/components/badge/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sideSlotRender = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _color = require("../../../constant/color");
 var _Dot = require("../dot/Dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -15,7 +15,7 @@ var sideSlotRender = function (_a) {
   var slot = _a.slot,
     defaultIconSize = _a.defaultIconSize;
   if (slot.type === 'icon') {
-    return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+    return (0, _jsxRuntime.jsx)(_dynamic.default, {
       name: slot.icon,
       height: (_b = slot.size) !== null && _b !== void 0 ? _b : defaultIconSize,
       width: (_c = slot.size) !== null && _c !== void 0 ? _c : defaultIconSize,

package/dist/cjs/src/components/breadcrumb/BreadCrumb.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BreadCrumb = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -35,7 +35,7 @@ var BreadCrumb = function (_a) {
   if (!items || items.length === 0) return null;
   var renderItem = function (item, index) {
     var isLast = index === items.length - 1;
-    var content = index === 0 ? (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+    var content = index === 0 ? (0, _jsxRuntime.jsx)(_dynamic.default, {
       name: "home-01",
       width: 16,
       height: 16,

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.svgSize = exports.iconOnlySvgSize = exports.dotSize = exports.Button = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 var _color = require("../../../constant/color");
 var _dot = require("../dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -88,7 +88,7 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     var _a, _b, _c;
     if (slot.type === 'icon') {
       var iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
-      return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      return (0, _jsxRuntime.jsx)(_dynamic.default, {
         name: slot.icon,
         height: (_a = slot.size) !== null && _a !== void 0 ? _a : iconSize,
         width: (_b = slot.size) !== null && _b !== void 0 ? _b : iconSize,

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonCloseX = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -34,7 +34,7 @@ var ButtonCloseX = function (_a) {
     className: (0, _classnames.default)('ncua-button-close-x', "ncua-button-close-x--".concat(size), "ncua-button-close-x--".concat(theme), className),
     onClick: onClick
   }, {
-    children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+    children: (0, _jsxRuntime.jsx)(_dynamic.default, {
       name: "x-close",
       width: svgSize[size],
       height: svgSize[size]

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonGroup = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../../constant/color");
@@ -89,7 +89,7 @@ ButtonGroup.Item = function (_a) {
     var _a, _b, _c;
     if (!icon) return null;
     if (icon.type === 'icon') {
-      return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      return (0, _jsxRuntime.jsx)(_dynamic.default, {
         name: icon.icon,
         width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size],
         height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size],

package/dist/cjs/src/components/carousel/CarouselArrow.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CarouselArrow = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -31,7 +31,7 @@ var CarouselArrow = function (_a) {
     className: (0, _classnames.default)('ncua-carousel-arrow', (_b = {}, _b["ncua-carousel-arrow--".concat(type)] = type, _b["ncua-carousel-arrow--".concat(size)] = size, _b["ncua-carousel-arrow--".concat(chevron)] = chevron, _b), className),
     onClick: onClick
   }, {
-    children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+    children: (0, _jsxRuntime.jsx)(_dynamic.default, {
       className: "ncua-carousel-arrow__icon",
       color: "var(--gray-500)",
       name: chevron === 'left' ? 'chevron-left' : 'chevron-right'

package/dist/cjs/src/components/dropdown/Dropdown.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Dropdown = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -73,9 +73,9 @@ var Dropdown = function (_a) {
           className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
           onClick: toggleDropdown
         }, {
-          children: trigger.icon ? (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+          children: trigger.icon ? (0, _jsxRuntime.jsx)(_dynamic.default, {
             name: trigger.icon
-          }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+          }) : (0, _jsxRuntime.jsx)(_dynamic.default, {
             name: "dots-vertical"
           })
         }));
@@ -165,7 +165,7 @@ var Dropdown = function (_a) {
         children: [(0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-dropdown__item-text-group"
         }, {
-          children: [item.icon && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+          children: [item.icon && (0, _jsxRuntime.jsx)(_dynamic.default, {
             name: item.icon,
             className: "ncua-dropdown__item-icon"
           }), (0, _jsxRuntime.jsx)("span", __assign({

package/dist/cjs/src/components/featured-icon/FeaturedIcon.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FeaturedIcon = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -53,7 +53,7 @@ var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(fu
       }), (0, _jsxRuntime.jsx)("div", {
         className: "ncua-featured-icon__outline ncua-featured-icon__outline--outer"
       })]
-    }), (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+    }), (0, _jsxRuntime.jsx)(_dynamic.default, {
       name: name,
       width: iconSizeMap[size],
       height: iconSizeMap[size]

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

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileInputErrorType = exports.FileInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _Tag = require("../tag/Tag");
+var _button = require("../button");
+var _shared = require("../shared");
+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 __spreadArray = void 0 && (void 0).__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));
+};
+var FileInputErrorType;
+(function (FileInputErrorType) {
+  FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
+  FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
+  FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
+})(FileInputErrorType || (exports.FileInputErrorType = FileInputErrorType = {}));
+var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'xs' : _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,
+    disabled = _a.disabled,
+    label = _a.label,
+    hintItems = _a.hintItems,
+    validation = _a.validation,
+    destructive = _a.destructive,
+    isRequired = _a.isRequired,
+    showHelpIcon = _a.showHelpIcon,
+    hintText = _a.hintText,
+    props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText"]);
+  var fileInputRef = (0, _react.useRef)(null);
+  var _e = (0, _react.useState)([]),
+    internalFiles = _e[0],
+    setInternalFiles = _e[1];
+  // Determine if component is controlled or uncontrolled
+  var isControlled = value !== undefined;
+  var files = isControlled ? value : internalFiles;
+  // Sync internal state with controlled value
+  (0, _react.useEffect)(function () {
+    if (isControlled && value) {
+      setInternalFiles(value);
+    }
+  }, [isControlled, value]);
+  var updateFiles = function (newFiles) {
+    if (isControlled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
+    } else {
+      setInternalFiles(newFiles);
+      onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(newFiles);
+    }
+  };
+  var handleFileChange = function (event) {
+    var selectedFiles = event.target.files;
+    if (!selectedFiles || selectedFiles.length === 0) return;
+    var _a = validateFiles(Array.from(selectedFiles)),
+      validFiles = _a.validFiles,
+      invalidFiles = _a.invalidFiles;
+    var nextFiles = __spreadArray(__spreadArray([], files, true), validFiles, true);
+    updateFiles(nextFiles);
+    if (onFail && invalidFiles.length > 0) {
+      onFail(invalidFiles);
+    }
+  };
+  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: FileInputErrorType.ALREADY_UPLOADED
+        }));
+        return "continue";
+      }
+      if (!!maxFileSize && file.size > maxFileSize) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        }));
+        return "continue";
+      }
+      if (!!maxFileCount && files.length + validFiles.length >= maxFileCount) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT
+        }));
+        return "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
+    };
+  };
+  var handleBrowseClick = function () {
+    if (fileInputRef.current && !disabled) {
+      fileInputRef.current.click();
+    }
+  };
+  var handleRemoveFile = function (index) {
+    var newFiles = __spreadArray([], files, true);
+    newFiles.splice(index, 1);
+    updateFiles(newFiles);
+  };
+  var renderFileTagList = function () {
+    if (files.length === 0) return null;
+    return (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-file-input__file-tags"
+    }, {
+      children: files.map(function (file, index) {
+        return (0, _jsxRuntime.jsx)(_Tag.Tag, {
+          text: file.name,
+          size: size === 'xs' ? 'sm' : 'md',
+          close: true,
+          onButtonClick: function () {
+            return handleRemoveFile(index);
+          }
+        }, "".concat(file.name, "-").concat(index));
+      })
+    }));
+  };
+  var renderHintList = function () {
+    if (!hintItems || hintItems.length === 0) return null;
+    return (0, _jsxRuntime.jsx)("ul", __assign({
+      className: "ncua-file-input__hint-list"
+    }, {
+      children: hintItems.map(function (hint, index) {
+        return (0, _jsxRuntime.jsx)("li", __assign({
+          className: "ncua-file-input__hint-item"
+        }, {
+          children: hint
+        }), index);
+      })
+    }));
+  };
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: (0, _classnames.default)('ncua-file-input', "ncua-file-input--".concat(size))
+  }, {
+    children: [(0, _jsxRuntime.jsx)("input", __assign({
+      hidden: true,
+      ref: fileInputRef,
+      type: "file",
+      accept: accept,
+      multiple: multiple,
+      onChange: handleFileChange,
+      tabIndex: -1,
+      "aria-hidden": "true"
+    }, props)), (0, _jsxRuntime.jsxs)("div", __assign({
+      className: "ncua-file-input__input-container"
+    }, {
+      children: [(0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-file-input__label"
+      }, {
+        children: [(0, _jsxRuntime.jsx)(_shared.Label, __assign({
+          isRequired: isRequired
+        }, {
+          children: label
+        })), showHelpIcon && (0, _jsxRuntime.jsx)(_dynamic.default, {
+          className: "ncua-input__help-icon",
+          name: "help-circle"
+        })]
+      })), (0, _jsxRuntime.jsx)(_button.Button, {
+        size: size,
+        onClick: handleBrowseClick,
+        disabled: disabled,
+        leadingIcon: {
+          type: 'icon',
+          icon: 'upload-cloud-02'
+        },
+        label: buttonLabel
+      }), hintText && (0, _jsxRuntime.jsx)(_shared.HintText, __assign({
+        destructive: destructive
+      }, {
+        children: hintText
+      }))]
+    })), renderHintList(), renderFileTagList()]
+  }));
+});

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InputBase = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../constant/color");
@@ -83,7 +83,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
         return (0, _jsxRuntime.jsx)("div", __assign({
           className: "ncua-input__icon-wrap"
         }, {
-          children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+          children: (0, _jsxRuntime.jsx)(_dynamic.default, {
             className: (0, _classnames.default)("ncua-input__".concat(position, "-icon"), slot.className),
             name: slot.icon,
             color: slot.color ? _color.COLOR[slot.color] : undefined,
@@ -103,7 +103,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
       className: "ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear",
       onClick: props.onClearText
     }, {
-      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
         name: "x",
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],
@@ -116,7 +116,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
       return (0, _jsxRuntime.jsx)("div", __assign({
         className: "ncua-input__icon-wrap ncua-input__right-icon"
       }, {
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        children: (0, _jsxRuntime.jsx)(_dynamic.default, {
           name: "info-circle",
           className: "ncua-input__destructive-icon",
           width: validationSvgSize[size],
@@ -128,7 +128,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
       return (0, _jsxRuntime.jsx)("div", __assign({
         className: "ncua-input__icon-wrap ncua-input__right-icon"
       }, {
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        children: (0, _jsxRuntime.jsx)(_dynamic.default, {
           name: "check-circle",
           className: "ncua-input__validation-icon",
           width: validationSvgSize[size],
@@ -148,7 +148,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
         htmlFor: props.id
       }, {
         children: label
-      })), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      })), showHelpIcon && (0, _jsxRuntime.jsx)(_dynamic.default, {
         className: "ncua-input__help-icon",
         name: "help-circle"
       })]

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PasswordInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _InputBase = require("./InputBase");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../hooks");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -36,13 +37,25 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
   var _b = _a.size,
     size = _b === void 0 ? 'xs' : _b,
     props = __rest(_a, ["size"]);
-  var inputRef = (0, _react.useRef)(null);
   var _c = (0, _react.useState)(false),
     isVisible = _c[0],
     setIsVisible = _c[1];
   var _d = (0, _react.useState)(false),
     hasContent = _d[0],
     setHasContent = _d[1];
+  var callbackRef = (0, _hooks.useCallbackRef)(function (node) {
+    if (node) {
+      setHasContent(!!node.value);
+      var handleInput_1 = function () {
+        setHasContent(!!node.value);
+      };
+      node.addEventListener('input', handleInput_1);
+      return function () {
+        node.removeEventListener('input', handleInput_1);
+      };
+    }
+  });
+  var mergedRef = (0, _hooks.useMergeRefs)([ref, callbackRef]);
   var svgProps = {
     width: svgSize[size],
     height: svgSize[size]
@@ -50,29 +63,8 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
   var handleVisibilityChange = function () {
     setIsVisible(!isVisible);
   };
-  (0, _react.useEffect)(function () {
-    if (inputRef.current) {
-      setHasContent(!!inputRef.current.value);
-      var handleInput_1 = function () {
-        var _a;
-        setHasContent(!!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value));
-      };
-      inputRef.current.addEventListener('input', handleInput_1);
-      return function () {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
-      };
-    }
-  }, []);
   return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
-    ref: function (node) {
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-      inputRef.current = node;
-    },
+    ref: mergedRef,
     size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {

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

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

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FullWidthNotification = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../constant/color");
@@ -67,7 +67,7 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
         children: [(0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-full-width-notification__content-wrapper"
         }, {
-          children: [(0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+          children: [(0, _jsxRuntime.jsx)(_dynamic.default, {
             name: iconNameMap[color],
             width: 16,
             height: 16,
@@ -106,7 +106,7 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
             onClick: onClose,
             "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
           }, {
-            children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, __assign({
+            children: (0, _jsxRuntime.jsx)(_dynamic.default, __assign({
               name: "x-close"
             }, closeIconSize, {
               color: _color.COLOR[iconColorMap[color]]

package/dist/cjs/src/components/select/Select.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Select = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _HintText = require("../shared/hintText/HintText");
@@ -62,7 +62,7 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
       children: [icon ? (0, _jsxRuntime.jsx)("span", __assign({
         className: "ncua-select__icon"
       }, {
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        children: (0, _jsxRuntime.jsx)(_dynamic.default, {
           name: icon.icon,
           width: icon.size,
           height: icon.size,

package/dist/cjs/src/components/tag/Tag.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tag = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _color = require("../../../constant/color");
 var _dot = require("../dot");
@@ -35,7 +35,7 @@ var Tag = function (_a) {
   var sideSlotRender = function (slot) {
     var _a;
     if (slot.type === 'icon') {
-      return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      return (0, _jsxRuntime.jsx)(_dynamic.default, {
         name: slot.icon,
         width: iconSize[size],
         height: iconSize[size],
@@ -66,7 +66,7 @@ var Tag = function (_a) {
       className: "ncua-tag__close",
       onClick: onButtonClick
     }, {
-      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
         name: "x-close",
         color: _color.COLOR.gray300,
         width: iconSize[size],

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useCallbackRef", {
+  enumerable: true,
+  get: function () {
+    return _useCallbackRef.useCallbackRef;
+  }
+});
+Object.defineProperty(exports, "useMediaQuery", {
+  enumerable: true,
+  get: function () {
+    return _useMediaQuery.useMediaQuery;
+  }
+});
+Object.defineProperty(exports, "useMergeRefs", {
+  enumerable: true,
+  get: function () {
+    return _useMergeRefs.useMergeRefs;
+  }
+});
+var _useMediaQuery = require("./useMediaQuery");
+var _useMergeRefs = require("./useMergeRefs");
+var _useCallbackRef = require("./useCallbackRef");