@sunggang/ui-lib 0.3.66 → 0.4.1

package/index.cjs.js

@@ -0,0 +1,2097 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var input = require('./input.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var SwitchPrimitives = require('@radix-ui/react-switch');
+var utils = require('./utils.cjs.js');
+var index_esm = require('./index.esm.cjs.js');
+var baseSwitch = require('./baseSwitch.cjs.js');
+var format = require('date-fns/format');
+var lucideReact = require('lucide-react');
+var react = require('@iconify/react');
+var reactDayPicker = require('react-day-picker');
+var zhTW = require('date-fns/locale/zh-TW');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var reactDateRange = require('react-date-range');
+var locales = require('react-date-range/dist/locale/index.js');
+var addDays = require('date-fns/addDays');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var reactIcons = require('@radix-ui/react-icons');
+var inputOtp = require('input-otp');
+require('@radix-ui/react-slot');
+require('class-variance-authority');
+require('clsx');
+require('tailwind-merge');
+require('next/dynamic');
+require('./setPrototypeOf.cjs.js');
+require('./memoize-one.esm.cjs.js');
+require('@emotion/react');
+require('react-dom');
+require('@mui/material');
+require('./styled-components.esm.cjs.js');
+require('./_tslib.cjs.js');
+require('./_commonjsHelpers.cjs.js');
+require('./Modal.cjs.js');
+require('@radix-ui/react-select');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
+var format__default = /*#__PURE__*/_interopDefaultLegacy(format);
+var zhTW__default = /*#__PURE__*/_interopDefaultLegacy(zhTW);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var locales__namespace = /*#__PURE__*/_interopNamespace(locales);
+var addDays__default = /*#__PURE__*/_interopDefaultLegacy(addDays);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+
+function _define_property$6(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$6(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$6(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$5(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$5(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$5(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties$4(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$4(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$4(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__namespace.forwardRef(function(_param, ref) {
+    var _param_size = _param.size, size = _param_size === void 0 ? "large" : _param_size, color = _param.color, props = _object_without_properties$4(_param, [
+        "size",
+        "color"
+    ]);
+    var control = index_esm.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__*/ jsxRuntime.jsx("div", {
+        className: [
+            "h-24 w-full",
+            className
+        ].join(" "),
+        children: /*#__PURE__*/ jsxRuntime.jsx(index_esm.Controller, {
+            name: name || "",
+            control: control,
+            render: function(param) {
+                param.field;
+                return /*#__PURE__*/ jsxRuntime.jsx(SwitchPrimitives__namespace.Root, _object_spread_props$5(_object_spread$6({
+                    className: utils.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__*/ jsxRuntime.jsx(SwitchPrimitives__namespace.Thumb, {
+                        className: utils.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)
+                    })
+                }));
+            }
+        })
+    });
+});
+
+var phone = /^09\d{8}$/;
+var email = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/i;
+var birthday = /^(19|20)\d\d[-](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])$/;
+var carrier = /^\/[0-9A-Z.+-]{7}$/;
+var Regex = {
+    phone: phone,
+    email: email,
+    birthday: birthday,
+    carrier: carrier
+};
+
+var verifyTaiwanIdIntermediateString = function(input) {
+    var idArray = input.split("");
+    var intRadix = 10;
+    var TAIWAN_ID_LOCALE_CODE_LIST = [
+        1,
+        10,
+        19,
+        28,
+        37,
+        46,
+        55,
+        64,
+        39,
+        73,
+        82,
+        2,
+        11,
+        20,
+        48,
+        29,
+        38,
+        47,
+        56,
+        65,
+        74,
+        83,
+        21,
+        3,
+        12,
+        30
+    ];
+    var RESIDENT_CERTIFICATE_NUMBER_LIST = [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "4",
+        "8",
+        "9",
+        "0",
+        "1",
+        "2",
+        "5",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "2",
+        "0",
+        "1",
+        "3"
+    ];
+    // if is not a number (居留證編號)
+    // eslint-disable-next-line no-restricted-globals
+    if (isNaN(parseInt(idArray[1], intRadix))) {
+        idArray[1] = RESIDENT_CERTIFICATE_NUMBER_LIST[input.charCodeAt(1) - "A".charCodeAt(0)];
+    }
+    var result = idArray.reduce(function(sum, n, index) {
+        if (index === 0) {
+            return sum + TAIWAN_ID_LOCALE_CODE_LIST[idArray[0].charCodeAt(0) - "A".charCodeAt(0)];
+        }
+        if (index === 9) {
+            return sum + parseInt(idArray[9], intRadix);
+        }
+        return sum + parseInt(idArray[index], intRadix) * (9 - index);
+    }, 0);
+    if (result % 10 === 0) {
+        return true;
+    }
+    return false;
+};
+var verifyId = function(input) {
+    var regex = /^[A-Z][1,2,8,9]\d{8}$/;
+    if (!regex.test(input)) {
+        return false;
+    }
+    return verifyTaiwanIdIntermediateString(input);
+};
+var verifyTaxId = function(idStr) {
+    var regex = /^\d{8}$/;
+    if (!regex.test(idStr)) {
+        console.log("Fail, 長度錯誤");
+        return false;
+    }
+    var len = 8;
+    var idArray = new Array(len);
+    var weight = [
+        1,
+        2,
+        1,
+        2,
+        1,
+        2,
+        4,
+        1
+    ];
+    var sum = 0;
+    // eslint-disable-next-line no-plusplus
+    for(var i = 0; i < len; i++){
+        idArray[i] = parseInt(idStr[i], 10);
+        var p = idArray[i] * weight[i];
+        var s = Math.floor(p / 10) + p % 10;
+        sum += s;
+    }
+    var checkNumber = 5;
+    var isLegal = sum % checkNumber === 0 || (sum + 1) % checkNumber === 0 && idArray[6] === 7;
+    if (!isLegal) {
+        console.log("Fail, 不合法的統一編號驗證");
+    }
+    return isLegal;
+};
+
+function _define_property$5(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$1() {
+    _extends$1 = 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$1.apply(this, arguments);
+}
+function _object_destructuring_empty$1(o) {
+    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
+    return o;
+}
+function _object_spread$5(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$5(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$4(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$4(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$4(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties$3(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$3(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$3(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(_param) {
+    var className = _param.className, classNames = _param.classNames, _param_showOutsideDays = _param.showOutsideDays, showOutsideDays = _param_showOutsideDays === void 0 ? true : _param_showOutsideDays, props = _object_without_properties$3(_param, [
+        "className",
+        "classNames",
+        "showOutsideDays"
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(reactDayPicker.DayPicker, _object_spread_props$4(_object_spread$5({
+        showOutsideDays: showOutsideDays,
+        className: utils.cn("p-3", className),
+        classNames: _object_spread$5({
+            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: utils.cn(input.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: utils.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: utils.cn(input.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$1({}, _object_destructuring_empty$1(_param));
+                return /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                    icon: "heroicons-solid:arrow-left",
+                    width: "1rem",
+                    height: "1rem"
+                });
+            },
+            IconRight: function(_param) {
+                _extends$1({}, _object_destructuring_empty$1(_param));
+                return /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                    icon: "heroicons-solid:arrow-right",
+                    width: "1rem",
+                    height: "1rem"
+                });
+            }
+        }
+    }, props), {
+        locale: zhTW__default["default"]
+    }));
+}
+Calendar.displayName = "Calendar";
+
+function _define_property$4(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$4(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$4(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties$2(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$2(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$2(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 Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverContent = /*#__PURE__*/ React__namespace.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$2(_param, [
+        "className",
+        "align",
+        "sideOffset"
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, _object_spread$4({
+            ref: ref,
+            align: align,
+            sideOffset: sideOffset,
+            className: utils.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__namespace.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__*/ jsxRuntime.jsxs("div", {
+        className: "flex gap-2 items-center",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: utils.cn("grid gap-2", className, disable ? "pointer-events-none opacity-55" : "pointer-events-auto opacity-100"),
+                children: /*#__PURE__*/ jsxRuntime.jsxs(Popover, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(PopoverTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(input.Button, {
+                                id: "date",
+                                variant: "outline",
+                                className: utils.cn("w-[300px] justify-start text-left font-normal", !dates && "text-muted-foreground", inputClassName),
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(lucideReact.Calendar, {
+                                        className: "mr-2 h-4 w-4"
+                                    }),
+                                    (dates === null || dates === void 0 ? void 0 : dates.from) ? dates.to ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                        children: [
+                                            format__default["default"](dates.from, "yyyy-MM-dd"),
+                                            " -",
+                                            " ",
+                                            format__default["default"](dates.to, "yyyy-MM-dd")
+                                        ]
+                                    }) : format__default["default"](dates.from, "yyyy-MM-dd") : /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                        children: "請選擇日期"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(PopoverContent, {
+                            className: "w-auto p-0",
+                            align: "start",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Calendar, {
+                                initialFocus: true,
+                                mode: "range",
+                                defaultMonth: dates === null || dates === void 0 ? void 0 : dates.from,
+                                selected: dates,
+                                onSelect: handleDateChange,
+                                numberOfMonths: 2
+                            })
+                        })
+                    ]
+                })
+            }),
+            isShowCleanBtn && /*#__PURE__*/ jsxRuntime.jsx(input.Button, {
+                variant: "ghost",
+                className: utils.cn("justify-start text-left font-normal"),
+                onClick: function() {
+                    return setDates(undefined);
+                },
+                children: "清除日期"
+            })
+        ]
+    });
+}
+
+function _array_like_to_array$2(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$2(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$2(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$2() {
+    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$2(arr, i) {
+    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+}
+function _unsupported_iterable_to_array$2(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$2(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$2(o, minLen);
+}
+var SingleDatePicker = function(param) {
+    var disable = param.disable, onChange = param.onChange;
+    var _useState = _sliced_to_array$2(React.useState(), 2), date = _useState[0], setDate = _useState[1];
+    var handleDate = function(newDate) {
+        if (newDate) {
+            setDate(newDate);
+            if (onChange) onChange(newDate);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: utils.cn(disable ? "pointer-events-none opacity-55" : "pointer-events-auto opacity-100"),
+        children: /*#__PURE__*/ jsxRuntime.jsxs(Popover, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(PopoverTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(input.Button, {
+                        variant: "outline",
+                        className: utils.cn("w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground"),
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(lucideReact.Calendar, {
+                                className: "mr-2 h-4 w-4"
+                            }),
+                            date ? format__default["default"](date, "yyyy-MM-dd") : /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                children: "請選擇日期"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(PopoverContent, {
+                    className: "w-auto p-0",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(Calendar, {
+                        mode: "single",
+                        selected: date,
+                        onSelect: handleDate,
+                        initialFocus: true
+                    })
+                })
+            ]
+        })
+    });
+};
+
+function _array_like_to_array$1(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$1(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$1(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$1() {
+    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$1(arr, i) {
+    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
+}
+function _unsupported_iterable_to_array$1(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$1(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$1(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$1(React.useState("zhTW"), 1), locale = _useState[0];
+    var _useState1 = _sliced_to_array$1(React.useState(""), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
+    var _useState2 = _sliced_to_array$1(React.useState({
+        startDate: new Date(),
+        endDate: addDays__default["default"](new Date(), 7),
+        key: "selection"
+    }), 2), range = _useState2[0], setRange = _useState2[1];
+    var _useState3 = _sliced_to_array$1(React.useState(false), 2), open = _useState3[0], setOpen = _useState3[1];
+    var refOne = React.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);
+        }
+    };
+    React.useEffect(function() {
+        setCalendarData(date);
+    }, [
+        date
+    ]);
+    React.useEffect(function() {
+        if (!dates) return;
+        setRange(dates);
+    }, [
+        dates
+    ]);
+    React.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__default["default"](startDate, "yyyy-MM-dd"), " ~ ").concat(format__default["default"](endDate, "yyyy-MM-dd"));
+    };
+    var formatDate = calendarData ? format__default["default"](calendarData, (item === null || item === void 0 ? void 0 : item.dateDisplayFormat) || "yyyy-MM-dd") : "";
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: [
+            className,
+            "relative"
+        ].join(" "),
+        children: [
+            (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "text-gray-700 font-medium mb-2 h-6",
+                children: item === null || item === void 0 ? void 0 : item.label
+            }),
+            /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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__*/ jsxRuntime.jsx(reactDateRange.Calendar, {
+                        data: calendarData,
+                        locale: locales__namespace[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__*/ jsxRuntime.jsx(reactDateRange.DateRange, {
+                        editableDateInputs: true,
+                        onChange: function(value) {
+                            setRange(value.selection);
+                            if (onChange) onChange(value.selection);
+                        },
+                        ranges: [
+                            range
+                        ],
+                        locale: locales__namespace[locale],
+                        dateDisplayFormat: "yyyy.MM.dd"
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+function _define_property$3(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$3(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$3(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$3(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$3(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$3(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties$1(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$1(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$1(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 Checkbox = /*#__PURE__*/ React__namespace.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties$1(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(CheckboxPrimitive__namespace.Root, _object_spread_props$3(_object_spread$3({
+        ref: ref,
+        className: utils.cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className)
+    }, props), {
+        children: /*#__PURE__*/ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, {
+            className: utils.cn("flex items-center justify-center text-current"),
+            children: /*#__PURE__*/ jsxRuntime.jsx(reactIcons.CheckIcon, {
+                className: "h-4 w-4"
+            })
+        })
+    }));
+});
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+
+function _define_property$2(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() {
+    _extends = 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.apply(this, arguments);
+}
+function _object_destructuring_empty(o) {
+    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
+    return o;
+}
+function _object_spread$2(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$2(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$2(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$2(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$2(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(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(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 InputOTP = /*#__PURE__*/ React__namespace.forwardRef(function(_param, ref) {
+    var className = _param.className, containerClassName = _param.containerClassName, props = _object_without_properties(_param, [
+        "className",
+        "containerClassName"
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(inputOtp.OTPInput, _object_spread$2({
+        ref: ref,
+        containerClassName: utils.cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName),
+        className: utils.cn("disabled:cursor-not-allowed", className)
+    }, props));
+});
+var InputOTPGroup = /*#__PURE__*/ React__namespace.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", _object_spread$2({
+        ref: ref,
+        className: utils.cn("flex items-center", className)
+    }, props));
+});
+var InputOTPSlot = /*#__PURE__*/ React__namespace.forwardRef(function(_param, ref) {
+    var index = _param.index, className = _param.className, ringClassName = _param.ringClassName, props = _object_without_properties(_param, [
+        "index",
+        "className",
+        "ringClassName"
+    ]);
+    var inputOTPContext = React__namespace.useContext(inputOtp.OTPInputContext);
+    var _inputOTPContext_slots_index = inputOTPContext.slots[index], char = _inputOTPContext_slots_index.char, hasFakeCaret = _inputOTPContext_slots_index.hasFakeCaret, isActive = _inputOTPContext_slots_index.isActive;
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", _object_spread_props$2(_object_spread$2({
+        ref: ref,
+        className: utils.cn("relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md", isActive && "z-10 ring-1 ".concat(ringClassName), className)
+    }, props), {
+        children: [
+            char,
+            hasFakeCaret && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "h-4 w-px animate-caret-blink bg-foreground duration-1000"
+                })
+            })
+        ]
+    }));
+});
+var InputOTPSeparator = /*#__PURE__*/ React__namespace.forwardRef(function(_param, ref) {
+    var props = _extends({}, _object_destructuring_empty(_param));
+    return /*#__PURE__*/ jsxRuntime.jsx("div", _object_spread_props$2(_object_spread$2({
+        ref: ref,
+        role: "separator"
+    }, props), {
+        children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+            icon: "octicon:dash-16"
+        })
+    }));
+});
+
+function Spin(props) {
+    var show = props.show, _props_overlayBackground = props.overlayBackground, overlayBackground = _props_overlayBackground === void 0 ? "bg-[#00000055]" : _props_overlayBackground;
+    return show ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: [
+            "fixed flex justify-center items-center w-full h-full left-0 top-0 z-[9999] overflow-hidden",
+            overlayBackground
+        ].join(" "),
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "top-2/4 left-2/4",
+            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "w-10 h-10 rounded-full border-4 border-solid border-[#ffffff33] border-t-[#dbdbdb] animate-spin"
+            })
+        })
+    }) : null;
+}
+
+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) {
+    React.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__*/ jsxRuntime.jsx("svg", {
+        className: className,
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("svg", {
+        className: className,
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("svg", {
+        className: className,
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsxRuntime.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__*/ React.createContext({
+    value: null,
+    handleValueChange: function(selected) {
+        console.log("selected:", selected);
+    },
+    formatGroupLabel: null,
+    formatOptionLabel: null,
+    classNames: undefined
+});
+var useSelectContext = function() {
+    return React.useContext(SelectContext);
+};
+var SelectProvider = function(param) {
+    var value = param.value, handleValueChange = param.handleValueChange, otherData = param.otherData, children = param.children;
+    var store = React.useMemo(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__*/ jsxRuntime.jsx(SelectContext.Provider, {
+        value: store,
+        children: children
+    });
+};
+
+var DisabledItem = function(param) {
+    var children = param.children;
+    var classNames = React.useContext(SelectContext).classNames;
+    return /*#__PURE__*/ jsxRuntime.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$1(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$1(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$1(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$1(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$1(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$1(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 = React.useMemo(function() {
+        return value !== null && !Array.isArray(value) && value.value === item.value;
+    }, [
+        item.value,
+        value
+    ]);
+    var textHoverColor = React.useMemo(function() {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.textHover[primaryColor];
+        }
+        return THEME_DATA.textHover[DEFAULT_THEME];
+    }, [
+        primaryColor
+    ]);
+    var bgColor = React.useMemo(function() {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.bg[primaryColor];
+        }
+        return THEME_DATA.bg[DEFAULT_THEME];
+    }, [
+        primaryColor
+    ]);
+    var bgHoverColor = React.useMemo(function() {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.bgHover[primaryColor];
+        }
+        return THEME_DATA.bgHover[DEFAULT_THEME];
+    }, [
+        primaryColor
+    ]);
+    var getItemClass = React.useCallback(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__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: formatOptionLabel ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+            onClick: function() {
+                return handleValueChange(item);
+            },
+            children: formatOptionLabel(_object_spread_props$1(_object_spread$1({}, item), {
+                isSelected: isSelected
+            }))
+        }) : /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: item.disabled ? /*#__PURE__*/ jsxRuntime.jsx(DisabledItem, {
+                children: item.label
+            }) : /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: item.options.length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                formatGroupLabel ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+                    children: formatGroupLabel(item)
+                }) : /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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 = React.useContext(SelectContext).classNames;
+    var filterByText = React.useCallback(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 = React.useCallback(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 = React.useMemo(function() {
+        return removeValues(filterByText());
+    }, [
+        filterByText,
+        removeValues
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        role: "options",
+        className: classNames && classNames.list ? classNames.list : "max-h-72 overflow-y-auto",
+        children: [
+            filterResult.map(function(item, index) {
+                return /*#__PURE__*/ jsxRuntime.jsx(React__default["default"].Fragment, {
+                    children: "options" in item ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "px-2.5",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(GroupItem, {
+                                    primaryColor: primaryColor || DEFAULT_THEME,
+                                    item: item
+                                })
+                            }),
+                            index + 1 < filterResult.length && /*#__PURE__*/ jsxRuntime.jsx("hr", {
+                                className: "my-1"
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "px-2.5",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Item, {
+                            primaryColor: primaryColor || DEFAULT_THEME,
+                            item: item
+                        })
+                    })
+                }, index);
+            }),
+            filterResult.length === 0 && /*#__PURE__*/ jsxRuntime.jsx(DisabledItem, {
+                children: noOptionsMessage
+            })
+        ]
+    });
+};
+
+var SearchInput = /*#__PURE__*/ React.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 = React.useContext(SelectContext).classNames;
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: classNames && classNames.searchContainer ? classNames.searchContainer : "relative py-1 px-2.5",
+        children: [
+            /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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 = React.useMemo(function() {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.text[primaryColor];
+        }
+        return THEME_DATA.text[DEFAULT_THEME];
+    }, [
+        primaryColor
+    ]);
+    return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("circle", {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+            }),
+            /*#__PURE__*/ jsxRuntime.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(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(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(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(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(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() {
+    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() {
+    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(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(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(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(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));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(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(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(React.useState(menuIsOpen), 2), open = _useState[0], setOpen = _useState[1];
+    var _useState1 = _sliced_to_array(React.useState(options), 2), list = _useState1[0], setList = _useState1[1];
+    var _useState2 = _sliced_to_array(React.useState(""), 2), inputValue = _useState2[0], setInputValue = _useState2[1];
+    var ref = React.useRef(null);
+    var searchBoxRef = React.useRef(null);
+    React.useEffect(function() {
+        var formatItem = function(item) {
+            if ("disabled" in item) return item;
+            return _object_spread_props(_object_spread({}, 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
+    ]);
+    React.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 = React.useCallback(function() {
+        if (!isDisabled) {
+            setOpen(!open);
+        }
+    }, [
+        isDisabled,
+        open
+    ]);
+    var closeDropDown = React.useCallback(function() {
+        if (open) setOpen(false);
+    }, [
+        open
+    ]);
+    useOnClickOutside(ref, function() {
+        closeDropDown();
+    });
+    var onPressEnterOrSpace = React.useCallback(function(e) {
+        e.preventDefault();
+        if ((e.code === "Enter" || e.code === "Space") && !isDisabled) {
+            toggle();
+        }
+    }, [
+        isDisabled,
+        toggle
+    ]);
+    var handleValueChange = React.useCallback(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(value).concat([
+                    selected
+                ]));
+            }
+        };
+        if (selected !== value) {
+            update();
+        }
+    }, [
+        closeDropDown,
+        isMultiple,
+        onChange,
+        value
+    ]);
+    var clearValue = React.useCallback(function(e) {
+        e.stopPropagation();
+        onChange(null);
+    }, [
+        onChange
+    ]);
+    var removeItem = React.useCallback(function(e, item) {
+        if (isMultiple && Array.isArray(value) && value.length) {
+            e.stopPropagation();
+            var result = value.filter(function(current) {
+                return item.value !== current.value;
+            });
+            onChange(result.length ? result : null);
+        }
+    }, [
+        isMultiple,
+        onChange,
+        value
+    ]);
+    var getSelectClass = React.useCallback(function() {
+        var ringColor = THEME_DATA.ring[DEFAULT_THEME];
+        if (COLORS.includes(primaryColor)) {
+            ringColor = THEME_DATA.ring[primaryColor];
+        }
+        var borderFocus = THEME_DATA.borderFocus[DEFAULT_THEME];
+        if (COLORS.includes(primaryColor)) {
+            borderFocus = THEME_DATA.borderFocus[primaryColor];
+        }
+        var baseClass = "flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none";
+        var defaultClass = "".concat(baseClass, " ").concat(isDisabled ? "bg-gray-200" : "bg-white hover:border-gray-400 ".concat(borderFocus, " focus:ring ").concat(ringColor));
+        return classNames && classNames.menuButton ? classNames.menuButton({
+            isDisabled: isDisabled
+        }) : defaultClass;
+    }, [
+        classNames,
+        isDisabled,
+        primaryColor
+    ]);
+    var getTagItemClass = React.useCallback(function(item) {
+        var baseClasse = "bg-gray-200 border rounded-sm flex space-x-1";
+        var disabledClass = isDisabled ? "border-gray-500 px-1" : "pl-1";
+        return (classNames === null || classNames === void 0 ? void 0 : classNames.tagItem) ? classNames.tagItem({
+            item: item,
+            isDisabled: isDisabled
+        }) : "".concat(baseClasse, " ").concat(disabledClass);
+    }, [
+        classNames,
+        isDisabled
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(SelectProvider, {
+        otherData: {
+            formatGroupLabel: formatGroupLabel,
+            formatOptionLabel: formatOptionLabel,
+            classNames: classNames
+        },
+        value: value,
+        handleValueChange: handleValueChange,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "relative w-full",
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    "aria-expanded": open,
+                    onKeyDown: onPressEnterOrSpace,
+                    onClick: toggle,
+                    className: getSelectClass(),
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "grow pl-2.5 py-2 pr-2 flex flex-wrap gap-1",
+                            children: !isMultiple ? /*#__PURE__*/ jsxRuntime.jsx("p", {
+                                className: "truncate cursor-default select-none",
+                                children: value && !Array.isArray(value) ? value.label : placeholder
+                            }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                children: [
+                                    value === null && placeholder,
+                                    Array.isArray(value) && value.map(function(item, index) {
+                                        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                            className: getTagItemClass(item),
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx("p", {
+                                                    className: (classNames === null || classNames === void 0 ? void 0 : classNames.tagItemText) ? classNames.tagItemText : "text-gray-600 truncate cursor-default select-none",
+                                                    children: item.label
+                                                }),
+                                                !isDisabled && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                    role: "button",
+                                                    tabIndex: 0,
+                                                    onClick: function(e) {
+                                                        return removeItem(e, item);
+                                                    },
+                                                    className: (classNames === null || classNames === void 0 ? void 0 : classNames.tagItemIconContainer) ? classNames.tagItemIconContainer : "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(CloseIcon, {
+                                                        className: (classNames === null || classNames === void 0 ? void 0 : classNames.tagItemIcon) ? classNames.tagItemIcon : "w-3 h-3 mt-0.5"
+                                                    })
+                                                })
+                                            ]
+                                        }, index);
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "flex flex-none items-center py-1.5",
+                            children: [
+                                loading && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "px-1.5",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Spinner, {
+                                        primaryColor: primaryColor
+                                    })
+                                }),
+                                isClearable && !isDisabled && value !== null && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "px-1.5 cursor-pointer",
+                                    onClick: clearValue,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(CloseIcon, {
+                                        className: (classNames === null || classNames === void 0 ? void 0 : classNames.closeIcon) ? classNames.closeIcon : "w-5 h-5 p-0.5"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "h-full",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                        className: "w-px h-full inline-block text-white bg-gray-300 text-opacity-0"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "px-1.5",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(ChevronIcon, {
+                                        className: "transition duration-300 w-6 h-6 p-0.5".concat(open ? " transform rotate-90 text-gray-500" : " text-gray-300")
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                open && !isDisabled && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: (classNames === null || classNames === void 0 ? void 0 : classNames.menu) ? classNames.menu : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
+                    children: [
+                        isSearchable && /*#__PURE__*/ jsxRuntime.jsx(SearchInput, {
+                            ref: searchBoxRef,
+                            value: inputValue,
+                            placeholder: searchInputPlaceholder,
+                            onChange: function(e) {
+                                if (onSearchInputChange && typeof onSearchInputChange === "function") onSearchInputChange(e);
+                                setInputValue(e.target.value);
+                            }
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Options, {
+                            list: list,
+                            noOptionsMessage: noOptionsMessage,
+                            text: inputValue,
+                            isMultiple: isMultiple,
+                            value: value,
+                            primaryColor: primaryColor || DEFAULT_THEME
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+var InputOTPs = function(param) {
+    var noticeText = param.noticeText, _param_length = param.length, length = _param_length === void 0 ? 6 : _param_length, _param_textClassName = param.textClassName, textClassName = _param_textClassName === void 0 ? "text-sm" : _param_textClassName, _param_ringClassName = param.ringClassName, ringClassName = _param_ringClassName === void 0 ? "" : _param_ringClassName, value = param.value, setValue = param.setValue;
+    var inputs = Array.from({
+        length: length
+    }, function(_, index) {
+        return index + 1;
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(InputOTP, {
+                maxLength: length,
+                value: value,
+                onChange: function(value) {
+                    return setValue(value);
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsx(InputOTPGroup, {
+                    children: inputs.map(function(num, index) {
+                        return /*#__PURE__*/ jsxRuntime.jsx(InputOTPSlot, {
+                            index: index,
+                            ringClassName: ringClassName
+                        });
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: [
+                    textClassName,
+                    "mt-2"
+                ].join(" "),
+                children: value === "" ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+                    children: noticeText
+                }) : null
+            })
+        ]
+    });
+};
+
+exports.Button = input.Button;
+exports.Input = input.Input;
+exports.buttonVariants = input.buttonVariants;
+exports.BaseSwitch = baseSwitch.BaseSwitch;
+exports.Select = baseSwitch.Select;
+exports.SelectContent = baseSwitch.SelectContent;
+exports.SelectGroup = baseSwitch.SelectGroup;
+exports.SelectItem = baseSwitch.SelectItem;
+exports.SelectLabel = baseSwitch.SelectLabel;
+exports.SelectScrollDownButton = baseSwitch.SelectScrollDownButton;
+exports.SelectScrollUpButton = baseSwitch.SelectScrollUpButton;
+exports.SelectSeparator = baseSwitch.SelectSeparator;
+exports.SelectTrigger = baseSwitch.SelectTrigger;
+exports.SelectValue = baseSwitch.SelectValue;
+exports.validateMsg = baseSwitch.validateMsg;
+exports.Checkbox = Checkbox;
+exports.DateRangePicker = DateRangePicker;
+exports.DropDown = DropDown;
+exports.InputOTP = InputOTP;
+exports.InputOTPGroup = InputOTPGroup;
+exports.InputOTPSeparator = InputOTPSeparator;
+exports.InputOTPSlot = InputOTPSlot;
+exports.InputOTPs = InputOTPs;
+exports.ReactDateRange = ReactDateRange;
+exports.Regex = Regex;
+exports.SingleDatePicker = SingleDatePicker;
+exports.Spin = Spin;
+exports.Switch = Switch;
+exports.verifyId = verifyId;
+exports.verifyTaiwanIdIntermediateString = verifyTaiwanIdIntermediateString;
+exports.verifyTaxId = verifyTaxId;