@willphan1712000/frontend 1.9.0 → 1.9.2

package/dist/index.js

@@ -98,6 +98,142 @@ module.exports = __toCommonJS(index_exports);
 // src/components/DropdownSelect/DropdownSelect.tsx
 var import_react3 = require("react");
 
+// src/components/Icons/X.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var X = (_a) => {
+  var _b = _a, { size = 24, color = "currentColor" } = _b, props = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+      ]
+    })
+  );
+};
+var X_default = X;
+
+// src/components/Icons/TrashCan.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TrashCan = (_a) => {
+  var _b = _a, { size = 24, color = "currentColor" } = _b, props = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 448 512",
+      fill: color
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Edit = (_a) => {
+  var _b = _a, { size = 24, color = "currentColor" } = _b, props = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CloudUpload = (_a) => {
+  var _b = _a, {
+    size = 24,
+    color = "currentColor"
+  } = _b, props = __objRest(_b, [
+    "size",
+    "color"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 512 512"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "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__ */ (0, import_jsx_runtime4.jsx)(
+          "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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ArrowRotateLeft = (_a) => {
+  var _b = _a, {
+    size = 24,
+    color = "currentColor"
+  } = _b, props = __objRest(_b, [
+    "size",
+    "color"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 512 512",
+      fill: color
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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
 var import_react = require("react");
 var MyContext = (0, import_react.createContext)(void 0);
@@ -114,9 +250,13 @@ var import_react2 = require("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",
@@ -129,6 +269,7 @@ var styles = {
     marginRight: "auto"
   },
   close: {
+    padding: "1%",
     borderRadius: "50%",
     width: "20px",
     height: "20px",
@@ -182,9 +323,9 @@ var styles = {
 var styles_default = styles;
 
 // src/components/DropdownSelect/Search.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Search = ({ options, onSearch }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles_default.search_border, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles_default.search_border, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "input",
     {
       placeholder: "Search",
@@ -202,7 +343,7 @@ var Search = ({ options, onSearch }) => {
 var Search_default = Search;
 
 // src/components/DropdownSelect/Dropdown.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Dropdown = () => {
   const { options, onChange, setOpen } = useMyContext();
   const [isVisible, setVisible] = (0, import_react2.useState)(true);
@@ -228,7 +369,7 @@ var Dropdown = () => {
       window.removeEventListener("scroll", handleResize);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: dropdownRef,
@@ -238,8 +379,8 @@ var Dropdown = () => {
         bottom: "calc(100% + 5px)"
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Search_default, { options, onSearch: setOption }),
-        optionsCopy.map((option, key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Search_default, { options, onSearch: setOption }),
+        optionsCopy.map((option, key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default.element), {
@@ -262,8 +403,7 @@ var Dropdown = () => {
 var Dropdown_default = Dropdown;
 
 // src/components/DropdownSelect/DropdownSelect.tsx
-var import_io = require("react-icons/io");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DropdownSelect = ({ options, value, onChange }) => {
   const [open, setOpen] = (0, import_react3.useState)(false);
   const [isHoverClose, setHoverClose] = (0, import_react3.useState)(false);
@@ -278,7 +418,7 @@ var DropdownSelect = ({ options, value, onChange }) => {
     window.addEventListener("click", clickHandler);
     return () => window.removeEventListener("click", clickHandler);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     MyContext.Provider,
     {
       value: {
@@ -287,15 +427,15 @@ var DropdownSelect = ({ options, value, onChange }) => {
         onChange,
         setOpen
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles_default.container, ref: selectRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles_default.container, ref: selectRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             style: styles_default.select_box,
             onClick: () => setOpen((prev) => !prev),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles_default.value, children: value }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles_default.value, children: value }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   style: __spreadProps(__spreadValues({}, styles_default.close), {
@@ -308,13 +448,13 @@ var DropdownSelect = ({ options, value, onChange }) => {
                   },
                   onMouseEnter: () => setHoverClose(true),
                   onMouseLeave: () => setHoverClose(false),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_io.IoMdClose, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(X_default, {})
                 }
               )
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dropdown_default, {})
+        open && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dropdown_default, {})
       ] })
     }
   );
@@ -400,7 +540,7 @@ var styles2 = {
 var styles_default2 = styles2;
 
 // src/components/RangeSlider/RangeSlider.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var RangeSlider = ({
   min = "0",
   max = "100",
@@ -458,7 +598,7 @@ var RangeSlider = ({
       document.removeEventListener("touchend", handleMouseUp);
     };
   }, [isMouseDown]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       style: __spreadProps(__spreadValues({}, styles_default2.slider_border), {
@@ -474,7 +614,7 @@ var RangeSlider = ({
       },
       ref: sliderBorderRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: __spreadProps(__spreadValues({}, styles_default2.fill), {
@@ -483,7 +623,7 @@ var RangeSlider = ({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "span",
           {
             style: __spreadProps(__spreadValues({}, styles_default2.thumb), {
@@ -493,7 +633,7 @@ var RangeSlider = ({
             onMouseMove: () => setHover(true),
             onMouseLeave: () => setHover(false),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "span",
                 {
                   style: __spreadProps(__spreadValues({}, styles_default2.value), {
@@ -502,7 +642,7 @@ var RangeSlider = ({
                   children: value
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "span",
                 {
                   style: __spreadProps(__spreadValues({}, styles_default2.thumb_shadow), {
@@ -514,7 +654,7 @@ var RangeSlider = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: __spreadProps(__spreadValues({}, styles_default2.rest), {
@@ -542,7 +682,9 @@ var styles3 = {
     msOverflowStyle: "none",
     boxSizing: "border-box",
     margin: 0,
-    padding: 0
+    padding: 0,
+    width: "100%",
+    height: "100%"
   },
   background: {
     position: "relative",
@@ -587,22 +729,22 @@ var styles3 = {
 var styles_default3 = styles3;
 
 // src/components/OptionSlider/OptionSlider.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var OptionSlider = ({
   value,
   onChange,
-  width = "200",
   options,
   color = "#f0f0f7"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       style: __spreadProps(__spreadValues({}, styles_default3.border), {
-        width: `${width}px`
+        width: `100%`,
+        height: `100%`
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default3.background), {
@@ -610,7 +752,7 @@ var OptionSlider = ({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles_default3.options, children: options.map((option, key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles_default3.options, children: options.map((option, key) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default3.element), {
@@ -741,7 +883,7 @@ var styles4 = {
 var styles_default4 = styles4;
 
 // src/components/ColorPickerSlider/ColorPickerSlider.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ColorPickerSlider = ({ value, onChange, width = "200" }) => {
   let percentage = encode2(value);
   const sliderBorderRef = (0, import_react5.useRef)(null);
@@ -787,7 +929,7 @@ var ColorPickerSlider = ({ value, onChange, width = "200" }) => {
       document.removeEventListener("touchend", handleMouseUp);
     };
   }, [isMouseDown]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       style: __spreadProps(__spreadValues({}, styles_default4.border), {
@@ -803,7 +945,7 @@ var ColorPickerSlider = ({ value, onChange, width = "200" }) => {
       },
       ref: sliderBorderRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default4.thumb), {
@@ -815,7 +957,7 @@ var ColorPickerSlider = ({ value, onChange, width = "200" }) => {
             onMouseLeave: () => setHover(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             style: __spreadProps(__spreadValues({}, styles_default4.label), {
@@ -848,7 +990,15 @@ var import_react7 = require("react");
 
 // 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",
@@ -864,28 +1014,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",
@@ -899,7 +1049,8 @@ var styles5 = {
     borderRadius: "10px",
     justifyContent: "flex-start",
     alignItems: "center",
-    cursor: "pointer"
+    cursor: "pointer",
+    fontSize: "1rem"
   },
   dropdown: {
     position: "absolute",
@@ -938,9 +1089,9 @@ var styles5 = {
 var styles_default5 = styles5;
 
 // src/components/MultiSelect/Search.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Search2 = ({ options, onSearch }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles_default5.search_border, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles_default5.search_border, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "input",
     {
       placeholder: "Search...",
@@ -958,7 +1109,7 @@ var Search2 = ({ options, onSearch }) => {
 var Search_default2 = Search2;
 
 // src/components/MultiSelect/Dropdown.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Dropdown2 = () => {
   const { options, onChange, setOpen } = useMyContext2();
   const [isVisible, setVisible] = (0, import_react7.useState)(true);
@@ -984,7 +1135,7 @@ var Dropdown2 = () => {
       window.removeEventListener("scroll", handleResize);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref: dropdownRef,
@@ -994,26 +1145,29 @@ var Dropdown2 = () => {
         bottom: "calc(100% + 5px)"
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Search_default2, { options, onSearch: setOption }),
-        optionsCopy.map((option, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "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__ */ (0, import_jsx_runtime13.jsx)(Search_default2, { options, onSearch: setOption }),
+        optionsCopy.map(
+          (option, key) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "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
+          )
+        )
       ]
     }
   );
@@ -1021,9 +1175,8 @@ var Dropdown2 = () => {
 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 = ({ options, value, onChange, width = "200" }) => {
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var MultiSelect = ({ options, value, onChange }) => {
   const [open, setOpen] = (0, import_react8.useState)(false);
   const [isHoverClose, setHoverClose] = (0, import_react8.useState)(false);
   const [isHoverCloseEach, setHoverCloseEach] = (0, import_react8.useState)(-1);
@@ -1038,7 +1191,7 @@ var MultiSelect = ({ options, value, onChange, width = "200" }) => {
     window.addEventListener("click", clickHandler);
     return () => window.removeEventListener("click", clickHandler);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     MyContext2.Provider,
     {
       value: {
@@ -1047,69 +1200,57 @@ var MultiSelect = ({ options, value, onChange, width = "200" }) => {
         onChange,
         setOpen
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        "div",
-        {
-          style: {
-            width: `${width}px`,
-            position: "relative"
-          },
-          ref: selectRef,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              "div",
-              {
-                style: styles_default5.select_box,
-                onClick: () => setOpen((prev) => !prev),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles_default5.value, children: value.map((eachValue, key) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles_default5.eachValue, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "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__ */ (0, import_jsx_runtime9.jsx)(import_io2.IoMdClose, {})
-                      }
-                    ),
-                    eachValue
-                  ] }, key)) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "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__ */ (0, import_jsx_runtime9.jsx)(import_io2.IoMdClose, {})
-                    }
-                  )
-                ]
-              }
-            ),
-            open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dropdown_default2, {})
-          ]
-        }
-      )
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles_default5.container, ref: selectRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "div",
+          {
+            style: styles_default5.select_box,
+            onClick: () => setOpen((prev) => !prev),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: styles_default5.value, children: value.map((eachValue, key) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles_default5.eachValue, children: [
+                eachValue,
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "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__ */ (0, import_jsx_runtime14.jsx)(X_default, { size: "20" })
+                  }
+                )
+              ] }, key)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "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__ */ (0, import_jsx_runtime14.jsx)(X_default, {})
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dropdown_default2, {})
+      ] })
     }
   );
 };
@@ -1201,7 +1342,7 @@ var styles6 = (first, second) => {
 var styles_default6 = styles6;
 
 // src/components/Buttons/gradient/Gradient.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Gradient = () => {
   const data = useButtonContext();
   const styles12 = styles_default6(data.first, data.second);
@@ -1217,23 +1358,23 @@ var Gradient = () => {
       return controls.stop;
     }
   }, [data.isLoading, angle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles12.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles12.labelWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.labelBefore }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: styles12.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: styles12.labelWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: styles12.labelBefore }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "div",
         {
           style: __spreadProps(__spreadValues({}, styles12.label), { backgroundColor: data.main }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { style: __spreadProps(__spreadValues({}, styles12.p), { color: `${data.text}` }), children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { style: __spreadProps(__spreadValues({}, styles12.p), { color: `${data.text}` }), children: [
             data.children,
             " ",
             data.content
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.labelAfter })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: styles12.labelAfter })
     ] }) })),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_framer_motion.motion.div,
       {
         style: __spreadProps(__spreadValues({}, styles12.btnAfter), {
@@ -1309,26 +1450,26 @@ var styles7 = (first) => {
 var styles_default7 = styles7;
 
 // src/components/Buttons/solid/Solid.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Solid = () => {
   const data = useButtonContext();
   const styles12 = styles_default7(data.first);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       style: {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles12.labelBefore }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles12.labelBefore }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "div",
             {
               style: __spreadProps(__spreadValues({}, styles12.label), {
                 backgroundColor: data.main
               }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 "p",
                 {
                   style: __spreadProps(__spreadValues({}, styles12.p), {
@@ -1343,9 +1484,9 @@ var Solid = () => {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles12.labelAfter })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles12.labelAfter })
         ] }) })),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles12.btnAfter })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: styles12.btnAfter })
       ]
     }
   );
@@ -1353,7 +1494,7 @@ var Solid = () => {
 var Solid_default = Solid;
 
 // src/components/Buttons/Button.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ButtonContext = (0, import_react10.createContext)(void 0);
 function useButtonContext() {
   const data = (0, import_react10.useContext)(ButtonContext);
@@ -1384,7 +1525,7 @@ var Button = (_a) => {
   ]);
   switch (buttonType) {
     case "gradient":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         ButtonContext.Provider,
         {
           value: {
@@ -1397,11 +1538,11 @@ var Button = (_a) => {
             isLoading,
             children
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Gradient_default, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Gradient_default, {})
         }
       );
     case "solid":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         ButtonContext.Provider,
         {
           value: {
@@ -1413,11 +1554,11 @@ var Button = (_a) => {
             isLoading,
             children
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Solid_default, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Solid_default, {})
         }
       );
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", __spreadProps(__spreadValues({}, props), { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", __spreadProps(__spreadValues({}, props), { children: [
         children,
         " ",
         content
@@ -1454,7 +1595,7 @@ var styles8 = (first) => {
 var styles_default8 = styles8;
 
 // src/components/Buttons/modern/Modern.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Modern = (_a) => {
   var _b = _a, {
     first = "#fff",
@@ -1482,7 +1623,7 @@ var Modern = (_a) => {
   const borderFirst = `solid 1px ${first}`;
   const shadowTransparent = `${transparentColor} 0px 0px 15px 2px`;
   const borderTransparent = `solid 1px ${transparentColor}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "a",
     __spreadProps(__spreadValues({
       style: __spreadValues(__spreadProps(__spreadValues({}, styles_default8(first).btn), {
@@ -1498,11 +1639,6 @@ var Modern = (_a) => {
 };
 var Modern_default = Modern;
 
-// src/components/Avatar/Avatar.tsx
-var import_io5 = require("react-icons/io5");
-var import_fa6 = require("react-icons/fa6");
-var import_ri = require("react-icons/ri");
-
 // src/components/Avatar/styles.ts
 var others = {
   iconSize: "20"
@@ -1555,7 +1691,7 @@ var styles_default9 = styles9;
 
 // src/components/Avatar/Avatar.tsx
 var import_react12 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Avatar = ({ src, setValue, options }) => {
   const [isOpen, setOpen] = (0, import_react12.useState)(false);
   const [isNew, setNew] = (0, import_react12.useState)(false);
@@ -1577,8 +1713,8 @@ var Avatar = ({ src, setValue, options }) => {
       });
     })();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles_default9.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: styles_default9.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ImageEditor_default,
       {
         src,
@@ -1588,8 +1724,8 @@ var Avatar = ({ src, setValue, options }) => {
         isNew
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Image_default, { src, style: styles_default9.image }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Image_default, { src, style: styles_default9.image }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       Button_default,
       {
         style: styles_default9.upload,
@@ -1598,12 +1734,12 @@ var Avatar = ({ src, setValue, options }) => {
           return (_a = uploadImageRef.current) == null ? void 0 : _a.click();
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_io5.IoCloudUploadOutline, { size: others.iconSize }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CloudUpload_default, { size: others.iconSize }),
           "Upload"
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       UploadImage_default,
       {
         ref: uploadImageRef,
@@ -1614,7 +1750,7 @@ var Avatar = ({ src, setValue, options }) => {
         }
       }
     ),
-    isAbleToRemove && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    isAbleToRemove && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       Button_default,
       {
         style: styles_default9.remove,
@@ -1624,18 +1760,18 @@ var Avatar = ({ src, setValue, options }) => {
           setNew((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa6.FaTrashCan, { size: others.iconSize, color: "red" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TrashCan_default, { size: others.iconSize, color: "red" }),
           "Remove"
         ]
       }
     ),
-    isAbleToEdit && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    isAbleToEdit && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       Button_default,
       {
         style: styles_default9.edit,
         onClick: () => setOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ri.RiEditLine, { size: others.iconSize }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Edit_default, { size: others.iconSize }),
           "Edit"
         ]
       }
@@ -1657,7 +1793,8 @@ var others2 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 1px"
+  border: "solid 1px",
+  backgroundColor: "#fff"
 };
 var styles10 = {
   input: {
@@ -1667,7 +1804,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%",
@@ -1681,13 +1820,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
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var InputGoogle = (_a) => {
   var _b = _a, {
     value = "",
@@ -1704,8 +1844,11 @@ var InputGoogle = (_a) => {
   const [isFocus, setFocus] = (0, import_react13.useState)(false);
   const spanRef = (0, import_react13.useRef)(null);
   const inputRef = (0, import_react13.useRef)(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;
@@ -1734,8 +1877,8 @@ var InputGoogle = (_a) => {
   (0, import_react13.useEffect)(() => {
     if (value) spanPositionWhenFocused();
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: InputGoogle_styles_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: InputGoogle_styles_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "input",
       __spreadValues({
         id: crypto.randomUUID(),
@@ -1747,18 +1890,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__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "span",
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.label), {
-          color: labelColorWhenFocused
+          color: labelColorWhenFocused,
+          backgroundColor
         }),
         onClick: focus,
         children: label
@@ -1782,7 +1928,8 @@ var others3 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 1px"
+  border: "solid 1px",
+  backgroundColor: "#fff"
 };
 var styles11 = {
   input: {
@@ -1793,7 +1940,9 @@ var styles11 = {
     borderRadius: "6px",
     padding: "10px",
     outline: "none",
-    resize: "none"
+    resize: "none",
+    backgroundColor: others3.backgroundColor,
+    color: others3.textRelease
   },
   container: {
     width: "100%",
@@ -1809,13 +1958,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
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var TextArea = (_a) => {
   var _b = _a, {
     value = "",
@@ -1832,8 +1982,11 @@ var TextArea = (_a) => {
   const [isFocus, setFocus] = (0, import_react14.useState)(false);
   const spanRef = (0, import_react14.useRef)(null);
   const inputRef = (0, import_react14.useRef)(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;
@@ -1862,8 +2015,8 @@ var TextArea = (_a) => {
   (0, import_react14.useEffect)(() => {
     if (value) spanPositionWhenFocused();
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: TextArea_styles_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: TextArea_styles_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "textarea",
       __spreadValues({
         id: crypto.randomUUID(),
@@ -1872,18 +2025,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__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "span",
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.label), {
-          color: labelTextColor
+          color: labelColorWhenFocused,
+          backgroundColor
         }),
         onClick: focus,
         children: label
@@ -1895,7 +2051,7 @@ var TextArea_default = TextArea;
 
 // src/components/Input/InputFile.tsx
 var import_react15 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var InputFile = (_a) => {
   var _b = _a, {
     file,
@@ -1910,7 +2066,7 @@ var InputFile = (_a) => {
     "acceptType"
   ]);
   const [key, setKey] = (0, import_react15.useState)(Date.now());
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "input",
     __spreadValues({
       id: crypto.randomUUID(),
@@ -1934,7 +2090,7 @@ var InputFile = (_a) => {
 var InputFile_default = InputFile;
 
 // src/components/Image/UploadImage.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var UploadImage = (_a) => {
   var _b = _a, {
     setSrc = () => {
@@ -1949,7 +2105,7 @@ var UploadImage = (_a) => {
       setSrc(src);
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     InputFile_default,
     __spreadProps(__spreadValues({
       onChoose: handleSetSrc,
@@ -1962,10 +2118,10 @@ var UploadImage = (_a) => {
 var UploadImage_default = UploadImage;
 
 // src/components/Image/Image.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Image = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "img",
     __spreadProps(__spreadValues({
       style: { width: "100%", height: "100%" }
@@ -2535,8 +2691,7 @@ var MainElements_styles_default = MainElementStyles;
 
 // src/components/Image/ImageEditor/MainElements/Rotate.tsx
 var import_react17 = require("react");
-var import_fa62 = require("react-icons/fa6");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Rotate = () => {
   const [rotate, setRotate] = (0, import_react17.useState)(false);
   const { transformOperation: transformOperation2, refs } = useMyContext3();
@@ -2569,8 +2724,8 @@ var Rotate = () => {
       controller.abort();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         ref: refs.rotate,
@@ -2584,9 +2739,9 @@ var Rotate = () => {
           touchEvent.rotate(e, { top: true });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: handleBackground(rotate) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fa62.FaArrowRotateLeft, { size: "15" }),
-          rotate && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: handleBackground(rotate) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowRotateLeft_default, { size: "15" }),
+          rotate && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2601,7 +2756,7 @@ var Rotate = () => {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         ref: refs.rotateBottom,
@@ -2615,9 +2770,9 @@ var Rotate = () => {
           touchEvent.rotate(e, { bottom: true });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: handleBackground(rotate) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fa62.FaArrowRotateLeft, { size: "15" }),
-          rotate && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: handleBackground(rotate) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowRotateLeft_default, { size: "15" }),
+          rotate && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2639,7 +2794,7 @@ var Rotate = () => {
 var Rotate_default = Rotate;
 
 // src/components/Image/ImageEditor/MainElements/MainElements.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var MainElements = () => {
   const {
     refs,
@@ -2698,9 +2853,9 @@ var MainElements = () => {
       controller.abort();
     };
   }, [reRender]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: refs.container, style: MainElements_styles_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: refs.frame, style: MainElements_styles_default.frame, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: originalSrc, style: MainElements_styles_default.img, ref: imgRefs.img }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: refs.container, style: MainElements_styles_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: refs.frame, style: MainElements_styles_default.frame, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("img", { src: originalSrc, style: MainElements_styles_default.img, ref: imgRefs.img }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "div",
       {
         style: MainElements_styles_default.controller,
@@ -2708,7 +2863,7 @@ var MainElements = () => {
         onMouseDown: (e) => mouseEvent.drag(e),
         onTouchStart: (e) => touchEvent.drag(e),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               ref: refs.topLeft,
@@ -2725,10 +2880,10 @@ var MainElements = () => {
                   topLeft: true
                 });
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: handleBackground(topLeft) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: handleBackground(topLeft) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               ref: refs.topRight,
@@ -2745,10 +2900,10 @@ var MainElements = () => {
                   topRight: true
                 });
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: handleBackground(topRight) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: handleBackground(topRight) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               ref: refs.bottomLeft,
@@ -2765,10 +2920,10 @@ var MainElements = () => {
                   bottomLeft: true
                 });
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: handleBackground(bottomLeft) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: handleBackground(bottomLeft) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               ref: refs.bottomRight,
@@ -2785,11 +2940,11 @@ var MainElements = () => {
                   bottomRight: true
                 });
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: handleBackground(bottomRight) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: handleBackground(bottomRight) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Rotate_default, {}),
-          (topLeft || topRight || bottomLeft || bottomRight) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Rotate_default, {}),
+          (topLeft || topRight || bottomLeft || bottomRight) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2812,9 +2967,9 @@ var MainElements = () => {
 var MainElements_default = MainElements;
 
 // src/components/Image/ImageEditor/Instruction.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Instruction = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { style: ImageEditor_styles_default.instruction, children: "Drag, Zoom, or Rotate image" });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { style: ImageEditor_styles_default.instruction, children: "Drag, Zoom, or Rotate image" });
 };
 var Instruction_default = Instruction;
 
@@ -2934,7 +3089,7 @@ var TransformOperation = class extends TransformOperationExtension {
 var TransformOperation_default = TransformOperation;
 
 // src/components/Image/ImageEditor/ImageEditor.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var transformOperation = new TransformOperation_default();
 var ImageEditor = ({
   src,
@@ -3026,7 +3181,7 @@ var ImageEditor = ({
     };
   }, [isOpen]);
   if (!isOpen) return;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     MyContext3.Provider,
     {
       value: {
@@ -3047,11 +3202,11 @@ var ImageEditor = ({
         src: originalSrc,
         transformOperation
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: ImageEditor_styles_default.imageEditor, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Instruction_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MainElements_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: ImageEditor_styles_default.buttons, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: ImageEditor_styles_default.imageEditor, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Instruction_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MainElements_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: ImageEditor_styles_default.buttons, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button_default,
             {
               buttonType: "solid",
@@ -3059,7 +3214,7 @@ var ImageEditor = ({
               onClick: handleAccept
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button_default,
             {
               buttonType: "solid",
@@ -3067,7 +3222,7 @@ var ImageEditor = ({
               onClick: handleCancel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button_default,
             {
               buttonType: "solid",
@@ -3579,12 +3734,12 @@ function useSession() {
 }
 
 // src/auth/react/SessionProvider.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var SessionProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SessionContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SessionContext.Provider, { value, children });
 };
 var SessionProvider_default = SessionProvider;