@willphan1712000/frontend 1.9.0 → 1.9.2

package/dist/index.mjs

@@ -53,6 +53,142 @@ var __async = (__this, __arguments, generator) => {
 // src/components/DropdownSelect/DropdownSelect.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
+// src/components/Icons/X.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var X = (_a) => {
+  var _b = _a, { size = 24, color = "currentColor" } = _b, props = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    })
+  );
+};
+var X_default = X;
+
+// src/components/Icons/TrashCan.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TrashCan = (_a) => {
+  var _b = _a, { size = 24, color = "currentColor" } = _b, props = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 448 512",
+      fill: color
+    }, props), {
+      children: /* @__PURE__ */ jsx2("path", { d: "M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128h384V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z" })
+    })
+  );
+};
+var TrashCan_default = TrashCan;
+
+// src/components/Icons/Edit.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Edit = (_a) => {
+  var _b = _a, { size = 24, color = "currentColor" } = _b, props = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color
+    }, props), {
+      children: /* @__PURE__ */ jsx3("path", { d: "M6.41421 15.89L16.5563 5.74786L15.1421 4.33365L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6474L14.435 2.21233C14.8256 1.8218 15.4587 1.8218 15.8492 2.21233L18.6777 5.04075C19.0682 5.43128 19.0682 6.06444 18.6777 6.45497L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z" })
+    })
+  );
+};
+var Edit_default = Edit;
+
+// src/components/Icons/CloudUpload.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var CloudUpload = (_a) => {
+  var _b = _a, {
+    size = 24,
+    color = "currentColor"
+  } = _b, props = __objRest(_b, [
+    "size",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 512 512"
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            d: "M320 367.79h76c55 0 100-29.21 100-83.6s-53-81.47-96-83.6c-8.89-85.06-71-136.8-144-136.8-69 0-113.44 45.79-128 91.2-60 5.7-112 43.88-112 106.4s54 106.4 120 106.4h56",
+            fill: "none",
+            stroke: color,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "30"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            fill: "none",
+            stroke: color,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "30",
+            d: "M320 255.79l-64-64-64 64M256 448.21V207.79"
+          }
+        )
+      ]
+    })
+  );
+};
+var CloudUpload_default = CloudUpload;
+
+// src/components/Icons/ArrowRotateLeft.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ArrowRotateLeft = (_a) => {
+  var _b = _a, {
+    size = 24,
+    color = "currentColor"
+  } = _b, props = __objRest(_b, [
+    "size",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 512 512",
+      fill: color
+    }, props), {
+      children: /* @__PURE__ */ jsx5("path", { d: "M256 64c-56.8 0-107.9 24.7-143.1 64l47.1 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 192c-17.7 0-32-14.3-32-32L0 32C0 14.3 14.3 0 32 0S64 14.3 64 32l0 54.7C110.9 33.6 179.5 0 256 0 397.4 0 512 114.6 512 256S397.4 512 256 512c-87 0-163.9-43.4-210.1-109.7-10.1-14.5-6.6-34.4 7.9-44.6s34.4-6.6 44.6 7.9c34.8 49.8 92.4 82.3 157.6 82.3 106 0 192-86 192-192S362 64 256 64z" })
+    })
+  );
+};
+var ArrowRotateLeft_default = ArrowRotateLeft;
+
 // src/components/DropdownSelect/context.ts
 import { createContext, useContext } from "react";
 var MyContext = createContext(void 0);
@@ -69,9 +205,13 @@ import { useEffect, useRef, useState } from "react";
 var styles = {
   container: {
     width: "100%",
+    height: "100%",
     position: "relative"
   },
   select_box: {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
     borderRadius: "10px",
     border: "solid 1px #dadada",
     padding: "5px 10px",
@@ -84,6 +224,7 @@ var styles = {
     marginRight: "auto"
   },
   close: {
+    padding: "1%",
     borderRadius: "50%",
     width: "20px",
     height: "20px",
@@ -137,9 +278,9 @@ var styles = {
 var styles_default = styles;
 
 // src/components/DropdownSelect/Search.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var Search = ({ options, onSearch }) => {
-  return /* @__PURE__ */ jsx("div", { style: styles_default.search_border, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx6("div", { style: styles_default.search_border, children: /* @__PURE__ */ jsx6(
     "input",
     {
       placeholder: "Search",
@@ -157,7 +298,7 @@ var Search = ({ options, onSearch }) => {
 var Search_default = Search;
 
 // src/components/DropdownSelect/Dropdown.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var Dropdown = () => {
   const { options, onChange, setOpen } = useMyContext();
   const [isVisible, setVisible] = useState(true);
@@ -183,7 +324,7 @@ var Dropdown = () => {
       window.removeEventListener("scroll", handleResize);
     };
   }, []);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: dropdownRef,
@@ -193,8 +334,8 @@ var Dropdown = () => {
         bottom: "calc(100% + 5px)"
       }),
       children: [
-        /* @__PURE__ */ jsx2(Search_default, { options, onSearch: setOption }),
-        optionsCopy.map((option, key) => /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx7(Search_default, { options, onSearch: setOption }),
+        optionsCopy.map((option, key) => /* @__PURE__ */ jsx7(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default.element), {
@@ -217,8 +358,7 @@ var Dropdown = () => {
 var Dropdown_default = Dropdown;
 
 // src/components/DropdownSelect/DropdownSelect.tsx
-import { IoMdClose } from "react-icons/io";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var DropdownSelect = ({ options, value, onChange }) => {
   const [open, setOpen] = useState2(false);
   const [isHoverClose, setHoverClose] = useState2(false);
@@ -233,7 +373,7 @@ var DropdownSelect = ({ options, value, onChange }) => {
     window.addEventListener("click", clickHandler);
     return () => window.removeEventListener("click", clickHandler);
   }, []);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx8(
     MyContext.Provider,
     {
       value: {
@@ -242,15 +382,15 @@ var DropdownSelect = ({ options, value, onChange }) => {
         onChange,
         setOpen
       },
-      children: /* @__PURE__ */ jsxs2("div", { style: styles_default.container, ref: selectRef, children: [
-        /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs4("div", { style: styles_default.container, ref: selectRef, children: [
+        /* @__PURE__ */ jsxs4(
           "div",
           {
             style: styles_default.select_box,
             onClick: () => setOpen((prev) => !prev),
             children: [
-              /* @__PURE__ */ jsx3("div", { style: styles_default.value, children: value }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx8("div", { style: styles_default.value, children: value }),
+              /* @__PURE__ */ jsx8(
                 "div",
                 {
                   style: __spreadProps(__spreadValues({}, styles_default.close), {
@@ -263,13 +403,13 @@ var DropdownSelect = ({ options, value, onChange }) => {
                   },
                   onMouseEnter: () => setHoverClose(true),
                   onMouseLeave: () => setHoverClose(false),
-                  children: /* @__PURE__ */ jsx3(IoMdClose, {})
+                  children: /* @__PURE__ */ jsx8(X_default, {})
                 }
               )
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx3(Dropdown_default, {})
+        open && /* @__PURE__ */ jsx8(Dropdown_default, {})
       ] })
     }
   );
@@ -355,7 +495,7 @@ var styles2 = {
 var styles_default2 = styles2;
 
 // src/components/RangeSlider/RangeSlider.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var RangeSlider = ({
   min = "0",
   max = "100",
@@ -413,7 +553,7 @@ var RangeSlider = ({
       document.removeEventListener("touchend", handleMouseUp);
     };
   }, [isMouseDown]);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       style: __spreadProps(__spreadValues({}, styles_default2.slider_border), {
@@ -429,7 +569,7 @@ var RangeSlider = ({
       },
       ref: sliderBorderRef,
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx9(
           "span",
           {
             style: __spreadProps(__spreadValues({}, styles_default2.fill), {
@@ -438,7 +578,7 @@ var RangeSlider = ({
             })
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs5(
           "span",
           {
             style: __spreadProps(__spreadValues({}, styles_default2.thumb), {
@@ -448,7 +588,7 @@ var RangeSlider = ({
             onMouseMove: () => setHover(true),
             onMouseLeave: () => setHover(false),
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx9(
                 "span",
                 {
                   style: __spreadProps(__spreadValues({}, styles_default2.value), {
@@ -457,7 +597,7 @@ var RangeSlider = ({
                   children: value
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx9(
                 "span",
                 {
                   style: __spreadProps(__spreadValues({}, styles_default2.thumb_shadow), {
@@ -469,7 +609,7 @@ var RangeSlider = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx9(
           "span",
           {
             style: __spreadProps(__spreadValues({}, styles_default2.rest), {
@@ -497,7 +637,9 @@ var styles3 = {
     msOverflowStyle: "none",
     boxSizing: "border-box",
     margin: 0,
-    padding: 0
+    padding: 0,
+    width: "100%",
+    height: "100%"
   },
   background: {
     position: "relative",
@@ -542,22 +684,22 @@ var styles3 = {
 var styles_default3 = styles3;
 
 // src/components/OptionSlider/OptionSlider.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var OptionSlider = ({
   value,
   onChange,
-  width = "200",
   options,
   color = "#f0f0f7"
 }) => {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       style: __spreadProps(__spreadValues({}, styles_default3.border), {
-        width: `${width}px`
+        width: `100%`,
+        height: `100%`
       }),
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default3.background), {
@@ -565,7 +707,7 @@ var OptionSlider = ({
             })
           }
         ),
-        /* @__PURE__ */ jsx5("div", { style: styles_default3.options, children: options.map((option, key) => /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx10("div", { style: styles_default3.options, children: options.map((option, key) => /* @__PURE__ */ jsx10(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default3.element), {
@@ -696,7 +838,7 @@ var styles4 = {
 var styles_default4 = styles4;
 
 // src/components/ColorPickerSlider/ColorPickerSlider.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var ColorPickerSlider = ({ value, onChange, width = "200" }) => {
   let percentage = encode2(value);
   const sliderBorderRef = useRef4(null);
@@ -742,7 +884,7 @@ var ColorPickerSlider = ({ value, onChange, width = "200" }) => {
       document.removeEventListener("touchend", handleMouseUp);
     };
   }, [isMouseDown]);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       style: __spreadProps(__spreadValues({}, styles_default4.border), {
@@ -758,7 +900,7 @@ var ColorPickerSlider = ({ value, onChange, width = "200" }) => {
       },
       ref: sliderBorderRef,
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default4.thumb), {
@@ -770,7 +912,7 @@ var ColorPickerSlider = ({ value, onChange, width = "200" }) => {
             onMouseLeave: () => setHover(false)
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default4.label), {
@@ -803,7 +945,15 @@ import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } fro
 
 // src/components/MultiSelect/styles.ts
 var styles5 = {
+  container: {
+    width: "100%",
+    height: "100%",
+    position: "relative"
+  },
   select_box: {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
     borderRadius: "10px",
     border: "solid 1px #dadada",
     padding: "5px 10px",
@@ -819,28 +969,28 @@ var styles5 = {
     flexWrap: "wrap"
   },
   eachValue: {
+    height: "100%",
     borderRadius: "5px",
     backgroundColor: "#f0f0f7",
     padding: "5px",
-    position: "relative"
+    position: "relative",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    fontSize: "1rem",
+    gap: "5px"
   },
   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"
+    color: "#000"
   },
   close: {
+    padding: "1%",
     borderRadius: "50%",
     width: "20px",
     height: "20px",
@@ -854,7 +1004,8 @@ var styles5 = {
     borderRadius: "10px",
     justifyContent: "flex-start",
     alignItems: "center",
-    cursor: "pointer"
+    cursor: "pointer",
+    fontSize: "1rem"
   },
   dropdown: {
     position: "absolute",
@@ -893,9 +1044,9 @@ var styles5 = {
 var styles_default5 = styles5;
 
 // src/components/MultiSelect/Search.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Search2 = ({ options, onSearch }) => {
-  return /* @__PURE__ */ jsx7("div", { style: styles_default5.search_border, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx12("div", { style: styles_default5.search_border, children: /* @__PURE__ */ jsx12(
     "input",
     {
       placeholder: "Search...",
@@ -913,7 +1064,7 @@ var Search2 = ({ options, onSearch }) => {
 var Search_default2 = Search2;
 
 // src/components/MultiSelect/Dropdown.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var Dropdown2 = () => {
   const { options, onChange, setOpen } = useMyContext2();
   const [isVisible, setVisible] = useState5(true);
@@ -939,7 +1090,7 @@ var Dropdown2 = () => {
       window.removeEventListener("scroll", handleResize);
     };
   }, []);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       ref: dropdownRef,
@@ -949,26 +1100,29 @@ var Dropdown2 = () => {
         bottom: "calc(100% + 5px)"
       }),
       children: [
-        /* @__PURE__ */ jsx8(Search_default2, { options, onSearch: setOption }),
-        optionsCopy.map((option, key) => /* @__PURE__ */ jsx8(
-          "div",
-          {
-            style: __spreadProps(__spreadValues({}, styles_default5.element), {
-              backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
-            }),
-            onClick: () => {
-              onChange((prev) => {
-                if (prev.includes(option.value)) return [...prev];
-                return [...prev, option.value];
-              });
-              setOpen((prev) => !prev);
+        /* @__PURE__ */ jsx13(Search_default2, { options, onSearch: setOption }),
+        optionsCopy.map(
+          (option, key) => /* @__PURE__ */ jsx13(
+            "div",
+            {
+              style: __spreadProps(__spreadValues({}, styles_default5.element), {
+                backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
+              }),
+              onClick: () => {
+                onChange((prev) => {
+                  if (prev.includes(option.value))
+                    return [...prev];
+                  return [...prev, option.value];
+                });
+                setOpen((prev) => !prev);
+              },
+              onMouseEnter: () => setKeyOnHover(key),
+              onMouseLeave: () => setKeyOnHover(-1),
+              children: option.label
             },
-            onMouseEnter: () => setKeyOnHover(key),
-            onMouseLeave: () => setKeyOnHover(-1),
-            children: option.label
-          },
-          key
-        ))
+            key
+          )
+        )
       ]
     }
   );
@@ -976,9 +1130,8 @@ var Dropdown2 = () => {
 var Dropdown_default2 = Dropdown2;
 
 // src/components/MultiSelect/MultiSelect.tsx
-import { IoMdClose as IoMdClose2 } from "react-icons/io";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var MultiSelect = ({ options, value, onChange, width = "200" }) => {
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var MultiSelect = ({ options, value, onChange }) => {
   const [open, setOpen] = useState6(false);
   const [isHoverClose, setHoverClose] = useState6(false);
   const [isHoverCloseEach, setHoverCloseEach] = useState6(-1);
@@ -993,7 +1146,7 @@ var MultiSelect = ({ options, value, onChange, width = "200" }) => {
     window.addEventListener("click", clickHandler);
     return () => window.removeEventListener("click", clickHandler);
   }, []);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx14(
     MyContext2.Provider,
     {
       value: {
@@ -1002,69 +1155,57 @@ var MultiSelect = ({ options, value, onChange, width = "200" }) => {
         onChange,
         setOpen
       },
-      children: /* @__PURE__ */ jsxs7(
-        "div",
-        {
-          style: {
-            width: `${width}px`,
-            position: "relative"
-          },
-          ref: selectRef,
-          children: [
-            /* @__PURE__ */ jsxs7(
-              "div",
-              {
-                style: styles_default5.select_box,
-                onClick: () => setOpen((prev) => !prev),
-                children: [
-                  /* @__PURE__ */ jsx9("div", { style: styles_default5.value, children: value.map((eachValue, key) => /* @__PURE__ */ jsxs7("div", { style: styles_default5.eachValue, children: [
-                    /* @__PURE__ */ jsx9(
-                      "span",
-                      {
-                        onMouseEnter: () => {
-                          setHoverCloseEach(key);
-                        },
-                        onMouseLeave: () => {
-                          setHoverCloseEach(-1);
-                        },
-                        title: "Remove this option",
-                        style: __spreadProps(__spreadValues({}, styles_default5.closeEach), {
-                          scale: isHoverCloseEach === key ? "1.2" : "1"
-                        }),
-                        onClick: () => {
-                          onChange(
-                            (prev) => prev.filter((o) => o !== eachValue)
-                          );
-                          setOpen((prev) => !prev);
-                        },
-                        children: /* @__PURE__ */ jsx9(IoMdClose2, {})
-                      }
-                    ),
-                    eachValue
-                  ] }, key)) }),
-                  /* @__PURE__ */ jsx9(
-                    "div",
-                    {
-                      style: __spreadProps(__spreadValues({}, styles_default5.close), {
-                        backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
-                      }),
-                      title: "Clear all",
-                      onClick: () => {
-                        onChange([]);
-                        setOpen((prev) => !prev);
-                      },
-                      onMouseEnter: () => setHoverClose(true),
-                      onMouseLeave: () => setHoverClose(false),
-                      children: /* @__PURE__ */ jsx9(IoMdClose2, {})
-                    }
-                  )
-                ]
-              }
-            ),
-            open && /* @__PURE__ */ jsx9(Dropdown_default2, {})
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxs9("div", { style: styles_default5.container, ref: selectRef, children: [
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            style: styles_default5.select_box,
+            onClick: () => setOpen((prev) => !prev),
+            children: [
+              /* @__PURE__ */ jsx14("div", { style: styles_default5.value, children: value.map((eachValue, key) => /* @__PURE__ */ jsxs9("div", { style: styles_default5.eachValue, children: [
+                eachValue,
+                /* @__PURE__ */ jsx14(
+                  "span",
+                  {
+                    onMouseEnter: () => {
+                      setHoverCloseEach(key);
+                    },
+                    onMouseLeave: () => {
+                      setHoverCloseEach(-1);
+                    },
+                    title: "Remove this option",
+                    style: __spreadValues({}, styles_default5.closeEach),
+                    onClick: () => {
+                      onChange(
+                        (prev) => prev.filter((o) => o !== eachValue)
+                      );
+                      setOpen((prev) => !prev);
+                    },
+                    children: /* @__PURE__ */ jsx14(X_default, { size: "20" })
+                  }
+                )
+              ] }, key)) }),
+              /* @__PURE__ */ jsx14(
+                "div",
+                {
+                  style: __spreadProps(__spreadValues({}, styles_default5.close), {
+                    backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
+                  }),
+                  title: "Clear all",
+                  onClick: () => {
+                    onChange([]);
+                    setOpen((prev) => !prev);
+                  },
+                  onMouseEnter: () => setHoverClose(true),
+                  onMouseLeave: () => setHoverClose(false),
+                  children: /* @__PURE__ */ jsx14(X_default, {})
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx14(Dropdown_default2, {})
+      ] })
     }
   );
 };
@@ -1161,7 +1302,7 @@ var styles6 = (first, second) => {
 var styles_default6 = styles6;
 
 // src/components/Buttons/gradient/Gradient.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var Gradient = () => {
   const data = useButtonContext();
   const styles12 = styles_default6(data.first, data.second);
@@ -1177,23 +1318,23 @@ var Gradient = () => {
       return controls.stop;
     }
   }, [data.isLoading, angle]);
-  return /* @__PURE__ */ jsxs8("div", { style: styles12.container, children: [
-    /* @__PURE__ */ jsx10("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ jsxs8("div", { style: styles12.labelWrapper, children: [
-      /* @__PURE__ */ jsx10("div", { style: styles12.labelBefore }),
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { style: styles12.container, children: [
+    /* @__PURE__ */ jsx15("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ jsxs10("div", { style: styles12.labelWrapper, children: [
+      /* @__PURE__ */ jsx15("div", { style: styles12.labelBefore }),
+      /* @__PURE__ */ jsx15(
         "div",
         {
           style: __spreadProps(__spreadValues({}, styles12.label), { backgroundColor: data.main }),
-          children: /* @__PURE__ */ jsxs8("p", { style: __spreadProps(__spreadValues({}, styles12.p), { color: `${data.text}` }), children: [
+          children: /* @__PURE__ */ jsxs10("p", { style: __spreadProps(__spreadValues({}, styles12.p), { color: `${data.text}` }), children: [
             data.children,
             " ",
             data.content
           ] })
         }
       ),
-      /* @__PURE__ */ jsx10("div", { style: styles12.labelAfter })
+      /* @__PURE__ */ jsx15("div", { style: styles12.labelAfter })
     ] }) })),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx15(
       motion.div,
       {
         style: __spreadProps(__spreadValues({}, styles12.btnAfter), {
@@ -1269,26 +1410,26 @@ var styles7 = (first) => {
 var styles_default7 = styles7;
 
 // src/components/Buttons/solid/Solid.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var Solid = () => {
   const data = useButtonContext();
   const styles12 = styles_default7(data.first);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       style: {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsx11("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx11("div", { style: styles12.labelBefore }),
-          /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx16("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ jsxs11("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx16("div", { style: styles12.labelBefore }),
+          /* @__PURE__ */ jsx16(
             "div",
             {
               style: __spreadProps(__spreadValues({}, styles12.label), {
                 backgroundColor: data.main
               }),
-              children: /* @__PURE__ */ jsxs9(
+              children: /* @__PURE__ */ jsxs11(
                 "p",
                 {
                   style: __spreadProps(__spreadValues({}, styles12.p), {
@@ -1303,9 +1444,9 @@ var Solid = () => {
               )
             }
           ),
-          /* @__PURE__ */ jsx11("div", { style: styles12.labelAfter })
+          /* @__PURE__ */ jsx16("div", { style: styles12.labelAfter })
         ] }) })),
-        /* @__PURE__ */ jsx11("div", { style: styles12.btnAfter })
+        /* @__PURE__ */ jsx16("div", { style: styles12.btnAfter })
       ]
     }
   );
@@ -1313,7 +1454,7 @@ var Solid = () => {
 var Solid_default = Solid;
 
 // src/components/Buttons/Button.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var ButtonContext = createContext3(void 0);
 function useButtonContext() {
   const data = useContext3(ButtonContext);
@@ -1344,7 +1485,7 @@ var Button = (_a) => {
   ]);
   switch (buttonType) {
     case "gradient":
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx17(
         ButtonContext.Provider,
         {
           value: {
@@ -1357,11 +1498,11 @@ var Button = (_a) => {
             isLoading,
             children
           },
-          children: /* @__PURE__ */ jsx12(Gradient_default, {})
+          children: /* @__PURE__ */ jsx17(Gradient_default, {})
         }
       );
     case "solid":
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx17(
         ButtonContext.Provider,
         {
           value: {
@@ -1373,11 +1514,11 @@ var Button = (_a) => {
             isLoading,
             children
           },
-          children: /* @__PURE__ */ jsx12(Solid_default, {})
+          children: /* @__PURE__ */ jsx17(Solid_default, {})
         }
       );
     default:
-      return /* @__PURE__ */ jsxs10("button", __spreadProps(__spreadValues({}, props), { children: [
+      return /* @__PURE__ */ jsxs12("button", __spreadProps(__spreadValues({}, props), { children: [
         children,
         " ",
         content
@@ -1414,7 +1555,7 @@ var styles8 = (first) => {
 var styles_default8 = styles8;
 
 // src/components/Buttons/modern/Modern.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Modern = (_a) => {
   var _b = _a, {
     first = "#fff",
@@ -1442,7 +1583,7 @@ var Modern = (_a) => {
   const borderFirst = `solid 1px ${first}`;
   const shadowTransparent = `${transparentColor} 0px 0px 15px 2px`;
   const borderTransparent = `solid 1px ${transparentColor}`;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx18(
     "a",
     __spreadProps(__spreadValues({
       style: __spreadValues(__spreadProps(__spreadValues({}, styles_default8(first).btn), {
@@ -1458,11 +1599,6 @@ var Modern = (_a) => {
 };
 var Modern_default = Modern;
 
-// src/components/Avatar/Avatar.tsx
-import { IoCloudUploadOutline } from "react-icons/io5";
-import { FaTrashCan } from "react-icons/fa6";
-import { RiEditLine } from "react-icons/ri";
-
 // src/components/Avatar/styles.ts
 var others = {
   iconSize: "20"
@@ -1515,7 +1651,7 @@ var styles_default9 = styles9;
 
 // src/components/Avatar/Avatar.tsx
 import { useEffect as useEffect8, useRef as useRef7, useState as useState8 } from "react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var Avatar = ({ src, setValue, options }) => {
   const [isOpen, setOpen] = useState8(false);
   const [isNew, setNew] = useState8(false);
@@ -1537,8 +1673,8 @@ var Avatar = ({ src, setValue, options }) => {
       });
     })();
   }, []);
-  return /* @__PURE__ */ jsxs11("div", { style: styles_default9.container, children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs13("div", { style: styles_default9.container, children: [
+    /* @__PURE__ */ jsx19(
       ImageEditor_default,
       {
         src,
@@ -1548,8 +1684,8 @@ var Avatar = ({ src, setValue, options }) => {
         isNew
       }
     ),
-    /* @__PURE__ */ jsx14(Image_default, { src, style: styles_default9.image }),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsx19(Image_default, { src, style: styles_default9.image }),
+    /* @__PURE__ */ jsxs13(
       Button_default,
       {
         style: styles_default9.upload,
@@ -1558,12 +1694,12 @@ var Avatar = ({ src, setValue, options }) => {
           return (_a = uploadImageRef.current) == null ? void 0 : _a.click();
         },
         children: [
-          /* @__PURE__ */ jsx14(IoCloudUploadOutline, { size: others.iconSize }),
+          /* @__PURE__ */ jsx19(CloudUpload_default, { size: others.iconSize }),
           "Upload"
         ]
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx19(
       UploadImage_default,
       {
         ref: uploadImageRef,
@@ -1574,7 +1710,7 @@ var Avatar = ({ src, setValue, options }) => {
         }
       }
     ),
-    isAbleToRemove && /* @__PURE__ */ jsxs11(
+    isAbleToRemove && /* @__PURE__ */ jsxs13(
       Button_default,
       {
         style: styles_default9.remove,
@@ -1584,18 +1720,18 @@ var Avatar = ({ src, setValue, options }) => {
           setNew((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx14(FaTrashCan, { size: others.iconSize, color: "red" }),
+          /* @__PURE__ */ jsx19(TrashCan_default, { size: others.iconSize, color: "red" }),
           "Remove"
         ]
       }
     ),
-    isAbleToEdit && /* @__PURE__ */ jsxs11(
+    isAbleToEdit && /* @__PURE__ */ jsxs13(
       Button_default,
       {
         style: styles_default9.edit,
         onClick: () => setOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ jsx14(RiEditLine, { size: others.iconSize }),
+          /* @__PURE__ */ jsx19(Edit_default, { size: others.iconSize }),
           "Edit"
         ]
       }
@@ -1617,7 +1753,8 @@ var others2 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 1px"
+  border: "solid 1px",
+  backgroundColor: "#fff"
 };
 var styles10 = {
   input: {
@@ -1627,7 +1764,9 @@ var styles10 = {
     border: `${others2.border} ${others2.borderRelease}`,
     borderRadius: "6px",
     padding: "10px",
-    outline: "none"
+    outline: "none",
+    backgroundColor: others2.backgroundColor,
+    color: others2.textRelease
   },
   container: {
     width: "100%",
@@ -1641,13 +1780,14 @@ var styles10 = {
     transform: "translateY(-50%)",
     transition: "all .1s linear",
     padding: "0px 5px",
-    backgroundColor: "white"
+    backgroundColor: others2.backgroundColor,
+    color: others2.textRelease
   }
 };
 var InputGoogle_styles_default = styles10;
 
 // src/components/Input/InputGoogle/InputGoogle.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var InputGoogle = (_a) => {
   var _b = _a, {
     value = "",
@@ -1664,8 +1804,11 @@ var InputGoogle = (_a) => {
   const [isFocus, setFocus] = useState9(false);
   const spanRef = useRef8(null);
   const inputRef = useRef8(null);
-  const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
-  const labelColorWhenFocused = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
+  const backgroundColor = (options == null ? void 0 : options.backgroundColor) ? options.backgroundColor : others2.backgroundColor;
+  const textColor = (options == null ? void 0 : options.textColor) ? options.textColor : others2.textRelease;
+  const borderColor = (options == null ? void 0 : options.borderColor) ? options.borderColor : others2.borderRelease;
+  const borderWhenFocused = isFocus ? `${others2.border} ${(options == null ? void 0 : options.focusColor) ? options.focusColor : others2.borderFocus}` : `${others2.border} ${borderColor}`;
+  const labelColorWhenFocused = isFocus ? `${(options == null ? void 0 : options.focusColor) ? options.focusColor : others2.textFocus}` : `${textColor}`;
   function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others2.topFocus;
@@ -1694,8 +1837,8 @@ var InputGoogle = (_a) => {
   useEffect9(() => {
     if (value) spanPositionWhenFocused();
   }, [value]);
-  return /* @__PURE__ */ jsxs12("div", { style: InputGoogle_styles_default.container, children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs14("div", { style: InputGoogle_styles_default.container, children: [
+    /* @__PURE__ */ jsx20(
       "input",
       __spreadValues({
         id: crypto.randomUUID(),
@@ -1707,18 +1850,21 @@ var InputGoogle = (_a) => {
         },
         type: "text",
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.input), {
-          border: borderWhenFocused
+          border: borderWhenFocused,
+          backgroundColor,
+          color: textColor
         }),
         onFocus,
         onBlur: offFocus
       }, props)
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx20(
       "span",
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.label), {
-          color: labelColorWhenFocused
+          color: labelColorWhenFocused,
+          backgroundColor
         }),
         onClick: focus,
         children: label
@@ -1742,7 +1888,8 @@ var others3 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 1px"
+  border: "solid 1px",
+  backgroundColor: "#fff"
 };
 var styles11 = {
   input: {
@@ -1753,7 +1900,9 @@ var styles11 = {
     borderRadius: "6px",
     padding: "10px",
     outline: "none",
-    resize: "none"
+    resize: "none",
+    backgroundColor: others3.backgroundColor,
+    color: others3.textRelease
   },
   container: {
     width: "100%",
@@ -1769,13 +1918,14 @@ var styles11 = {
     transform: "translateY(-50%)",
     transition: "all .1s linear",
     padding: "0px 5px",
-    backgroundColor: "white"
+    backgroundColor: others3.backgroundColor,
+    color: others3.textRelease
   }
 };
 var TextArea_styles_default = styles11;
 
 // src/components/Input/TextArea/TextArea.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var TextArea = (_a) => {
   var _b = _a, {
     value = "",
@@ -1792,8 +1942,11 @@ var TextArea = (_a) => {
   const [isFocus, setFocus] = useState10(false);
   const spanRef = useRef9(null);
   const inputRef = useRef9(null);
-  const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
-  const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
+  const backgroundColor = (options == null ? void 0 : options.backgroundColor) ? options.backgroundColor : others3.backgroundColor;
+  const textColor = (options == null ? void 0 : options.textColor) ? options.textColor : others3.textRelease;
+  const borderColor = (options == null ? void 0 : options.borderColor) ? options.borderColor : others3.borderRelease;
+  const borderWhenFocused = isFocus ? `${others3.border} ${(options == null ? void 0 : options.focusColor) ? options.focusColor : others3.borderFocus}` : `${others3.border} ${borderColor}`;
+  const labelColorWhenFocused = isFocus ? `${(options == null ? void 0 : options.focusColor) ? options.focusColor : others3.textFocus}` : `${textColor}`;
   function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others3.topFocus;
@@ -1822,8 +1975,8 @@ var TextArea = (_a) => {
   useEffect10(() => {
     if (value) spanPositionWhenFocused();
   }, [value]);
-  return /* @__PURE__ */ jsxs13("div", { style: TextArea_styles_default.container, children: [
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs15("div", { style: TextArea_styles_default.container, children: [
+    /* @__PURE__ */ jsx21(
       "textarea",
       __spreadValues({
         id: crypto.randomUUID(),
@@ -1832,18 +1985,21 @@ var TextArea = (_a) => {
         value,
         onChange: (e) => setValue(e.target.value),
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.input), {
-          border: inputBorder
+          border: borderWhenFocused,
+          backgroundColor,
+          color: textColor
         }),
         onFocus,
         onBlur: offFocus
       }, props)
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx21(
       "span",
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.label), {
-          color: labelTextColor
+          color: labelColorWhenFocused,
+          backgroundColor
         }),
         onClick: focus,
         children: label
@@ -1855,7 +2011,7 @@ var TextArea_default = TextArea;
 
 // src/components/Input/InputFile.tsx
 import { useState as useState11 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var InputFile = (_a) => {
   var _b = _a, {
     file,
@@ -1870,7 +2026,7 @@ var InputFile = (_a) => {
     "acceptType"
   ]);
   const [key, setKey] = useState11(Date.now());
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx22(
     "input",
     __spreadValues({
       id: crypto.randomUUID(),
@@ -1894,7 +2050,7 @@ var InputFile = (_a) => {
 var InputFile_default = InputFile;
 
 // src/components/Image/UploadImage.tsx
-import { Fragment, jsx as jsx18 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx23 } from "react/jsx-runtime";
 var UploadImage = (_a) => {
   var _b = _a, {
     setSrc = () => {
@@ -1909,7 +2065,7 @@ var UploadImage = (_a) => {
       setSrc(src);
     });
   }
-  return /* @__PURE__ */ jsx18(Fragment, { children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx23(Fragment, { children: /* @__PURE__ */ jsx23(
     InputFile_default,
     __spreadProps(__spreadValues({
       onChoose: handleSetSrc,
@@ -1922,10 +2078,10 @@ var UploadImage = (_a) => {
 var UploadImage_default = UploadImage;
 
 // src/components/Image/Image.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Image = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx24(
     "img",
     __spreadProps(__spreadValues({
       style: { width: "100%", height: "100%" }
@@ -2495,8 +2651,7 @@ var MainElements_styles_default = MainElementStyles;
 
 // src/components/Image/ImageEditor/MainElements/Rotate.tsx
 import { useEffect as useEffect11, useState as useState12 } from "react";
-import { FaArrowRotateLeft } from "react-icons/fa6";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var Rotate = () => {
   const [rotate, setRotate] = useState12(false);
   const { transformOperation: transformOperation2, refs } = useMyContext3();
@@ -2529,8 +2684,8 @@ var Rotate = () => {
       controller.abort();
     };
   }, []);
-  return /* @__PURE__ */ jsxs14(Fragment2, { children: [
-    /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
+    /* @__PURE__ */ jsxs16(
       "div",
       {
         ref: refs.rotate,
@@ -2544,9 +2699,9 @@ var Rotate = () => {
           touchEvent.rotate(e, { top: true });
         },
         children: [
-          /* @__PURE__ */ jsx20("div", { style: handleBackground(rotate) }),
-          /* @__PURE__ */ jsx20(FaArrowRotateLeft, { size: "15" }),
-          rotate && /* @__PURE__ */ jsxs14(
+          /* @__PURE__ */ jsx25("div", { style: handleBackground(rotate) }),
+          /* @__PURE__ */ jsx25(ArrowRotateLeft_default, { size: "15" }),
+          rotate && /* @__PURE__ */ jsxs16(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2561,7 +2716,7 @@ var Rotate = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs16(
       "div",
       {
         ref: refs.rotateBottom,
@@ -2575,9 +2730,9 @@ var Rotate = () => {
           touchEvent.rotate(e, { bottom: true });
         },
         children: [
-          /* @__PURE__ */ jsx20("div", { style: handleBackground(rotate) }),
-          /* @__PURE__ */ jsx20(FaArrowRotateLeft, { size: "15" }),
-          rotate && /* @__PURE__ */ jsxs14(
+          /* @__PURE__ */ jsx25("div", { style: handleBackground(rotate) }),
+          /* @__PURE__ */ jsx25(ArrowRotateLeft_default, { size: "15" }),
+          rotate && /* @__PURE__ */ jsxs16(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2599,7 +2754,7 @@ var Rotate = () => {
 var Rotate_default = Rotate;
 
 // src/components/Image/ImageEditor/MainElements/MainElements.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var MainElements = () => {
   const {
     refs,
@@ -2658,9 +2813,9 @@ var MainElements = () => {
       controller.abort();
     };
   }, [reRender]);
-  return /* @__PURE__ */ jsxs15("div", { ref: refs.container, style: MainElements_styles_default.container, children: [
-    /* @__PURE__ */ jsx21("div", { ref: refs.frame, style: MainElements_styles_default.frame, children: /* @__PURE__ */ jsx21("img", { src: originalSrc, style: MainElements_styles_default.img, ref: imgRefs.img }) }),
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17("div", { ref: refs.container, style: MainElements_styles_default.container, children: [
+    /* @__PURE__ */ jsx26("div", { ref: refs.frame, style: MainElements_styles_default.frame, children: /* @__PURE__ */ jsx26("img", { src: originalSrc, style: MainElements_styles_default.img, ref: imgRefs.img }) }),
+    /* @__PURE__ */ jsxs17(
       "div",
       {
         style: MainElements_styles_default.controller,
@@ -2668,7 +2823,7 @@ var MainElements = () => {
         onMouseDown: (e) => mouseEvent.drag(e),
         onTouchStart: (e) => touchEvent.drag(e),
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx26(
             "div",
             {
               ref: refs.topLeft,
@@ -2685,10 +2840,10 @@ var MainElements = () => {
                   topLeft: true
                 });
               },
-              children: /* @__PURE__ */ jsx21("div", { style: handleBackground(topLeft) })
+              children: /* @__PURE__ */ jsx26("div", { style: handleBackground(topLeft) })
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx26(
             "div",
             {
               ref: refs.topRight,
@@ -2705,10 +2860,10 @@ var MainElements = () => {
                   topRight: true
                 });
               },
-              children: /* @__PURE__ */ jsx21("div", { style: handleBackground(topRight) })
+              children: /* @__PURE__ */ jsx26("div", { style: handleBackground(topRight) })
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx26(
             "div",
             {
               ref: refs.bottomLeft,
@@ -2725,10 +2880,10 @@ var MainElements = () => {
                   bottomLeft: true
                 });
               },
-              children: /* @__PURE__ */ jsx21("div", { style: handleBackground(bottomLeft) })
+              children: /* @__PURE__ */ jsx26("div", { style: handleBackground(bottomLeft) })
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx26(
             "div",
             {
               ref: refs.bottomRight,
@@ -2745,11 +2900,11 @@ var MainElements = () => {
                   bottomRight: true
                 });
               },
-              children: /* @__PURE__ */ jsx21("div", { style: handleBackground(bottomRight) })
+              children: /* @__PURE__ */ jsx26("div", { style: handleBackground(bottomRight) })
             }
           ),
-          /* @__PURE__ */ jsx21(Rotate_default, {}),
-          (topLeft || topRight || bottomLeft || bottomRight) && /* @__PURE__ */ jsxs15(
+          /* @__PURE__ */ jsx26(Rotate_default, {}),
+          (topLeft || topRight || bottomLeft || bottomRight) && /* @__PURE__ */ jsxs17(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2772,9 +2927,9 @@ var MainElements = () => {
 var MainElements_default = MainElements;
 
 // src/components/Image/ImageEditor/Instruction.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Instruction = () => {
-  return /* @__PURE__ */ jsx22("p", { style: ImageEditor_styles_default.instruction, children: "Drag, Zoom, or Rotate image" });
+  return /* @__PURE__ */ jsx27("p", { style: ImageEditor_styles_default.instruction, children: "Drag, Zoom, or Rotate image" });
 };
 var Instruction_default = Instruction;
 
@@ -2894,7 +3049,7 @@ var TransformOperation = class extends TransformOperationExtension {
 var TransformOperation_default = TransformOperation;
 
 // src/components/Image/ImageEditor/ImageEditor.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var transformOperation = new TransformOperation_default();
 var ImageEditor = ({
   src,
@@ -2986,7 +3141,7 @@ var ImageEditor = ({
     };
   }, [isOpen]);
   if (!isOpen) return;
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx28(
     MyContext3.Provider,
     {
       value: {
@@ -3007,11 +3162,11 @@ var ImageEditor = ({
         src: originalSrc,
         transformOperation
       },
-      children: /* @__PURE__ */ jsxs16("div", { style: ImageEditor_styles_default.imageEditor, children: [
-        /* @__PURE__ */ jsx23(Instruction_default, {}),
-        /* @__PURE__ */ jsx23(MainElements_default, {}),
-        /* @__PURE__ */ jsxs16("div", { style: ImageEditor_styles_default.buttons, children: [
-          /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsxs18("div", { style: ImageEditor_styles_default.imageEditor, children: [
+        /* @__PURE__ */ jsx28(Instruction_default, {}),
+        /* @__PURE__ */ jsx28(MainElements_default, {}),
+        /* @__PURE__ */ jsxs18("div", { style: ImageEditor_styles_default.buttons, children: [
+          /* @__PURE__ */ jsx28(
             Button_default,
             {
               buttonType: "solid",
@@ -3019,7 +3174,7 @@ var ImageEditor = ({
               onClick: handleAccept
             }
           ),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx28(
             Button_default,
             {
               buttonType: "solid",
@@ -3027,7 +3182,7 @@ var ImageEditor = ({
               onClick: handleCancel
             }
           ),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx28(
             Button_default,
             {
               buttonType: "solid",
@@ -3539,12 +3694,12 @@ function useSession() {
 }
 
 // src/auth/react/SessionProvider.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var SessionProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx24(SessionContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx29(SessionContext.Provider, { value, children });
 };
 var SessionProvider_default = SessionProvider;