@sunggang/ui-lib 0.2.0 → 0.2.2

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useMemo as useMemo$1, useRef, useReducer, useEffect, useCallback as useCallback$1, forwardRef, useImperativeHandle, Fragment, useLayoutEffect, useContext, useState, Component, createRef } from 'react';
+import React__default, { useMemo as useMemo$1, useRef, useReducer, useEffect, useCallback as useCallback$1, forwardRef, useImperativeHandle, Fragment, useLayoutEffect, useContext, useState, createContext, Component, createRef } from 'react';
 import { Icon } from '@iconify/react';
 import ReactDOM, { unstable_batchedUpdates } from 'react-dom';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -1118,13 +1118,13 @@ var PropTypes = propTypes$1.exports;
  * See the {@glink features/watchdog Watchdog feature guide} to learn the rationale behind it and how to use it.
  *
  * @internal
- */ function _array_like_to_array$a(arr, len) {
+ */ function _array_like_to_array$b(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_without_holes$4(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$a(arr);
+function _array_without_holes$5(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$b(arr);
 }
 function _class_call_check$2(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -1152,22 +1152,22 @@ function _instanceof$c(left, right) {
         return left instanceof right;
     }
 }
-function _iterable_to_array$4(iter) {
+function _iterable_to_array$5(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _non_iterable_spread$4() {
+function _non_iterable_spread$5() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _to_consumable_array$4(arr) {
-    return _array_without_holes$4(arr) || _iterable_to_array$4(arr) || _unsupported_iterable_to_array$a(arr) || _non_iterable_spread$4();
+function _to_consumable_array$5(arr) {
+    return _array_without_holes$5(arr) || _iterable_to_array$5(arr) || _unsupported_iterable_to_array$b(arr) || _non_iterable_spread$5();
 }
-function _unsupported_iterable_to_array$a(o, minLen) {
+function _unsupported_iterable_to_array$b(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
 }
 var Watchdog = /*#__PURE__*/ function() {
     function Watchdog(config) {
@@ -1273,7 +1273,7 @@ var Watchdog = /*#__PURE__*/ function() {
                         var callback = _step.value;
                         callback.apply(this, [
                             null
-                        ].concat(_to_consumable_array$4(args)));
+                        ].concat(_to_consumable_array$5(args)));
                     }
                 } catch (err) {
                     _didIteratorError = true;
@@ -3754,12 +3754,12 @@ var now$1 = now;
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */ function _array_like_to_array$9(arr, len) {
+ */ function _array_like_to_array$a(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$6(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _assert_this_initialized$1(self) {
@@ -3787,7 +3787,7 @@ function _create_class$1(Constructor, protoProps, staticProps) {
     if (staticProps) _defineProperties$2(Constructor, staticProps);
     return Constructor;
 }
-function _define_property$a(obj, key, value) {
+function _define_property$c(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3835,7 +3835,7 @@ function _inherits$2(subClass, superClass) {
     });
     if (superClass) _set_prototype_of$1(subClass, superClass);
 }
-function _iterable_to_array_limit$6(arr, i) {
+function _iterable_to_array_limit$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3859,10 +3859,10 @@ function _iterable_to_array_limit$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+function _non_iterable_rest$7() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$a(target) {
+function _object_spread$c(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3872,12 +3872,12 @@ function _object_spread$a(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
+            _define_property$c(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$a(object, enumerableOnly) {
+function ownKeys$c(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -3890,12 +3890,12 @@ function ownKeys$a(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$7(target, source) {
+function _object_spread_props$9(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$a(Object(source)).forEach(function(key) {
+        ownKeys$c(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -3941,8 +3941,8 @@ function _set_prototype_of$1(o, p) {
     };
     return _set_prototype_of$1(o, p);
 }
-function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$6();
+function _sliced_to_array$7(arr, i) {
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$7();
 }
 function _super_prop_base$1(object, property) {
     while(!Object.prototype.hasOwnProperty.call(object, property)){
@@ -3955,13 +3955,13 @@ function _type_of$a(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$9(o, minLen) {
+function _unsupported_iterable_to_array$a(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
 function _is_native_reflect_construct$1() {
     if (typeof Reflect === "undefined" || !Reflect.construct) return false;
@@ -4109,7 +4109,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                     try {
                         // Traverse through the roots saved when the editor crashed and set up the discussed values.
                         for(var _iterator = Object.entries(_this._data.roots)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                            var _step_value = _sliced_to_array$6(_step.value, 2), rootName = _step_value[0], rootData = _step_value[1];
+                            var _step_value = _sliced_to_array$7(_step.value, 2), rootName = _step_value[0], rootData = _step_value[1];
                             if (rootData.isLoaded) {
                                 existingRoots[rootName] = "";
                                 rootsAttributes[rootName] = oldRootsAttributes[rootName] || {};
@@ -4131,7 +4131,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                             }
                         }
                     }
-                    var updatedConfig = _object_spread_props$7(_object_spread$a({}, _this._config), {
+                    var updatedConfig = _object_spread_props$9(_object_spread$c({}, _this._config), {
                         extraPlugins: _this._config.extraPlugins || [],
                         lazyRoots: lazyRoots,
                         rootsAttributes: rootsAttributes,
@@ -4469,14 +4469,14 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                 var _this = this;
                 var editor = this.editor;
                 Object.entries(this._data.roots).forEach(function(param) {
-                    var _param = _sliced_to_array$6(param, 2), rootName = _param[0], _param_ = _param[1], content = _param_.content, attributes = _param_.attributes;
+                    var _param = _sliced_to_array$7(param, 2), rootName = _param[0], _param_ = _param[1], content = _param_.content, attributes = _param_.attributes;
                     var parsedNodes = JSON.parse(content);
                     var parsedAttributes = JSON.parse(attributes);
                     var rootElement = editor.model.document.getRoot(rootName);
                     var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                     try {
                         for(var _iterator = parsedAttributes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                            var _step_value = _sliced_to_array$6(_step.value, 2), key = _step_value[0], value = _step_value[1];
+                            var _step_value = _sliced_to_array$7(_step.value, 2), key = _step_value[0], value = _step_value[1];
                             writer.setAttribute(key, value, rootElement);
                         }
                     } catch (err) {
@@ -4516,7 +4516,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                     }
                 });
                 Object.entries(this._data.markers).forEach(function(param) {
-                    var _param = _sliced_to_array$6(param, 2), markerName = _param[0], markerOptions = _param[1];
+                    var _param = _sliced_to_array$7(param, 2), markerName = _param[0], markerOptions = _param[1];
                     var document = editor.model.document;
                     var _markerOptions_rangeJSON = markerOptions.rangeJSON, start = _markerOptions_rangeJSON.start, end = _markerOptions_rangeJSON.end, options = _object_without_properties$7(markerOptions, [
                         "rangeJSON"
@@ -4525,7 +4525,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                     var startPosition = writer.createPositionFromPath(root, start.path, start.stickiness);
                     var endPosition = writer.createPositionFromPath(root, end.path, end.stickiness);
                     var range = writer.createRange(startPosition, endPosition);
-                    writer.addMarker(markerName, _object_spread$a({
+                    writer.addMarker(markerName, _object_spread$c({
                         range: range
                     }, options));
                 });
@@ -4547,7 +4547,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                         var commentThread = commentsRepository.getCommentThread(commentThreadData.threadId);
                         commentThread.remove();
                     }
-                    commentsRepository.addCommentThread(_object_spread$a({
+                    commentsRepository.addCommentThread(_object_spread$c({
                         channelId: channelId
                     }, commentThreadData));
                 });
@@ -72785,30 +72785,30 @@ function setObjProp(f, key, value) {
     });
 }
 
-function _array_like_to_array$8(arr, len) {
+function _array_like_to_array$9(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_without_holes$3(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$8(arr);
+function _array_without_holes$4(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$9(arr);
 }
-function _iterable_to_array$3(iter) {
+function _iterable_to_array$4(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _non_iterable_spread$3() {
+function _non_iterable_spread$4() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _to_consumable_array$3(arr) {
-    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$8(arr) || _non_iterable_spread$3();
+function _to_consumable_array$4(arr) {
+    return _array_without_holes$4(arr) || _iterable_to_array$4(arr) || _unsupported_iterable_to_array$9(arr) || _non_iterable_spread$4();
 }
-function _unsupported_iterable_to_array$8(o, minLen) {
+function _unsupported_iterable_to_array$9(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
 }
 function _ts_generator(thisArg, body) {
     var f, y, t, g, _ = {
@@ -73065,7 +73065,7 @@ function toFilePromises(item) {
 }
 function flatten$2(items) {
     return items.reduce(function(acc, files) {
-        return _to_consumable_array$3(acc).concat(_to_consumable_array$3(Array.isArray(files) ? flatten$2(files) : [
+        return _to_consumable_array$4(acc).concat(_to_consumable_array$4(Array.isArray(files) ? flatten$2(files) : [
             files
         ]));
     }, []);
@@ -73245,7 +73245,7 @@ function _iterableToArray$2(iter) {
 function _arrayWithoutHoles$2(arr) {
     if (Array.isArray(arr)) return _arrayLikeToArray$2(arr);
 }
-function ownKeys$9(object, enumerableOnly) {
+function ownKeys$b(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -73258,9 +73258,9 @@ function ownKeys$9(object, enumerableOnly) {
 function _objectSpread$1(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = null != arguments[i] ? arguments[i] : {};
-        i % 2 ? ownKeys$9(Object(source), !0).forEach(function(key) {
+        i % 2 ? ownKeys$b(Object(source), !0).forEach(function(key) {
             _defineProperty$3(target, key, source[key]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function(key) {
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -73667,7 +73667,7 @@ function _iterableToArrayLimit$1(arr, i) {
 function _arrayWithHoles$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function ownKeys$8(object, enumerableOnly) {
+function ownKeys$a(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -73680,9 +73680,9 @@ function ownKeys$8(object, enumerableOnly) {
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = null != arguments[i] ? arguments[i] : {};
-        i % 2 ? ownKeys$8(Object(source), !0).forEach(function(key) {
+        i % 2 ? ownKeys$a(Object(source), !0).forEach(function(key) {
             _defineProperty$2(target, key, source[key]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function(key) {
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -74684,7 +74684,7 @@ function _defineProperty$1(e, r, t) {
     }) : e[r] = t, e;
 }
 
-function ownKeys$7(e, r) {
+function ownKeys$9(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
         var o = Object.getOwnPropertySymbols(e);
@@ -74697,9 +74697,9 @@ function ownKeys$7(e, r) {
 function _objectSpread2$7(e) {
     for(var r = 1; r < arguments.length; r++){
         var t = null != arguments[r] ? arguments[r] : {};
-        r % 2 ? ownKeys$7(Object(t), !0).forEach(function(r) {
+        r % 2 ? ownKeys$9(Object(t), !0).forEach(function(r) {
             _defineProperty$1(e, r, t[r]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function(r) {
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function(r) {
             Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
         });
     }
@@ -84065,7 +84065,7 @@ var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
 })(Droppable);
 ConnectedDroppable.defaultProps = defaultProps;
 
-function _define_property$9(obj, key, value) {
+function _define_property$b(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -84078,7 +84078,7 @@ function _define_property$9(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$9(target) {
+function _object_spread$b(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -84088,12 +84088,12 @@ function _object_spread$9(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$9(target, key, source[key]);
+            _define_property$b(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$6(object, enumerableOnly) {
+function ownKeys$8(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -84106,12 +84106,12 @@ function ownKeys$6(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$6(target, source) {
+function _object_spread_props$8(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$6(Object(source)).forEach(function(key) {
+        ownKeys$8(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -84125,7 +84125,7 @@ var DragDropImages = function(param) {
             droppableId: "droppable-imageUrls",
             direction: "horizontal",
             children: function(provided) {
-                return /*#__PURE__*/ jsxs("div", _object_spread_props$6(_object_spread$9({
+                return /*#__PURE__*/ jsxs("div", _object_spread_props$8(_object_spread$b({
                     ref: provided.innerRef
                 }, provided.droppableProps), {
                     className: "flex gap-2 overflow-auto",
@@ -84135,7 +84135,7 @@ var DragDropImages = function(param) {
                                 draggableId: item === null || item === void 0 ? void 0 : item.id,
                                 index: index,
                                 children: function(provided) {
-                                    return /*#__PURE__*/ jsxs("div", _object_spread_props$6(_object_spread$9({
+                                    return /*#__PURE__*/ jsxs("div", _object_spread_props$8(_object_spread$b({
                                         ref: provided.innerRef
                                     }, provided.draggableProps, provided.dragHandleProps), {
                                         className: "w-24 my-2 rounded-lg bg-gray-200",
@@ -84175,18 +84175,18 @@ var DragDropImages = function(param) {
     });
 };
 
-function _array_like_to_array$7(arr, len) {
+function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$5(arr) {
+function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$7(arr);
+function _array_without_holes$3(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$8(arr);
 }
-function _define_property$8(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -84199,10 +84199,10 @@ function _define_property$8(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array$2(iter) {
+function _iterable_to_array$3(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _iterable_to_array_limit$6(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -84226,13 +84226,13 @@ function _iterable_to_array_limit$5(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$5() {
+function _non_iterable_rest$6() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _non_iterable_spread$2() {
+function _non_iterable_spread$3() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$8(target) {
+function _object_spread$a(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -84242,12 +84242,12 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$a(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$5(object, enumerableOnly) {
+function ownKeys$7(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -84260,34 +84260,34 @@ function ownKeys$5(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$5(target, source) {
+function _object_spread_props$7(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$5(Object(source)).forEach(function(key) {
+        ownKeys$7(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     return target;
 }
-function _sliced_to_array$5(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$5();
+function _sliced_to_array$6(arr, i) {
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$6();
 }
-function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$7(arr) || _non_iterable_spread$2();
+function _to_consumable_array$3(arr) {
+    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$8(arr) || _non_iterable_spread$3();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 var DropImage = function(param) {
     var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls;
-    var _useState = _sliced_to_array$5(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
+    var _useState = _sliced_to_array$6(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
     useEffect(function() {
         setPreviewFiles(imageUrls);
     }, [
@@ -84307,7 +84307,9 @@ var DropImage = function(param) {
         maxSize: 5000000,
         onDrop: function(dropFiles) {
             var newFiles = [];
-            setFiles(dropFiles);
+            setFiles(function(prevFiles) {
+                return _to_consumable_array$3(prevFiles).concat(_to_consumable_array$3(dropFiles));
+            });
             dropFiles.forEach(function(dropFile, index) {
                 Object.assign(dropFile, {
                     preview: URL.createObjectURL(dropFile),
@@ -84317,17 +84319,17 @@ var DropImage = function(param) {
                 newFiles.push(dropFile);
             });
             setPreviewFiles(function(prev) {
-                return _to_consumable_array$2(prev).concat(_to_consumable_array$2(newFiles));
+                return _to_consumable_array$3(prev).concat(_to_consumable_array$3(newFiles));
             });
         }
     }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps; _useDropzone.isDragActive; _useDropzone.isDragAccept; _useDropzone.isDragReject;
     var onDragEnd = function(result) {
         if (!result.destination) return;
-        var newItems = _to_consumable_array$2(previewFiles);
-        var _newItems_splice = _sliced_to_array$5(newItems.splice(result.source.index, 1), 1), reorderedItem = _newItems_splice[0];
+        var newItems = _to_consumable_array$3(previewFiles);
+        var _newItems_splice = _sliced_to_array$6(newItems.splice(result.source.index, 1), 1), reorderedItem = _newItems_splice[0];
         newItems.splice(result.destination.index, 0, reorderedItem);
         var reSortItem = newItems.map(function(item, index) {
-            return _object_spread_props$5(_object_spread$8({}, item), {
+            return _object_spread_props$7(_object_spread$a({}, item), {
                 index: index + 1
             });
         });
@@ -84337,16 +84339,16 @@ var DropImage = function(param) {
     var handleRemove = function(item) {
         var currentItem = previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.indexOf(item);
         previewFiles.splice(currentItem, 1);
-        setImageUrls(_to_consumable_array$2(previewFiles));
+        setImageUrls(_to_consumable_array$3(previewFiles));
     };
     return /*#__PURE__*/ jsxs("section", {
         className: "w-full",
         children: [
-            /*#__PURE__*/ jsxs("div", _object_spread_props$5(_object_spread$8({}, getRootProps({
+            /*#__PURE__*/ jsxs("div", _object_spread_props$7(_object_spread$a({}, getRootProps({
                 className: "dropzone"
             })), {
                 children: [
-                    /*#__PURE__*/ jsx("input", _object_spread$8({}, getInputProps())),
+                    /*#__PURE__*/ jsx("input", _object_spread$a({}, getInputProps())),
                     /*#__PURE__*/ jsx("div", {
                         className: "flex justify-between",
                         children: /*#__PURE__*/ jsx("div", {
@@ -84393,6 +84395,916 @@ var DropImage = function(param) {
     });
 };
 
+var COLORS = [
+    "blue",
+    "orange",
+    "yellow",
+    "red",
+    "purple",
+    "amber",
+    "lime",
+    "green",
+    "emerald",
+    "teal",
+    "cyan",
+    "sky",
+    "violet",
+    "indigo",
+    "purple",
+    "fuchsia",
+    "pink",
+    "rose"
+];
+var DEFAULT_THEME = "blue";
+var THEME_DATA = {
+    bg: {
+        blue: "bg-blue-500",
+        orange: "bg-orange-500",
+        yellow: "bg-yellow-500",
+        red: "bg-red-500",
+        purple: "bg-purple-500",
+        amber: "bg-amber-500",
+        lime: "bg-lime-500",
+        green: "bg-green-500",
+        emerald: "bg-emerald-500",
+        teal: "bg-teal-500",
+        cyan: "bg-cyan-500",
+        sky: "bg-sky-500",
+        indigo: "bg-indigo-500",
+        violet: "bg-violet-500",
+        fuchsia: "bg-fuchsia-500",
+        pink: "bg-pink-500",
+        rose: "bg-rose-500"
+    },
+    bgHover: {
+        blue: "hover:bg-blue-100",
+        orange: "hover:bg-orange-100",
+        yellow: "hover:bg-yellow-100",
+        red: "hover:bg-red-100",
+        purple: "hover:bg-purple-100",
+        amber: "hover:bg-amber-100",
+        lime: "hover:bg-lime-100",
+        green: "hover:bg-green-100",
+        emerald: "hover:bg-emerald-100",
+        teal: "hover:bg-teal-100",
+        cyan: "hover:bg-cyan-100",
+        sky: "hover:bg-sky-100",
+        indigo: "hover:bg-indigo-100",
+        violet: "hover:bg-violet-100",
+        fuchsia: "hover:bg-fuchsia-100",
+        pink: "hover:bg-pink-100",
+        rose: "hover:bg-rose-100"
+    },
+    ring: {
+        blue: "focus:ring-blue-500/20",
+        orange: "focus:ring-orange-500/20",
+        yellow: "focus:ring-yellow-500/20",
+        red: "focus:ring-red-500/20",
+        purple: "focus:ring-purple-500/20",
+        amber: "focus:ring-amber-500/20",
+        lime: "focus:ring-lime-500/20",
+        green: "focus:ring-green-500/20",
+        emerald: "focus:ring-emerald-500/20",
+        teal: "focus:ring-teal-500/20",
+        cyan: "focus:ring-cyan-500/20",
+        sky: "focus:ring-sky-500/20",
+        indigo: "focus:ring-indigo-500/20",
+        violet: "focus:ring-violet-500/20",
+        fuchsia: "focus:ring-fuchsia-500/20",
+        pink: "focus:ring-pink-500/20",
+        rose: "focus:ring-rose-500/20"
+    },
+    borderFocus: {
+        blue: "focus:border-blue-500",
+        orange: "focus:border-orange-500",
+        yellow: "focus:border-yellow-500",
+        red: "focus:border-red-500",
+        purple: "focus:border-purple-500",
+        amber: "focus:border-amber-500",
+        lime: "focus:border-lime-500",
+        green: "focus:border-green-500",
+        emerald: "focus:border-emerald-500",
+        teal: "focus:border-teal-500",
+        cyan: "focus:border-cyan-500",
+        sky: "focus:border-sky-500",
+        indigo: "focus:border-indigo-500",
+        violet: "focus:border-violet-500",
+        fuchsia: "focus:border-fuchsia-500",
+        pink: "focus:border-pink-500",
+        rose: "focus:border-rose-500"
+    },
+    text: {
+        blue: "text-blue-500",
+        orange: "text-orange-500",
+        yellow: "text-yellow-500",
+        red: "text-red-500",
+        purple: "text-purple-500",
+        amber: "text-amber-500",
+        lime: "text-lime-500",
+        green: "text-green-500",
+        emerald: "text-emerald-500",
+        teal: "text-teal-500",
+        cyan: "text-cyan-500",
+        sky: "text-sky-500",
+        indigo: "text-indigo-500",
+        violet: "text-violet-500",
+        fuchsia: "text-fuchsia-500",
+        pink: "text-pink-500",
+        rose: "text-rose-500"
+    },
+    textHover: {
+        blue: "hover:text-blue-500",
+        orange: "hover:text-orange-500",
+        yellow: "hover:text-yellow-500",
+        red: "hover:text-red-500",
+        purple: "hover:text-purple-500",
+        amber: "hover:text-amber-500",
+        lime: "hover:text-lime-500",
+        green: "hover:text-green-500",
+        emerald: "hover:text-emerald-500",
+        teal: "hover:text-teal-500",
+        cyan: "hover:text-cyan-500",
+        sky: "hover:text-sky-500",
+        indigo: "hover:text-indigo-500",
+        violet: "hover:text-violet-500",
+        fuchsia: "hover:text-fuchsia-500",
+        pink: "hover:text-pink-500",
+        rose: "hover:text-rose-500"
+    }
+};
+
+function useOnClickOutside(ref, handler) {
+    useEffect(function() {
+        var listener = function(event) {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return function() {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [
+        ref,
+        handler
+    ]);
+}
+
+var CloseIcon = function(param) {
+    var _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
+    return /*#__PURE__*/ jsx("svg", {
+        className: className,
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+            clipRule: "evenodd"
+        })
+    });
+};
+var ChevronIcon = function(param) {
+    var _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
+    return /*#__PURE__*/ jsx("svg", {
+        className: className,
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+            clipRule: "evenodd"
+        })
+    });
+};
+var SearchIcon = function(param) {
+    var _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
+    return /*#__PURE__*/ jsx("svg", {
+        className: className,
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        })
+    });
+};
+
+var SelectContext = /*#__PURE__*/ createContext({
+    value: null,
+    handleValueChange: function(selected) {
+        console.log("selected:", selected);
+    },
+    formatGroupLabel: null,
+    formatOptionLabel: null,
+    classNames: undefined
+});
+var useSelectContext = function() {
+    return useContext(SelectContext);
+};
+var SelectProvider = function(param) {
+    var value = param.value, handleValueChange = param.handleValueChange, otherData = param.otherData, children = param.children;
+    var store = useMemo$1(function() {
+        return {
+            value: value,
+            handleValueChange: handleValueChange,
+            formatGroupLabel: otherData && typeof otherData.formatGroupLabel === "function" ? otherData.formatGroupLabel : null,
+            formatOptionLabel: otherData && typeof otherData.formatOptionLabel === "function" ? otherData.formatOptionLabel : null,
+            classNames: (otherData === null || otherData === void 0 ? void 0 : otherData.classNames) || undefined
+        };
+    }, [
+        handleValueChange,
+        otherData,
+        value
+    ]);
+    return /*#__PURE__*/ jsx(SelectContext.Provider, {
+        value: store,
+        children: children
+    });
+};
+
+var DisabledItem = function(param) {
+    var children = param.children;
+    var classNames = useContext(SelectContext).classNames;
+    return /*#__PURE__*/ jsx("div", {
+        className: classNames && classNames.listDisabledItem ? classNames.listDisabledItem : "px-2 py-2 cursor-not-allowed truncate text-gray-400 select-none",
+        children: children
+    });
+};
+
+function _define_property$9(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$9(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$9(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$6(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$6(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$6(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+var Item = function(param) {
+    var item = param.item, primaryColor = param.primaryColor;
+    var _useSelectContext = useSelectContext(), classNames = _useSelectContext.classNames, value = _useSelectContext.value, handleValueChange = _useSelectContext.handleValueChange, formatOptionLabel = _useSelectContext.formatOptionLabel;
+    var isSelected = useMemo$1(function() {
+        return value !== null && !Array.isArray(value) && value.value === item.value;
+    }, [
+        item.value,
+        value
+    ]);
+    var textHoverColor = useMemo$1(function() {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.textHover[primaryColor];
+        }
+        return THEME_DATA.textHover[DEFAULT_THEME];
+    }, [
+        primaryColor
+    ]);
+    var bgColor = useMemo$1(function() {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.bg[primaryColor];
+        }
+        return THEME_DATA.bg[DEFAULT_THEME];
+    }, [
+        primaryColor
+    ]);
+    var bgHoverColor = useMemo$1(function() {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.bgHover[primaryColor];
+        }
+        return THEME_DATA.bgHover[DEFAULT_THEME];
+    }, [
+        primaryColor
+    ]);
+    var getItemClass = useCallback$1(function() {
+        var baseClass = "block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded";
+        var selectedClass = isSelected ? "text-white ".concat(bgColor) : "text-gray-500 ".concat(bgHoverColor, " ").concat(textHoverColor);
+        return classNames && classNames.listItem ? classNames.listItem({
+            isSelected: isSelected
+        }) : "".concat(baseClass, " ").concat(selectedClass);
+    }, [
+        bgColor,
+        bgHoverColor,
+        classNames,
+        isSelected,
+        textHoverColor
+    ]);
+    return /*#__PURE__*/ jsx(Fragment$1, {
+        children: formatOptionLabel ? /*#__PURE__*/ jsx("div", {
+            onClick: function() {
+                return handleValueChange(item);
+            },
+            children: formatOptionLabel(_object_spread_props$6(_object_spread$9({}, item), {
+                isSelected: isSelected
+            }))
+        }) : /*#__PURE__*/ jsx(Fragment$1, {
+            children: item.disabled ? /*#__PURE__*/ jsx(DisabledItem, {
+                children: item.label
+            }) : /*#__PURE__*/ jsx("li", {
+                tabIndex: 0,
+                onKeyDown: function(e) {
+                    if (e.key === " " || e.key === "Enter") {
+                        handleValueChange(item);
+                    }
+                },
+                "aria-selected": isSelected,
+                role: "option",
+                onClick: function() {
+                    return handleValueChange(item);
+                },
+                className: getItemClass(),
+                children: item.label
+            })
+        })
+    });
+};
+
+var GroupItem = function(param) {
+    var item = param.item, primaryColor = param.primaryColor;
+    var _useSelectContext = useSelectContext(), classNames = _useSelectContext.classNames, formatGroupLabel = _useSelectContext.formatGroupLabel;
+    return /*#__PURE__*/ jsx(Fragment$1, {
+        children: item.options.length > 0 && /*#__PURE__*/ jsxs(Fragment$1, {
+            children: [
+                formatGroupLabel ? /*#__PURE__*/ jsx(Fragment$1, {
+                    children: formatGroupLabel(item)
+                }) : /*#__PURE__*/ jsx("div", {
+                    className: (classNames === null || classNames === void 0 ? void 0 : classNames.listGroupLabel) ? classNames.listGroupLabel : "pr-2 py-2 cursor-default select-none truncate font-bold text-gray-700",
+                    children: item.label
+                }),
+                item.options.map(function(item, index) {
+                    return /*#__PURE__*/ jsx(Item, {
+                        primaryColor: primaryColor,
+                        item: item
+                    }, index);
+                })
+            ]
+        })
+    });
+};
+
+var Options = function(param) {
+    var list = param.list, noOptionsMessage = param.noOptionsMessage, text = param.text, isMultiple = param.isMultiple, value = param.value, _param_primaryColor = param.primaryColor, primaryColor = _param_primaryColor === void 0 ? DEFAULT_THEME : _param_primaryColor;
+    var classNames = useContext(SelectContext).classNames;
+    var filterByText = useCallback$1(function() {
+        var filterItem = function(item) {
+            return item.label.toLowerCase().indexOf(text.toLowerCase()) > -1;
+        };
+        var result = list.map(function(item) {
+            if ("options" in item) {
+                return {
+                    label: item.label,
+                    options: item.options.filter(filterItem)
+                };
+            }
+            return item;
+        });
+        result = result.filter(function(item) {
+            if ("options" in item) {
+                return item.options.length > 0;
+            }
+            return filterItem(item);
+        });
+        return result;
+    }, [
+        text,
+        list
+    ]);
+    var removeValues = useCallback$1(function(array) {
+        if (!isMultiple) {
+            return array;
+        }
+        if (Array.isArray(value)) {
+            var valueId = value.map(function(item) {
+                return item.value;
+            });
+            var filterItem = function(item) {
+                return !valueId.includes(item.value);
+            };
+            var newArray = array.map(function(item) {
+                if ("options" in item) {
+                    return {
+                        label: item.label,
+                        options: item.options.filter(filterItem)
+                    };
+                }
+                return item;
+            });
+            newArray = newArray.filter(function(item) {
+                if ("options" in item) {
+                    return item.options.length > 0;
+                } else {
+                    return filterItem(item);
+                }
+            });
+            return newArray;
+        }
+        return array;
+    }, [
+        isMultiple,
+        value
+    ]);
+    var filterResult = useMemo$1(function() {
+        return removeValues(filterByText());
+    }, [
+        filterByText,
+        removeValues
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        role: "options",
+        className: classNames && classNames.list ? classNames.list : "max-h-72 overflow-y-auto",
+        children: [
+            filterResult.map(function(item, index) {
+                return /*#__PURE__*/ jsx(React__default.Fragment, {
+                    children: "options" in item ? /*#__PURE__*/ jsxs(Fragment$1, {
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "px-2.5",
+                                children: /*#__PURE__*/ jsx(GroupItem, {
+                                    primaryColor: primaryColor || DEFAULT_THEME,
+                                    item: item
+                                })
+                            }),
+                            index + 1 < filterResult.length && /*#__PURE__*/ jsx("hr", {
+                                className: "my-1"
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx("div", {
+                        className: "px-2.5",
+                        children: /*#__PURE__*/ jsx(Item, {
+                            primaryColor: primaryColor || DEFAULT_THEME,
+                            item: item
+                        })
+                    })
+                }, index);
+            }),
+            filterResult.length === 0 && /*#__PURE__*/ jsx(DisabledItem, {
+                children: noOptionsMessage
+            })
+        ]
+    });
+};
+
+var SearchInput = /*#__PURE__*/ forwardRef(function SearchInput(param, ref) {
+    var _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "" : _param_placeholder, _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, onChange = param.onChange, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name;
+    var classNames = useContext(SelectContext).classNames;
+    return /*#__PURE__*/ jsxs("div", {
+        className: classNames && classNames.searchContainer ? classNames.searchContainer : "relative py-1 px-2.5",
+        children: [
+            /*#__PURE__*/ jsx(SearchIcon, {
+                className: classNames && classNames.searchIcon ? classNames.searchIcon : "absolute w-5 h-5 mt-2.5 pb-0.5 ml-2 text-gray-500"
+            }),
+            /*#__PURE__*/ jsx("input", {
+                ref: ref,
+                className: classNames && classNames.searchBox ? classNames.searchBox : "w-full py-2 pl-8 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded focus:border-gray-200 focus:ring-0 focus:outline-none",
+                type: "text",
+                placeholder: placeholder,
+                value: value,
+                onChange: onChange,
+                name: name
+            })
+        ]
+    });
+});
+
+var Spinner = function(param) {
+    var _param_primaryColor = param.primaryColor, primaryColor = _param_primaryColor === void 0 ? DEFAULT_THEME : _param_primaryColor;
+    var spinnerColor = useMemo$1(function() {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.text[primaryColor];
+        }
+        return THEME_DATA.text[DEFAULT_THEME];
+    }, [
+        primaryColor
+    ]);
+    return /*#__PURE__*/ jsxs("svg", {
+        className: "animate-spin mr-0.5 h-5 w-5 ".concat(spinnerColor),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            })
+        ]
+    });
+};
+
+function _array_like_to_array$7(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$5(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes$2(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$7(arr);
+}
+function _define_property$8(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array$2(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit$5(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$5() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread$2() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread$8(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$8(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$5(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$5(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$5(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$5();
+}
+function _to_consumable_array$2(arr) {
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$7(arr) || _non_iterable_spread$2();
+}
+function _unsupported_iterable_to_array$7(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+}
+var DropDown = function(param) {
+    var _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_value = param.value, value = _param_value === void 0 ? null : _param_value, onChange = param.onChange, onSearchInputChange = param.onSearchInputChange, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select..." : _param_placeholder, _param_searchInputPlaceholder = param.searchInputPlaceholder, searchInputPlaceholder = _param_searchInputPlaceholder === void 0 ? "Search..." : _param_searchInputPlaceholder, _param_isMultiple = param.isMultiple, isMultiple = _param_isMultiple === void 0 ? false : _param_isMultiple, _param_isClearable = param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, _param_isSearchable = param.isSearchable, isSearchable = _param_isSearchable === void 0 ? false : _param_isSearchable, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, _param_menuIsOpen = param.menuIsOpen, menuIsOpen = _param_menuIsOpen === void 0 ? false : _param_menuIsOpen, _param_noOptionsMessage = param.noOptionsMessage, noOptionsMessage = _param_noOptionsMessage === void 0 ? "No options found" : _param_noOptionsMessage, _param_primaryColor = param.primaryColor, primaryColor = _param_primaryColor === void 0 ? DEFAULT_THEME : _param_primaryColor, _param_formatGroupLabel = param.formatGroupLabel, formatGroupLabel = _param_formatGroupLabel === void 0 ? null : _param_formatGroupLabel, _param_formatOptionLabel = param.formatOptionLabel, formatOptionLabel = _param_formatOptionLabel === void 0 ? null : _param_formatOptionLabel, classNames = param.classNames;
+    var _useState = _sliced_to_array$5(useState(menuIsOpen), 2), open = _useState[0], setOpen = _useState[1];
+    var _useState1 = _sliced_to_array$5(useState(options), 2), list = _useState1[0], setList = _useState1[1];
+    var _useState2 = _sliced_to_array$5(useState(""), 2), inputValue = _useState2[0], setInputValue = _useState2[1];
+    var ref = useRef(null);
+    var searchBoxRef = useRef(null);
+    useEffect(function() {
+        var formatItem = function(item) {
+            if ("disabled" in item) return item;
+            return _object_spread_props$5(_object_spread$8({}, item), {
+                disabled: false
+            });
+        };
+        setList(options.map(function(item) {
+            if ("options" in item) {
+                return {
+                    label: item.label,
+                    options: item.options.map(formatItem)
+                };
+            } else {
+                return formatItem(item);
+            }
+        }));
+    }, [
+        options
+    ]);
+    useEffect(function() {
+        if (isSearchable) {
+            if (open) {
+                var _searchBoxRef_current;
+                (_searchBoxRef_current = searchBoxRef.current) === null || _searchBoxRef_current === void 0 ? void 0 : _searchBoxRef_current.select();
+            } else {
+                setInputValue("");
+            }
+        }
+    }, [
+        open,
+        isSearchable
+    ]);
+    var toggle = useCallback$1(function() {
+        if (!isDisabled) {
+            setOpen(!open);
+        }
+    }, [
+        isDisabled,
+        open
+    ]);
+    var closeDropDown = useCallback$1(function() {
+        if (open) setOpen(false);
+    }, [
+        open
+    ]);
+    useOnClickOutside(ref, function() {
+        closeDropDown();
+    });
+    var onPressEnterOrSpace = useCallback$1(function(e) {
+        e.preventDefault();
+        if ((e.code === "Enter" || e.code === "Space") && !isDisabled) {
+            toggle();
+        }
+    }, [
+        isDisabled,
+        toggle
+    ]);
+    var handleValueChange = useCallback$1(function(selected) {
+        var update = function update() {
+            if (!isMultiple && !Array.isArray(value)) {
+                closeDropDown();
+                onChange(selected);
+            }
+            if (isMultiple && (Array.isArray(value) || value === null)) {
+                onChange(value === null ? [
+                    selected
+                ] : _to_consumable_array$2(value).concat([
+                    selected
+                ]));
+            }
+        };
+        if (selected !== value) {
+            update();
+        }
+    }, [
+        closeDropDown,
+        isMultiple,
+        onChange,
+        value
+    ]);
+    var clearValue = useCallback$1(function(e) {
+        e.stopPropagation();
+        onChange(null);
+    }, [
+        onChange
+    ]);
+    var removeItem = useCallback$1(function(e, item) {
+        if (isMultiple && Array.isArray(value) && value.length) {
+            e.stopPropagation();
+            var result = value.filter(function(current) {
+                return item.value !== current.value;
+            });
+            onChange(result.length ? result : null);
+        }
+    }, [
+        isMultiple,
+        onChange,
+        value
+    ]);
+    var getSelectClass = useCallback$1(function() {
+        var ringColor = THEME_DATA.ring[DEFAULT_THEME];
+        if (COLORS.includes(primaryColor)) {
+            ringColor = THEME_DATA.ring[primaryColor];
+        }
+        var borderFocus = THEME_DATA.borderFocus[DEFAULT_THEME];
+        if (COLORS.includes(primaryColor)) {
+            borderFocus = THEME_DATA.borderFocus[primaryColor];
+        }
+        var baseClass = "flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none";
+        var defaultClass = "".concat(baseClass, " ").concat(isDisabled ? "bg-gray-200" : "bg-white hover:border-gray-400 ".concat(borderFocus, " focus:ring ").concat(ringColor));
+        return classNames && classNames.menuButton ? classNames.menuButton({
+            isDisabled: isDisabled
+        }) : defaultClass;
+    }, [
+        classNames,
+        isDisabled,
+        primaryColor
+    ]);
+    var getTagItemClass = useCallback$1(function(item) {
+        var baseClasse = "bg-gray-200 border rounded-sm flex space-x-1";
+        var disabledClass = isDisabled ? "border-gray-500 px-1" : "pl-1";
+        return (classNames === null || classNames === void 0 ? void 0 : classNames.tagItem) ? classNames.tagItem({
+            item: item,
+            isDisabled: isDisabled
+        }) : "".concat(baseClasse, " ").concat(disabledClass);
+    }, [
+        classNames,
+        isDisabled
+    ]);
+    return /*#__PURE__*/ jsx(SelectProvider, {
+        otherData: {
+            formatGroupLabel: formatGroupLabel,
+            formatOptionLabel: formatOptionLabel,
+            classNames: classNames
+        },
+        value: value,
+        handleValueChange: handleValueChange,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "relative w-full",
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    "aria-expanded": open,
+                    onKeyDown: onPressEnterOrSpace,
+                    onClick: toggle,
+                    className: getSelectClass(),
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "grow pl-2.5 py-2 pr-2 flex flex-wrap gap-1",
+                            children: !isMultiple ? /*#__PURE__*/ jsx("p", {
+                                className: "truncate cursor-default select-none",
+                                children: value && !Array.isArray(value) ? value.label : placeholder
+                            }) : /*#__PURE__*/ jsxs(Fragment$1, {
+                                children: [
+                                    value === null && placeholder,
+                                    Array.isArray(value) && value.map(function(item, index) {
+                                        return /*#__PURE__*/ jsxs("div", {
+                                            className: getTagItemClass(item),
+                                            children: [
+                                                /*#__PURE__*/ jsx("p", {
+                                                    className: (classNames === null || classNames === void 0 ? void 0 : classNames.tagItemText) ? classNames.tagItemText : "text-gray-600 truncate cursor-default select-none",
+                                                    children: item.label
+                                                }),
+                                                !isDisabled && /*#__PURE__*/ jsx("div", {
+                                                    role: "button",
+                                                    tabIndex: 0,
+                                                    onClick: function(e) {
+                                                        return removeItem(e, item);
+                                                    },
+                                                    className: (classNames === null || classNames === void 0 ? void 0 : classNames.tagItemIconContainer) ? classNames.tagItemIconContainer : "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600",
+                                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                                        className: (classNames === null || classNames === void 0 ? void 0 : classNames.tagItemIcon) ? classNames.tagItemIcon : "w-3 h-3 mt-0.5"
+                                                    })
+                                                })
+                                            ]
+                                        }, index);
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex flex-none items-center py-1.5",
+                            children: [
+                                loading && /*#__PURE__*/ jsx("div", {
+                                    className: "px-1.5",
+                                    children: /*#__PURE__*/ jsx(Spinner, {
+                                        primaryColor: primaryColor
+                                    })
+                                }),
+                                isClearable && !isDisabled && value !== null && /*#__PURE__*/ jsx("div", {
+                                    className: "px-1.5 cursor-pointer",
+                                    onClick: clearValue,
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        className: (classNames === null || classNames === void 0 ? void 0 : classNames.closeIcon) ? classNames.closeIcon : "w-5 h-5 p-0.5"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "h-full",
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        className: "w-px h-full inline-block text-white bg-gray-300 text-opacity-0"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "px-1.5",
+                                    children: /*#__PURE__*/ jsx(ChevronIcon, {
+                                        className: "transition duration-300 w-6 h-6 p-0.5".concat(open ? " transform rotate-90 text-gray-500" : " text-gray-300")
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                open && !isDisabled && /*#__PURE__*/ jsxs("div", {
+                    className: (classNames === null || classNames === void 0 ? void 0 : classNames.menu) ? classNames.menu : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
+                    children: [
+                        isSearchable && /*#__PURE__*/ jsx(SearchInput, {
+                            ref: searchBoxRef,
+                            value: inputValue,
+                            placeholder: searchInputPlaceholder,
+                            onChange: function(e) {
+                                if (onSearchInputChange && typeof onSearchInputChange === "function") onSearchInputChange(e);
+                                setInputValue(e.target.value);
+                            }
+                        }),
+                        /*#__PURE__*/ jsx(Options, {
+                            list: list,
+                            noOptionsMessage: noOptionsMessage,
+                            text: inputValue,
+                            isMultiple: isMultiple,
+                            value: value,
+                            primaryColor: primaryColor || DEFAULT_THEME
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
 var ModalContent = function(param) {
     var title = param.title, setModal = param.setModal, children = param.children, onClick = param.onClick, _param_notice = param.notice, notice = _param_notice === void 0 ? false : _param_notice;
     return /*#__PURE__*/ jsxs("form", {
@@ -106940,4 +107852,4 @@ function DnDCalendar(props) {
     });
 }
 
-export { BaseTable, BigCalender, CkEditor, CustomUpload, DataTable, DateRangePicker, DnDCalendar, DropImage, ReactDateRange, Regex, Spin, Switch, UiLibrary, decryptByEcPay, encryptByEcPay, verifyId, verifyTaxId };
+export { BaseTable, BigCalender, CkEditor, CustomUpload, DataTable, DateRangePicker, DnDCalendar, DropDown, DropImage, ReactDateRange, Regex, Spin, Switch, UiLibrary, decryptByEcPay, encryptByEcPay, verifyId, verifyTaxId };