@willphan1712000/frontend 1.0.0 → 1.0.2

package/dist/index.js

@@ -7,6 +7,25 @@ function _array_like_to_array(arr, len) {
 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;
@@ -34,9 +53,54 @@ function _iterable_to_array_limit(arr, i) {
 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 _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
@@ -104,6 +168,9 @@ __export(index_exports, {
     DropdownSelect: function() {
         return DropdownSelect_default;
     },
+    MultiSelect: function() {
+        return MultiSelect_default;
+    },
     OptionSlider: function() {
         return OptionSlider_default;
     },
@@ -124,25 +191,80 @@ function useMyContext() {
 }
 // src/components/DropdownSelect/Dropdown.tsx
 var import_react2 = require("react");
-// scss-module:./dropdownSelect.module.css#scss-module
-var dropdownSelect_module_default = {
-    "select_box": "dropdownSelect-module__select_box___Q8S31",
-    "value": "dropdownSelect-module__value___izaXQ",
-    "close": "dropdownSelect-module__close___axGDo",
-    "element": "dropdownSelect-module__element___Q56x3",
-    "dropdown": "dropdownSelect-module__dropdown___cjfHn",
-    "search_border": "dropdownSelect-module__search_border___xQU5q",
-    "search": "dropdownSelect-module__search___kGmqs"
+// src/components/DropdownSelect/styles.ts
+var styles = {
+    select_box: {
+        borderRadius: "10px",
+        border: "solid 1px #dadada",
+        padding: "5px 10px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        cursor: "pointer"
+    },
+    value: {
+        marginRight: "auto"
+    },
+    close: {
+        borderRadius: "50%",
+        width: "20px",
+        height: "20px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    element: {
+        display: "flex",
+        padding: "5px",
+        borderRadius: "10px",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        cursor: "pointer"
+    },
+    dropdown: {
+        position: "absolute",
+        boxSizing: "border-box",
+        width: "100%",
+        left: "0",
+        display: "flex",
+        flexDirection: "column",
+        border: "solid 1px #dadada",
+        borderRadius: "10px",
+        padding: "5px",
+        maxHeight: "300px",
+        overflowY: "auto",
+        backgroundColor: "white"
+    },
+    search_border: {
+        position: "sticky",
+        top: 0,
+        left: 0,
+        boxSizing: "border-box",
+        width: "100%",
+        backgroundColor: "white",
+        marginBottom: "5px"
+    },
+    search: {
+        width: "100%",
+        borderRadius: "5px",
+        padding: "5px",
+        border: "solid 1px #dadada",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        boxSizing: "border-box"
+    }
 };
+var styles_default = styles;
 // src/components/DropdownSelect/Search.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Search = function(param) {
     var options = param.options, onSearch = param.onSearch;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-        className: dropdownSelect_module_default.search_border,
+        style: styles_default.search_border,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
             placeholder: "Search",
-            className: dropdownSelect_module_default.search,
+            style: styles_default.search,
             id: "search",
             name: "search",
             onChange: function(e) {
@@ -159,7 +281,8 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var Dropdown = function() {
     var _useMyContext = useMyContext(), options = _useMyContext.options, onChange = _useMyContext.onChange, setOpen = _useMyContext.setOpen;
     var _ref = _sliced_to_array((0, import_react2.useState)(true), 2), isVisible = _ref[0], setVisible = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react2.useState)(options), 2), optionsCopy = _ref1[0], setOption = _ref1[1];
+    var _ref1 = _sliced_to_array((0, import_react2.useState)(-1), 2), keyOnHover = _ref1[0], setKeyOnHover = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react2.useState)(options), 2), optionsCopy = _ref2[0], setOption = _ref2[1];
     var dropdownRef = (0, import_react2.useRef)(null);
     var handleResize = function() {
         var dropdown = dropdownRef.current;
@@ -181,13 +304,12 @@ var Dropdown = function() {
         };
     }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
-        className: dropdownSelect_module_default.dropdown,
         ref: dropdownRef,
-        style: isVisible ? {
+        style: isVisible ? _object_spread_props(_object_spread({}, styles_default.dropdown), {
             top: "calc(100% + 5px)"
-        } : {
+        }) : _object_spread_props(_object_spread({}, styles_default.dropdown), {
             bottom: "calc(100% + 5px)"
-        },
+        }),
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Search_default, {
                 options: options,
@@ -195,13 +317,21 @@ var Dropdown = function() {
             }),
             optionsCopy.map(function(option, key) {
                 return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
-                    className: dropdownSelect_module_default.element,
+                    style: _object_spread_props(_object_spread({}, styles_default.element), {
+                        backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
+                    }),
                     onClick: function() {
                         onChange(option.value);
                         setOpen(function(prev) {
                             return !prev;
                         });
                     },
+                    onMouseEnter: function() {
+                        return setKeyOnHover(key);
+                    },
+                    onMouseLeave: function() {
+                        return setKeyOnHover(-1);
+                    },
                     children: option.label
                 }, key);
             })
@@ -215,6 +345,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var DropdownSelect = function(param) {
     var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
     var _ref = _sliced_to_array((0, import_react3.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react3.useState)(false), 2), isHoverClose = _ref1[0], setHoverClose = _ref1[1];
     var selectRef = (0, import_react3.useRef)(null);
     var clickHandler = function(e) {
         var select = selectRef.current;
@@ -243,7 +374,7 @@ var DropdownSelect = function(param) {
             ref: selectRef,
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
-                    className: dropdownSelect_module_default.select_box,
+                    style: styles_default.select_box,
                     onClick: function() {
                         return setOpen(function(prev) {
                             return !prev;
@@ -251,11 +382,13 @@ var DropdownSelect = function(param) {
                     },
                     children: [
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
-                            className: dropdownSelect_module_default.value,
+                            style: styles_default.value,
                             children: value
                         }),
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
-                            className: dropdownSelect_module_default.close,
+                            style: _object_spread_props(_object_spread({}, styles_default.close), {
+                                backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
+                            }),
                             title: "clear",
                             onClick: function() {
                                 onChange("");
@@ -263,6 +396,12 @@ var DropdownSelect = function(param) {
                                     return !prev;
                                 });
                             },
+                            onMouseEnter: function() {
+                                return setHoverClose(true);
+                            },
+                            onMouseLeave: function() {
+                                return setHoverClose(false);
+                            },
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_io.IoMdClose, {})
                         })
                     ]
@@ -275,15 +414,6 @@ var DropdownSelect = function(param) {
 var DropdownSelect_default = DropdownSelect;
 // src/components/RangeSlider/RangeSlider.tsx
 var import_react4 = require("react");
-// scss-module:./rangeSlider.module.css#scss-module
-var rangeSlider_module_default = {
-    "slider_border": "rangeSlider-module__slider_border___CoeFx",
-    "thumb": "rangeSlider-module__thumb___OnFSM",
-    "thumb_shadow": "rangeSlider-module__thumb_shadow___L16TY",
-    "fill": "rangeSlider-module__fill___urGCN",
-    "rest": "rangeSlider-module__rest___pO2pi",
-    "value": "rangeSlider-module__value___Evg0D"
-};
 // src/components/RangeSlider/functions.ts
 function encode(value, min, max) {
     return (parseInt(value) - parseInt(min)) * 100 / (parseInt(max) - parseInt(min));
@@ -291,6 +421,70 @@ function encode(value, min, max) {
 function decode(percent, min, max) {
     return Math.round(parseInt(min) + percent * (parseInt(max) - parseInt(min)));
 }
+// src/components/RangeSlider/styles.ts
+var styles2 = {
+    slider_border: {
+        position: "relative",
+        display: "flex",
+        gap: "5px",
+        flexDirection: "column",
+        height: "10px"
+    },
+    thumb: {
+        width: "17px",
+        height: "17px",
+        cursor: "pointer",
+        position: "absolute",
+        borderRadius: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: 1
+    },
+    thumb_shadow: {
+        content: '""',
+        position: "absolute",
+        top: "-9px",
+        left: "-9px",
+        width: "35px",
+        height: "35px",
+        opacity: 0.2,
+        zIndex: -1,
+        borderRadius: "50%",
+        scale: "0",
+        transition: "scale .1s linear"
+    },
+    fill: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        height: "100%",
+        borderRadius: "5px",
+        cursor: "pointer"
+    },
+    rest: {
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        opacity: 0.3,
+        width: "100%",
+        height: "70%",
+        borderRadius: "5px",
+        cursor: "pointer"
+    },
+    value: {
+        position: "absolute",
+        bottom: "30px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        transformOrigin: "bottom left",
+        backgroundColor: "#f0f0f7",
+        borderRadius: "5px",
+        padding: "5px",
+        scale: "0",
+        transition: "scale .1s linear"
+    }
+};
+var styles_default2 = styles2;
 // src/components/RangeSlider/RangeSlider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var RangeSlider = function(param) {
@@ -347,10 +541,9 @@ var RangeSlider = function(param) {
         isMouseDown
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", {
-        className: rangeSlider_module_default.slider_border,
-        style: {
+        style: _object_spread_props(_object_spread({}, styles_default2.slider_border), {
             width: "".concat(width, "px")
-        },
+        }),
         onMouseDown: function(e) {
             handleDrag(true, e);
             setMouseDown(true);
@@ -362,18 +555,16 @@ var RangeSlider = function(param) {
         ref: sliderBorderRef,
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
-                className: rangeSlider_module_default.fill,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default2.fill), {
                     background: color,
                     width: "".concat(percentage, "%")
-                }
+                })
             }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", {
-                className: rangeSlider_module_default.thumb,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default2.thumb), {
                     background: color,
                     left: "".concat(percentage, "%")
-                },
+                }),
                 onMouseMove: function() {
                     return setHover(true);
                 },
@@ -382,63 +573,107 @@ var RangeSlider = function(param) {
                 },
                 children: [
                     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
-                        className: rangeSlider_module_default.value,
-                        style: {
+                        style: _object_spread_props(_object_spread({}, styles_default2.value), {
                             scale: isMouseDown || isHover ? "1" : "0"
-                        },
+                        }),
                         children: value
                     }),
                     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
-                        className: rangeSlider_module_default.thumb_shadow,
-                        style: {
+                        style: _object_spread_props(_object_spread({}, styles_default2.thumb_shadow), {
                             background: color,
                             scale: isMouseDown || isHover ? "1" : "0"
-                        }
+                        })
                     })
                 ]
             }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
-                className: rangeSlider_module_default.rest,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default2.rest), {
                     background: color
-                }
+                })
             })
         ]
     });
 };
 var RangeSlider_default = RangeSlider;
-// scss-module:./optionSlider.module.css#scss-module
-var optionSlider_module_default = {
-    "border": "optionSlider-module__border___DvXkD",
-    "background": "optionSlider-module__background___P6MQP",
-    "options": "optionSlider-module__options___OLBcd",
-    "element": "optionSlider-module__element___obtjI"
+// src/components/OptionSlider/styles.ts
+var styles3 = {
+    border: {
+        borderRadius: "10px",
+        overflow: "auto",
+        boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+        aspectRatio: "4",
+        display: "flex",
+        flexDirection: "row",
+        position: "relative",
+        scrollbarWidth: "none",
+        msOverflowStyle: "none",
+        boxSizing: "border-box",
+        margin: 0,
+        padding: 0
+    },
+    background: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        opacity: "0.3",
+        boxSizing: "border-box",
+        margin: 0,
+        padding: 0
+    },
+    options: {
+        height: "100%",
+        padding: "5px",
+        gap: "5px",
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        left: 0,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        boxSizing: "border-box",
+        margin: 0
+    },
+    element: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "pointer",
+        width: "auto",
+        height: "100%",
+        aspectRatio: "1 / 1",
+        borderRadius: "50%",
+        overflow: "hidden",
+        border: "solid 1px #000",
+        boxSizing: "border-box",
+        margin: 0,
+        padding: 0
+    }
 };
+var styles_default3 = styles3;
 // src/components/OptionSlider/OptionSlider.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var OptionSlider = function(param) {
     var value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width, options = param.options, _param_color = param.color, color = _param_color === void 0 ? "#f0f0f7" : _param_color;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", {
-        className: optionSlider_module_default.border,
-        style: {
+        style: _object_spread_props(_object_spread({}, styles_default3.border), {
             width: "".concat(width, "px")
-        },
+        }),
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
-                className: optionSlider_module_default.background,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default3.background), {
                     background: color
-                }
+                })
             }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
-                className: optionSlider_module_default.options,
+                style: styles_default3.options,
                 children: options.map(function(option, key) {
                     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
-                        style: {
+                        style: _object_spread_props(_object_spread({}, styles_default3.element), {
                             background: color,
                             border: value === option.value ? "solid 2px #000" : "solid 1px #000"
-                        },
-                        className: optionSlider_module_default.element,
+                        }),
                         onClick: function() {
                             return onChange(option.value);
                         },
@@ -453,12 +688,6 @@ var OptionSlider = function(param) {
 var OptionSlider_default = OptionSlider;
 // src/components/ColorPickerSlider/ColorPickerSlider.tsx
 var import_react5 = require("react");
-// scss-module:./colorPickerSlider.module.css#scss-module
-var colorPickerSlider_module_default = {
-    "border": "colorPickerSlider-module__border___-6cw8",
-    "thumb": "colorPickerSlider-module__thumb___p2fHW",
-    "label": "colorPickerSlider-module__label___Aa0AV"
-};
 // src/components/ColorPickerSlider/functions.ts
 function encode2(color) {
     var h = hexToHsl(color).h;
@@ -562,6 +791,39 @@ function hslToHex(h, s, l) {
     };
     return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b));
 }
+// src/components/ColorPickerSlider/styles.ts
+var styles4 = {
+    border: {
+        background: "linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))",
+        borderRadius: "10px",
+        aspectRatio: 20,
+        cursor: "pointer",
+        appearance: "none",
+        outline: "none",
+        position: "relative"
+    },
+    thumb: {
+        borderRadius: "50%",
+        aspectRatio: 1,
+        position: "absolute",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+        border: "solid 2px #fff"
+    },
+    label: {
+        position: "absolute",
+        bottom: "200%",
+        transform: "translateX(-50%)",
+        borderRadius: "5px",
+        padding: "5px",
+        fontSize: "15px",
+        background: "#f0f0f7",
+        transition: "scale .1s linear",
+        transformOrigin: "bottom left"
+    }
+};
+var styles_default4 = styles4;
 // src/components/ColorPickerSlider/ColorPickerSlider.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ColorPickerSlider = function(param) {
@@ -613,10 +875,9 @@ var ColorPickerSlider = function(param) {
         isMouseDown
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
-        className: colorPickerSlider_module_default.border,
-        style: {
+        style: _object_spread_props(_object_spread({}, styles_default4.border), {
             width: "".concat(width, "px")
-        },
+        }),
         onMouseDown: function(e) {
             handleDrag(true, e);
             setMouseDown(true);
@@ -628,12 +889,11 @@ var ColorPickerSlider = function(param) {
         ref: sliderBorderRef,
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
-                className: colorPickerSlider_module_default.thumb,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default4.thumb), {
                     width: "".concat(parseInt(width) * 0.1, "px"),
                     background: value,
                     left: "".concat(percentage, "%")
-                },
+                }),
                 onMouseMove: function() {
                     return setHover(true);
                 },
@@ -642,21 +902,315 @@ var ColorPickerSlider = function(param) {
                 }
             }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
-                className: colorPickerSlider_module_default.label,
-                style: {
+                style: _object_spread_props(_object_spread({}, styles_default4.label), {
                     left: "".concat(percentage, "%"),
                     scale: isHover || isMouseDown ? "1" : "0"
-                },
+                }),
                 children: value
             })
         ]
     });
 };
 var ColorPickerSlider_default = ColorPickerSlider;
+// src/components/MultiSelect/MultiSelect.tsx
+var import_react8 = require("react");
+// src/components/MultiSelect/context.ts
+var import_react6 = require("react");
+var MyContext2 = (0, import_react6.createContext)(void 0);
+function useMyContext2() {
+    var data = (0, import_react6.useContext)(MyContext2);
+    if (data === void 0) throw new Error("Select context is undefined");
+    return data;
+}
+// src/components/MultiSelect/Dropdown.tsx
+var import_react7 = require("react");
+// src/components/MultiSelect/styles.ts
+var styles5 = {
+    select_box: {
+        borderRadius: "10px",
+        border: "solid 1px #dadada",
+        padding: "5px 10px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        cursor: "pointer"
+    },
+    value: {
+        display: "flex",
+        flexDirection: "row",
+        gap: "15px",
+        flexWrap: "wrap"
+    },
+    eachValue: {
+        borderRadius: "5px",
+        backgroundColor: "#f0f0f7",
+        padding: "5px",
+        position: "relative"
+    },
+    closeEach: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        transform: "translate(50%, -50%)",
+        borderRadius: "50%",
+        backgroundColor: "#fc2c2cf0",
+        aspectRatio: 1,
+        width: "24px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        color: "white",
+        transition: "scale .2s linear",
+        transformOrigin: "top right"
+    },
+    close: {
+        borderRadius: "50%",
+        width: "20px",
+        height: "20px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    element: {
+        display: "flex",
+        padding: "5px",
+        borderRadius: "10px",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        cursor: "pointer"
+    },
+    dropdown: {
+        position: "absolute",
+        boxSizing: "border-box",
+        width: "100%",
+        left: "0",
+        display: "flex",
+        flexDirection: "column",
+        border: "solid 1px #dadada",
+        borderRadius: "10px",
+        padding: "5px",
+        maxHeight: "300px",
+        overflowY: "auto",
+        backgroundColor: "white"
+    },
+    search_border: {
+        position: "sticky",
+        top: 0,
+        left: 0,
+        boxSizing: "border-box",
+        width: "100%",
+        backgroundColor: "white",
+        marginBottom: "5px"
+    },
+    search: {
+        width: "100%",
+        borderRadius: "5px",
+        padding: "5px",
+        border: "solid 1px #dadada",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        boxSizing: "border-box"
+    }
+};
+var styles_default5 = styles5;
+// src/components/MultiSelect/Search.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Search2 = function(param) {
+    var options = param.options, onSearch = param.onSearch;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+        style: styles_default5.search_border,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", {
+            placeholder: "Search",
+            style: styles_default5.search,
+            id: "search",
+            name: "search",
+            onChange: function(e) {
+                return onSearch(options.filter(function(ele) {
+                    return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
+                }));
+            }
+        })
+    });
+};
+var Search_default2 = Search2;
+// src/components/MultiSelect/Dropdown.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Dropdown2 = function() {
+    var _useMyContext2 = useMyContext2(), options = _useMyContext2.options, onChange = _useMyContext2.onChange, setOpen = _useMyContext2.setOpen;
+    var _ref = _sliced_to_array((0, import_react7.useState)(true), 2), isVisible = _ref[0], setVisible = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react7.useState)(-1), 2), keyOnHover = _ref1[0], setKeyOnHover = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react7.useState)(options), 2), optionsCopy = _ref2[0], setOption = _ref2[1];
+    var dropdownRef = (0, import_react7.useRef)(null);
+    var handleResize = function() {
+        var dropdown = dropdownRef.current;
+        var dimension = dropdown.getBoundingClientRect();
+        var distanceToBottom = window.innerHeight - dimension.bottom;
+        var distanceToTop = dimension.top;
+        if (distanceToBottom < 0) {
+            setVisible(false);
+        }
+        if (distanceToTop < 0) {
+            setVisible(true);
+        }
+    };
+    (0, import_react7.useEffect)(function() {
+        handleResize();
+        window.addEventListener("scroll", handleResize);
+        return function() {
+            window.removeEventListener("scroll", handleResize);
+        };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", {
+        ref: dropdownRef,
+        style: isVisible ? _object_spread_props(_object_spread({}, styles_default5.dropdown), {
+            top: "calc(100% + 5px)"
+        }) : _object_spread_props(_object_spread({}, styles_default5.dropdown), {
+            bottom: "calc(100% + 5px)"
+        }),
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Search_default2, {
+                options: options,
+                onSearch: setOption
+            }),
+            optionsCopy.map(function(option, key) {
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
+                    style: _object_spread_props(_object_spread({}, styles_default5.element), {
+                        backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
+                    }),
+                    onClick: function() {
+                        onChange(function(prev) {
+                            if (prev.includes(option.value)) return _to_consumable_array(prev);
+                            return _to_consumable_array(prev).concat([
+                                option.value
+                            ]);
+                        });
+                        setOpen(function(prev) {
+                            return !prev;
+                        });
+                    },
+                    onMouseEnter: function() {
+                        return setKeyOnHover(key);
+                    },
+                    onMouseLeave: function() {
+                        return setKeyOnHover(-1);
+                    },
+                    children: option.label
+                }, key);
+            })
+        ]
+    });
+};
+var Dropdown_default2 = Dropdown2;
+// src/components/MultiSelect/MultiSelect.tsx
+var import_io2 = require("react-icons/io");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MultiSelect = function(param) {
+    var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var _ref = _sliced_to_array((0, import_react8.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react8.useState)(false), 2), isHoverClose = _ref1[0], setHoverClose = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react8.useState)(-1), 2), isHoverCloseEach = _ref2[0], setHoverCloseEach = _ref2[1];
+    var selectRef = (0, import_react8.useRef)(null);
+    var clickHandler = function(e) {
+        var select = selectRef.current;
+        if (!select.contains(e.target)) {
+            setOpen(false);
+        }
+    };
+    (0, import_react8.useEffect)(function() {
+        window.addEventListener("click", clickHandler);
+        return function() {
+            return window.removeEventListener("click", clickHandler);
+        };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MyContext2.Provider, {
+        value: {
+            options: options,
+            value: value,
+            onChange: onChange,
+            setOpen: setOpen
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
+            style: {
+                width: "".concat(width, "px"),
+                position: "relative"
+            },
+            ref: selectRef,
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
+                    style: styles_default5.select_box,
+                    onClick: function() {
+                        return setOpen(function(prev) {
+                            return !prev;
+                        });
+                    },
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+                            style: styles_default5.value,
+                            children: value.map(function(eachValue, key) {
+                                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
+                                    style: styles_default5.eachValue,
+                                    children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
+                                            onMouseEnter: function() {
+                                                setHoverCloseEach(key);
+                                            },
+                                            onMouseLeave: function() {
+                                                setHoverCloseEach(-1);
+                                            },
+                                            title: "Remove this option",
+                                            style: _object_spread_props(_object_spread({}, styles_default5.closeEach), {
+                                                scale: isHoverCloseEach === key ? "1.2" : "1"
+                                            }),
+                                            onClick: function() {
+                                                onChange(function(prev) {
+                                                    return prev.filter(function(o) {
+                                                        return o !== eachValue;
+                                                    });
+                                                });
+                                                setOpen(function(prev) {
+                                                    return !prev;
+                                                });
+                                            },
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_io2.IoMdClose, {})
+                                        }),
+                                        eachValue
+                                    ]
+                                }, key);
+                            })
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+                            style: _object_spread_props(_object_spread({}, styles_default5.close), {
+                                backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
+                            }),
+                            title: "Clear all",
+                            onClick: function() {
+                                onChange([]);
+                                setOpen(function(prev) {
+                                    return !prev;
+                                });
+                            },
+                            onMouseEnter: function() {
+                                return setHoverClose(true);
+                            },
+                            onMouseLeave: function() {
+                                return setHoverClose(false);
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_io2.IoMdClose, {})
+                        })
+                    ]
+                }),
+                open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dropdown_default2, {})
+            ]
+        })
+    });
+};
+var MultiSelect_default = MultiSelect;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
     ColorPickerSlider: ColorPickerSlider,
     DropdownSelect: DropdownSelect,
+    MultiSelect: MultiSelect,
     OptionSlider: OptionSlider,
     RangeSlider: RangeSlider
 });