@ncds/ui-admin 1.3.0 → 1.4.1

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

@@ -49,41 +49,20 @@ var dotSize = exports.dotSize = {
 };
 var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // NOTE: 엘리먼트 종류에 따라 props의 타입이 달라지므로 분리
-  var _a = props.as,
-    as = _a === void 0 ? 'button' : _a,
-    _b = props.size,
-    size = _b === void 0 ? 'md' : _b,
+  var _a = props.size,
+    size = _a === void 0 ? 'md' : _a,
     children = props.children,
     onlyIcon = props.onlyIcon,
     disabled = props.disabled,
     className = props.className,
-    _c = props.hierarchy,
-    hierarchy = _c === void 0 ? 'secondary-gray' : _c,
+    _b = props.hierarchy,
+    hierarchy = _b === void 0 ? 'secondary-gray' : _b,
     label = props.label,
     leadingIcon = props.leadingIcon,
     trailingIcon = props.trailingIcon,
-    restProps = __rest(props, ["as", "size", "children", "onlyIcon", "disabled", "className", "hierarchy", "label", "leadingIcon", "trailingIcon"]);
-  var _d = (0, _react.useState)(null),
-    queryParams = _d[0],
-    setQueryParams = _d[1];
-  // Type guard to check if props is an AnchorElementProps
-  var isAnchorProps = function (p) {
-    return p.as === 'a';
-  };
-  var handleClickLink = function (e) {
-    var isRemote = (queryParams === null || queryParams === void 0 ? void 0 : queryParams.get('isRemote')) === 'true';
-    if (isAnchorProps(props) && isRemote) {
-      e.preventDefault();
-      // INFO: 1. 사이트 리모트 페이지(디센/개센): 빌더에서 설정한 타겟(self or blank)에 따라 페이지 호출
-      // 2. 어드민 리모트 페이지: 빌더에서 설정한 타겟에 관계 없이 모두 blank
-      var isBlank = props.target === '_blank';
-      if (!isRemote && !isBlank && window.top) {
-        window.top.location.href = props.href;
-        return;
-      }
-      window.open(props.href);
-    }
-  };
+    _c = props.underline,
+    underline = _c === void 0 ? false : _c,
+    restProps = __rest(props, ["size", "children", "onlyIcon", "disabled", "className", "hierarchy", "label", "leadingIcon", "trailingIcon", "underline"]);
   var sideSlotRender = function (slot) {
     var _a, _b, _c;
     if (slot.type === 'icon') {
@@ -103,17 +82,12 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     }
     return slot.children;
   };
-  (0, _react.useEffect)(function () {
-    var _a;
-    setQueryParams(new URLSearchParams(((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.search) || ''));
-  }, []);
-  return /*#__PURE__*/(0, _react.createElement)(as, __assign(__assign({
+  return /*#__PURE__*/(0, _react.createElement)('button', __assign(__assign({
     className: (0, _classnames.default)('ncua-btn', "ncua-btn--".concat(size), {
       'only-icon': onlyIcon,
       'is-disable': disabled,
-      'has-underline': isAnchorProps(props) ? props.underline : false
+      'has-underline': underline
     }, className, hierarchy && "ncua-btn--".concat(hierarchy)),
-    onClick: isAnchorProps(props) ? handleClickLink : undefined,
     disabled: disabled
   }, restProps), {
     ref: ref

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

@@ -74,22 +74,23 @@ var ButtonGroup = function (_a) {
 exports.ButtonGroup = ButtonGroup;
 ButtonGroup.Item = function (_a) {
   var _b;
-  var _c = _a.as,
-    as = _c === void 0 ? 'button' : _c,
-    label = _a.label,
-    _d = _a.size,
-    size = _d === void 0 ? 'xs' : _d,
+  var label = _a.label,
+    _c = _a.size,
+    size = _c === void 0 ? 'xs' : _c,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,
     children = _a.children,
     isCurrent = _a.isCurrent,
-    props = __rest(_a, ["as", "label", "size", "onlyIcon", "icon", "disabled", "children", "isCurrent"]);
+    props = __rest(_a, ["label", "size", "onlyIcon", "icon", "disabled", "children", "isCurrent"]);
   var renderIcon = function () {
     var _a, _b, _c;
     if (!icon) return null;
     if (icon.type === 'icon') {
       return (0, _jsxRuntime.jsx)(_dynamic.default, {
+        style: icon.color ? {
+          '--icon-color': _color.COLOR[icon.color]
+        } : undefined,
         name: icon.icon,
         width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size],
         height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size],
@@ -105,16 +106,14 @@ ButtonGroup.Item = function (_a) {
     return icon.children;
   };
   var position = (_b = icon === null || icon === void 0 ? void 0 : icon.position) !== null && _b !== void 0 ? _b : 'leading';
-  return /*#__PURE__*/(0, _react.createElement)(as, __assign({
+  return /*#__PURE__*/(0, _react.createElement)('button', __assign({
     className: (0, _classnames.default)('ncua-button-group__item', {
-      'is-disabled': disabled
-    }, {
       'is-only-icon': onlyIcon
     }, {
       'is-current': isCurrent
     }),
     disabled: disabled,
-    type: as === 'button' ? 'button' : undefined
+    type: 'button'
   }, props), (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()]
   }));

package/dist/cjs/src/components/checkbox/Checkbox.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Checkbox = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _CheckboxInput = require("./CheckboxInput");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -26,7 +27,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-var Checkbox = function (_a) {
+var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
@@ -36,9 +37,8 @@ var Checkbox = function (_a) {
     disabled = _a.disabled,
     checked = _a.checked,
     className = _a.className,
-    checkboxRef = _a.checkboxRef,
     onChange = _a.onChange,
-    props = __rest(_a, ["size", "indeterminate", "text", "supportText", "disabled", "checked", "className", "checkboxRef", "onChange"]);
+    props = __rest(_a, ["size", "indeterminate", "text", "supportText", "disabled", "checked", "className", "onChange"]);
   return (0, _jsxRuntime.jsxs)("label", __assign({
     className: (0, _classnames.default)('ncua-checkbox-field', "ncua-checkbox-field--".concat(size), {
       'has-text': text
@@ -46,25 +46,26 @@ var Checkbox = function (_a) {
   }, {
     children: [(0, _jsxRuntime.jsx)(_CheckboxInput.CheckboxInput, __assign({
       size: size,
-      ref: checkboxRef,
+      ref: ref,
       checked: checked,
       indeterminate: indeterminate,
       disabled: disabled,
       onChange: onChange,
       className: "ncua-checkbox-field__input"
-    }, props)), (0, _jsxRuntime.jsx)("span", {
-      children: text && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _jsxRuntime.jsx)("span", __assign({
-          className: "ncua-checkbox-field__text"
-        }, {
-          children: text
-        })), supportText && (0, _jsxRuntime.jsx)("span", __assign({
-          className: "ncua-checkbox-field__support-text"
-        }, {
-          children: supportText
-        }))]
-      })
-    })]
+    }, props)), supportText ? (0, _jsxRuntime.jsxs)("span", {
+      children: [(0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-checkbox-field__text"
+      }, {
+        children: text
+      })), supportText && (0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-checkbox-field__support-text"
+      }, {
+        children: supportText
+      }))]
+    }) : text && (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-checkbox-field__text"
+    }, {
+      children: text
+    }))]
   }));
-};
-exports.Checkbox = Checkbox;
+});

package/dist/cjs/src/components/checkbox/CheckboxInput.js

@@ -40,57 +40,34 @@ var CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(
     destructive = _d === void 0 ? false : _d,
     onChange = _a.onChange,
     props = __rest(_a, ["size", "indeterminate", "disabled", "className", "destructive", "onChange"]);
-  /**
-   * 체크박스 체크시 나오는 아이콘은 아이콘 컴포넌트와 굵기가 달라 별도로 정의하였습니다.
-   */
-  var checkIcon = (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)("svg", __assign({
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none"
-    }, {
-      children: (0, _jsxRuntime.jsx)("path", {
-        d: "M10 3L4.5 8.5L2 6",
-        stroke: disabled ? '#D3D4D8' : '#171818',
-        "stroke-width": "1.6666",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      })
-    }))
-  });
-  var indeterminateIcon = (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)("svg", __assign({
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none"
-    }, {
-      children: (0, _jsxRuntime.jsx)("path", {
-        d: "M2.5 6H9.5",
-        stroke: disabled ? '#D3D4D8' : '#2F2F30',
-        "stroke-width": "1.66666",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      })
-    }))
-  });
-  return (0, _jsxRuntime.jsxs)("span", __assign({
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var input = ref && typeof ref !== 'function' ? ref.current : inputRef.current;
+    if (input) {
+      input.indeterminate = indeterminate; // 외부에서 받은 값을 그대로 사용
+    }
+  }, [indeterminate, ref]);
+  return (0, _jsxRuntime.jsx)("span", __assign({
     className: (0, _classnames.default)('ncua-checkbox-input', "ncua-checkbox-input--".concat(size), {
+      'has-indeterminate': indeterminate
+    }, {
       destructive: destructive
     }, className)
   }, {
-    children: [(0, _jsxRuntime.jsx)("input", __assign({
+    children: (0, _jsxRuntime.jsx)("input", __assign({
       type: "checkbox",
-      ref: ref,
+      ref: function (node) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - ref assignment is needed for internal tracking
+        inputRef.current = node;
+      },
       onChange: onChange,
       disabled: disabled
-    }, props)), (0, _jsxRuntime.jsx)("span", __assign({
-      className: "ncua-checkbox-input__ico"
-    }, {
-      children: !indeterminate ? checkIcon : indeterminateIcon
-    }))]
+    }, props))
   }));
 });

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

@@ -0,0 +1,337 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultMaxHeight = exports.ComboBox = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _dropdown = require("../../hooks/dropdown");
+var _multiSelect = require("../../utils/dropdown/multiSelect");
+var _button = require("../button");
+var _InputBase = require("../input/InputBase");
+var _selectDropdown = require("../select-dropdown");
+var _HintText = require("../shared/hintText/HintText");
+var _tag = require("../tag");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var defaultMaxHeight = exports.defaultMaxHeight = 275;
+var ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.placeholder,
+    placeholder = _b === void 0 ? '검색하세요' : _b,
+    id = _a.id,
+    className = _a.className,
+    hintText = _a.hintText,
+    children = _a.children,
+    _c = _a.size,
+    size = _c === void 0 ? 'xs' : _c,
+    _d = _a.destructive,
+    destructive = _d === void 0 ? false : _d,
+    value = _a.value,
+    _e = _a.optionItems,
+    optionItems = _e === void 0 ? [] : _e,
+    onChange = _a.onChange,
+    onSearch = _a.onSearch,
+    _f = _a.disabled,
+    disabled = _f === void 0 ? false : _f,
+    register = _a.register,
+    _g = _a.maxHeight,
+    maxHeight = _g === void 0 ? defaultMaxHeight : _g,
+    _h = _a.searchValue,
+    searchValue = _h === void 0 ? '' : _h,
+    label = _a.label,
+    _j = _a.required,
+    required = _j === void 0 ? false : _j,
+    _k = _a.multiple,
+    multiple = _k === void 0 ? false : _k,
+    _l = _a.showFooterButtons,
+    showFooterButtons = _l === void 0 ? false : _l,
+    onEdit = _a.onEdit,
+    props = __rest(_a, ["placeholder", "id", "className", "hintText", "children", "size", "destructive", "value", "optionItems", "onChange", "onSearch", "disabled", "register", "maxHeight", "searchValue", "label", "required", "multiple", "showFooterButtons", "onEdit"]);
+  var internalRef = (0, _react.useRef)(null);
+  var dropdownRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var _m = (0, _react.useState)(searchValue),
+    inputValue = _m[0],
+    setInputValue = _m[1];
+  var _o = (0, _react.useState)(false),
+    showAllItems = _o[0],
+    setShowAllItems = _o[1];
+  var _p = (0, _react.useState)([]),
+    selectedTags = _p[0],
+    setSelectedTags = _p[1];
+  var handleOptionSelect = function (option) {
+    if (disabled) return;
+    var newValue;
+    if (multiple) {
+      var currentValues = Array.isArray(value) ? value : [];
+      if (currentValues.includes(option.id)) {
+        newValue = currentValues.filter(function (v) {
+          return v !== option.id;
+        });
+      } else {
+        newValue = __spreadArray(__spreadArray([], currentValues, true), [option.id], false);
+      }
+    } else {
+      newValue = option.id;
+      var tag = {
+        id: option.id,
+        label: option.label
+      };
+      setSelectedTags([tag]);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    // react-hook-form 지원
+    if (register === null || register === void 0 ? void 0 : register.onChange) {
+      register.onChange({
+        target: {
+          value: multiple ? JSON.stringify(newValue) : newValue,
+          name: register.name
+        }
+      });
+    }
+  };
+  var handleInputChange = function (e) {
+    var newValue = e.target.value;
+    setInputValue(newValue);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(newValue);
+    setShowAllItems(false);
+    if (!isOpen && !disabled) {
+      toggleDropdown();
+    }
+  };
+  var handleInputClick = function () {
+    var _a;
+    if (!disabled) {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    if (inputValue) {
+      toggleDropdown();
+    }
+  };
+  // useDropdown 훅 사용
+  var _q = (0, _dropdown.useDropdown)({
+      triggerRef: internalRef,
+      dropdownRef: dropdownRef,
+      maxHeight: maxHeight,
+      itemCount: optionItems.length,
+      optionItems: optionItems,
+      disabled: disabled,
+      multiple: multiple,
+      onSelect: handleOptionSelect
+    }),
+    isOpen = _q.isOpen,
+    dropdownDirection = _q.direction,
+    focusedIndex = _q.focusedIndex,
+    toggleDropdown = _q.toggleDropdown,
+    dropdownClose = _q.closeDropdown,
+    dropdownHandleKeyDown = _q.handleKeyDown,
+    handleDropdownSelect = _q.handleOptionSelect,
+    handleMouseMove = _q.handleMouseMove,
+    isKeyboardNavigation = _q.isKeyboardNavigation;
+  var showAllItem = function () {
+    var _a;
+    if (!disabled) {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      setInputValue('');
+      onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
+      setShowAllItems(true);
+      if (!isOpen) {
+        toggleDropdown();
+      }
+    }
+  };
+  var closeDropdown = function () {
+    setShowAllItems(false);
+    dropdownClose();
+  };
+  // 키보드 이벤트 처리는 useDropdown 훅에서 처리됨
+  var handleKeyDown = function (e) {
+    // input 전용 키보드 이벤트 처리
+    if (e.key === 'Escape' && isOpen) {
+      closeDropdown();
+      e.preventDefault();
+      return;
+    }
+    // 나머지는 useDropdown 훅에서 처리
+    dropdownHandleKeyDown(e);
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return internalRef.current;
+  }, []);
+  var trailingElement = {
+    type: 'custom',
+    children: (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-input__icon-wrap ncua-input__right-icon",
+      onClick: showAllItem
+    }, {
+      children: (0, _jsxRuntime.jsx)(_button.Button, {
+        label: "\uC804\uCCB4",
+        hierarchy: "text",
+        size: "xxs",
+        leadingIcon: {
+          type: 'icon',
+          icon: 'chevron-selector-vertical'
+        }
+      })
+    }))
+  };
+  var leadingElement = {
+    type: 'icon',
+    icon: 'search-lg',
+    size: 14,
+    color: 'gray300'
+  };
+  var currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+  var _r = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems),
+    selectAllButtonText = _r.buttonText,
+    toggleSelectAll = _r.toggleSelectAll,
+    getSelectedTagsData = _r.getSelectedTagsData,
+    removeTag = _r.removeTag;
+  var handleSelectAll = function () {
+    if (!multiple || !onChange) return;
+    var newSelectedValues = toggleSelectAll();
+    onChange(newSelectedValues);
+  };
+  var handleEdit = function () {
+    onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+  };
+  var handleComplete = function () {
+    if (!multiple) return;
+    var tags = getSelectedTagsData();
+    setSelectedTags(tags);
+    setInputValue('');
+    closeDropdown();
+  };
+  var handleRemoveTag = function (tagId) {
+    if (!onChange) return;
+    if (multiple) {
+      var newSelectedValues = removeTag(tagId);
+      onChange(newSelectedValues);
+      setSelectedTags(function (prev) {
+        return prev.filter(function (tag) {
+          return tag.id !== tagId;
+        });
+      });
+    } else {
+      onChange('');
+      setSelectedTags([]);
+    }
+  };
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)("div", __assign({
+      ref: internalRef,
+      className: (0, _classnames.default)('ncua-combobox', "ncua-combobox--".concat(size), {
+        'ncua-combobox--open': isOpen,
+        'ncua-combobox--disabled': disabled,
+        destructive: destructive
+      }, className)
+    }, props, {
+      children: [(0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-combobox__content"
+      }, {
+        children: [(0, _jsxRuntime.jsx)(_InputBase.InputBase, {
+          ref: inputRef,
+          size: size,
+          label: label,
+          required: required,
+          placeholder: placeholder,
+          value: inputValue,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onClick: handleInputClick,
+          disabled: disabled,
+          destructive: destructive,
+          leadingElement: leadingElement,
+          trailingElement: trailingElement,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-controls": "combobox-options-".concat(id || 'default'),
+          "aria-disabled": disabled,
+          autoComplete: "off",
+          clearText: !!inputValue,
+          onClearText: function () {
+            setInputValue('');
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
+          }
+        }), (0, _jsxRuntime.jsxs)(_selectDropdown.SelectDropdown, __assign({
+          ref: dropdownRef,
+          isOpen: isOpen,
+          direction: dropdownDirection,
+          size: size,
+          options: showAllItems || inputValue ? optionItems : [],
+          value: value,
+          focusedIndex: focusedIndex,
+          maxHeight: maxHeight,
+          listboxId: "combobox-options-".concat(id || 'default'),
+          onOptionSelect: handleDropdownSelect,
+          onMouseMove: handleMouseMove,
+          isKeyboardNavigation: isKeyboardNavigation,
+          multiple: multiple,
+          showFooterButtons: multiple || showFooterButtons,
+          selectAllButtonText: selectAllButtonText,
+          onSelectAll: handleSelectAll,
+          onEdit: handleEdit,
+          onComplete: handleComplete,
+          componentType: "combobox"
+        }, {
+          children: [!showAllItems && !inputValue || optionItems.length === 0 ? (0, _jsxRuntime.jsx)("li", __assign({
+            className: "ncua-select-dropdown__no-results"
+          }, {
+            children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+          })) : null, children]
+        }))]
+      })), register && (0, _jsxRuntime.jsx)("input", __assign({
+        type: "hidden"
+      }, register, {
+        value: multiple ? JSON.stringify(value || []) : String(value || '')
+      })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
+        destructive: destructive
+      }, {
+        children: hintText
+      }))]
+    })), selectedTags.length > 0 && (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-combobox__tags"
+    }, {
+      children: selectedTags.map(function (tag) {
+        return (0, _jsxRuntime.jsx)(_tag.Tag, {
+          text: tag.label,
+          size: "sm",
+          close: true,
+          onButtonClick: function () {
+            return handleRemoveTag(tag.id);
+          }
+        }, tag.id);
+      })
+    }))]
+  });
+});
+ComboBox.displayName = 'ComboBox';

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComboBox", {
+  enumerable: true,
+  get: function () {
+    return _ComboBox.ComboBox;
+  }
+});
+var _ComboBox = require("./ComboBox");

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var CustomInput = exports.CustomInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var disabled = _a.disabled,
+    iconSize = _a.iconSize,
+    iconName = _a.iconName,
+    props = __rest(_a, ["disabled", "iconSize", "iconName"]);
+  var svgSize = iconSize === 'xs' ? 14 : 16;
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)("input", __assign({
+      ref: ref,
+      disabled: disabled,
+      autoComplete: props.autoComplete || 'off'
+    }, props)), (0, _jsxRuntime.jsx)("label", __assign({
+      className: "ncua-date-picker__ico",
+      htmlFor: props.id
+    }, {
+      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
+        name: iconName,
+        width: svgSize,
+        height: svgSize
+      })
+    }))]
+  });
+});
+CustomInput.displayName = 'CustomInput';