@ncds/ui-admin 1.5.4 → 1.6.0

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MessageNotification = 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");
@@ -30,11 +30,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
 };
 var iconColorMap = {
   neutral: 'gray700',
@@ -45,7 +45,7 @@ var iconColorMap = {
 var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var title = _a.title,
     supportingText = _a.supportingText,
-    icon = _a.icon,
+    Icon = _a.icon,
     _b = _a.color,
     color = _b === void 0 ? 'neutral' : _b,
     onClose = _a.onClose,
@@ -57,7 +57,7 @@ var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.
   var validColor = color === 'info' ? 'neutral' : color;
   var iconColor = validColor;
   var featuredIconProps = {
-    name: icon || iconNameMap[validColor] || 'pin-02',
+    icon: Icon || iconMap[validColor] || _uiAdminIcon.Pin02,
     size: 'lg',
     color: iconColor,
     theme: 'light-circle'
@@ -77,7 +77,7 @@ var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.
         children: [(0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-message-notification__content-wrapper"
         }, {
-          children: [iconNameMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
+          children: [iconMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
             className: "ncua-message-notification__icon"
           })), (0, _jsxRuntime.jsxs)("div", __assign({
             className: "ncua-message-notification__text-container"
@@ -112,7 +112,7 @@ var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.
         }, {
           children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", __assign({
             type: "button",
-            className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-message-notification__hide-link'),
+            className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'),
             onClick: onHidePermanently
           }, {
             children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
@@ -122,8 +122,7 @@ var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.
             onClick: onClose,
             "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
           }, {
-            children: (0, _jsxRuntime.jsx)(_dynamic.default, {
-              name: "x-close",
+            children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
               width: 20,
               height: 20,
               color: closeIconColor

package/dist/cjs/src/components/pagination/NavButton.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavButton = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _Button = require("../button/Button");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _button = require("../button");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,29 +21,29 @@ var NAV_BUTTON_CONFIG = {
   first: {
     label: '처음',
     className: 'ncua-pagination__first',
-    getIcon: function (isPC) {
-      return 'chevron-left-double';
+    getIcon: function (_isPC) {
+      return _uiAdminIcon.ChevronLeftDouble;
     }
   },
   prev: {
     label: '이전',
     className: 'ncua-pagination__before',
     getIcon: function (isPC) {
-      return isPC ? 'chevron-left' : 'arrow-left';
+      return isPC ? _uiAdminIcon.ChevronLeft : _uiAdminIcon.ArrowLeft;
     }
   },
   next: {
     label: '다음',
     className: 'ncua-pagination__next',
     getIcon: function (isPC) {
-      return isPC ? 'chevron-right' : 'arrow-right';
+      return isPC ? _uiAdminIcon.ChevronRight : _uiAdminIcon.ArrowRight;
     }
   },
   last: {
     label: '마지막',
     className: 'ncua-pagination__last',
-    getIcon: function (isPC) {
-      return 'chevron-right-double';
+    getIcon: function (_isPC) {
+      return _uiAdminIcon.ChevronRightDouble;
     }
   }
 };
@@ -56,7 +57,7 @@ var NavButton = function (_a) {
   var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
   var isFirstOrPrev = type === 'first' || type === 'prev';
   var isNextOrLast = type === 'next' || type === 'last';
-  var disabled = isFirstOrPrev ? noPrev : isNextOrLast ? noNext : false;
+  var disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
   var isPC = breakPoint === 'pc';
   // key를 제외한 공통 props
   var buttonProps = {
@@ -66,8 +67,8 @@ var NavButton = function (_a) {
     leadingIcon: {
       type: 'icon',
       icon: config.getIcon(isPC),
-      color: disabled ? 'gray200' : 'gray700',
-      size: isPC ? 16 : 20
+      size: isPC ? 16 : 20,
+      color: disabled ? 'gray200' : 'gray700'
     },
     hierarchy: 'secondary-gray',
     size: isPC ? 'xs' : 'sm',
@@ -76,6 +77,6 @@ var NavButton = function (_a) {
   };
   // key 값 별도 계산
   var buttonKey = isNavigationButton ? "".concat(breakPoint, "-").concat(type) : undefined;
-  return (0, _jsxRuntime.jsx)(_Button.Button, __assign({}, buttonProps), buttonKey);
+  return (0, _jsxRuntime.jsx)(_button.Button, __assign({}, buttonProps), buttonKey);
 };
 exports.NavButton = NavButton;

package/dist/cjs/src/components/select-dropdown/SelectDropdown.js

@@ -56,12 +56,15 @@ var SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardRef
     className = _a.className,
     activeDescendantId = _a.activeDescendantId,
     componentType = _a.componentType,
-    props = __rest(_a, ["isOpen", "direction", "size", "options", "value", "focusedIndex", "maxHeight", "listboxId", "onOptionSelect", "onMouseMove", "isKeyboardNavigation", "onOptionHover", "children", "multiple", "showFooterButtons", "selectAllButtonText", "onSelectAll", "onEdit", "onComplete", "className", "activeDescendantId", "componentType"]);
+    _h = _a.align,
+    align = _h === void 0 ? 'left' : _h,
+    props = __rest(_a, ["isOpen", "direction", "size", "options", "value", "focusedIndex", "maxHeight", "listboxId", "onOptionSelect", "onMouseMove", "isKeyboardNavigation", "onOptionHover", "children", "multiple", "showFooterButtons", "selectAllButtonText", "onSelectAll", "onEdit", "onComplete", "className", "activeDescendantId", "componentType", "align"]);
   if (!isOpen) return null;
   return (0, _jsxRuntime.jsxs)("div", __assign({
     ref: ref,
     className: (0, _classnames.default)('ncua-select-dropdown', "ncua-select-dropdown--".concat(direction), "ncua-select-dropdown--".concat(size), {
       'ncua-select-dropdown--multiple': multiple,
+      'ncua-select-dropdown--align-right': align === 'right',
       'ncua-select-dropdown--selectbox-single': componentType === 'selectbox' && !multiple
     }, className),
     onMouseMove: onMouseMove,
@@ -87,7 +90,7 @@ var SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardRef
           var handleMouseEnter = function () {
             onOptionHover === null || onOptionHover === void 0 ? void 0 : onOptionHover(index);
           };
-          return (0, _jsxRuntime.jsx)("li", __assign({
+          return (0, _jsxRuntime.jsxs)("li", __assign({
             id: optionId,
             className: (0, _classnames.default)('ncua-select-dropdown__option', {
               'ncua-select-dropdown__option--selected': isSelected,
@@ -100,11 +103,18 @@ var SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardRef
             role: "option",
             "aria-selected": isSelected
           }, {
-            children: (0, _jsxRuntime.jsx)("span", __assign({
+            children: [option.icon && (0, _jsxRuntime.jsx)("span", __assign({
+              className: "ncua-select-dropdown__option-icon"
+            }, {
+              children: (0, _jsxRuntime.jsx)(option.icon, {
+                width: 16,
+                height: 16
+              })
+            })), (0, _jsxRuntime.jsx)("span", __assign({
               className: "ncua-select-dropdown__option-text"
             }, {
               children: option.label
-            }))
+            }))]
           }), option.id);
         }), children]
       }))

package/dist/cjs/src/components/selectbox/SelectBox.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SelectBox = exports.DEFAULT_MAX_HEIGHT = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
-var _color = require("@ncds/ui-admin/constant/color");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _color = require("../../../constant/color");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _dropdown = require("../../hooks/dropdown");
@@ -53,29 +53,33 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
     size = _d === void 0 ? 'xs' : _d,
     _e = _a.type,
     type = _e === void 0 ? 'default' : _e,
-    _f = _a.destructive,
-    destructive = _f === void 0 ? false : _f,
+    _f = _a.autoWidth,
+    autoWidth = _f === void 0 ? true : _f,
+    _g = _a.destructive,
+    destructive = _g === void 0 ? false : _g,
     value = _a.value,
-    _g = _a.optionItems,
-    optionItems = _g === void 0 ? [] : _g,
-    _h = _a.disabled,
-    disabled = _h === void 0 ? false : _h,
-    _j = _a.maxHeight,
-    maxHeight = _j === void 0 ? DEFAULT_MAX_HEIGHT : _j,
-    _k = _a.multiple,
-    multiple = _k === void 0 ? false : _k,
+    _h = _a.optionItems,
+    optionItems = _h === void 0 ? [] : _h,
+    _j = _a.disabled,
+    disabled = _j === void 0 ? false : _j,
+    _k = _a.maxHeight,
+    maxHeight = _k === void 0 ? DEFAULT_MAX_HEIGHT : _k,
+    _l = _a.multiple,
+    multiple = _l === void 0 ? false : _l,
+    _m = _a.align,
+    align = _m === void 0 ? 'left' : _m,
     id = _a.id,
     className = _a.className,
     children = _a.children,
     register = _a.register,
     onChange = _a.onChange,
     onEdit = _a.onEdit,
-    props = __rest(_a, ["placeholder", "disabledPlaceholder", "hintText", "size", "type", "destructive", "value", "optionItems", "disabled", "maxHeight", "multiple", "id", "className", "children", "register", "onChange", "onEdit"]);
+    props = __rest(_a, ["placeholder", "disabledPlaceholder", "hintText", "size", "type", "autoWidth", "destructive", "value", "optionItems", "disabled", "maxHeight", "multiple", "align", "id", "className", "children", "register", "onChange", "onEdit"]);
   var internalRef = (0, _react.useRef)(null);
   var dropdownRef = (0, _react.useRef)(null);
-  var _l = (0, _react.useState)([]),
-    selectedTags = _l[0],
-    setSelectedTags = _l[1];
+  var _o = (0, _react.useState)([]),
+    selectedTags = _o[0],
+    setSelectedTags = _o[1];
   var selectedOption = (0, _react.useMemo)(function () {
     if (multiple) return null;
     return optionItems.find(function (option) {
@@ -86,7 +90,7 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
     if (multiple) {
       return placeholder;
     }
-    return selectedOption ? selectedOption.label : placeholder;
+    return selectedOption ? selectedOption : placeholder;
   }, [multiple, selectedOption, placeholder]);
   var handleOptionSelect = function (option) {
     if (disabled) return;
@@ -114,7 +118,7 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
       });
     }
   };
-  var _m = (0, _dropdown.useDropdown)({
+  var _p = (0, _dropdown.useDropdown)({
       triggerRef: internalRef,
       dropdownRef: dropdownRef,
       maxHeight: maxHeight,
@@ -124,16 +128,16 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
       multiple: multiple,
       onSelect: handleOptionSelect
     }),
-    isOpen = _m.isOpen,
-    dropdownDirection = _m.direction,
-    focusedIndex = _m.focusedIndex,
-    toggleDropdown = _m.toggleDropdown,
-    closeDropdown = _m.closeDropdown,
-    handleKeyDown = _m.handleKeyDown,
-    handleDropdownSelect = _m.handleOptionSelect,
-    handleMouseMove = _m.handleMouseMove,
-    isKeyboardNavigation = _m.isKeyboardNavigation,
-    setFocusedIndex = _m.setFocusedIndex;
+    isOpen = _p.isOpen,
+    dropdownDirection = _p.direction,
+    focusedIndex = _p.focusedIndex,
+    toggleDropdown = _p.toggleDropdown,
+    closeDropdown = _p.closeDropdown,
+    handleKeyDown = _p.handleKeyDown,
+    handleDropdownSelect = _p.handleOptionSelect,
+    handleMouseMove = _p.handleMouseMove,
+    isKeyboardNavigation = _p.isKeyboardNavigation,
+    setFocusedIndex = _p.setFocusedIndex;
   var activeDescendantId = (0, _react.useMemo)(function () {
     if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
       return undefined;
@@ -147,11 +151,11 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
   }, [handleMouseMove, setFocusedIndex]);
   // Multiple select 관련 로직
   var currentSelectedValues = multiple && Array.isArray(value) ? value : [];
-  var _o = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems),
-    selectAllButtonText = _o.buttonText,
-    toggleSelectAll = _o.toggleSelectAll,
-    getSelectedTagsData = _o.getSelectedTagsData,
-    removeTag = _o.removeTag;
+  var _q = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems),
+    selectAllButtonText = _q.buttonText,
+    toggleSelectAll = _q.toggleSelectAll,
+    getSelectedTagsData = _q.getSelectedTagsData,
+    removeTag = _q.removeTag;
   var handleSelectAll = function () {
     if (!multiple || !onChange) return;
     var newSelectedValues = toggleSelectAll();
@@ -181,11 +185,11 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
   };
   (0, _dropdown.useScrollLock)(isOpen, dropdownRef);
   (0, _react.useLayoutEffect)(function () {
-    if (isOpen && dropdownRef.current && internalRef.current) {
+    if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
       var dropdownWidth = dropdownRef.current.offsetWidth;
       internalRef.current.style.width = "".concat(dropdownWidth, "px");
     }
-  }, [isOpen, optionItems]);
+  }, [autoWidth, isOpen, optionItems]);
   (0, _react.useImperativeHandle)(ref, function () {
     return internalRef.current;
   }, []);
@@ -216,12 +220,30 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
         children: [(0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-selectbox__content-inner"
         }, {
-          children: [(0, _jsxRuntime.jsx)("span", __assign({
+          children: [(0, _jsxRuntime.jsx)("div", __assign({
             className: "ncua-selectbox__value"
           }, {
-            children: displayValue
-          })), (0, _jsxRuntime.jsx)(_dynamic.default, {
-            name: "chevron-down",
+            children: typeof displayValue === 'string' ? (0, _jsxRuntime.jsx)("span", __assign({
+              className: "ncua-selectbox__value-text"
+            }, {
+              children: displayValue
+            })) : (0, _jsxRuntime.jsxs)("div", __assign({
+              className: "ncua-selectbox__value-container"
+            }, {
+              children: [displayValue.icon && (0, _jsxRuntime.jsx)("span", __assign({
+                className: "ncua-selectbox__value-icon"
+              }, {
+                children: (0, _jsxRuntime.jsx)(displayValue.icon, {
+                  width: 16,
+                  height: 16
+                })
+              })), (0, _jsxRuntime.jsx)("span", __assign({
+                className: "ncua-selectbox__value-text"
+              }, {
+                children: displayValue.label
+              }))]
+            }))
+          })), (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronDown, {
             width: size === 'xs' ? 14 : 16,
             height: size === 'xs' ? 14 : 16,
             color: disabled ? _color.COLOR.gray300 : _color.COLOR.gray500,
@@ -245,6 +267,7 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
           componentType: "selectbox",
           isKeyboardNavigation: isKeyboardNavigation,
           activeDescendantId: activeDescendantId,
+          align: align,
           onOptionSelect: handleDropdownSelect,
           onMouseMove: handleMouseMove,
           onOptionHover: handleOptionHover,

package/dist/cjs/src/components/tab/TabButton.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabButton = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Badge = require("../badge/Badge");
-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) {
@@ -82,8 +82,7 @@ var TabButton = function (_a) {
         return onClose === null || onClose === void 0 ? void 0 : onClose(id !== null && id !== void 0 ? id : '');
       }
     }, {
-      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
-        name: "x-close",
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
         width: 14,
         height: 14
       })

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 _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");
@@ -110,8 +110,8 @@ var Tag = function (_a) {
   var sideSlotRender = function (slot) {
     var _a;
     if (slot.type === 'icon') {
-      return (0, _jsxRuntime.jsx)(_dynamic.default, {
-        name: slot.icon,
+      var SlotIcon = slot.icon;
+      return (0, _jsxRuntime.jsx)(SlotIcon, {
         width: iconSize[size],
         height: iconSize[size],
         color: slot.color
@@ -146,8 +146,7 @@ var Tag = function (_a) {
       className: "ncua-tag__close",
       onClick: onButtonClick
     }, {
-      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
-        name: "x-close",
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
         color: _color.COLOR.gray300,
         width: iconSize[size],
         height: iconSize[size]

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot/Dot';
 var DEFAULT_DOT_COLOR = 'neutral';
@@ -8,8 +7,8 @@ export var sideSlotRender = function (_a) {
   var slot = _a.slot,
     defaultIconSize = _a.defaultIconSize;
   if (slot.type === 'icon') {
+    var Icon = slot.icon;
     return _jsx(Icon, {
-      name: slot.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[slot.color] : undefined

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

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { Home01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 var BreadcrumbItem = function (_a) {
   var href = _a.href,
@@ -28,8 +28,7 @@ export 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 ? _jsx(Icon, {
-      name: "home-01",
+    var content = index === 0 ? _jsx(Home01, {
       width: 16,
       height: 16,
       color: "gray500"

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

@@ -17,9 +17,8 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, forwardRef } from 'react';
-import Icon from '@ncds/ui-admin-icon/dynamic';
 import classnames from 'classnames';
+import { createElement, forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';
 export var svgSize = {
@@ -58,10 +57,10 @@ export var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     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];
+      var Icon = slot.icon;
       return _jsx(Icon, {
-        name: slot.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[slot.color] : undefined

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

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { XClose } from '@ncds/ui-admin-icon';
 import classnames from 'classnames';
 var svgSize = {
   xs: 16,
@@ -24,11 +24,11 @@ export var ButtonCloseX = function (_a) {
     className = _a.className,
     onClick = _a.onClick;
   return _jsx("button", __assign({
+    type: "button",
     className: classnames('ncua-button-close-x', "ncua-button-close-x--".concat(size), "ncua-button-close-x--".concat(theme), className),
     onClick: onClick
   }, {
-    children: _jsx(Icon, {
-      name: "x-close",
+    children: _jsx(XClose, {
       width: svgSize[size],
       height: svgSize[size]
     })

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

@@ -17,7 +17,6 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import React, { createElement } from 'react';
 import { COLOR } from '../../../constant/color';
@@ -77,11 +76,8 @@ ButtonGroup.Item = function (_a) {
     var _a, _b, _c;
     if (!icon) return null;
     if (icon.type === 'icon') {
-      return _jsx(Icon, {
-        style: icon.color ? {
-          '--icon-color': COLOR[icon.color]
-        } : undefined,
-        name: icon.icon,
+      var IconComponent = icon.icon;
+      return _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[icon.color] : 'currentColor'

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

@@ -9,8 +9,8 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import Icon from '@ncds/ui-admin-icon/dynamic';
 export var CarouselArrow = function (_a) {
   var _b;
   var _c = _a.type,
@@ -24,10 +24,10 @@ export var CarouselArrow = function (_a) {
     className: classNames('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: _jsx(Icon, {
-      className: "ncua-carousel-arrow__icon",
-      color: "var(--gray-500)",
-      name: chevron === 'left' ? 'chevron-left' : 'chevron-right'
+    children: chevron === 'left' ? _jsx(ChevronLeft, {
+      className: "ncua-carousel-arrow__icon"
+    }) : _jsx(ChevronRight, {
+      className: "ncua-carousel-arrow__icon"
     })
   }));
 };

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

@@ -26,6 +26,7 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
   return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { useDropdown } from '../../hooks/dropdown';
@@ -191,14 +192,14 @@ export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
         size: "xxs",
         leadingIcon: {
           type: 'icon',
-          icon: 'chevron-selector-vertical'
+          icon: ChevronSelectorVertical
         }
       })
     }))
   };
   var leadingElement = {
     type: 'icon',
-    icon: 'search-lg',
+    icon: SearchLg,
     size: 14,
     color: 'gray300'
   };

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

@@ -17,8 +17,8 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, Clock } from '@ncds/ui-admin-icon';
 import { forwardRef } from 'react';
-import Icon from '@ncds/ui-admin-icon/dynamic';
 export var CustomInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
     iconSize = _a.iconSize,
@@ -34,8 +34,10 @@ export var CustomInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       className: "ncua-date-picker__ico",
       htmlFor: props.id
     }, {
-      children: _jsx(Icon, {
-        name: iconName,
+      children: iconName === 'calendar' ? _jsx(Calendar, {
+        width: svgSize,
+        height: svgSize
+      }) : _jsx(Clock, {
         width: svgSize,
         height: svgSize
       })

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

@@ -40,7 +40,8 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     _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 = useRef(null);
   var dateFormatRef = useRef('Y-m-d');
   var minMaxDateRef = useRef({});
@@ -293,7 +294,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       'ncua-date-picker--disabled': attrs.disabled,
       'ncua-date-picker--has-time': hasTimeOption,
       'ncua-date-picker--destructive': attrs.destructive
-    })
+    }, className)
   }, {
     children: [_jsx(Flatpickr, __assign({}, attrs, {
       ref: ref || undefined,