@sunggang/ui-lib 0.3.25 → 0.3.27

package/index.esm2.js

@@ -18224,252 +18224,68 @@ 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"
-    }
+var index$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DropImage: DropImage
+});
+
+var dynamic$1 = {
+    exports: {}
 };
 
-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 _interop_require_default$1 = {};
+
+_interop_require_default$1._ = _interop_require_default$1._interop_require_default = _interop_require_default;
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
 }
 
-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 loadable_sharedRuntime = {};
 
-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 loadableContext_sharedRuntime = {};
 
-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 (exports) {
+"use client";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LoadableContext", {
+    enumerable: true,
+    get: function get() {
+        return LoadableContext;
+    }
+});
+var _interop_require_default = _interop_require_default$1;
+var _react = /*#__PURE__*/ _interop_require_default._(React__default);
+var LoadableContext = _react.default.createContext(null);
+if (process.env.NODE_ENV !== "production") {
+    LoadableContext.displayName = "LoadableContext";
+} 
+}(loadableContext_sharedRuntime));
 
-function _define_property$n(obj, key, value) {
+(function (exports) {
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -18482,7 +18298,7 @@ function _define_property$n(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$m(target) {
+function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -18492,12 +18308,12 @@ function _object_spread$m(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$n(target, key, source[key]);
+            _define_property(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$i(object, enumerableOnly) {
+function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -18510,285 +18326,289 @@ function ownKeys$i(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$i(target, source) {
+function _object_spread_props(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$i(Object(source)).forEach(function(key) {
+        ownKeys(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$i(_object_spread$m({}, 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);
-                })
-            ]
-        })
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function get() {
+        return _default;
+    }
+});
+var _interop_require_default = _interop_require_default$1;
+var _react = /*#__PURE__*/ _interop_require_default._(React__default);
+var _loadablecontextsharedruntime = loadableContext_sharedRuntime;
+function resolve(obj) {
+    return obj && obj.default ? obj.default : obj;
+}
+var ALL_INITIALIZERS = [];
+var READY_INITIALIZERS = [];
+var initialized = false;
+function load(loader) {
+    var promise = loader();
+    var state = {
+        loading: true,
+        loaded: null,
+        error: null
+    };
+    state.promise = promise.then(function(loaded) {
+        state.loading = false;
+        state.loaded = loaded;
+        return loaded;
+    }).catch(function(err) {
+        state.loading = false;
+        state.error = err;
+        throw err;
     });
-};
-
-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);
+    return state;
+}
+function createLoadableComponent(loadFn, options) {
+    var opts = Object.assign({
+        loader: null,
+        loading: null,
+        delay: 200,
+        timeout: null,
+        webpack: null,
+        modules: null
+    }, options);
+    /** @type LoadableSubscription */ var subscription = null;
+    function init() {
+        if (!subscription) {
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            var sub = new LoadableSubscription(loadFn, opts);
+            subscription = {
+                getCurrentValue: sub.getCurrentValue.bind(sub),
+                subscribe: sub.subscribe.bind(sub),
+                retry: sub.retry.bind(sub),
+                promise: sub.promise.bind(sub)
             };
-            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 subscription.promise();
+    }
+    // Server only
+    if (typeof window === "undefined") {
+        ALL_INITIALIZERS.push(init);
+    }
+    // Client only
+    if (!initialized && typeof window !== "undefined") {
+        // require.resolveWeak check is needed for environments that don't have it available like Jest
+        var moduleIds = opts.webpack && typeof commonjsRequire.resolveWeak === "function" ? opts.webpack() : opts.modules;
+        if (moduleIds) {
+            READY_INITIALIZERS.push(function(ids) {
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = moduleIds[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var moduleId = _step.value;
+                        if (ids.includes(moduleId)) {
+                            return init();
+                        }
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+            });
+        }
+    }
+    function useLoadableModule() {
+        init();
+        var context = _react.default.useContext(_loadablecontextsharedruntime.LoadableContext);
+        if (context && Array.isArray(opts.modules)) {
+            opts.modules.forEach(function(moduleName) {
+                context(moduleName);
+            });
+        }
+    }
+    function LoadableComponent(props, ref) {
+        useLoadableModule();
+        var state = _react.default.useSyncExternalStore(subscription.subscribe, subscription.getCurrentValue, subscription.getCurrentValue);
+        _react.default.useImperativeHandle(ref, function() {
+            return {
+                retry: subscription.retry
+            };
+        }, []);
+        return _react.default.useMemo(function() {
+            if (state.loading || state.error) {
+                return /*#__PURE__*/ _react.default.createElement(opts.loading, {
+                    isLoading: state.loading,
+                    pastDelay: state.pastDelay,
+                    timedOut: state.timedOut,
+                    error: state.error,
+                    retry: subscription.retry
+                });
+            } else if (state.loaded) {
+                return /*#__PURE__*/ _react.default.createElement(resolve(state.loaded), props);
+            } else {
+                return null;
+            }
+        }, [
+            props,
+            state
+        ]);
+    }
+    LoadableComponent.preload = function() {
+        return init();
+    };
+    LoadableComponent.displayName = "LoadableComponent";
+    return /*#__PURE__*/ _react.default.forwardRef(LoadableComponent);
+}
+var LoadableSubscription = /*#__PURE__*/ function() {
+    function LoadableSubscription(loadFn, opts) {
+        _class_call_check(this, LoadableSubscription);
+        this._loadFn = loadFn;
+        this._opts = opts;
+        this._callbacks = new Set();
+        this._delay = null;
+        this._timeout = null;
+        this.retry();
+    }
+    _create_class(LoadableSubscription, [
+        {
+            key: "promise",
+            value: function promise() {
+                return this._res.promise;
+            }
+        },
+        {
+            key: "retry",
+            value: function retry() {
+                var _this = this;
+                this._clearTimeouts();
+                this._res = this._loadFn(this._opts.loader);
+                this._state = {
+                    pastDelay: false,
+                    timedOut: false
+                };
+                var _this1 = this, res = _this1._res, opts = _this1._opts;
+                if (res.loading) {
+                    if (typeof opts.delay === "number") {
+                        if (opts.delay === 0) {
+                            this._state.pastDelay = true;
+                        } else {
+                            this._delay = setTimeout(function() {
+                                _this._update({
+                                    pastDelay: true
+                                });
+                            }, opts.delay);
+                        }
+                    }
+                    if (typeof opts.timeout === "number") {
+                        this._timeout = setTimeout(function() {
+                            _this._update({
+                                timedOut: true
+                            });
+                        }, opts.timeout);
+                    }
+                }
+                this._res.promise.then(function() {
+                    _this._update({});
+                    _this._clearTimeouts();
+                }).catch(function(_err) {
+                    _this._update({});
+                    _this._clearTimeouts();
+                });
+                this._update({});
+            }
+        },
+        {
+            key: "_update",
+            value: function _update(partial) {
+                this._state = _object_spread(_object_spread_props(_object_spread({}, this._state), {
+                    error: this._res.error,
+                    loaded: this._res.loaded,
+                    loading: this._res.loading
+                }), partial);
+                this._callbacks.forEach(function(callback) {
+                    return callback();
+                });
+            }
+        },
+        {
+            key: "_clearTimeouts",
+            value: function _clearTimeouts() {
+                clearTimeout(this._delay);
+                clearTimeout(this._timeout);
+            }
+        },
+        {
+            key: "getCurrentValue",
+            value: function getCurrentValue() {
+                return this._state;
+            }
+        },
+        {
+            key: "subscribe",
+            value: function subscribe(callback) {
+                var _this = this;
+                this._callbacks.add(callback);
+                return function() {
+                    _this._callbacks.delete(callback);
+                };
+            }
+        }
     ]);
-    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
-            })
-        ]
+    return LoadableSubscription;
+}();
+function Loadable(opts) {
+    return createLoadableComponent(load, opts);
+}
+function flushInitializers(initializers, ids) {
+    var promises = [];
+    while(initializers.length){
+        var init = initializers.pop();
+        promises.push(init(ids));
+    }
+    return Promise.all(promises).then(function() {
+        if (initializers.length) {
+            return flushInitializers(initializers, ids);
+        }
     });
-};
-
-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
-            })
-        ]
+}
+Loadable.preloadAll = function() {
+    return new Promise(function(resolveInitializers, reject) {
+        flushInitializers(ALL_INITIALIZERS).then(resolveInitializers, reject);
     });
-});
-
-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"
-            })
-        ]
+};
+Loadable.preloadReady = function(ids) {
+    if (ids === void 0) ids = [];
+    return new Promise(function(resolvePreload) {
+        var res = function() {
+            initialized = true;
+            return resolvePreload();
+        };
+        // We always will resolve, errors should be handled within loading UIs.
+        flushInitializers(READY_INITIALIZERS, ids).then(res, res);
     });
 };
-
-function _array_like_to_array$m(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$j(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _array_without_holes$7(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$m(arr);
+if (typeof window !== "undefined") {
+    window.__NEXT_PRELOADREADY = Loadable.preloadReady;
 }
-function _define_property$m(obj, key, value) {
+var _default = Loadable; 
+}(loadable_sharedRuntime));
+
+(function (module, exports) {
+function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -18801,40 +18621,14 @@ function _define_property$m(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array$7(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _iterable_to_array_limit$j(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;
-        }
+function _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
     }
-    return _arr;
-}
-function _non_iterable_rest$j() {
-    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$7() {
-    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$l(target) {
+function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -18844,12 +18638,12 @@ function _object_spread$l(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$m(target, key, source[key]);
+            _define_property(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$h(object, enumerableOnly) {
+function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -18862,116 +18656,888 @@ function ownKeys$h(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$h(target, source) {
+function _object_spread_props(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$h(Object(source)).forEach(function(key) {
+        ownKeys(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     return target;
 }
-function _sliced_to_array$j(arr, i) {
-    return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$m(arr, i) || _non_iterable_rest$j();
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
 }
-function _to_consumable_array$7(arr) {
-    return _array_without_holes$7(arr) || _iterable_to_array$7(arr) || _unsupported_iterable_to_array$m(arr) || _non_iterable_spread$7();
+_export(exports, {
+    noSSR: function noSSR1() {
+        return noSSR;
+    },
+    default: function _default() {
+        return dynamic;
+    }
+});
+var _interop_require_default = _interop_require_default$1;
+var _react = /*#__PURE__*/ _interop_require_default._(React__default);
+var _loadablesharedruntime = /*#__PURE__*/ _interop_require_default._(loadable_sharedRuntime);
+var isServerSide = typeof window === "undefined";
+// Normalize loader to return the module as form { default: Component } for `React.lazy`.
+// Also for backward compatible since next/dynamic allows to resolve a component directly with loader
+// Client component reference proxy need to be converted to a module.
+function convertModule(mod) {
+    return {
+        default: (mod == null ? void 0 : mod.default) || mod
+    };
 }
-function _unsupported_iterable_to_array$m(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$m(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$m(o, minLen);
+function noSSR(LoadableInitializer, loadableOptions) {
+    // Removing webpack and modules means react-loadable won't try preloading
+    delete loadableOptions.webpack;
+    delete loadableOptions.modules;
+    // This check is necessary to prevent react-loadable from initializing on the server
+    if (!isServerSide) {
+        return LoadableInitializer(loadableOptions);
+    }
+    var Loading = loadableOptions.loading;
+    // This will only be rendered on the server side
+    return function() {
+        return /*#__PURE__*/ _react.default.createElement(Loading, {
+            error: null,
+            isLoading: true,
+            pastDelay: false,
+            timedOut: false
+        });
+    };
 }
-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$j(useState(menuIsOpen), 2), open = _useState[0], setOpen = _useState[1];
-    var _useState1 = _sliced_to_array$j(useState(options), 2), list = _useState1[0], setList = _useState1[1];
-    var _useState2 = _sliced_to_array$j(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$h(_object_spread$l({}, 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$7(value).concat([
-                    selected
-                ]));
+function dynamic(dynamicOptions, options) {
+    var loadableFn = _loadablesharedruntime.default;
+    var loadableOptions = {
+        // A loading component is not required, so we default it
+        loading: function(param) {
+            var error = param.error, isLoading = param.isLoading, pastDelay = param.pastDelay;
+            if (!pastDelay) return null;
+            if (process.env.NODE_ENV !== "production") {
+                if (isLoading) {
+                    return null;
+                }
+                if (error) {
+                    return /*#__PURE__*/ _react.default.createElement("p", null, error.message, /*#__PURE__*/ _react.default.createElement("br", null), error.stack);
+                }
             }
-        };
-        if (selected !== value) {
-            update();
+            return null;
         }
-    }, [
-        closeDropDown,
-        isMultiple,
+    };
+    // Support for direct import(), eg: dynamic(import('../hello-world'))
+    // Note that this is only kept for the edge case where someone is passing in a promise as first argument
+    // The react-loadable babel plugin will turn dynamic(import('../hello-world')) into dynamic(() => import('../hello-world'))
+    // To make sure we don't execute the import without rendering first
+    if (_instanceof(dynamicOptions, Promise)) {
+        loadableOptions.loader = function() {
+            return dynamicOptions;
+        };
+    // Support for having import as a function, eg: dynamic(() => import('../hello-world'))
+    } else if (typeof dynamicOptions === "function") {
+        loadableOptions.loader = dynamicOptions;
+    // Support for having first argument being options, eg: dynamic({loader: import('../hello-world')})
+    } else if (typeof dynamicOptions === "object") {
+        loadableOptions = _object_spread({}, loadableOptions, dynamicOptions);
+    }
+    // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
+    loadableOptions = _object_spread({}, loadableOptions, options);
+    var loaderFn = loadableOptions.loader;
+    var loader = function() {
+        return loaderFn != null ? loaderFn().then(convertModule) : Promise.resolve(convertModule(function() {
+            return null;
+        }));
+    };
+    // coming from build/babel/plugins/react-loadable-plugin.js
+    if (loadableOptions.loadableGenerated) {
+        loadableOptions = _object_spread({}, loadableOptions, loadableOptions.loadableGenerated);
+        delete loadableOptions.loadableGenerated;
+    }
+    // support for disabling server side rendering, eg: dynamic(() => import('../hello-world'), {ssr: false}).
+    if (typeof loadableOptions.ssr === "boolean" && !loadableOptions.ssr) {
+        delete loadableOptions.webpack;
+        delete loadableOptions.modules;
+        return noSSR(loadableFn, loadableOptions);
+    }
+    return loadableFn(_object_spread_props(_object_spread({}, loadableOptions), {
+        loader: loader
+    }));
+}
+if ((typeof exports.default === "function" || typeof exports.default === "object" && exports.default !== null) && typeof exports.default.__esModule === "undefined") {
+    Object.defineProperty(exports.default, "__esModule", {
+        value: true
+    });
+    Object.assign(exports.default, exports);
+    module.exports = exports.default;
+} 
+}(dynamic$1, dynamic$1.exports));
+
+var dynamic = dynamic$1.exports;
+
+var CSRDropImage = dynamic(function() {
+    return Promise.resolve().then(function () { return index$2; }).then(function(mod) {
+        return mod.DropImage;
+    });
+}, {
+    ssr: false
+});
+
+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$n(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$m(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$n(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$i(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$i(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$i(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$i(_object_spread$m({}, 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$m(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$j(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes$7(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$m(arr);
+}
+function _define_property$m(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$7(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit$j(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$j() {
+    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$7() {
+    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$l(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$m(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$h(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$h(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$h(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array$j(arr, i) {
+    return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$m(arr, i) || _non_iterable_rest$j();
+}
+function _to_consumable_array$7(arr) {
+    return _array_without_holes$7(arr) || _iterable_to_array$7(arr) || _unsupported_iterable_to_array$m(arr) || _non_iterable_spread$7();
+}
+function _unsupported_iterable_to_array$m(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$m(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$m(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$j(useState(menuIsOpen), 2), open = _useState[0], setOpen = _useState[1];
+    var _useState1 = _sliced_to_array$j(useState(options), 2), list = _useState1[0], setList = _useState1[1];
+    var _useState2 = _sliced_to_array$j(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$h(_object_spread$l({}, 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$7(value).concat([
+                    selected
+                ]));
+            }
+        };
+        if (selected !== value) {
+            update();
+        }
+    }, [
+        closeDropDown,
+        isMultiple,
         onChange,
         value
     ]);
@@ -22761,364 +23327,12 @@ function _object_spread$j(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$k(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$f(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$f(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$f(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-var FormProvider = function(param) {
-    var children = param.children, onSubmit = param.onSubmit, onError = param.onError, _param_defaultValues = param.defaultValues, defaultValues = _param_defaultValues === void 0 ? {} : _param_defaultValues;
-    var methods = useForm({
-        defaultValues: defaultValues
-    });
-    return /*#__PURE__*/ jsx(FormProvider$1, _object_spread_props$f(_object_spread$j({}, methods), {
-        children: /*#__PURE__*/ jsx("form", {
-            onSubmit: methods.handleSubmit(onSubmit, onError),
-            children: children
-        })
-    }));
-};
-
-function _define_property$j(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$i(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$j(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$e(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$e(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$e(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _object_without_properties$a(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose$a(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose$a(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-var Switch = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "large" : _param_size, color = _param.color, props = _object_without_properties$a(_param, [
-        "size",
-        "color"
-    ]);
-    var control = useForm().control;
-    var name = props.name, className = props.className;
-    var bgColor = color === "blue" ? "data-[state=checked]:bg-blue-500" : color === "red" ? "data-[state=checked]:bg-red-500" : color === "green" ? "data-[state=checked]:bg-green-500" : color === "yellow" ? "data-[state=checked]:bg-yellow-500" : "data-[state=checked]:bg-blue-500";
-    var sizeClass = {
-        small: {
-            root: "h-4 w-7",
-            thumb: "h-3 w-3 data-[state=checked]:translate-x-3"
-        },
-        medium: {
-            root: "h-5 w-9",
-            thumb: "h-4 w-4 data-[state=checked]:translate-x-4"
-        },
-        large: {
-            root: "h-6 w-11",
-            thumb: "h-5 w-5 data-[state=checked]:translate-x-5"
-        }
-    };
-    return /*#__PURE__*/ jsx("div", {
-        className: [
-            "h-24 w-full",
-            className
-        ].join(" "),
-        children: /*#__PURE__*/ jsx(Controller$2, {
-            name: name || "",
-            control: control,
-            render: function(param) {
-                param.field;
-                return /*#__PURE__*/ jsx(SwitchPrimitives.Root, _object_spread_props$e(_object_spread$i({
-                    className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", bgColor, sizeClass[size].root, "data-[state=unchecked]:bg-input")
-                }, props), {
-                    ref: ref,
-                    children: /*#__PURE__*/ jsx(SwitchPrimitives.Thumb, {
-                        className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0", sizeClass[size].thumb)
-                    })
-                }));
-            }
-        })
-    });
-});
-
-function _define_property$i(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$h(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$i(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$d(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$d(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$d(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _object_without_properties$9(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose$9(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose$9(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-var buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
-    variants: {
-        variant: {
-            custom: "bg-inherit",
-            default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-            destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-            secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline"
-        },
-        size: {
-            default: "h-9 px-4 py-2",
-            sm: "h-8 rounded-md px-3 text-xs",
-            lg: "h-10 rounded-md px-8",
-            icon: "h-9 w-9"
-        }
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default"
-    }
-});
-var Button = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var className = _param.className, variant = _param.variant, size = _param.size, _param_asChild = _param.asChild, asChild = _param_asChild === void 0 ? false : _param_asChild, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, customClassName = _param.customClassName, children = _param.children, props = _object_without_properties$9(_param, [
-        "className",
-        "variant",
-        "size",
-        "asChild",
-        "isLoading",
-        "customClassName",
-        "children"
-    ]);
-    var Comp = asChild ? Slot : "button";
-    return /*#__PURE__*/ jsx(Comp, _object_spread_props$d(_object_spread$h({
-        className: cn(variant !== "custom" ? buttonVariants({
-            variant: variant,
-            size: size,
-            className: className
-        }) : "", isLoading ? "pointer-events-none opacity-70" : "pointer-events-auto opacity-100"),
-        ref: ref
-    }, props), {
-        disabled: isLoading || props.disabled,
-        children: variant === "custom" ? /*#__PURE__*/ jsxs("div", {
-            className: [
-                "flex items-center gap-1",
-                customClassName,
-                props.disabled ? "pointer-events-none opacity-70" : ""
-            ].join(" "),
-            children: [
-                isLoading && /*#__PURE__*/ jsx("div", {
-                    className: "w-4 h-4 rounded-full border-2 border-solid border-white border-t-[#939393] animate-spin mr-2"
-                }),
-                children
-            ]
-        }) : /*#__PURE__*/ jsxs(Fragment$1, {
-            children: [
-                isLoading && /*#__PURE__*/ jsx("div", {
-                    className: "w-4 h-4 rounded-full border-2 border-solid border-white border-t-[#939393] animate-spin mr-2"
-                }),
-                children
-            ]
-        })
-    }));
-});
-
-function _define_property$h(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 _extends$3() {
-    _extends$3 = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends$3.apply(this, arguments);
-}
-function _object_destructuring_empty$2(o) {
-    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
-    return o;
-}
-function _object_spread$g(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$h(target, key, source[key]);
+            _define_property$k(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$c(object, enumerableOnly) {
+function ownKeys$f(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -23131,106 +23345,31 @@ function ownKeys$c(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$c(target, source) {
+function _object_spread_props$f(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$c(Object(source)).forEach(function(key) {
+        ownKeys$f(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     return target;
 }
-function _object_without_properties$8(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose$8(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose$8(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-function Calendar$2(_param) {
-    var className = _param.className, classNames = _param.classNames, _param_showOutsideDays = _param.showOutsideDays, showOutsideDays = _param_showOutsideDays === void 0 ? true : _param_showOutsideDays, props = _object_without_properties$8(_param, [
-        "className",
-        "classNames",
-        "showOutsideDays"
-    ]);
-    return /*#__PURE__*/ jsx(DayPicker, _object_spread_props$c(_object_spread$g({
-        showOutsideDays: showOutsideDays,
-        className: cn("p-3", className),
-        classNames: _object_spread$g({
-            months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-            month: "space-y-4",
-            caption: "flex justify-center pt-1 relative items-center",
-            caption_label: "text-sm font-medium",
-            nav: "space-x-1 flex items-center",
-            nav_button: cn(buttonVariants({
-                variant: "outline"
-            }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
-            nav_button_previous: "absolute left-1",
-            nav_button_next: "absolute right-1",
-            table: "w-full border-collapse space-y-1",
-            head_row: "flex",
-            head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-            row: "flex w-full mt-2",
-            cell: cn("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"),
-            day: cn(buttonVariants({
-                variant: "ghost"
-            }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"),
-            day_range_start: "day-range-start",
-            day_range_end: "day-range-end",
-            day_selected: "bg-[#000] text-[#fff] hover:bg-[#000] hover:text-[#fff] focus:bg-[#000] focus:text-[#fff]",
-            day_today: "bg-accent text-accent-foreground",
-            day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-            day_disabled: "text-muted-foreground opacity-50",
-            day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-            day_hidden: "invisible"
-        }, classNames),
-        components: {
-            IconLeft: function(_param) {
-                _extends$3({}, _object_destructuring_empty$2(_param));
-                return /*#__PURE__*/ jsx(Icon, {
-                    icon: "heroicons-solid:arrow-left",
-                    width: "1rem",
-                    height: "1rem"
-                });
-            },
-            IconRight: function(_param) {
-                _extends$3({}, _object_destructuring_empty$2(_param));
-                return /*#__PURE__*/ jsx(Icon, {
-                    icon: "heroicons-solid:arrow-right",
-                    width: "1rem",
-                    height: "1rem"
-                });
-            }
-        }
-    }, props), {
-        locale: zhTW
+var FormProvider = function(param) {
+    var children = param.children, onSubmit = param.onSubmit, onError = param.onError, _param_defaultValues = param.defaultValues, defaultValues = _param_defaultValues === void 0 ? {} : _param_defaultValues;
+    var methods = useForm({
+        defaultValues: defaultValues
+    });
+    return /*#__PURE__*/ jsx(FormProvider$1, _object_spread_props$f(_object_spread$j({}, methods), {
+        children: /*#__PURE__*/ jsx("form", {
+            onSubmit: methods.handleSubmit(onSubmit, onError),
+            children: children
+        })
     }));
-}
-Calendar$2.displayName = "Calendar";
+};
 
-function _define_property$g(obj, key, value) {
+function _define_property$j(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -23243,7 +23382,7 @@ function _define_property$g(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$f(target) {
+function _object_spread$i(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -23253,413 +23392,108 @@ function _object_spread$f(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$g(target, key, source[key]);
+            _define_property$j(target, key, source[key]);
         });
     }
     return target;
 }
-function _object_without_properties$7(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose$7(source, excluded);
-    var key, i;
+function ownKeys$e(object, enumerableOnly) {
+    var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
         }
+        keys.push.apply(keys, symbols);
     }
-    return target;
+    return keys;
 }
-function _object_without_properties_loose$7(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
+function _object_spread_props$e(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$e(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
     }
     return target;
 }
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var className = _param.className, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, _param_sideOffset = _param.sideOffset, sideOffset = _param_sideOffset === void 0 ? 4 : _param_sideOffset, props = _object_without_properties$7(_param, [
-        "className",
-        "align",
-        "sideOffset"
-    ]);
-    return /*#__PURE__*/ jsx(PopoverPrimitive.Portal, {
-        children: /*#__PURE__*/ jsx(PopoverPrimitive.Content, _object_spread$f({
-            ref: ref,
-            align: align,
-            sideOffset: sideOffset,
-            className: cn("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
-        }, props))
-    });
-});
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-function DateRangePicker(param) {
-    var className = param.className, inputClassName = param.inputClassName, disable = param.disable, _param_isShowCleanBtn = param.isShowCleanBtn, isShowCleanBtn = _param_isShowCleanBtn === void 0 ? true : _param_isShowCleanBtn, onChange = param.onChange, dates = param.dates, setDates = param.setDates;
-    var handleDateChange = function(newDate) {
-        if (newDate) {
-            setDates(newDate);
-            if (onChange) onChange(newDate);
-        }
-    };
-    return /*#__PURE__*/ jsxs("div", {
-        className: "flex gap-2 items-center",
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: cn("grid gap-2", className, disable ? "pointer-events-none opacity-55" : "pointer-events-auto opacity-100"),
-                children: /*#__PURE__*/ jsxs(Popover, {
-                    children: [
-                        /*#__PURE__*/ jsx(PopoverTrigger, {
-                            asChild: true,
-                            children: /*#__PURE__*/ jsxs(Button, {
-                                id: "date",
-                                variant: "outline",
-                                className: cn("w-[300px] justify-start text-left font-normal", !dates && "text-muted-foreground", inputClassName),
-                                children: [
-                                    /*#__PURE__*/ jsx(Calendar$3, {
-                                        className: "mr-2 h-4 w-4"
-                                    }),
-                                    (dates === null || dates === void 0 ? void 0 : dates.from) ? dates.to ? /*#__PURE__*/ jsxs(Fragment$1, {
-                                        children: [
-                                            format(dates.from, "yyyy-MM-dd"),
-                                            " -",
-                                            " ",
-                                            format(dates.to, "yyyy-MM-dd")
-                                        ]
-                                    }) : format(dates.from, "yyyy-MM-dd") : /*#__PURE__*/ jsx("span", {
-                                        children: "請選擇日期"
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(PopoverContent, {
-                            className: "w-auto p-0",
-                            align: "start",
-                            children: /*#__PURE__*/ jsx(Calendar$2, {
-                                initialFocus: true,
-                                mode: "range",
-                                defaultMonth: dates === null || dates === void 0 ? void 0 : dates.from,
-                                selected: dates,
-                                onSelect: handleDateChange,
-                                numberOfMonths: 2
-                            })
-                        })
-                    ]
-                })
-            }),
-            isShowCleanBtn && /*#__PURE__*/ jsx(Button, {
-                variant: "ghost",
-                className: cn("justify-start text-left font-normal"),
-                onClick: function() {
-                    return setDates(undefined);
-                },
-                children: "清除日期"
-            })
-        ]
-    });
-}
-
-function _array_like_to_array$i(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$f(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$f(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$f() {
-    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 _sliced_to_array$f(arr, i) {
-    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$f();
-}
-function _unsupported_iterable_to_array$i(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$i(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$i(o, minLen);
-}
-var SingleDatePicker = function(param) {
-    var disable = param.disable, onChange = param.onChange;
-    var _useState = _sliced_to_array$f(useState(), 2), date = _useState[0], setDate = _useState[1];
-    var handleDate = function(newDate) {
-        if (newDate) {
-            setDate(newDate);
-            if (onChange) onChange(newDate);
-        }
-    };
-    return /*#__PURE__*/ jsx("div", {
-        className: cn(disable ? "pointer-events-none opacity-55" : "pointer-events-auto opacity-100"),
-        children: /*#__PURE__*/ jsxs(Popover, {
-            children: [
-                /*#__PURE__*/ jsx(PopoverTrigger, {
-                    asChild: true,
-                    children: /*#__PURE__*/ jsxs(Button, {
-                        variant: "outline",
-                        className: cn("w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground"),
-                        children: [
-                            /*#__PURE__*/ jsx(Calendar$3, {
-                                className: "mr-2 h-4 w-4"
-                            }),
-                            date ? format(date, "yyyy-MM-dd") : /*#__PURE__*/ jsx("span", {
-                                children: "請選擇日期"
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ jsx(PopoverContent, {
-                    className: "w-auto p-0",
-                    children: /*#__PURE__*/ jsx(Calendar$2, {
-                        mode: "single",
-                        selected: date,
-                        onSelect: handleDate,
-                        initialFocus: true
-                    })
-                })
-            ]
-        })
-    });
-};
-
-function _array_like_to_array$h(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$e(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$e(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$e() {
-    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 _sliced_to_array$e(arr, i) {
-    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$e();
-}
-function _unsupported_iterable_to_array$h(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$h(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$h(o, minLen);
-}
-var ReactDateRange = function(param) {
-    var className = param.className, item = param.item, onChange = param.onChange, dates = param.dates, date = param.date;
-    var _useState = _sliced_to_array$e(useState("zhTW"), 1), locale = _useState[0];
-    var _useState1 = _sliced_to_array$e(useState(""), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
-    var _useState2 = _sliced_to_array$e(useState({
-        startDate: new Date(),
-        endDate: addDays(new Date(), 7),
-        key: "selection"
-    }), 2), range = _useState2[0], setRange = _useState2[1];
-    var _useState3 = _sliced_to_array$e(useState(false), 2), open = _useState3[0], setOpen = _useState3[1];
-    var refOne = useRef(null);
-    var hideOnEscape = function(e) {
-        if (e.key === "Escape") {
-            setOpen(false);
-        }
-    };
-    var hideOnClickOutside = function(e) {
-        if (refOne.current && !refOne.current.contains(e.target)) {
-            setOpen(false);
-        }
-    };
-    useEffect(function() {
-        setCalendarData(date);
-    }, [
-        date
-    ]);
-    useEffect(function() {
-        if (!dates) return;
-        setRange(dates);
-    }, [
-        dates
-    ]);
-    useEffect(function() {
-        document.addEventListener("keydown", hideOnEscape, true);
-        document.addEventListener("click", hideOnClickOutside, true);
-        return function() {
-            document.removeEventListener("keydown", hideOnEscape, true);
-            document.removeEventListener("click", hideOnClickOutside, true);
-        };
-    }, []);
-    var formatDates = function() {
-        if (!range) return;
-        var startDate = range.startDate, endDate = range.endDate;
-        return "".concat(format$1(startDate, "yyyy-MM-dd"), " ~ ").concat(format$1(endDate, "yyyy-MM-dd"));
-    };
-    var formatDate = calendarData ? format$1(calendarData, (item === null || item === void 0 ? void 0 : item.dateDisplayFormat) || "yyyy-MM-dd") : "";
-    return /*#__PURE__*/ jsxs("div", {
-        className: [
-            className,
-            "relative"
-        ].join(" "),
-        children: [
-            (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsx("div", {
-                className: "text-gray-700 font-medium mb-2 h-6",
-                children: item === null || item === void 0 ? void 0 : item.label
-            }),
-            /*#__PURE__*/ jsx("input", {
-                className: "border-solid border rounded p-2 h-10 w-full timePicker border-gray-300",
-                name: item === null || item === void 0 ? void 0 : item.name,
-                onClick: function() {
-                    return setOpen(function(openState) {
-                        return !openState;
-                    });
-                },
-                placeholder: item === null || item === void 0 ? void 0 : item.placeholder,
-                value: (item === null || item === void 0 ? void 0 : item.type) === "date" ? formatDate : formatDates(),
-                autoComplete: "off"
-            }),
-            open && /*#__PURE__*/ jsxs("div", {
-                className: "absolute top-[72px] left-0 z-50 shadow-md",
-                ref: refOne,
-                children: [
-                    open && (item === null || item === void 0 ? void 0 : item.type) === "date" && /*#__PURE__*/ jsx(Calendar$4, {
-                        data: calendarData,
-                        locale: locales[locale],
-                        dateDisplayFormat: item === null || item === void 0 ? void 0 : item.dateDisplayFormat,
-                        onChange: function(value) {
-                            setCalendarData(value);
-                            if (onChange) onChange(value);
-                            setOpen(false);
-                        }
-                    }),
-                    open && (item === null || item === void 0 ? void 0 : item.type) === "dateRange" && /*#__PURE__*/ jsx(DateRange, {
-                        editableDateInputs: true,
-                        onChange: function(value) {
-                            setRange(value.selection);
-                            if (onChange) onChange(value.selection);
-                        },
-                        ranges: [
-                            range
-                        ],
-                        locale: locales[locale],
-                        dateDisplayFormat: "yyyy.MM.dd"
-                    })
-                ]
-            })
-        ]
-    });
-};
-
-var dynamic$1 = {
-    exports: {}
-};
-
-var _interop_require_default$1 = {};
-
-_interop_require_default$1._ = _interop_require_default$1._interop_require_default = _interop_require_default;
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-
-var loadable_sharedRuntime = {};
-
-var loadableContext_sharedRuntime = {};
-
-(function (exports) {
-"use client";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "LoadableContext", {
-    enumerable: true,
-    get: function get() {
-        return LoadableContext;
-    }
-});
-var _interop_require_default = _interop_require_default$1;
-var _react = /*#__PURE__*/ _interop_require_default._(React__default);
-var LoadableContext = _react.default.createContext(null);
-if (process.env.NODE_ENV !== "production") {
-    LoadableContext.displayName = "LoadableContext";
-} 
-}(loadableContext_sharedRuntime));
-
-(function (exports) {
-function _class_call_check(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-        throw new TypeError("Cannot call a class as a function");
+function _object_without_properties$a(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$a(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
     }
+    return target;
 }
-function _defineProperties(target, props) {
-    for(var i = 0; i < props.length; i++){
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
+function _object_without_properties_loose$a(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
     }
+    return target;
 }
-function _create_class(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-}
-function _define_property(obj, key, value) {
+var Switch = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var _param_size = _param.size, size = _param_size === void 0 ? "large" : _param_size, color = _param.color, props = _object_without_properties$a(_param, [
+        "size",
+        "color"
+    ]);
+    var control = useForm().control;
+    var name = props.name, className = props.className;
+    var bgColor = color === "blue" ? "data-[state=checked]:bg-blue-500" : color === "red" ? "data-[state=checked]:bg-red-500" : color === "green" ? "data-[state=checked]:bg-green-500" : color === "yellow" ? "data-[state=checked]:bg-yellow-500" : "data-[state=checked]:bg-blue-500";
+    var sizeClass = {
+        small: {
+            root: "h-4 w-7",
+            thumb: "h-3 w-3 data-[state=checked]:translate-x-3"
+        },
+        medium: {
+            root: "h-5 w-9",
+            thumb: "h-4 w-4 data-[state=checked]:translate-x-4"
+        },
+        large: {
+            root: "h-6 w-11",
+            thumb: "h-5 w-5 data-[state=checked]:translate-x-5"
+        }
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: [
+            "h-24 w-full",
+            className
+        ].join(" "),
+        children: /*#__PURE__*/ jsx(Controller$2, {
+            name: name || "",
+            control: control,
+            render: function(param) {
+                param.field;
+                return /*#__PURE__*/ jsx(SwitchPrimitives.Root, _object_spread_props$e(_object_spread$i({
+                    className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", bgColor, sizeClass[size].root, "data-[state=unchecked]:bg-input")
+                }, props), {
+                    ref: ref,
+                    children: /*#__PURE__*/ jsx(SwitchPrimitives.Thumb, {
+                        className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0", sizeClass[size].thumb)
+                    })
+                }));
+            }
+        })
+    });
+});
+
+function _define_property$i(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -23672,7 +23506,7 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _object_spread(target) {
+function _object_spread$h(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -23682,12 +23516,12 @@ function _object_spread(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
+            _define_property$i(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys(object, enumerableOnly) {
+function ownKeys$d(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -23700,289 +23534,269 @@ function ownKeys(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props(target, source) {
+function _object_spread_props$d(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys(Object(source)).forEach(function(key) {
+        ownKeys$d(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     return target;
 }
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function get() {
-        return _default;
+function _object_without_properties$9(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$9(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
     }
-});
-var _interop_require_default = _interop_require_default$1;
-var _react = /*#__PURE__*/ _interop_require_default._(React__default);
-var _loadablecontextsharedruntime = loadableContext_sharedRuntime;
-function resolve(obj) {
-    return obj && obj.default ? obj.default : obj;
+    return target;
 }
-var ALL_INITIALIZERS = [];
-var READY_INITIALIZERS = [];
-var initialized = false;
-function load(loader) {
-    var promise = loader();
-    var state = {
-        loading: true,
-        loaded: null,
-        error: null
-    };
-    state.promise = promise.then(function(loaded) {
-        state.loading = false;
-        state.loaded = loaded;
-        return loaded;
-    }).catch(function(err) {
-        state.loading = false;
-        state.error = err;
-        throw err;
-    });
-    return state;
+function _object_without_properties_loose$9(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
 }
-function createLoadableComponent(loadFn, options) {
-    var opts = Object.assign({
-        loader: null,
-        loading: null,
-        delay: 200,
-        timeout: null,
-        webpack: null,
-        modules: null
-    }, options);
-    /** @type LoadableSubscription */ var subscription = null;
-    function init() {
-        if (!subscription) {
-            // eslint-disable-next-line @typescript-eslint/no-use-before-define
-            var sub = new LoadableSubscription(loadFn, opts);
-            subscription = {
-                getCurrentValue: sub.getCurrentValue.bind(sub),
-                subscribe: sub.subscribe.bind(sub),
-                retry: sub.retry.bind(sub),
-                promise: sub.promise.bind(sub)
-            };
+var buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
+    variants: {
+        variant: {
+            custom: "bg-inherit",
+            default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline"
+        },
+        size: {
+            default: "h-9 px-4 py-2",
+            sm: "h-8 rounded-md px-3 text-xs",
+            lg: "h-10 rounded-md px-8",
+            icon: "h-9 w-9"
         }
-        return subscription.promise();
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default"
     }
-    // Server only
-    if (typeof window === "undefined") {
-        ALL_INITIALIZERS.push(init);
+});
+var Button = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, variant = _param.variant, size = _param.size, _param_asChild = _param.asChild, asChild = _param_asChild === void 0 ? false : _param_asChild, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, customClassName = _param.customClassName, children = _param.children, props = _object_without_properties$9(_param, [
+        "className",
+        "variant",
+        "size",
+        "asChild",
+        "isLoading",
+        "customClassName",
+        "children"
+    ]);
+    var Comp = asChild ? Slot : "button";
+    return /*#__PURE__*/ jsx(Comp, _object_spread_props$d(_object_spread$h({
+        className: cn(variant !== "custom" ? buttonVariants({
+            variant: variant,
+            size: size,
+            className: className
+        }) : "", isLoading ? "pointer-events-none opacity-70" : "pointer-events-auto opacity-100"),
+        ref: ref
+    }, props), {
+        disabled: isLoading || props.disabled,
+        children: variant === "custom" ? /*#__PURE__*/ jsxs("div", {
+            className: [
+                "flex items-center gap-1",
+                customClassName,
+                props.disabled ? "pointer-events-none opacity-70" : ""
+            ].join(" "),
+            children: [
+                isLoading && /*#__PURE__*/ jsx("div", {
+                    className: "w-4 h-4 rounded-full border-2 border-solid border-white border-t-[#939393] animate-spin mr-2"
+                }),
+                children
+            ]
+        }) : /*#__PURE__*/ jsxs(Fragment$1, {
+            children: [
+                isLoading && /*#__PURE__*/ jsx("div", {
+                    className: "w-4 h-4 rounded-full border-2 border-solid border-white border-t-[#939393] animate-spin mr-2"
+                }),
+                children
+            ]
+        })
+    }));
+});
+
+function _define_property$h(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
     }
-    // Client only
-    if (!initialized && typeof window !== "undefined") {
-        // require.resolveWeak check is needed for environments that don't have it available like Jest
-        var moduleIds = opts.webpack && typeof commonjsRequire.resolveWeak === "function" ? opts.webpack() : opts.modules;
-        if (moduleIds) {
-            READY_INITIALIZERS.push(function(ids) {
-                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-                try {
-                    for(var _iterator = moduleIds[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                        var moduleId = _step.value;
-                        if (ids.includes(moduleId)) {
-                            return init();
-                        }
-                    }
-                } catch (err) {
-                    _didIteratorError = true;
-                    _iteratorError = err;
-                } finally{
-                    try {
-                        if (!_iteratorNormalCompletion && _iterator.return != null) {
-                            _iterator.return();
-                        }
-                    } finally{
-                        if (_didIteratorError) {
-                            throw _iteratorError;
-                        }
-                    }
+    return obj;
+}
+function _extends$3() {
+    _extends$3 = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
                 }
-            });
+            }
+        }
+        return target;
+    };
+    return _extends$3.apply(this, arguments);
+}
+function _object_destructuring_empty$2(o) {
+    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
+    return o;
+}
+function _object_spread$g(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$h(target, key, source[key]);
+        });
     }
-    function useLoadableModule() {
-        init();
-        var context = _react.default.useContext(_loadablecontextsharedruntime.LoadableContext);
-        if (context && Array.isArray(opts.modules)) {
-            opts.modules.forEach(function(moduleName) {
-                context(moduleName);
+    return target;
+}
+function ownKeys$c(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);
     }
-    function LoadableComponent(props, ref) {
-        useLoadableModule();
-        var state = _react.default.useSyncExternalStore(subscription.subscribe, subscription.getCurrentValue, subscription.getCurrentValue);
-        _react.default.useImperativeHandle(ref, function() {
-            return {
-                retry: subscription.retry
-            };
-        }, []);
-        return _react.default.useMemo(function() {
-            if (state.loading || state.error) {
-                return /*#__PURE__*/ _react.default.createElement(opts.loading, {
-                    isLoading: state.loading,
-                    pastDelay: state.pastDelay,
-                    timedOut: state.timedOut,
-                    error: state.error,
-                    retry: subscription.retry
-                });
-            } else if (state.loaded) {
-                return /*#__PURE__*/ _react.default.createElement(resolve(state.loaded), props);
-            } else {
-                return null;
-            }
-        }, [
-            props,
-            state
-        ]);
+    return keys;
+}
+function _object_spread_props$c(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$c(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
     }
-    LoadableComponent.preload = function() {
-        return init();
-    };
-    LoadableComponent.displayName = "LoadableComponent";
-    return /*#__PURE__*/ _react.default.forwardRef(LoadableComponent);
+    return target;
 }
-var LoadableSubscription = /*#__PURE__*/ function() {
-    function LoadableSubscription(loadFn, opts) {
-        _class_call_check(this, LoadableSubscription);
-        this._loadFn = loadFn;
-        this._opts = opts;
-        this._callbacks = new Set();
-        this._delay = null;
-        this._timeout = null;
-        this.retry();
+function _object_without_properties$8(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$8(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
     }
-    _create_class(LoadableSubscription, [
-        {
-            key: "promise",
-            value: function promise() {
-                return this._res.promise;
-            }
-        },
-        {
-            key: "retry",
-            value: function retry() {
-                var _this = this;
-                this._clearTimeouts();
-                this._res = this._loadFn(this._opts.loader);
-                this._state = {
-                    pastDelay: false,
-                    timedOut: false
-                };
-                var _this1 = this, res = _this1._res, opts = _this1._opts;
-                if (res.loading) {
-                    if (typeof opts.delay === "number") {
-                        if (opts.delay === 0) {
-                            this._state.pastDelay = true;
-                        } else {
-                            this._delay = setTimeout(function() {
-                                _this._update({
-                                    pastDelay: true
-                                });
-                            }, opts.delay);
-                        }
-                    }
-                    if (typeof opts.timeout === "number") {
-                        this._timeout = setTimeout(function() {
-                            _this._update({
-                                timedOut: true
-                            });
-                        }, opts.timeout);
-                    }
-                }
-                this._res.promise.then(function() {
-                    _this._update({});
-                    _this._clearTimeouts();
-                }).catch(function(_err) {
-                    _this._update({});
-                    _this._clearTimeouts();
-                });
-                this._update({});
-            }
-        },
-        {
-            key: "_update",
-            value: function _update(partial) {
-                this._state = _object_spread(_object_spread_props(_object_spread({}, this._state), {
-                    error: this._res.error,
-                    loaded: this._res.loaded,
-                    loading: this._res.loading
-                }), partial);
-                this._callbacks.forEach(function(callback) {
-                    return callback();
-                });
-            }
-        },
-        {
-            key: "_clearTimeouts",
-            value: function _clearTimeouts() {
-                clearTimeout(this._delay);
-                clearTimeout(this._timeout);
-            }
-        },
-        {
-            key: "getCurrentValue",
-            value: function getCurrentValue() {
-                return this._state;
-            }
-        },
-        {
-            key: "subscribe",
-            value: function subscribe(callback) {
-                var _this = this;
-                this._callbacks.add(callback);
-                return function() {
-                    _this._callbacks.delete(callback);
-                };
+    return target;
+}
+function _object_without_properties_loose$8(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function Calendar$2(_param) {
+    var className = _param.className, classNames = _param.classNames, _param_showOutsideDays = _param.showOutsideDays, showOutsideDays = _param_showOutsideDays === void 0 ? true : _param_showOutsideDays, props = _object_without_properties$8(_param, [
+        "className",
+        "classNames",
+        "showOutsideDays"
+    ]);
+    return /*#__PURE__*/ jsx(DayPicker, _object_spread_props$c(_object_spread$g({
+        showOutsideDays: showOutsideDays,
+        className: cn("p-3", className),
+        classNames: _object_spread$g({
+            months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+            month: "space-y-4",
+            caption: "flex justify-center pt-1 relative items-center",
+            caption_label: "text-sm font-medium",
+            nav: "space-x-1 flex items-center",
+            nav_button: cn(buttonVariants({
+                variant: "outline"
+            }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
+            nav_button_previous: "absolute left-1",
+            nav_button_next: "absolute right-1",
+            table: "w-full border-collapse space-y-1",
+            head_row: "flex",
+            head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+            row: "flex w-full mt-2",
+            cell: cn("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"),
+            day: cn(buttonVariants({
+                variant: "ghost"
+            }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"),
+            day_range_start: "day-range-start",
+            day_range_end: "day-range-end",
+            day_selected: "bg-[#000] text-[#fff] hover:bg-[#000] hover:text-[#fff] focus:bg-[#000] focus:text-[#fff]",
+            day_today: "bg-accent text-accent-foreground",
+            day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+            day_disabled: "text-muted-foreground opacity-50",
+            day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+            day_hidden: "invisible"
+        }, classNames),
+        components: {
+            IconLeft: function(_param) {
+                _extends$3({}, _object_destructuring_empty$2(_param));
+                return /*#__PURE__*/ jsx(Icon, {
+                    icon: "heroicons-solid:arrow-left",
+                    width: "1rem",
+                    height: "1rem"
+                });
+            },
+            IconRight: function(_param) {
+                _extends$3({}, _object_destructuring_empty$2(_param));
+                return /*#__PURE__*/ jsx(Icon, {
+                    icon: "heroicons-solid:arrow-right",
+                    width: "1rem",
+                    height: "1rem"
+                });
             }
         }
-    ]);
-    return LoadableSubscription;
-}();
-function Loadable(opts) {
-    return createLoadableComponent(load, opts);
-}
-function flushInitializers(initializers, ids) {
-    var promises = [];
-    while(initializers.length){
-        var init = initializers.pop();
-        promises.push(init(ids));
-    }
-    return Promise.all(promises).then(function() {
-        if (initializers.length) {
-            return flushInitializers(initializers, ids);
-        }
-    });
-}
-Loadable.preloadAll = function() {
-    return new Promise(function(resolveInitializers, reject) {
-        flushInitializers(ALL_INITIALIZERS).then(resolveInitializers, reject);
-    });
-};
-Loadable.preloadReady = function(ids) {
-    if (ids === void 0) ids = [];
-    return new Promise(function(resolvePreload) {
-        var res = function() {
-            initialized = true;
-            return resolvePreload();
-        };
-        // We always will resolve, errors should be handled within loading UIs.
-        flushInitializers(READY_INITIALIZERS, ids).then(res, res);
-    });
-};
-if (typeof window !== "undefined") {
-    window.__NEXT_PRELOADREADY = Loadable.preloadReady;
+    }, props), {
+        locale: zhTW
+    }));
 }
-var _default = Loadable; 
-}(loadable_sharedRuntime));
+Calendar$2.displayName = "Calendar";
 
-(function (module, exports) {
-function _define_property(obj, key, value) {
+function _define_property$g(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -23995,14 +23809,7 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _instanceof(left, right) {
-    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-        return !!right[Symbol.hasInstance](left);
-    } else {
-        return left instanceof right;
-    }
-}
-function _object_spread(target) {
+function _object_spread$f(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -24012,149 +23819,355 @@ function _object_spread(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
+            _define_property$g(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
+function _object_without_properties$7(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$7(source, excluded);
+    var key, i;
     if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
         }
-        keys.push.apply(keys, symbols);
     }
-    return keys;
+    return target;
 }
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
+function _object_without_properties_loose$7(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
     }
     return target;
 }
-Object.defineProperty(exports, "__esModule", {
-    value: true
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, _param_sideOffset = _param.sideOffset, sideOffset = _param_sideOffset === void 0 ? 4 : _param_sideOffset, props = _object_without_properties$7(_param, [
+        "className",
+        "align",
+        "sideOffset"
+    ]);
+    return /*#__PURE__*/ jsx(PopoverPrimitive.Portal, {
+        children: /*#__PURE__*/ jsx(PopoverPrimitive.Content, _object_spread$f({
+            ref: ref,
+            align: align,
+            sideOffset: sideOffset,
+            className: cn("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
+        }, props))
+    });
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+function DateRangePicker(param) {
+    var className = param.className, inputClassName = param.inputClassName, disable = param.disable, _param_isShowCleanBtn = param.isShowCleanBtn, isShowCleanBtn = _param_isShowCleanBtn === void 0 ? true : _param_isShowCleanBtn, onChange = param.onChange, dates = param.dates, setDates = param.setDates;
+    var handleDateChange = function(newDate) {
+        if (newDate) {
+            setDates(newDate);
+            if (onChange) onChange(newDate);
+        }
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex gap-2 items-center",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn("grid gap-2", className, disable ? "pointer-events-none opacity-55" : "pointer-events-auto opacity-100"),
+                children: /*#__PURE__*/ jsxs(Popover, {
+                    children: [
+                        /*#__PURE__*/ jsx(PopoverTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ jsxs(Button, {
+                                id: "date",
+                                variant: "outline",
+                                className: cn("w-[300px] justify-start text-left font-normal", !dates && "text-muted-foreground", inputClassName),
+                                children: [
+                                    /*#__PURE__*/ jsx(Calendar$3, {
+                                        className: "mr-2 h-4 w-4"
+                                    }),
+                                    (dates === null || dates === void 0 ? void 0 : dates.from) ? dates.to ? /*#__PURE__*/ jsxs(Fragment$1, {
+                                        children: [
+                                            format(dates.from, "yyyy-MM-dd"),
+                                            " -",
+                                            " ",
+                                            format(dates.to, "yyyy-MM-dd")
+                                        ]
+                                    }) : format(dates.from, "yyyy-MM-dd") : /*#__PURE__*/ jsx("span", {
+                                        children: "請選擇日期"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(PopoverContent, {
+                            className: "w-auto p-0",
+                            align: "start",
+                            children: /*#__PURE__*/ jsx(Calendar$2, {
+                                initialFocus: true,
+                                mode: "range",
+                                defaultMonth: dates === null || dates === void 0 ? void 0 : dates.from,
+                                selected: dates,
+                                onSelect: handleDateChange,
+                                numberOfMonths: 2
+                            })
+                        })
+                    ]
+                })
+            }),
+            isShowCleanBtn && /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                className: cn("justify-start text-left font-normal"),
+                onClick: function() {
+                    return setDates(undefined);
+                },
+                children: "清除日期"
+            })
+        ]
     });
 }
-_export(exports, {
-    noSSR: function noSSR1() {
-        return noSSR;
-    },
-    default: function _default() {
-        return dynamic;
+
+function _array_like_to_array$i(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$f(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$f(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;
+        }
     }
-});
-var _interop_require_default = _interop_require_default$1;
-var _react = /*#__PURE__*/ _interop_require_default._(React__default);
-var _loadablesharedruntime = /*#__PURE__*/ _interop_require_default._(loadable_sharedRuntime);
-var isServerSide = typeof window === "undefined";
-// Normalize loader to return the module as form { default: Component } for `React.lazy`.
-// Also for backward compatible since next/dynamic allows to resolve a component directly with loader
-// Client component reference proxy need to be converted to a module.
-function convertModule(mod) {
-    return {
-        default: (mod == null ? void 0 : mod.default) || mod
+    return _arr;
+}
+function _non_iterable_rest$f() {
+    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 _sliced_to_array$f(arr, i) {
+    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$f();
+}
+function _unsupported_iterable_to_array$i(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$i(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$i(o, minLen);
+}
+var SingleDatePicker = function(param) {
+    var disable = param.disable, onChange = param.onChange;
+    var _useState = _sliced_to_array$f(useState(), 2), date = _useState[0], setDate = _useState[1];
+    var handleDate = function(newDate) {
+        if (newDate) {
+            setDate(newDate);
+            if (onChange) onChange(newDate);
+        }
     };
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(disable ? "pointer-events-none opacity-55" : "pointer-events-auto opacity-100"),
+        children: /*#__PURE__*/ jsxs(Popover, {
+            children: [
+                /*#__PURE__*/ jsx(PopoverTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsxs(Button, {
+                        variant: "outline",
+                        className: cn("w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground"),
+                        children: [
+                            /*#__PURE__*/ jsx(Calendar$3, {
+                                className: "mr-2 h-4 w-4"
+                            }),
+                            date ? format(date, "yyyy-MM-dd") : /*#__PURE__*/ jsx("span", {
+                                children: "請選擇日期"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(PopoverContent, {
+                    className: "w-auto p-0",
+                    children: /*#__PURE__*/ jsx(Calendar$2, {
+                        mode: "single",
+                        selected: date,
+                        onSelect: handleDate,
+                        initialFocus: true
+                    })
+                })
+            ]
+        })
+    });
+};
+
+function _array_like_to_array$h(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 noSSR(LoadableInitializer, loadableOptions) {
-    // Removing webpack and modules means react-loadable won't try preloading
-    delete loadableOptions.webpack;
-    delete loadableOptions.modules;
-    // This check is necessary to prevent react-loadable from initializing on the server
-    if (!isServerSide) {
-        return LoadableInitializer(loadableOptions);
+function _array_with_holes$e(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$e(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;
+        }
     }
-    var Loading = loadableOptions.loading;
-    // This will only be rendered on the server side
-    return function() {
-        return /*#__PURE__*/ _react.default.createElement(Loading, {
-            error: null,
-            isLoading: true,
-            pastDelay: false,
-            timedOut: false
-        });
-    };
+    return _arr;
 }
-function dynamic(dynamicOptions, options) {
-    var loadableFn = _loadablesharedruntime.default;
-    var loadableOptions = {
-        // A loading component is not required, so we default it
-        loading: function(param) {
-            var error = param.error, isLoading = param.isLoading, pastDelay = param.pastDelay;
-            if (!pastDelay) return null;
-            if (process.env.NODE_ENV !== "production") {
-                if (isLoading) {
-                    return null;
-                }
-                if (error) {
-                    return /*#__PURE__*/ _react.default.createElement("p", null, error.message, /*#__PURE__*/ _react.default.createElement("br", null), error.stack);
-                }
-            }
-            return null;
+function _non_iterable_rest$e() {
+    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 _sliced_to_array$e(arr, i) {
+    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$e();
+}
+function _unsupported_iterable_to_array$h(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$h(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$h(o, minLen);
+}
+var ReactDateRange = function(param) {
+    var className = param.className, item = param.item, onChange = param.onChange, dates = param.dates, date = param.date;
+    var _useState = _sliced_to_array$e(useState("zhTW"), 1), locale = _useState[0];
+    var _useState1 = _sliced_to_array$e(useState(""), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
+    var _useState2 = _sliced_to_array$e(useState({
+        startDate: new Date(),
+        endDate: addDays(new Date(), 7),
+        key: "selection"
+    }), 2), range = _useState2[0], setRange = _useState2[1];
+    var _useState3 = _sliced_to_array$e(useState(false), 2), open = _useState3[0], setOpen = _useState3[1];
+    var refOne = useRef(null);
+    var hideOnEscape = function(e) {
+        if (e.key === "Escape") {
+            setOpen(false);
         }
     };
-    // Support for direct import(), eg: dynamic(import('../hello-world'))
-    // Note that this is only kept for the edge case where someone is passing in a promise as first argument
-    // The react-loadable babel plugin will turn dynamic(import('../hello-world')) into dynamic(() => import('../hello-world'))
-    // To make sure we don't execute the import without rendering first
-    if (_instanceof(dynamicOptions, Promise)) {
-        loadableOptions.loader = function() {
-            return dynamicOptions;
+    var hideOnClickOutside = function(e) {
+        if (refOne.current && !refOne.current.contains(e.target)) {
+            setOpen(false);
+        }
+    };
+    useEffect(function() {
+        setCalendarData(date);
+    }, [
+        date
+    ]);
+    useEffect(function() {
+        if (!dates) return;
+        setRange(dates);
+    }, [
+        dates
+    ]);
+    useEffect(function() {
+        document.addEventListener("keydown", hideOnEscape, true);
+        document.addEventListener("click", hideOnClickOutside, true);
+        return function() {
+            document.removeEventListener("keydown", hideOnEscape, true);
+            document.removeEventListener("click", hideOnClickOutside, true);
         };
-    // Support for having import as a function, eg: dynamic(() => import('../hello-world'))
-    } else if (typeof dynamicOptions === "function") {
-        loadableOptions.loader = dynamicOptions;
-    // Support for having first argument being options, eg: dynamic({loader: import('../hello-world')})
-    } else if (typeof dynamicOptions === "object") {
-        loadableOptions = _object_spread({}, loadableOptions, dynamicOptions);
-    }
-    // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
-    loadableOptions = _object_spread({}, loadableOptions, options);
-    var loaderFn = loadableOptions.loader;
-    var loader = function() {
-        return loaderFn != null ? loaderFn().then(convertModule) : Promise.resolve(convertModule(function() {
-            return null;
-        }));
+    }, []);
+    var formatDates = function() {
+        if (!range) return;
+        var startDate = range.startDate, endDate = range.endDate;
+        return "".concat(format$1(startDate, "yyyy-MM-dd"), " ~ ").concat(format$1(endDate, "yyyy-MM-dd"));
     };
-    // coming from build/babel/plugins/react-loadable-plugin.js
-    if (loadableOptions.loadableGenerated) {
-        loadableOptions = _object_spread({}, loadableOptions, loadableOptions.loadableGenerated);
-        delete loadableOptions.loadableGenerated;
-    }
-    // support for disabling server side rendering, eg: dynamic(() => import('../hello-world'), {ssr: false}).
-    if (typeof loadableOptions.ssr === "boolean" && !loadableOptions.ssr) {
-        delete loadableOptions.webpack;
-        delete loadableOptions.modules;
-        return noSSR(loadableFn, loadableOptions);
-    }
-    return loadableFn(_object_spread_props(_object_spread({}, loadableOptions), {
-        loader: loader
-    }));
-}
-if ((typeof exports.default === "function" || typeof exports.default === "object" && exports.default !== null) && typeof exports.default.__esModule === "undefined") {
-    Object.defineProperty(exports.default, "__esModule", {
-        value: true
+    var formatDate = calendarData ? format$1(calendarData, (item === null || item === void 0 ? void 0 : item.dateDisplayFormat) || "yyyy-MM-dd") : "";
+    return /*#__PURE__*/ jsxs("div", {
+        className: [
+            className,
+            "relative"
+        ].join(" "),
+        children: [
+            (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsx("div", {
+                className: "text-gray-700 font-medium mb-2 h-6",
+                children: item === null || item === void 0 ? void 0 : item.label
+            }),
+            /*#__PURE__*/ jsx("input", {
+                className: "border-solid border rounded p-2 h-10 w-full timePicker border-gray-300",
+                name: item === null || item === void 0 ? void 0 : item.name,
+                onClick: function() {
+                    return setOpen(function(openState) {
+                        return !openState;
+                    });
+                },
+                placeholder: item === null || item === void 0 ? void 0 : item.placeholder,
+                value: (item === null || item === void 0 ? void 0 : item.type) === "date" ? formatDate : formatDates(),
+                autoComplete: "off"
+            }),
+            open && /*#__PURE__*/ jsxs("div", {
+                className: "absolute top-[72px] left-0 z-50 shadow-md",
+                ref: refOne,
+                children: [
+                    open && (item === null || item === void 0 ? void 0 : item.type) === "date" && /*#__PURE__*/ jsx(Calendar$4, {
+                        data: calendarData,
+                        locale: locales[locale],
+                        dateDisplayFormat: item === null || item === void 0 ? void 0 : item.dateDisplayFormat,
+                        onChange: function(value) {
+                            setCalendarData(value);
+                            if (onChange) onChange(value);
+                            setOpen(false);
+                        }
+                    }),
+                    open && (item === null || item === void 0 ? void 0 : item.type) === "dateRange" && /*#__PURE__*/ jsx(DateRange, {
+                        editableDateInputs: true,
+                        onChange: function(value) {
+                            setRange(value.selection);
+                            if (onChange) onChange(value.selection);
+                        },
+                        ranges: [
+                            range
+                        ],
+                        locale: locales[locale],
+                        dateDisplayFormat: "yyyy.MM.dd"
+                    })
+                ]
+            })
+        ]
     });
-    Object.assign(exports.default, exports);
-    module.exports = exports.default;
-} 
-}(dynamic$1, dynamic$1.exports));
-
-var dynamic = dynamic$1.exports;
+};
 
 function _arrayWithHoles(r) {
     if (Array.isArray(r)) return r;
@@ -48860,6 +48873,7 @@ var Form = {
     Row: Row,
     TextField: TextField,
     SingleSelect: SingleSelect,
+    BaseSelect: BaseSelect,
     MultipleSelect: MultipleSelect,
     FieldLabel: FieldLabel,
     RadioField: RadioField,
@@ -78782,4 +78796,4 @@ var useLiffContext = function() {
     return context;
 };
 
-export { CustomUploadField as $, verifyId as A, BaseSwitch as B, Controller$2 as C, DropImage as D, verifyTaxId as E, FieldLabel as F, BigCalender as G, DnDCalendar as H, InputOTPs as I, CustomSelect as J, LiffProvider as K, LiffContext as L, useLiffContext as M, FormProvider as N, useForm as O, useController as P, useFieldArray as Q, ReactDateRange as R, Spin as S, TabsPanel as T, UiLibrary as U, useFormState as V, useWatch as W, City as X, Textarea as Y, Fields as Z, __spreadArray as _, __read as a, Row as a0, Form as a1, __extends as b, __assign as c, __makeTemplateObject as d, __awaiter as e, __generator as f, commonjsGlobal as g, __values as h, getAugmentedNamespace as i, getDefaultExportFromCjs as j, DropDown as k, CustomUpload$1 as l, Switch as m, DateRangePicker as n, SingleDatePicker as o, propTypes$1 as p, Button as q, buttonVariants as r, StackCards as s, DataTable as t, useFormContext as u, validateMsg as v, BaseTable as w, Drawer as x, Regex as y, verifyTaiwanIdIntermediateString as z };
+export { Fields as $, verifyTaiwanIdIntermediateString as A, BaseSwitch as B, Controller$2 as C, DropImage as D, verifyId as E, FieldLabel as F, verifyTaxId as G, BigCalender as H, InputOTPs as I, DnDCalendar as J, CustomSelect as K, LiffContext as L, LiffProvider as M, useLiffContext as N, FormProvider as O, useForm as P, useController as Q, ReactDateRange as R, Spin as S, TabsPanel as T, UiLibrary as U, useFieldArray as V, useFormState as W, useWatch as X, City as Y, Textarea as Z, __spreadArray as _, __read as a, CustomUploadField as a0, Row as a1, Form as a2, __extends as b, __assign as c, __makeTemplateObject as d, __awaiter as e, __generator as f, commonjsGlobal as g, __values as h, getAugmentedNamespace as i, getDefaultExportFromCjs as j, CSRDropImage as k, DropDown as l, CustomUpload$1 as m, Switch as n, DateRangePicker as o, propTypes$1 as p, SingleDatePicker as q, Button as r, buttonVariants as s, StackCards as t, useFormContext as u, validateMsg as v, DataTable as w, BaseTable as x, Drawer as y, Regex as z };