@ncds/ui-admin 1.2.0 → 1.2.2

package/dist/cjs/assets/scripts/datePicker.js

@@ -17,8 +17,8 @@ var __assign = void 0 && (void 0).__assign || function () {
 // Constants
 var CONSTANTS = {
   ICON_SIZES: {
-    sm: '14',
-    md: '16'
+    xs: '14',
+    sm: '16'
   },
   CLASS_NAMES: {
     RANGE_WRAPPER: 'ncua-range-date-picker',

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/date-picker/RangeDatePicker.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RangeDatePicker = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
 var _moment = _interopRequireDefault(require("moment"));
+var _react = require("react");
 var _DatePicker = require("./DatePicker");
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -24,7 +24,9 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
-    onDateValidation = _a.onDateValidation;
+    onDateValidation = _a.onDateValidation,
+    _b = _a.size,
+    size = _b === void 0 ? 'xs' : _b;
   var changeSettingDateAndAlert = (0, _react.useCallback)(function (type, isOverPeriod) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
@@ -130,9 +132,11 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
     ref: ref || undefined
   }, {
     children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
-      ref: undefined
+      ref: undefined,
+      size: size
     })), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions, {
-      ref: undefined
+      ref: undefined,
+      size: size
     }))]
   }));
 });

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.RangeDatePickerWithButtons = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _RangeDatePicker = require("./RangeDatePicker");
+var _datePicker = require("../../constant/date-picker");
+var _datePicker2 = require("../../utils/date-picker");
 var _button = require("../button");
-var _datePicker = require("../../utils/date-picker");
-var _datePicker2 = require("../../constant/date-picker");
+var _RangeDatePicker = require("./RangeDatePicker");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -22,9 +22,9 @@ var __assign = void 0 && (void 0).__assign || function () {
 };
 var RangeDatePickerWithButtons = function (_a) {
   var _b = _a.fixedEndDate,
-    fixedEndDate = _b === void 0 ? (0, _datePicker.getDateFormat)() : _b,
-    _c = _a.buttonGroupSize,
-    buttonGroupSize = _c === void 0 ? 'sm' : _c,
+    fixedEndDate = _b === void 0 ? (0, _datePicker2.getDateFormat)() : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'xs' : _c,
     currentButtonId = _a.currentButtonId,
     setCurrentButtonId = _a.setCurrentButtonId,
     startDateOptions = _a.startDateOptions,
@@ -33,7 +33,7 @@ var RangeDatePickerWithButtons = function (_a) {
     periodKeys = _a.periodKeys,
     onDateValidation = _a.onDateValidation;
   var setCalculatedDate = function () {
-    var currentPeriodItem = _datePicker2.PERIOD_ITEM[currentButtonId];
+    var currentPeriodItem = _datePicker.PERIOD_ITEM[currentButtonId];
     if (!currentPeriodItem) {
       return;
     }
@@ -42,7 +42,7 @@ var RangeDatePickerWithButtons = function (_a) {
       endDateOptions.onChangeDate('');
       return;
     }
-    var startDate = (0, _datePicker.getDateFormat)((0, _datePicker.getSubtractDate)({
+    var startDate = (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
       period: currentPeriodItem.period,
       unit: currentPeriodItem.unit
     }));
@@ -62,12 +62,12 @@ var RangeDatePickerWithButtons = function (_a) {
     className: "ncua-range-date-picker-with-buttons"
   }, {
     children: [(0, _jsxRuntime.jsx)(_button.ButtonGroup, __assign({
-      size: buttonGroupSize
+      size: size
     }, {
       children: periodKeys.map(function (key) {
         return (0, _jsxRuntime.jsx)(_button.ButtonGroup.Item, {
           isCurrent: currentButtonId === key,
-          label: _datePicker2.PERIOD_ITEM[key].text,
+          label: _datePicker.PERIOD_ITEM[key].text,
           onClick: function () {
             return setCurrentButtonId(key);
           }
@@ -85,7 +85,8 @@ var RangeDatePickerWithButtons = function (_a) {
         }
       }),
       validationOption: validationOption,
-      onDateValidation: onDateValidation
+      onDateValidation: onDateValidation,
+      size: size
     })]
   }));
 };

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

@@ -7,7 +7,7 @@ exports.FileInputErrorType = exports.FileInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _Tag = require("../tag/Tag");
 var _button = require("../button");
 var _shared = require("../shared");
@@ -199,7 +199,7 @@ var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function
           isRequired: isRequired
         }, {
           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/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/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,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Select = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _HintText = require("../shared/hintText/HintText");
@@ -32,8 +31,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
  * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
-  var icon = _a.icon,
-    placeholder = _a.placeholder,
+  var placeholder = _a.placeholder,
     _b = _a.disabledPlaceholder,
     disabledPlaceholder = _b === void 0 ? false : _b,
     id = _a.id,
@@ -49,26 +47,17 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
     value = _a.value,
     optionItems = _a.optionItems,
     register = _a.register,
-    props = __rest(_a, ["icon", "placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
-  return (0, _jsxRuntime.jsxs)("div", __assign({
+    props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
+  return (0, _jsxRuntime.jsxs)("span", __assign({
     className: (0, _classnames.default)('ncua-select', {
       destructive: destructive,
       'ncua-select--simple': type === 'simple'
     }, className)
   }, {
-    children: [(0, _jsxRuntime.jsxs)("div", __assign({
+    children: [(0, _jsxRuntime.jsx)("span", __assign({
       className: (0, _classnames.default)('ncua-select__content', "ncua-select--".concat(size))
     }, {
-      children: [icon ? (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-select__icon"
-      }, {
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-          name: icon.icon,
-          width: icon.size,
-          height: icon.size,
-          color: icon.color
-        })
-      })) : (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}), (0, _jsxRuntime.jsxs)("select", __assign({
+      children: (0, _jsxRuntime.jsxs)("select", __assign({
         value: value,
         ref: ref,
         id: id,
@@ -87,7 +76,7 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
             children: item.label
           }), "option-".concat(index));
         }), children]
-      }))]
+      }))
     })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
       destructive: destructive,
       className: "ncua-hint-text"

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/esm/assets/scripts/datePicker.js

@@ -11,8 +11,8 @@ var __assign = this && this.__assign || function () {
 // Constants
 var CONSTANTS = {
   ICON_SIZES: {
-    sm: '14',
-    md: '16'
+    xs: '14',
+    sm: '16'
   },
   CLASS_NAMES: {
     RANGE_WRAPPER: 'ncua-range-date-picker',

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot/Dot';
 var DEFAULT_DOT_COLOR = 'neutral';

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';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 var BreadcrumbItem = function (_a) {
   var href = _a.href,

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

@@ -18,8 +18,8 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, forwardRef, useEffect, useState } from 'react';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classnames from 'classnames';
-import Icon from '@ncds/ui-admin-icon';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';
 export var svgSize = {

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';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classnames from 'classnames';
 var svgSize = {
   xs: 16,

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

@@ -17,7 +17,7 @@ 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';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import React, { createElement } from 'react';
 import { COLOR } from '../../../constant/color';

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

@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 export var CarouselArrow = function (_a) {
   var _b;
   var _c = _a.type,

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

@@ -9,15 +9,17 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, forwardRef } from 'react';
 import moment from 'moment';
+import { forwardRef, useCallback, useEffect } from 'react';
 import { DatePicker } from './DatePicker';
 import { getDateFormat } from './utils';
 export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
-    onDateValidation = _a.onDateValidation;
+    onDateValidation = _a.onDateValidation,
+    _b = _a.size,
+    size = _b === void 0 ? 'xs' : _b;
   var changeSettingDateAndAlert = useCallback(function (type, isOverPeriod) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
@@ -123,9 +125,11 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref || undefined
   }, {
     children: [_jsx(DatePicker, __assign({}, startDateOptions, {
-      ref: undefined
+      ref: undefined,
+      size: size
     })), "-", _jsx(DatePicker, __assign({}, endDateOptions, {
-      ref: undefined
+      ref: undefined,
+      size: size
     }))]
   }));
 });

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

@@ -10,15 +10,15 @@ var __assign = this && this.__assign || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { RangeDatePicker } from './RangeDatePicker';
-import { ButtonGroup } from '../button';
-import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
 import { PERIOD_ITEM } from '../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
+import { ButtonGroup } from '../button';
+import { RangeDatePicker } from './RangeDatePicker';
 export var RangeDatePickerWithButtons = function (_a) {
   var _b = _a.fixedEndDate,
     fixedEndDate = _b === void 0 ? getDateFormat() : _b,
-    _c = _a.buttonGroupSize,
-    buttonGroupSize = _c === void 0 ? 'sm' : _c,
+    _c = _a.size,
+    size = _c === void 0 ? 'xs' : _c,
     currentButtonId = _a.currentButtonId,
     setCurrentButtonId = _a.setCurrentButtonId,
     startDateOptions = _a.startDateOptions,
@@ -56,7 +56,7 @@ export var RangeDatePickerWithButtons = function (_a) {
     className: "ncua-range-date-picker-with-buttons"
   }, {
     children: [_jsx(ButtonGroup, __assign({
-      size: buttonGroupSize
+      size: size
     }, {
       children: periodKeys.map(function (key) {
         return _jsx(ButtonGroup.Item, {
@@ -79,7 +79,8 @@ export var RangeDatePickerWithButtons = function (_a) {
         }
       }),
       validationOption: validationOption,
-      onDateValidation: onDateValidation
+      onDateValidation: onDateValidation,
+      size: size
     })]
   }));
 };

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

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import { useEffect, useRef, useState } from 'react';
 export var Dropdown = function (_a) {
   var trigger = _a.trigger,

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

@@ -17,7 +17,7 @@ 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';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 var iconSizeMap = {

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

@@ -28,7 +28,7 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import { Tag } from '../tag/Tag';
 import { Button } from '../button';
 import { HintText, Label } from '../shared';

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

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';

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

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';

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

@@ -16,8 +16,7 @@ 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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../shared/hintText/HintText';
@@ -25,8 +24,7 @@ import { HintText } from '../shared/hintText/HintText';
  * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var icon = _a.icon,
-    placeholder = _a.placeholder,
+  var placeholder = _a.placeholder,
     _b = _a.disabledPlaceholder,
     disabledPlaceholder = _b === void 0 ? false : _b,
     id = _a.id,
@@ -42,26 +40,17 @@ export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
     value = _a.value,
     optionItems = _a.optionItems,
     register = _a.register,
-    props = __rest(_a, ["icon", "placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
-  return _jsxs("div", __assign({
+    props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
+  return _jsxs("span", __assign({
     className: classNames('ncua-select', {
       destructive: destructive,
       'ncua-select--simple': type === 'simple'
     }, className)
   }, {
-    children: [_jsxs("div", __assign({
+    children: [_jsx("span", __assign({
       className: classNames('ncua-select__content', "ncua-select--".concat(size))
     }, {
-      children: [icon ? _jsx("span", __assign({
-        className: "ncua-select__icon"
-      }, {
-        children: _jsx(Icon, {
-          name: icon.icon,
-          width: icon.size,
-          height: icon.size,
-          color: icon.color
-        })
-      })) : _jsx(_Fragment, {}), _jsxs("select", __assign({
+      children: _jsxs("select", __assign({
         value: value,
         ref: ref,
         id: id,
@@ -80,7 +69,7 @@ export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
             children: item.label
           }), "option-".concat(index));
         }), children]
-      }))]
+      }))
     })), hintText && _jsx(HintText, __assign({
       destructive: destructive,
       className: "ncua-hint-text"

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

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';

package/dist/types/assets/scripts/datePicker.d.ts

@@ -1,4 +1,4 @@
-export type DatePickerSize = 'sm' | 'md';
+export type DatePickerSize = 'xs' | 'sm';
 interface Options {
     buttons?: DatePickerButton[];
     size: DatePickerSize;

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

@@ -19,6 +19,7 @@ export type RangeDatePickerProps = {
         newDate: string;
         currentDate: string;
     }) => void;
+    size?: 'xs' | 'sm';
 };
 export declare const RangeDatePicker: import("react").ForwardRefExoticComponent<RangeDatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=RangeDatePicker.d.ts.map

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

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

package/dist/types/src/components/dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 export type AvatarTrigger = {
     type: 'avatar';
     avatar: string;

package/dist/types/src/components/featured-icon/FeaturedIcon.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef } from 'react';
 export type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
 export type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';

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

@@ -4,9 +4,9 @@ export declare enum FileInputErrorType {
     EXCEED_MAX_FILE_SIZE = "EXCEED_MAX_FILE_SIZE",
     EXCEED_MAX_FILE_COUNT = "EXCEED_MAX_FILE_COUNT"
 }
-export type InvalidFile = File & {
+export interface InvalidFile extends Omit<File, 'constructor'> {
     errorType: FileInputErrorType;
-};
+}
 export interface FileInputProps extends Omit<InputBaseProps, 'clearText' | 'onClearText' | 'hintText' | 'value' | 'onChange'> {
     /**
      * Accepted file types

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

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import React from 'react';
 import { COLOR } from '../../../constant/color';
 import { Size } from '../../../constant/size';

package/dist/types/src/components/modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ReactNode } from 'react';
 import { FeaturedIconColor, FeaturedIconTheme } from '../featured-icon';
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';

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

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import type { IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ColorTone } from '../../../constant/color';
 import { ButtonTheme } from '../button';

package/dist/types/src/components/select/Select.d.ts

@@ -1,5 +1,3 @@
-import { IconName } from '@ncds/ui-admin-icon';
-import { COLOR } from '@ncds/ui-admin/constant/color';
 import { Size } from '@ncds/ui/constant/size';
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
@@ -8,13 +6,7 @@ export type OptionType = {
     id: string | number;
     label: string;
 };
-type IconSlot = {
-    icon: IconName;
-    color?: keyof typeof COLOR;
-    size?: number;
-};
 export interface SelectProps extends PropsWithChildren<BaseSelectProps> {
-    icon?: IconSlot;
     placeholder?: string;
     disabledPlaceholder?: boolean;
     hintText?: string;

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

@@ -2375,40 +2375,27 @@ button {
   --select-simple-height-md: 22px;
 }
 
+.ncua-select {
+  --icon-size: 14px;
+}
 .ncua-select__content {
+  position: relative;
   display: flex;
   align-items: center;
-  padding-inline-start: 14px;
   border: 1px solid var(--gray-200);
   background-color: var(--base-white);
   overflow: hidden;
-  position: relative;
-}
-.ncua-select__content::after {
-  width: 14px;
-  height: 14px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  content: "";
-  transform: translateY(-50%);
-  position: absolute;
-  top: 50%;
-  right: 10px;
-}
-.ncua-select__icon {
-  margin-right: 8px;
-}
-.ncua-select__icon svg {
-  display: block;
 }
-.ncua-select select {
+.ncua-select__tag {
   -webkit-appearance: none;
   appearance: none;
   border: 0;
   height: 100%;
   flex: 1;
-  background-color: transparent;
   outline: none;
   color: var(--gray-700);
+  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
+  background-size: var(--icon-size) var(--icon-size);
 }
 .ncua-select__content:focus-within {
   border-color: var(--gray-400);
@@ -2423,9 +2410,9 @@ button {
 .ncua-select--xs {
   height: var(--select-height-xs);
   border-radius: 6px;
-  padding-inline: 10px 28px;
 }
 .ncua-select--xs > .ncua-select__tag {
+  padding-inline: 10px 28px;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-xs);
@@ -2438,9 +2425,10 @@ button {
 .ncua-select--sm {
   height: var(--select-height-sm);
   border-radius: 6px;
-  padding-inline: 12px 30px;
+  --icon-size: 16px;
 }
 .ncua-select--sm > .ncua-select__tag {
+  padding-inline: 12px 30px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-sm);
@@ -2450,18 +2438,14 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
-.ncua-select--sm.ncua-select__content::after {
-  width: 16px;
-  height: 16px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23757678' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
 .ncua-select--md {
   min-width: 132px;
   height: var(--select-height-md);
   border-radius: 8px;
-  padding-inline: 12px 30px;
+  --icon-size: 16px;
 }
 .ncua-select--md > .ncua-select__tag {
+  padding-inline: 12px 30px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-1);
   line-height: var(--line-heights-sm);
@@ -2471,13 +2455,7 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
-.ncua-select--md.ncua-select__content::after {
-  width: 16px;
-  height: 16px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23757678' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
 .ncua-select--simple .ncua-select__content {
-  padding-inline-start: 0;
   border: 0;
   background-color: transparent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -63,7 +63,7 @@
   "dependencies": {
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",
-    "@ncds/ui-admin-icon": "0.0.17",
+    "@ncds/ui-admin-icon": "0.1.1",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
@@ -101,7 +101,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.2",
     "react-scripts": "^5.0.1",
-    "sass": "^1.66.1",
+    "sass": "^1.86.3",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.4",