@ncds/ui-admin 1.5.4 → 1.6.0

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

@@ -5,18 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sideSlotRender = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-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 }; }
 var DEFAULT_DOT_COLOR = 'neutral';
 var sideSlotRender = function (_a) {
   var _b, _c, _d, _e;
   var slot = _a.slot,
     defaultIconSize = _a.defaultIconSize;
   if (slot.type === 'icon') {
-    return (0, _jsxRuntime.jsx)(_dynamic.default, {
-      name: slot.icon,
+    var Icon = slot.icon;
+    return (0, _jsxRuntime.jsx)(Icon, {
       height: (_b = slot.size) !== null && _b !== void 0 ? _b : defaultIconSize,
       width: (_c = slot.size) !== null && _c !== void 0 ? _c : defaultIconSize,
       color: slot.color ? _color.COLOR[slot.color] : undefined

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 _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -35,8 +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)(_dynamic.default, {
-      name: "home-01",
+    var content = index === 0 ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Home01, {
       width: 16,
       height: 16,
       color: "gray500"

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

@@ -5,9 +5,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 _react = require("react");
 var _color = require("../../../constant/color");
 var _dot = require("../dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -65,10 +64,10 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     restProps = __rest(props, ["size", "children", "onlyIcon", "disabled", "className", "hierarchy", "label", "leadingIcon", "trailingIcon", "underline"]);
   var sideSlotRender = function (slot) {
     var _a, _b, _c;
+    var iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
     if (slot.type === 'icon') {
-      var iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
-      return (0, _jsxRuntime.jsx)(_dynamic.default, {
-        name: slot.icon,
+      var Icon = slot.icon;
+      return (0, _jsxRuntime.jsx)(Icon, {
         height: (_a = slot.size) !== null && _a !== void 0 ? _a : iconSize,
         width: (_b = slot.size) !== null && _b !== void 0 ? _b : iconSize,
         color: slot.color ? _color.COLOR[slot.color] : undefined

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 _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -31,11 +31,11 @@ var ButtonCloseX = function (_a) {
     className = _a.className,
     onClick = _a.onClick;
   return (0, _jsxRuntime.jsx)("button", __assign({
+    type: "button",
     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)(_dynamic.default, {
-      name: "x-close",
+    children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
       width: svgSize[size],
       height: svgSize[size]
     })

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

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

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CarouselArrow = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
-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,10 +31,10 @@ 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)(_dynamic.default, {
-      className: "ncua-carousel-arrow__icon",
-      color: "var(--gray-500)",
-      name: chevron === 'left' ? 'chevron-left' : 'chevron-right'
+    children: chevron === 'left' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronLeft, {
+      className: "ncua-carousel-arrow__icon"
+    }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronRight, {
+      className: "ncua-carousel-arrow__icon"
     })
   }));
 };

package/dist/cjs/src/components/combobox/ComboBox.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultMaxHeight = exports.ComboBox = 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 _dropdown = require("../../hooks/dropdown");
@@ -198,14 +199,14 @@ var ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (
         size: "xxs",
         leadingIcon: {
           type: 'icon',
-          icon: 'chevron-selector-vertical'
+          icon: _uiAdminIcon.ChevronSelectorVertical
         }
       })
     }))
   };
   var leadingElement = {
     type: 'icon',
-    icon: 'search-lg',
+    icon: _uiAdminIcon.SearchLg,
     size: 14,
     color: 'gray300'
   };

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _react = require("react");
-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) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -41,8 +40,10 @@ var CustomInput = exports.CustomInput = /*#__PURE__*/(0, _react.forwardRef)(func
       className: "ncua-date-picker__ico",
       htmlFor: props.id
     }, {
-      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
-        name: iconName,
+      children: iconName === 'calendar' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Calendar, {
+        width: svgSize,
+        height: svgSize
+      }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.Clock, {
         width: svgSize,
         height: svgSize
       })

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

@@ -49,7 +49,8 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     _d = _a.isEndDate,
     isEndDate = _d === void 0 ? false : _d,
     onValidationError = _a.onValidationError,
-    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError"]);
+    className = _a.className,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError", "className"]);
   var flatpickrInstanceRef = (0, _react.useRef)(null);
   var dateFormatRef = (0, _react.useRef)('Y-m-d');
   var minMaxDateRef = (0, _react.useRef)({});
@@ -302,7 +303,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       'ncua-date-picker--disabled': attrs.disabled,
       'ncua-date-picker--has-time': hasTimeOption,
       'ncua-date-picker--destructive': attrs.destructive
-    })
+    }, className)
   }, {
     children: [(0, _jsxRuntime.jsx)(_reactFlatpickr.default, __assign({}, attrs, {
       ref: ref || undefined,

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Dropdown = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _react = require("react");
-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++) {
@@ -60,6 +59,7 @@ var Dropdown = function (_a) {
     }
   }, [closeOnClickOutside]);
   var renderTrigger = function () {
+    var _a;
     switch (trigger.type) {
       case 'custom':
         return (0, _jsxRuntime.jsx)("button", __assign({
@@ -69,16 +69,15 @@ var Dropdown = function (_a) {
           children: trigger.children
         }));
       case 'icon':
-        return (0, _jsxRuntime.jsx)("button", __assign({
-          className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
-          onClick: toggleDropdown
-        }, {
-          children: trigger.icon ? (0, _jsxRuntime.jsx)(_dynamic.default, {
-            name: trigger.icon
-          }) : (0, _jsxRuntime.jsx)(_dynamic.default, {
-            name: "dots-vertical"
-          })
-        }));
+        {
+          var TriggerIcon = (_a = trigger.icon) !== null && _a !== void 0 ? _a : _uiAdminIcon.DotsVertical;
+          return (0, _jsxRuntime.jsx)("button", __assign({
+            className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
+            onClick: toggleDropdown
+          }, {
+            children: (0, _jsxRuntime.jsx)(TriggerIcon, {})
+          }));
+        }
       case 'avatar':
         return (0, _jsxRuntime.jsx)("button", __assign({
           className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
@@ -150,7 +149,8 @@ var Dropdown = function (_a) {
     return null;
   };
   var renderItem = function (item) {
-    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : ''].filter(Boolean).join(' ');
+    var ItemIcon = item.icon;
+    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : '', item.className].filter(Boolean).join(' ');
     return (0, _jsxRuntime.jsxs)("div", __assign({
       className: itemClasses
     }, {
@@ -165,8 +165,7 @@ var Dropdown = function (_a) {
         children: [(0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-dropdown__item-text-group"
         }, {
-          children: [item.icon && (0, _jsxRuntime.jsx)(_dynamic.default, {
-            name: item.icon,
+          children: [ItemIcon && (0, _jsxRuntime.jsx)(ItemIcon, {
             className: "ncua-dropdown__item-icon"
           }), (0, _jsxRuntime.jsx)("span", __assign({
             className: "ncua-dropdown__item-text"

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FeaturedIcon = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -34,7 +33,7 @@ var iconSizeMap = {
   xl: 28
 };
 var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
-  var name = _a.name,
+  var Icon = _a.icon,
     _b = _a.theme,
     theme = _b === void 0 ? 'light-circle' : _b,
     _c = _a.color,
@@ -42,7 +41,7 @@ var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(fu
     _d = _a.size,
     size = _d === void 0 ? 'md' : _d,
     className = _a.className,
-    rest = __rest(_a, ["name", "theme", "color", "size", "className"]);
+    rest = __rest(_a, ["icon", "theme", "color", "size", "className"]);
   return (0, _jsxRuntime.jsxs)("div", __assign({
     ref: ref,
     className: (0, _classnames.default)('ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size), className)
@@ -53,8 +52,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)(_dynamic.default, {
-      name: name,
+    }), (0, _jsxRuntime.jsx)(Icon, {
       width: iconSizeMap[size],
       height: iconSizeMap[size]
     })]

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FileInputErrorType = exports.FileInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
-var _Tag = require("../tag/Tag");
+var _react = require("react");
 var _button = require("../button");
 var _shared = require("../shared");
+var _Tag = require("../tag/Tag");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -207,9 +207,8 @@ var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function
           isRequired: isRequired
         }, {
           children: label
-        })), showHelpIcon && (0, _jsxRuntime.jsx)(_dynamic.default, {
-          className: "ncua-input__help-icon",
-          name: "help-circle"
+        })), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+          className: "ncua-input__help-icon"
         })]
       })), (0, _jsxRuntime.jsx)(_button.Button, {
         size: size,
@@ -217,7 +216,7 @@ var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function
         disabled: disabled,
         leadingIcon: {
           type: 'icon',
-          icon: 'share-01'
+          icon: _uiAdminIcon.Upload01
         },
         label: buttonLabel
       }), hintText && (0, _jsxRuntime.jsx)(_shared.HintText, __assign({

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImageFileInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _button = require("../button");
@@ -236,9 +236,8 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
             isRequired: isRequired
           }, {
             children: label
-          })), showHelpIcon && (0, _jsxRuntime.jsx)(_dynamic.default, {
-            className: "ncua-input__help-icon",
-            name: "help-circle"
+          })), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+            className: "ncua-input__help-icon"
           })]
         })), (0, _jsxRuntime.jsx)(_button.Button, {
           size: "xs",
@@ -246,7 +245,7 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
           disabled: disabled,
           leadingIcon: {
             type: 'icon',
-            icon: 'share-01'
+            icon: _uiAdminIcon.Upload01
           },
           label: buttonLabel
         }), showHintText && hintText && (0, _jsxRuntime.jsx)(_shared.HintText, __assign({

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImagePreview = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _button = require("../../button");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -32,7 +33,7 @@ var ImagePreview = function (_a) {
       onlyIcon: true,
       leadingIcon: {
         type: 'icon',
-        icon: 'trash-03',
+        icon: _uiAdminIcon.Trash03,
         color: 'gray200'
       },
       label: "Remove image",

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 _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../constant/color");
@@ -100,18 +100,23 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
     var _a, _b;
     switch (slot.type) {
       case 'icon':
-        return (0, _jsxRuntime.jsx)("div", __assign({
-          className: "ncua-input__icon-wrap"
-        }, {
-          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,
-            width: (_a = slot.size) !== null && _a !== void 0 ? _a : generalSvgSize[size],
-            height: (_b = slot.size) !== null && _b !== void 0 ? _b : generalSvgSize[size]
-          })
-        }));
+        {
+          var SlotIcon = slot.icon;
+          return (0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-input__icon-wrap"
+          }, {
+            children: (0, _jsxRuntime.jsx)(SlotIcon, {
+              className: (0, _classnames.default)("ncua-input__".concat(position, "-icon"), slot.className),
+              color: slot.color ? _color.COLOR[slot.color] : undefined,
+              width: (_a = slot.size) !== null && _a !== void 0 ? _a : generalSvgSize[size],
+              height: (_b = slot.size) !== null && _b !== void 0 ? _b : generalSvgSize[size]
+            })
+          }));
+        }
       case 'custom':
+        if (slot.placement !== 'inside') {
+          return null;
+        }
         return slot.children;
       default:
         return null;
@@ -120,11 +125,11 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
   var renderClearButton = function () {
     if (!props.clearText) return null;
     return (0, _jsxRuntime.jsx)("button", __assign({
-      className: "ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear",
+      type: "button",
+      className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
       onClick: props.onClearText
     }, {
-      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
-        name: "x",
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],
         height: validationSvgSize[size]
@@ -136,8 +141,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)(_dynamic.default, {
-          name: "info-circle",
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.InfoCircle, {
           className: "ncua-input__destructive-icon",
           width: validationSvgSize[size],
           height: validationSvgSize[size]
@@ -148,8 +152,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)(_dynamic.default, {
-          name: "check-circle",
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.CheckCircle, {
           className: "ncua-input__validation-icon",
           width: validationSvgSize[size],
           height: validationSvgSize[size]
@@ -168,9 +171,8 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
         htmlFor: props.id
       }, {
         children: label
-      })), showHelpIcon && (0, _jsxRuntime.jsx)(_dynamic.default, {
-        className: "ncua-input__help-icon",
-        name: "help-circle"
+      })), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+        className: "ncua-input__help-icon"
       })]
     }));
   };
@@ -198,8 +200,6 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
               } else if (ref) {
                 ref.current = node;
               }
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore - ref assignment is needed for internal tracking
               inputRef.current = node;
             },
             type: "text",

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

@@ -54,7 +54,7 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
-      icon: 'lock-01',
+      icon: _uiAdminIcon.Lock01,
       color: props.value ? 'gray600' : 'gray300'
     },
     trailingElement: {

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

@@ -100,7 +100,7 @@ Modal.Header = function (_a) {
       })
     }, {
       children: [featuredIcon && (0, _jsxRuntime.jsx)(_featuredIcon.FeaturedIcon, {
-        name: featuredIcon.name,
+        icon: featuredIcon.icon,
         color: featuredIcon.color,
         theme: featuredIcon.theme,
         size: "sm"
@@ -128,9 +128,10 @@ Modal.Header = function (_a) {
   });
 };
 Modal.Content = function (_a) {
-  var children = _a.children;
+  var children = _a.children,
+    className = _a.className;
   return (0, _jsxRuntime.jsx)("div", __assign({
-    className: "ncua-modal__content"
+    className: (0, _classnames.default)('ncua-modal__content', className)
   }, {
     children: children
   }));
@@ -171,12 +172,13 @@ Modal.Actions = function (_a) {
     showDivider = _c === void 0 ? false : _c,
     _d = _a.align,
     align = _d === void 0 ? 'stretch' : _d,
-    checkboxContent = _a.checkboxContent;
+    checkboxContent = _a.checkboxContent,
+    className = _a.className;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [showDivider && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-modal__actions-divider"
     }), (0, _jsxRuntime.jsxs)("div", __assign({
-      className: (0, _classnames.default)('ncua-modal__actions-wrapper', {
+      className: (0, _classnames.default)('ncua-modal__actions-wrapper', className, {
         'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
       })
     }, {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FloatingNotification = 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 _breakpoint = require("../../constant/breakpoint");
@@ -31,11 +32,11 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-var iconNameMap = {
-  neutral: 'pin-02',
-  error: 'alert-triangle',
-  warning: 'alert-circle',
-  success: 'check-circle'
+var iconMap = {
+  neutral: _uiAdminIcon.Pin02,
+  error: _uiAdminIcon.AlertTriangle,
+  warning: _uiAdminIcon.AlertCircle,
+  success: _uiAdminIcon.CheckCircle
   // info는 floating에서는 지원하지 않음
 };
 var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
@@ -54,7 +55,7 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
     setShouldRemove = _d[1];
   var iconColor = color;
   var featuredIconProps = {
-    name: iconNameMap[color] || 'pin-02',
+    icon: iconMap[color] || _uiAdminIcon.Pin02,
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
@@ -98,7 +99,7 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
       children: (0, _jsxRuntime.jsxs)("div", __assign({
         className: "ncua-floating-notification__container"
       }, {
-        children: [iconNameMap[color] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
+        children: [iconMap[color] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
           size: isMobile ? 'md' : 'sm'
         })), (0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-floating-notification__text-container"

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 _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../constant/color");
@@ -28,12 +28,12 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-var iconNameMap = {
-  neutral: 'message-chat-square',
-  error: 'alert-triangle',
-  warning: 'alert-triangle',
-  success: 'check-circle',
-  info: 'info-circle'
+var iconMap = {
+  neutral: _uiAdminIcon.MessageChatSquare,
+  error: _uiAdminIcon.AlertTriangle,
+  warning: _uiAdminIcon.AlertTriangle,
+  success: _uiAdminIcon.CheckCircle,
+  info: _uiAdminIcon.InfoCircle
 };
 var iconColorMap = {
   neutral: 'gray700',
@@ -101,13 +101,15 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
         children: [(0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-full-width-notification__content-wrapper"
         }, {
-          children: [(0, _jsxRuntime.jsx)(_dynamic.default, {
-            name: iconNameMap[color],
-            width: 16,
-            height: 16,
-            color: _color.COLOR[iconColorMap[color]],
-            className: "ncua-full-width-notification__icon"
-          }), (0, _jsxRuntime.jsxs)("div", __assign({
+          children: [function () {
+            var IconComponent = iconMap[color];
+            return (0, _jsxRuntime.jsx)(IconComponent, {
+              width: 16,
+              height: 16,
+              color: _color.COLOR[iconColorMap[color]],
+              className: "ncua-full-width-notification__icon"
+            });
+          }(), (0, _jsxRuntime.jsxs)("div", __assign({
             className: "ncua-full-width-notification__text-container"
           }, {
             children: [(0, _jsxRuntime.jsx)("span", __assign({
@@ -155,9 +157,7 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
             onClick: onClose,
             "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
           }, {
-            children: (0, _jsxRuntime.jsx)(_dynamic.default, __assign({
-              name: "x-close"
-            }, closeIconSize, {
+            children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, __assign({}, closeIconSize, {
               color: _color.COLOR[iconColorMap[color]]
             }))
           }))]