@willphan1712000/frontend 1.6.0 → 1.7.0

package/dist/index.js

@@ -80,6 +80,7 @@ __export(index_exports, {
   InputFile: () => InputFile_default,
   InputGoogle: () => InputGoogle_default,
   LinearAlgebra: () => LinearAlgebra_default,
+  ModernButton: () => Modern_default,
   MultiSelect: () => MultiSelect_default,
   OptionSlider: () => OptionSlider_default,
   RangeSlider: () => RangeSlider_default,
@@ -1122,7 +1123,7 @@ var import_framer_motion = require("framer-motion");
 // src/components/Buttons/gradient/styles.ts
 var borderRadius = "20px";
 var styles6 = (first, second) => {
-  const styles11 = {
+  const styles12 = {
     container: {
       position: "relative",
       borderRadius,
@@ -1197,7 +1198,7 @@ var styles6 = (first, second) => {
       width: "100%"
     }
   };
-  return styles11;
+  return styles12;
 };
 var styles_default6 = styles6;
 
@@ -1205,26 +1206,26 @@ var styles_default6 = styles6;
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Gradient = () => {
   const data = useButtonContext();
-  const styles11 = styles_default6(data.first, data.second);
+  const styles12 = styles_default6(data.first, data.second);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
-      style: __spreadProps(__spreadValues({}, styles11.container), {
+      style: __spreadProps(__spreadValues({}, styles12.container), {
         overflow: data.isLoading ? "hidden" : ""
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", __spreadProps(__spreadValues({ style: styles11.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles11.labelBefore }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.labelBefore }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
-              style: __spreadProps(__spreadValues({}, styles11.label), {
+              style: __spreadProps(__spreadValues({}, styles12.label), {
                 backgroundColor: data.main
               }),
               children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "p",
                 {
-                  style: __spreadProps(__spreadValues({}, styles11.p), {
+                  style: __spreadProps(__spreadValues({}, styles12.p), {
                     color: `${data.text}`
                   }),
                   children: [
@@ -1236,13 +1237,13 @@ var Gradient = () => {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles11.labelAfter })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.labelAfter })
         ] }) })),
-        !data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles11.btnAfter }),
+        !data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: styles12.btnAfter }),
         data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           import_framer_motion.motion.div,
           {
-            style: styles11.btnAfter,
+            style: styles12.btnAfter,
             animate: { rotate: 360 },
             transition: {
               ease: "linear",
@@ -1259,7 +1260,7 @@ var Gradient_default = Gradient;
 
 // src/components/Buttons/solid/styles.ts
 var styles7 = (first) => {
-  const styles11 = {
+  const styles12 = {
     btn: {
       cursor: "pointer",
       position: "relative",
@@ -1316,7 +1317,7 @@ var styles7 = (first) => {
       margin: 0
     }
   };
-  return styles11;
+  return styles12;
 };
 var styles_default7 = styles7;
 
@@ -1324,7 +1325,7 @@ var styles_default7 = styles7;
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Solid = () => {
   const data = useButtonContext();
-  const styles11 = styles_default7(data.first);
+  const styles12 = styles_default7(data.first);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
@@ -1332,18 +1333,18 @@ var Solid = () => {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", __spreadProps(__spreadValues({ style: styles11.btn }, data.props), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles11.labelBefore }),
+        /* @__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)(
             "div",
             {
-              style: __spreadProps(__spreadValues({}, styles11.label), {
+              style: __spreadProps(__spreadValues({}, styles12.label), {
                 backgroundColor: data.main
               }),
               children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 "p",
                 {
-                  style: __spreadProps(__spreadValues({}, styles11.p), {
+                  style: __spreadProps(__spreadValues({}, styles12.p), {
                     color: `${data.text}`
                   }),
                   children: [
@@ -1355,9 +1356,9 @@ var Solid = () => {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles11.labelAfter })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles12.labelAfter })
         ] }) })),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles11.btnAfter })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles12.btnAfter })
       ]
     }
   );
@@ -1438,6 +1439,76 @@ var Button = (_a) => {
 };
 var Button_default = Button;
 
+// src/components/Buttons/modern/Modern.tsx
+var import_react10 = require("react");
+
+// src/components/Buttons/modern/styles.ts
+var styles8 = (first) => {
+  const styles12 = {
+    btn: {
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      paddingTop: "5px",
+      paddingBottom: "5px",
+      paddingLeft: "10px",
+      paddingRight: "10px",
+      borderRadius: "10px",
+      color: first,
+      backgroundColor: `color-mix(in srgb, ${first} 20%, transparent)`,
+      fontSize: "15px",
+      transition: "all .1s linear"
+    }
+  };
+  return styles12;
+};
+var styles_default8 = styles8;
+
+// src/components/Buttons/modern/Modern.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Modern = (_a) => {
+  var _b = _a, {
+    first = "#fff",
+    children,
+    style,
+    hover = false,
+    shadow = false
+  } = _b, props = __objRest(_b, [
+    "first",
+    "children",
+    "style",
+    "hover",
+    "shadow"
+  ]);
+  const [isHover, setHover] = (0, import_react10.useState)(false);
+  const handleEnter = () => {
+    if (!hover) return;
+    setHover(true);
+  };
+  const handleLeave = () => {
+    if (!hover) return;
+    setHover(false);
+  };
+  const transparentColor = `color-mix(in srgb, ${first} 20%, transparent)`;
+  const borderFirst = `solid 1px ${first}`;
+  const shadowTransparent = `${transparentColor} 0px 0px 15px 2px`;
+  const borderTransparent = `solid 1px ${transparentColor}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "a",
+    __spreadProps(__spreadValues({}, props), {
+      style: __spreadValues(__spreadProps(__spreadValues({}, styles_default8(first).btn), {
+        border: hover ? isHover ? `${borderFirst}` : `${borderTransparent}` : `${borderFirst}`,
+        boxShadow: hover ? isHover ? `${shadowTransparent}` : `` : shadow ? `${shadowTransparent}` : ""
+      }), style),
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      children
+    })
+  );
+};
+var Modern_default = Modern;
+
 // src/components/Avatar/Avatar.tsx
 var import_io5 = require("react-icons/io5");
 var import_fa6 = require("react-icons/fa6");
@@ -1460,7 +1531,7 @@ var button = {
   position: "absolute",
   backgroundColor: "white"
 };
-var styles8 = {
+var styles9 = {
   container: {
     width: "100%",
     height: "100%",
@@ -1491,20 +1562,20 @@ var styles8 = {
   }),
   edit: __spreadValues({}, button)
 };
-var styles_default8 = styles8;
+var styles_default9 = styles9;
 
 // src/components/Avatar/Avatar.tsx
-var import_react10 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Avatar = ({ src, setValue, options }) => {
-  const [isOpen, setOpen] = (0, import_react10.useState)(false);
-  const [isNew, setNew] = (0, import_react10.useState)(false);
-  const defaultImage = (0, import_react10.useRef)(void 0);
-  const initialImage = (0, import_react10.useRef)(void 0);
-  const uploadImageRef = (0, import_react10.useRef)(null);
+  const [isOpen, setOpen] = (0, import_react11.useState)(false);
+  const [isNew, setNew] = (0, import_react11.useState)(false);
+  const defaultImage = (0, import_react11.useRef)(void 0);
+  const initialImage = (0, import_react11.useRef)(void 0);
+  const uploadImageRef = (0, import_react11.useRef)(null);
   const isAbleToEdit = initialImage.current ? src !== defaultImage.current && src !== initialImage.current : false;
   const isAbleToRemove = initialImage.current ? src !== defaultImage.current : false;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     (function setSrc() {
       return __async(this, null, function* () {
         var _a, _b;
@@ -1517,8 +1588,8 @@ var Avatar = ({ src, setValue, options }) => {
       });
     })();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: styles_default8.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: styles_default9.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ImageEditor_default,
       {
         src,
@@ -1528,22 +1599,22 @@ var Avatar = ({ src, setValue, options }) => {
         isNew
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Image_default, { src, style: styles_default8.image }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Image_default, { src, style: styles_default9.image }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       Button_default,
       {
-        style: styles_default8.upload,
+        style: styles_default9.upload,
         onClick: () => {
           var _a;
           return (_a = uploadImageRef.current) == null ? void 0 : _a.click();
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_io5.IoCloudUploadOutline, { size: others.iconSize }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_io5.IoCloudUploadOutline, { size: others.iconSize }),
           "Upload"
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       UploadImage_default,
       {
         ref: uploadImageRef,
@@ -1554,28 +1625,28 @@ var Avatar = ({ src, setValue, options }) => {
         }
       }
     ),
-    isAbleToRemove && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    isAbleToRemove && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       Button_default,
       {
-        style: styles_default8.remove,
+        style: styles_default9.remove,
         onClick: () => {
           var _a;
           setValue((_a = defaultImage.current) != null ? _a : void 0);
           setNew((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa6.FaTrashCan, { size: others.iconSize, color: "red" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fa6.FaTrashCan, { size: others.iconSize, color: "red" }),
           "Remove"
         ]
       }
     ),
-    isAbleToEdit && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    isAbleToEdit && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       Button_default,
       {
-        style: styles_default8.edit,
+        style: styles_default9.edit,
         onClick: () => setOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ri.RiEditLine, { size: others.iconSize }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ri.RiEditLine, { size: others.iconSize }),
           "Edit"
         ]
       }
@@ -1585,7 +1656,7 @@ var Avatar = ({ src, setValue, options }) => {
 var Avatar_default = Avatar;
 
 // src/components/Input/InputGoogle/InputGoogle.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/Input/InputGoogle/InputGoogle.styles.ts
 var others2 = {
@@ -1599,7 +1670,7 @@ var others2 = {
   textFocus: "#0957d0",
   border: "solid 2px"
 };
-var styles9 = {
+var styles10 = {
   input: {
     boxSizing: "border-box",
     height: "40px",
@@ -1624,10 +1695,10 @@ var styles9 = {
     backgroundColor: "white"
   }
 };
-var InputGoogle_styles_default = styles9;
+var InputGoogle_styles_default = styles10;
 
 // src/components/Input/InputGoogle/InputGoogle.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var InputGoogle = (_a) => {
   var _b = _a, {
     value = "",
@@ -1641,9 +1712,9 @@ var InputGoogle = (_a) => {
     "label",
     "options"
   ]);
-  const [isFocus, setFocus] = (0, import_react11.useState)(false);
-  const spanRef = (0, import_react11.useRef)(null);
-  const inputRef = (0, import_react11.useRef)(null);
+  const [isFocus, setFocus] = (0, import_react12.useState)(false);
+  const spanRef = (0, import_react12.useRef)(null);
+  const inputRef = (0, import_react12.useRef)(null);
   function transitionOnFocus() {
     setFocus(true);
     if (spanRef.current) {
@@ -1665,12 +1736,12 @@ var InputGoogle = (_a) => {
   }
   const inputBorder = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
   const labelTextColor = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     transitionOnFocus();
     transitionOffFocus();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: InputGoogle_styles_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: InputGoogle_styles_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       __spreadValues({
         id: crypto.randomUUID(),
@@ -1686,7 +1757,7 @@ var InputGoogle = (_a) => {
         onBlur: transitionOffFocus
       }, props)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "span",
       {
         ref: spanRef,
@@ -1702,7 +1773,7 @@ var InputGoogle = (_a) => {
 var InputGoogle_default = InputGoogle;
 
 // src/components/Input/TextArea/TextArea.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/Input/TextArea/TextArea.styles.ts
 var labelHeight = 20;
@@ -1717,7 +1788,7 @@ var others3 = {
   textFocus: "#0957d0",
   border: "solid 2px"
 };
-var styles10 = {
+var styles11 = {
   input: {
     boxSizing: "border-box",
     height: "100%",
@@ -1745,10 +1816,10 @@ var styles10 = {
     backgroundColor: "white"
   }
 };
-var TextArea_styles_default = styles10;
+var TextArea_styles_default = styles11;
 
 // src/components/Input/TextArea/TextArea.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var TextArea = (_a) => {
   var _b = _a, {
     value = "",
@@ -1762,9 +1833,9 @@ var TextArea = (_a) => {
     "label",
     "options"
   ]);
-  const [isFocus, setFocus] = (0, import_react12.useState)(false);
-  const spanRef = (0, import_react12.useRef)(null);
-  const inputRef = (0, import_react12.useRef)(null);
+  const [isFocus, setFocus] = (0, import_react13.useState)(false);
+  const spanRef = (0, import_react13.useRef)(null);
+  const inputRef = (0, import_react13.useRef)(null);
   function transitionOnFocus() {
     setFocus(true);
     if (spanRef.current) {
@@ -1786,12 +1857,12 @@ var TextArea = (_a) => {
   }
   const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
   const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     transitionOnFocus();
     transitionOffFocus();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: TextArea_styles_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: TextArea_styles_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "textarea",
       __spreadValues({
         id: crypto.randomUUID(),
@@ -1806,7 +1877,7 @@ var TextArea = (_a) => {
         onBlur: transitionOffFocus
       }, props)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "span",
       {
         ref: spanRef,
@@ -1822,8 +1893,8 @@ var TextArea = (_a) => {
 var TextArea_default = TextArea;
 
 // src/components/Input/InputFile.tsx
-var import_react13 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var InputFile = (_a) => {
   var _b = _a, {
     file,
@@ -1837,8 +1908,8 @@ var InputFile = (_a) => {
     "onCancel",
     "acceptType"
   ]);
-  const [key, setKey] = (0, import_react13.useState)(Date.now());
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const [key, setKey] = (0, import_react14.useState)(Date.now());
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "input",
     __spreadValues({
       id: crypto.randomUUID(),
@@ -1862,7 +1933,7 @@ var InputFile = (_a) => {
 var InputFile_default = InputFile;
 
 // src/components/Image/UploadImage.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var UploadImage = (_a) => {
   var _b = _a, {
     setSrc = () => {
@@ -1877,7 +1948,7 @@ var UploadImage = (_a) => {
       setSrc(src);
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFile_default,
     __spreadProps(__spreadValues({
       onChoose: handleSetSrc,
@@ -1890,10 +1961,10 @@ var UploadImage = (_a) => {
 var UploadImage_default = UploadImage;
 
 // src/components/Image/Image.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Image = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "img",
     __spreadProps(__spreadValues({
       style: { width: "100%", height: "100%" }
@@ -1906,7 +1977,7 @@ var Image = (_a) => {
 var Image_default = Image;
 
 // src/components/Image/ImageEditor/ImageEditor.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/Image/ImageEditor/ImageEditor.styles.ts
 var imageEditorStyles = {
@@ -2325,13 +2396,13 @@ var WTouchEvent = class {
 };
 
 // src/components/Image/ImageEditor/MainElements/MainElements.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/Image/ImageEditor/context.ts
-var import_react14 = require("react");
-var MyContext3 = (0, import_react14.createContext)(void 0);
+var import_react15 = require("react");
+var MyContext3 = (0, import_react15.createContext)(void 0);
 function useMyContext3() {
-  const data = (0, import_react14.useContext)(MyContext3);
+  const data = (0, import_react15.useContext)(MyContext3);
   if (data === void 0) throw new Error("Context is undefined");
   return data;
 }
@@ -2462,11 +2533,11 @@ var MainElementStyles = {
 var MainElements_styles_default = MainElementStyles;
 
 // src/components/Image/ImageEditor/MainElements/Rotate.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_fa62 = require("react-icons/fa6");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Rotate = () => {
-  const [rotate, setRotate] = (0, import_react15.useState)(false);
+  const [rotate, setRotate] = (0, import_react16.useState)(false);
   const { transformOperation: transformOperation2, refs } = useMyContext3();
   const mouseEvent = new WMouseEvent(transformOperation2);
   const touchEvent = new WTouchEvent(transformOperation2);
@@ -2474,7 +2545,7 @@ var Rotate = () => {
   const handleBackground = (value) => {
     return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const controller = new AbortController();
     const handler = () => {
       setRotate(false);
@@ -2497,8 +2568,8 @@ var Rotate = () => {
       controller.abort();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         ref: refs.rotate,
@@ -2512,9 +2583,9 @@ var Rotate = () => {
           touchEvent.rotate(e, { top: true });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: handleBackground(rotate) }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fa62.FaArrowRotateLeft, { size: "15" }),
-          rotate && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__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)(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2529,7 +2600,7 @@ var Rotate = () => {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         ref: refs.rotateBottom,
@@ -2543,9 +2614,9 @@ var Rotate = () => {
           touchEvent.rotate(e, { bottom: true });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: handleBackground(rotate) }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fa62.FaArrowRotateLeft, { size: "15" }),
-          rotate && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__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)(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2567,7 +2638,7 @@ var Rotate = () => {
 var Rotate_default = Rotate;
 
 // src/components/Image/ImageEditor/MainElements/MainElements.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var MainElements = () => {
   const {
     refs,
@@ -2577,16 +2648,16 @@ var MainElements = () => {
   } = useMyContext3();
   const mouseEvent = new WMouseEvent(transformOperation2);
   const touchEvent = new WTouchEvent(transformOperation2);
-  const [topLeft, settopLeft] = (0, import_react16.useState)(false);
-  const [topRight, settopRight] = (0, import_react16.useState)(false);
-  const [bottomLeft, setbottomLeft] = (0, import_react16.useState)(false);
-  const [bottomRight, setbottomRight] = (0, import_react16.useState)(false);
-  const [reRender, triggierReRender] = (0, import_react16.useState)(false);
+  const [topLeft, settopLeft] = (0, import_react17.useState)(false);
+  const [topRight, settopRight] = (0, import_react17.useState)(false);
+  const [bottomLeft, setbottomLeft] = (0, import_react17.useState)(false);
+  const [bottomRight, setbottomRight] = (0, import_react17.useState)(false);
+  const [reRender, triggierReRender] = (0, import_react17.useState)(false);
   const { angle, width, height } = transformOperation2.getDimension();
   const handleBackground = (value) => {
     return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const controller = new AbortController();
     const handler = () => {
       settopLeft(false);
@@ -2626,9 +2697,9 @@ var MainElements = () => {
       controller.abort();
     };
   }, [reRender]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: refs.container, style: MainElements_styles_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: refs.frame, style: MainElements_styles_default.frame, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: originalSrc, style: MainElements_styles_default.img, ref: imgRefs.img }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  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)(
       "div",
       {
         style: MainElements_styles_default.controller,
@@ -2636,7 +2707,7 @@ var MainElements = () => {
         onMouseDown: (e) => mouseEvent.drag(e),
         onTouchStart: (e) => touchEvent.drag(e),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               ref: refs.topLeft,
@@ -2653,10 +2724,10 @@ var MainElements = () => {
                   topLeft: true
                 });
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: handleBackground(topLeft) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: handleBackground(topLeft) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               ref: refs.topRight,
@@ -2673,10 +2744,10 @@ var MainElements = () => {
                   topRight: true
                 });
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: handleBackground(topRight) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: handleBackground(topRight) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               ref: refs.bottomLeft,
@@ -2693,10 +2764,10 @@ var MainElements = () => {
                   bottomLeft: true
                 });
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: handleBackground(bottomLeft) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: handleBackground(bottomLeft) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               ref: refs.bottomRight,
@@ -2713,11 +2784,11 @@ var MainElements = () => {
                   bottomRight: true
                 });
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: handleBackground(bottomRight) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: handleBackground(bottomRight) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Rotate_default, {}),
-          (topLeft || topRight || bottomLeft || bottomRight) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Rotate_default, {}),
+          (topLeft || topRight || bottomLeft || bottomRight) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "p",
             {
               style: __spreadProps(__spreadValues({}, MainElements_styles_default.label), {
@@ -2740,9 +2811,9 @@ var MainElements = () => {
 var MainElements_default = MainElements;
 
 // src/components/Image/ImageEditor/Instruction.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Instruction = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { style: ImageEditor_styles_default.instruction, children: "Drag, Zoom, or Rotate image" });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { style: ImageEditor_styles_default.instruction, children: "Drag, Zoom, or Rotate image" });
 };
 var Instruction_default = Instruction;
 
@@ -2862,7 +2933,7 @@ var TransformOperation = class extends TransformOperationExtension {
 var TransformOperation_default = TransformOperation;
 
 // src/components/Image/ImageEditor/ImageEditor.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var transformOperation = new TransformOperation_default();
 var ImageEditor = ({
   src,
@@ -2873,21 +2944,21 @@ var ImageEditor = ({
   },
   isNew = false
 }) => {
-  const container = (0, import_react17.useRef)(null);
-  const frame = (0, import_react17.useRef)(null);
-  const img = (0, import_react17.useRef)(null);
-  const controller = (0, import_react17.useRef)(null);
-  const topLeft = (0, import_react17.useRef)(null);
-  const topRight = (0, import_react17.useRef)(null);
-  const bottomLeft = (0, import_react17.useRef)(null);
-  const bottomRight = (0, import_react17.useRef)(null);
-  const rotate = (0, import_react17.useRef)(null);
-  const rotateBottom = (0, import_react17.useRef)(null);
-  const [transform, setTransform] = (0, import_react17.useState)(
+  const container = (0, import_react18.useRef)(null);
+  const frame = (0, import_react18.useRef)(null);
+  const img = (0, import_react18.useRef)(null);
+  const controller = (0, import_react18.useRef)(null);
+  const topLeft = (0, import_react18.useRef)(null);
+  const topRight = (0, import_react18.useRef)(null);
+  const bottomLeft = (0, import_react18.useRef)(null);
+  const bottomRight = (0, import_react18.useRef)(null);
+  const rotate = (0, import_react18.useRef)(null);
+  const rotateBottom = (0, import_react18.useRef)(null);
+  const [transform, setTransform] = (0, import_react18.useState)(
     void 0
   );
-  const transformState = (0, import_react17.useRef)(void 0);
-  const originalSrc = (0, import_react17.useMemo)(() => {
+  const transformState = (0, import_react18.useRef)(void 0);
+  const originalSrc = (0, import_react18.useMemo)(() => {
     transformState.current = void 0;
     return src;
   }, [isNew]);
@@ -2946,7 +3017,7 @@ var ImageEditor = ({
   function handleWindowScroll(isOpen2) {
     document.body.style.overflow = isOpen2 ? "hidden" : "auto";
   }
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     isOpen ? createTransform() : setTransform(void 0);
     handleWindowScroll(isOpen);
     return () => {
@@ -2954,7 +3025,7 @@ var ImageEditor = ({
     };
   }, [isOpen]);
   if (!isOpen) return;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     MyContext3.Provider,
     {
       value: {
@@ -2975,11 +3046,11 @@ var ImageEditor = ({
         src: originalSrc,
         transformOperation
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: ImageEditor_styles_default.imageEditor, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Instruction_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MainElements_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: ImageEditor_styles_default.buttons, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      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)(
             Button_default,
             {
               buttonType: "solid",
@@ -2987,7 +3058,7 @@ var ImageEditor = ({
               onClick: handleAccept
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             Button_default,
             {
               buttonType: "solid",
@@ -2995,7 +3066,7 @@ var ImageEditor = ({
               onClick: handleCancel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             Button_default,
             {
               buttonType: "solid",
@@ -3480,32 +3551,32 @@ var tools = {
 var tools_default = tools;
 
 // src/auth/react/context.tsx
-var import_react18 = require("react");
-var SessionContext = (0, import_react18.createContext)(
+var import_react19 = require("react");
+var SessionContext = (0, import_react19.createContext)(
   void 0
 );
 function useSession() {
-  const data = (0, import_react18.useContext)(SessionContext);
+  const data = (0, import_react19.useContext)(SessionContext);
   if (data === void 0) throw new Error("Session context is undefined");
   return data;
 }
 
 // src/auth/react/SessionProvider.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var SessionProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SessionContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SessionContext.Provider, { value, children });
 };
 var SessionProvider_default = SessionProvider;
 
 // src/auth/react/useAuthClient.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var useAuthClient = (auth) => {
-  const [isLoading, setLoading] = (0, import_react19.useState)(false);
-  const sessionRef = (0, import_react19.useRef)(void 0);
-  (0, import_react19.useEffect)(() => {
+  const [isLoading, setLoading] = (0, import_react20.useState)(false);
+  const sessionRef = (0, import_react20.useRef)(void 0);
+  (0, import_react20.useEffect)(() => {
     let is = true;
     const getSession = () => __async(null, null, function* () {
       setLoading(true);
@@ -3672,6 +3743,7 @@ var LinearAlgebra_default = LinearAlgebra;
   InputFile,
   InputGoogle,
   LinearAlgebra,
+  ModernButton,
   MultiSelect,
   OptionSlider,
   RangeSlider,