@ncds/ui-admin 1.8.2 → 1.8.4

package/dist/cjs/src/components/overlays/dropdown/utils.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyDraftToItems = applyDraftToItems;
+exports.arrayMoveById = arrayMoveById;
+exports.arrayReorderByEdge = arrayReorderByEdge;
+exports.hasDraftChanged = hasDraftChanged;
+exports.initDraftState = initDraftState;
+/**
+ * 배열에서 fromId 위치의 요소를 toId 위치로 이동.
+ * id 중 하나라도 없으면 원본 그대로 반환. immutable.
+ */
+function arrayMoveById(order, fromId, toId) {
+  const fromIndex = order.indexOf(fromId);
+  const toIndex = order.indexOf(toId);
+  if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+    return order;
+  }
+  const next = [...order];
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+/**
+ * fromId 요소를 toId 기준 edge('top'=직전, 'bottom'=직후)에 삽입.
+ * indicator 위치와 정확히 일치하는 reorder를 위해 사용.
+ */
+function arrayReorderByEdge(order, fromId, toId, edge) {
+  if (fromId === toId) return order;
+  const fromIndex = order.indexOf(fromId);
+  const toIndex = order.indexOf(toId);
+  if (fromIndex === -1 || toIndex === -1) return order;
+  const next = [...order];
+  next.splice(fromIndex, 1);
+  // 목표 인덱스 재계산 (제거로 인해 toIndex가 한 칸 당겨질 수 있음)
+  const adjustedToIndex = fromIndex < toIndex ? toIndex - 1 : toIndex;
+  const insertIndex = edge === 'bottom' ? adjustedToIndex + 1 : adjustedToIndex;
+  next.splice(insertIndex, 0, fromId);
+  return next;
+}
+/**
+ * groups를 받아 초기 draft state를 만든다.
+ * - order: 모든 그룹·아이템의 id를 순서대로 평탄화
+ * - visibility: item.visible (undefined면 true)
+ */
+function initDraftState(groups) {
+  const order = [];
+  const visibility = {};
+  for (const group of groups) {
+    for (const item of group.items) {
+      order.push(item.id);
+      visibility[item.id] = item.visible ?? true;
+    }
+  }
+  return {
+    order,
+    visibility
+  };
+}
+/**
+ * 모든 그룹의 items를 평탄화하고, draft.order 순서로 재배열.
+ * 각 item의 visible은 원래 visible이 정의되어 있던 경우에만 draft.visibility 값으로 갱신.
+ * 그 외 필드는 props 원본 그대로 보존.
+ */
+function applyDraftToItems(groups, draft) {
+  const itemsById = new Map();
+  for (const group of groups) {
+    for (const item of group.items) {
+      itemsById.set(item.id, item);
+    }
+  }
+  return draft.order.map(id => itemsById.get(id)).filter(item => item !== undefined).map(item => {
+    if (item.visible === undefined) return item;
+    return {
+      ...item,
+      visible: draft.visibility[item.id]
+    };
+  });
+}
+/**
+ * draft가 original과 비교해 변경되었는지 판단.
+ * order 배열 또는 visibility 객체 중 하나라도 다르면 true.
+ */
+function hasDraftChanged(original, draft) {
+  if (original.order.length !== draft.order.length) return true;
+  for (let i = 0; i < original.order.length; i++) {
+    if (original.order[i] !== draft.order[i]) return true;
+  }
+  const keys = new Set([...Object.keys(original.visibility), ...Object.keys(draft.visibility)]);
+  for (const key of keys) {
+    if (original.visibility[key] !== draft.visibility[key]) return true;
+  }
+  return false;
+}

package/dist/cjs/src/components/{modal → overlays/modal}/Modal.js

@@ -8,8 +8,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _ButtonCloseX = require("../button/ButtonCloseX");
-var _featuredIcon = require("../featured-icon");
+var _ButtonCloseX = require("../../action/button/ButtonCloseX");
+var _featuredIcon = require("../../image-and-icons/featured-icon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Modal = _ref => {
   let {

package/dist/cjs/src/components/{notification → overlays/notification}/FloatingNotification.js

@@ -8,11 +8,11 @@ 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");
-var _useMediaQuery = require("../../hooks/useMediaQuery");
-var _button = require("../button");
-var _ButtonCloseX = require("../button/ButtonCloseX");
-var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
+var _breakpoint = require("../../../constant/breakpoint");
+var _useMediaQuery = require("../../../hooks/useMediaQuery");
+var _button = require("../../action/button");
+var _ButtonCloseX = require("../../action/button/ButtonCloseX");
+var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,

package/dist/cjs/src/components/{notification → overlays/notification}/FullWidthNotification.js

@@ -8,7 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
+var _color = require("../../../../constant/color");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.MessageChatSquare,

package/dist/cjs/src/components/{notification → overlays/notification}/MessageNotification.js

@@ -8,9 +8,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
-var _button = require("../button");
-var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
+var _color = require("../../../../constant/color");
+var _button = require("../../action/button");
+var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,

package/dist/cjs/src/components/{tooltip → overlays/tooltip}/Tooltip.js

@@ -9,7 +9,7 @@ var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _reactDom = require("react-dom");
-var _ButtonCloseX = require("../button/ButtonCloseX");
+var _ButtonCloseX = require("../../action/button/ButtonCloseX");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ICON_SIZE_SM = 14;
 const ICON_SIZE_DEFAULT = 16;

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

@@ -7,7 +7,7 @@ exports.SelectDropdown = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _button = require("../button");
+var _button = require("../action/button");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {

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

@@ -7,7 +7,7 @@ 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 _Badge = require("../feedback-and-status/badge/Badge");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TabButton = _ref => {
   let {

package/dist/cjs/vitest.config.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _config = require("vitest/config");
 var _default = exports.default = (0, _config.defineConfig)({
   test: {
-    include: ['scripts/**/__tests__/**/*.test.ts'],
+    include: ['scripts/**/__tests__/**/*.test.ts', 'src/**/__tests__/**/*.test.ts', 'assets/scripts/**/__tests__/**/*.test.ts'],
     environment: 'node'
   }
 });

package/dist/esm/assets/scripts/slider.js

@@ -1,3 +1,7 @@
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+const PERCENT = 100;
 export class Slider {
   constructor(element, options) {
     this.activeHandle = null;
@@ -40,17 +44,19 @@ export class Slider {
       this.isDragging = false;
     };
     this.element = element;
-    this.options = Object.assign({
-      min: 0,
-      max: 100,
-      step: 1,
-      value: 0,
-      disabled: false
-    }, options);
+    // 화이트리스트 기반 옵션 복사. SliderOptions에 정의된 키만 받아들여
+    // __proto__, constructor, prototype 같은 위험 키가 외부 입력으로 들어와도
+    // Object.prototype을 오염시킬 수 없다 (CWE-1321 Prototype Pollution 차단).
+    this.options = {
+      min: Number(options.min ?? DEFAULT_MIN),
+      max: Number(options.max ?? DEFAULT_MAX),
+      step: Number(options.step ?? DEFAULT_STEP),
+      value: options.value ?? DEFAULT_MIN,
+      onChange: options.onChange,
+      labelPosition: options.labelPosition,
+      disabled: options.disabled ?? false
+    };
     this.value = this.options.value;
-    this.options.min = Number(this.options.min);
-    this.options.max = Number(this.options.max);
-    this.options.step = Number(this.options.step);
     this.init();
   }
   init() {
@@ -104,19 +110,20 @@ export class Slider {
     });
     if (this.options.labelPosition === 'bottom') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label`;
+      label.className = 'ncua-slider__label';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     if (this.options.labelPosition === 'top-floating') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label ncua-slider__label--tooltip`;
+      label.className = 'ncua-slider__label ncua-slider__label--tooltip';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     this.element.appendChild(handle);
     this.handleElements[index] = handle;
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 단일/range 분기와 라벨/progress 업데이트를 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   updateHandlePositions() {
     if (Array.isArray(this.value)) {
       // Range slider
@@ -174,14 +181,15 @@ export class Slider {
     }
   }
   getPositionFromValue(value) {
-    return (value - this.options.min) / (this.options.max - this.options.min) * 100;
+    return (value - this.options.min) / (this.options.max - this.options.min) * PERCENT;
   }
   getValueFromPosition(position) {
-    const percentage = Math.min(Math.max(position, 0), 100);
-    const exactValue = this.options.min + percentage / 100 * (this.options.max - this.options.min);
+    const percentage = Math.min(Math.max(position, 0), PERCENT);
+    const exactValue = this.options.min + percentage / PERCENT * (this.options.max - this.options.min);
     const steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
     return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 핸들/트랙 클릭 분기와 가까운 핸들 결정 로직을 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   handleInteractionStart(clientX, target) {
     // 슬라이더 영역 내부를 클릭/터치한 경우
     if (target.closest('.ncua-slider')) {
@@ -193,12 +201,12 @@ export class Slider {
         } else if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.min) {
           this.activeHandle = 1;
         } else {
-          this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+          this.activeHandle = Number.parseInt(handleElement.dataset.index || '0', 10);
         }
       } else {
         // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
         const rect = this.element.getBoundingClientRect();
-        const position = (clientX - rect.left) / rect.width * 100;
+        const position = (clientX - rect.left) / rect.width * PERCENT;
         if (Array.isArray(this.value)) {
           const [leftValue, rightValue] = this.value;
           const leftPosition = this.getPositionFromValue(leftValue);
@@ -223,7 +231,7 @@ export class Slider {
   updateValueFromClientX(clientX) {
     if (!this.element || this.activeHandle === null) return;
     const rect = this.element.getBoundingClientRect();
-    const position = (clientX - rect.left) / rect.width * 100;
+    const position = (clientX - rect.left) / rect.width * PERCENT;
     const newValue = this.getValueFromPosition(position);
     const prevValue = this.value;
     if (Array.isArray(this.value)) {

package/dist/esm/src/components/{button → action/button}/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { createElement, forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 export const svgSize = {
   xxs: 12,
   xs: 14,

package/dist/esm/src/components/{button-group → action/button-group}/ButtonGroup.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import React, { createElement } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 const svgSize = {
   xxs: 12,
   xs: 16,

package/dist/esm/src/components/{badge → feedback-and-status/badge}/utils.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot/Dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot/Dot';
 const DEFAULT_DOT_COLOR = 'neutral';
 const sideSlotRender = _ref => {
   let {

package/dist/esm/src/components/{empty-state → feedback-and-status/empty-state}/EmptyState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../button/Button';
+import { Button } from '../../action/button/Button';
 export const EmptyState = _ref => {
   let {
     title,

package/dist/esm/src/components/{tag → feedback-and-status/tag}/Tag.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { useCallback, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 const MARGIN = 10;
 const DEFAULT_TOOLTIP_WIDTH = 200;
 const DEFAULT_TOOLTIP_HEIGHT = 60;

package/dist/esm/src/components/{combo-box → forms-and-input/combo-box}/ComboBox.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { useDropdown } from '../../hooks/dropdown';
-import { useMultiSelect } from '../../utils/dropdown/multiSelect';
-import { Button } from '../button';
+import { useDropdown } from '../../../hooks/dropdown';
+import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
+import { Button } from '../../action/button';
+import { Tag } from '../../feedback-and-status/tag';
+import { SelectDropdown } from '../../select-dropdown';
+import { HintText } from '../../shared/hintText/HintText';
 import { InputBase } from '../input-base/InputBase';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
 const defaultMaxHeight = 275;
 const toggleMultiSelectValue = (currentValue, optionId) => {
   const currentValues = Array.isArray(currentValue) ? currentValue : [];

package/dist/esm/src/components/{date-picker → forms-and-input/date-picker}/DatePicker.js

@@ -4,14 +4,14 @@ import { Korean } from 'flatpickr/dist/l10n/ko';
 import moment from 'moment';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import Flatpickr from 'react-flatpickr';
-import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
+import { formatDateInput, formatHourInput, formatMinuteInput } from '../../../utils/date-picker';
 import { CustomInput } from './CustomInput';
 // ══════════════════════════════════════════
 // 유틸리티 함수
 // ══════════════════════════════════════════
 const isValidDate = dateString => {
   const date = new Date(dateString);
-  return date instanceof Date && !isNaN(date.getTime());
+  return date instanceof Date && !Number.isNaN(date.getTime());
 };
 /** input의 스크롤 가능한 부모 요소들을 수집 */
 const collectScrollParents = element => {
@@ -38,11 +38,11 @@ const getOpenCalendar = (instance, input, isPortal) => {
 };
 /** selectedDate가 유효하지 않으면 이전 날짜로 복원하고 true 반환 */
 const restoreIfInvalidDate = (date, instance) => {
-  if (date && date instanceof Date && !isNaN(date.getTime())) {
+  if (date && date instanceof Date && !Number.isNaN(date.getTime())) {
     return false;
   }
   const previousDate = instance._previousDateBeforeInput;
-  if (previousDate && previousDate instanceof Date && !isNaN(previousDate.getTime())) {
+  if (previousDate && previousDate instanceof Date && !Number.isNaN(previousDate.getTime())) {
     instance.selectedDates = [previousDate];
     instance.setDate(previousDate, false);
   } else if (instance.input) {
@@ -273,7 +273,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const restorePreviousDate = (target, instance) => {
     if (instance.selectedDates.length > 0) {
       const prevDate = instance.selectedDates[0];
-      if (prevDate instanceof Date && !isNaN(prevDate.getTime())) {
+      if (prevDate instanceof Date && !Number.isNaN(prevDate.getTime())) {
         const momentFormat = dateFormatRef.current.replace(/Y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD');
         target.value = moment(prevDate).format(momentFormat);
         instance.setDate(prevDate, false);
@@ -297,7 +297,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     const violations = checkDateViolations(selectedDate, minDate, maxDate);
     if (violations.length > 0 && onValidationErrorRef.current) {
       const prevDate = instance?.selectedDates?.[0];
-      const validPrevDate = prevDate instanceof Date && !isNaN(prevDate.getTime()) ? prevDate : undefined;
+      const validPrevDate = prevDate instanceof Date && !Number.isNaN(prevDate.getTime()) ? prevDate : undefined;
       onValidationErrorRef.current({
         date: selectedDate,
         minDate,
@@ -310,7 +310,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     instance._previousDateBeforeInput = selectedDate;
     const formattedDate = formatDateInput(dateStr);
     isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
-  }, []);
+  }, [checkDateViolations, restorePreviousDate]);
   /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const onInputHandler = useCallback(e => {
@@ -344,7 +344,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (violations.length > 0) {
       return;
     }
-  }, []);
+  }, [checkDateViolations, restorePreviousDate]);
   /** 시간 입력 필드 - 시(hour) 값 포맷팅 (0~23) */
   const onHourInputHandler = useCallback(e => {
     const target = e.target;
@@ -369,7 +369,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   // 주의: JSON.stringify는 함수를 무시하고 Date를 문자열로 변환하므로,
   // datePickerOptions에 함수나 Date 객체를 넘기면 변경 감지가 누락될 수 있음
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const datePickerOptionsKey = JSON.stringify(datePickerOptions);
+  const _datePickerOptionsKey = JSON.stringify(datePickerOptions);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const options = useMemo(() => ({
     mode: 'single',
@@ -384,7 +384,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     /** flatpickr 기본 포맷 대신 moment를 사용하여 한국어 날짜 형식 지원 */
     formatDate: (date, format, _locale) => {
       try {
-        if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+        if (!date || !(date instanceof Date) || Number.isNaN(date.getTime())) {
           return '';
         }
         const momentDate = moment(date);
@@ -449,8 +449,10 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       cleanupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
       cleanupPositioning(instance);
     },
-    ...datePickerOptions
-  }), [portal, size, hasTimeOption, datePickerOptionsKey, onChangeDateHandler, onInputHandler, onHourInputHandler, onMinuteInputHandler]);
+    ...datePickerOptions,
+    // 어드민 환경 — 모바일에서 native picker 로 fallback 되지 않도록 강제 (datePickerOptions 로 override 불가)
+    disableMobile: true
+  }), [portal, onChangeDateHandler, onInputHandler, onHourInputHandler, onMinuteInputHandler, datePickerOptions, getPortalContainer]);
   const iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
   // ──────────────────────────────────────────────
   // 시간 옵션에 따른 currentDate 전처리

package/dist/esm/src/components/{file-input → forms-and-input/file-input}/FileInput.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { Button } from '../button';
-import { HintText, Label } from '../shared';
-import { Tag } from '../tag/Tag';
+import { Button } from '../../action/button';
+import { Tag } from '../../feedback-and-status/tag/Tag';
+import { HintText, Label } from '../../shared';
 export var FileInputErrorType;
 (function (FileInputErrorType) {
   FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";

package/dist/esm/src/components/{image-file-input → forms-and-input/image-file-input}/ImageFileInput.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Button } from '../button';
+import { Button } from '../../action/button';
+import { Tooltip } from '../../overlays/tooltip';
+import { HintText, Label } from '../../shared';
 import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
-import { HintText, Label } from '../shared';
-import { Tooltip } from '../tooltip';
 import { ImagePreview } from './components/ImagePreview';
 export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/dist/esm/src/components/{image-file-input → forms-and-input/image-file-input}/components/ImagePreview.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Trash03 } from '@ncds/ui-admin-icon';
-import { Button } from '../../button';
+import { Button } from '../../../action/button';
 export const ImagePreview = _ref => {
   let {
     file,

package/dist/esm/src/components/{input-base → forms-and-input/input-base}/InputBase.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
+import { COLOR } from '../../../../constant/color';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
 const validationSvgSize = {
   xs: 14,
   sm: 16

package/dist/esm/src/components/{number-input → forms-and-input/number-input}/NumberInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef } from 'react';
-import { useMergeRefs } from '../../hooks';
-import { ButtonStepper } from '../button';
+import { useMergeRefs } from '../../../hooks';
+import { ButtonStepper } from '../../action/button';
 import { InputBase } from '../input-base/InputBase';
 export const NumberInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/dist/esm/src/components/{range-date-picker-with-buttons → forms-and-input/range-date-picker-with-buttons}/RangeDatePickerWithButtons.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { PERIOD_ITEM } from '../../constant/date-picker';
-import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
-import { ButtonGroup } from '../button-group';
+import { PERIOD_ITEM } from '../../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../../utils/date-picker';
+import { ButtonGroup } from '../../action/button-group';
 import { RangeDatePicker } from '../range-date-picker/RangeDatePicker';
 const RangeDatePickerWithButtons = _ref => {
   let {

package/dist/esm/src/components/{select → forms-and-input/select}/Select.js

@@ -1,7 +1,7 @@
 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';
+import { HintText } from '../../shared/hintText/HintText';
 export const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder,

package/dist/esm/src/components/{select-box → forms-and-input/select-box}/SelectBox.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDown } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { useDropdown, useScrollLock } from '../../hooks/dropdown';
-import { useMultiSelect } from '../../utils/dropdown/multiSelect';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
+import { COLOR } from '../../../../constant/color';
+import { useDropdown, useScrollLock } from '../../../hooks/dropdown';
+import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
+import { Tag } from '../../feedback-and-status/tag';
+import { SelectDropdown } from '../../select-dropdown';
+import { HintText } from '../../shared/hintText/HintText';
 const ICON_SIZE_XS = 14;
 const ICON_SIZE_SM = 16;
 const DEFAULT_MAX_HEIGHT = 275;

package/dist/esm/src/components/{slider → forms-and-input/slider}/Slider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { Slider as NcuaSlider } from '../../../assets/scripts/slider';
+import { Slider as NcuaSlider } from '../../../../assets/scripts/slider';
 export const Slider = _ref => {
   let {
     min = 0,

package/dist/esm/src/components/{textarea → forms-and-input/textarea}/Textarea.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
 export const Textarea = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     className,