@willphan1712000/frontend 1.6.0 → 1.7.1

package/dist/index.mjs

@@ -1079,7 +1079,7 @@ import { motion } from "framer-motion";
 // src/components/Buttons/gradient/styles.ts
 var borderRadius = "20px";
 var styles6 = (first, second) => {
-  const styles11 = {
+  const styles12 = {
     container: {
       position: "relative",
       borderRadius,
@@ -1154,7 +1154,7 @@ var styles6 = (first, second) => {
       width: "100%"
     }
   };
-  return styles11;
+  return styles12;
 };
 var styles_default6 = styles6;
 
@@ -1162,26 +1162,26 @@ var styles_default6 = styles6;
 import { jsx as jsx10, jsxs as jsxs8 } from "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__ */ jsxs8(
     "div",
     {
-      style: __spreadProps(__spreadValues({}, styles11.container), {
+      style: __spreadProps(__spreadValues({}, styles12.container), {
         overflow: data.isLoading ? "hidden" : ""
       }),
       children: [
-        /* @__PURE__ */ jsx10("button", __spreadProps(__spreadValues({ style: styles11.btn }, data.props), { children: /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx10("div", { style: styles11.labelBefore }),
+        /* @__PURE__ */ jsx10("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx10("div", { style: styles12.labelBefore }),
           /* @__PURE__ */ jsx10(
             "div",
             {
-              style: __spreadProps(__spreadValues({}, styles11.label), {
+              style: __spreadProps(__spreadValues({}, styles12.label), {
                 backgroundColor: data.main
               }),
               children: /* @__PURE__ */ jsxs8(
                 "p",
                 {
-                  style: __spreadProps(__spreadValues({}, styles11.p), {
+                  style: __spreadProps(__spreadValues({}, styles12.p), {
                     color: `${data.text}`
                   }),
                   children: [
@@ -1193,13 +1193,13 @@ var Gradient = () => {
               )
             }
           ),
-          /* @__PURE__ */ jsx10("div", { style: styles11.labelAfter })
+          /* @__PURE__ */ jsx10("div", { style: styles12.labelAfter })
         ] }) })),
-        !data.isLoading && /* @__PURE__ */ jsx10("div", { style: styles11.btnAfter }),
+        !data.isLoading && /* @__PURE__ */ jsx10("div", { style: styles12.btnAfter }),
         data.isLoading && /* @__PURE__ */ jsx10(
           motion.div,
           {
-            style: styles11.btnAfter,
+            style: styles12.btnAfter,
             animate: { rotate: 360 },
             transition: {
               ease: "linear",
@@ -1216,7 +1216,7 @@ var Gradient_default = Gradient;
 
 // src/components/Buttons/solid/styles.ts
 var styles7 = (first) => {
-  const styles11 = {
+  const styles12 = {
     btn: {
       cursor: "pointer",
       position: "relative",
@@ -1273,7 +1273,7 @@ var styles7 = (first) => {
       margin: 0
     }
   };
-  return styles11;
+  return styles12;
 };
 var styles_default7 = styles7;
 
@@ -1281,7 +1281,7 @@ var styles_default7 = styles7;
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var Solid = () => {
   const data = useButtonContext();
-  const styles11 = styles_default7(data.first);
+  const styles12 = styles_default7(data.first);
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -1289,18 +1289,18 @@ var Solid = () => {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsx11("button", __spreadProps(__spreadValues({ style: styles11.btn }, data.props), { children: /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx11("div", { style: styles11.labelBefore }),
+        /* @__PURE__ */ jsx11("button", __spreadProps(__spreadValues({ style: styles12.btn }, data.props), { children: /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx11("div", { style: styles12.labelBefore }),
           /* @__PURE__ */ jsx11(
             "div",
             {
-              style: __spreadProps(__spreadValues({}, styles11.label), {
+              style: __spreadProps(__spreadValues({}, styles12.label), {
                 backgroundColor: data.main
               }),
               children: /* @__PURE__ */ jsxs9(
                 "p",
                 {
-                  style: __spreadProps(__spreadValues({}, styles11.p), {
+                  style: __spreadProps(__spreadValues({}, styles12.p), {
                     color: `${data.text}`
                   }),
                   children: [
@@ -1312,9 +1312,9 @@ var Solid = () => {
               )
             }
           ),
-          /* @__PURE__ */ jsx11("div", { style: styles11.labelAfter })
+          /* @__PURE__ */ jsx11("div", { style: styles12.labelAfter })
         ] }) })),
-        /* @__PURE__ */ jsx11("div", { style: styles11.btnAfter })
+        /* @__PURE__ */ jsx11("div", { style: styles12.btnAfter })
       ]
     }
   );
@@ -1395,6 +1395,77 @@ var Button = (_a) => {
 };
 var Button_default = Button;
 
+// src/components/Buttons/modern/Modern.tsx
+import { useState as useState7 } from "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
+import { jsx as jsx13 } from "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] = useState7(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__ */ jsx13(
+    "a",
+    __spreadProps(__spreadValues({
+      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
+    }, props), {
+      children
+    })
+  );
+};
+var Modern_default = Modern;
+
 // src/components/Avatar/Avatar.tsx
 import { IoCloudUploadOutline } from "react-icons/io5";
 import { FaTrashCan } from "react-icons/fa6";
@@ -1417,7 +1488,7 @@ var button = {
   position: "absolute",
   backgroundColor: "white"
 };
-var styles8 = {
+var styles9 = {
   container: {
     width: "100%",
     height: "100%",
@@ -1448,14 +1519,14 @@ var styles8 = {
   }),
   edit: __spreadValues({}, button)
 };
-var styles_default8 = styles8;
+var styles_default9 = styles9;
 
 // src/components/Avatar/Avatar.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef7, useState as useState8 } from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var Avatar = ({ src, setValue, options }) => {
-  const [isOpen, setOpen] = useState7(false);
-  const [isNew, setNew] = useState7(false);
+  const [isOpen, setOpen] = useState8(false);
+  const [isNew, setNew] = useState8(false);
   const defaultImage = useRef7(void 0);
   const initialImage = useRef7(void 0);
   const uploadImageRef = useRef7(null);
@@ -1474,8 +1545,8 @@ var Avatar = ({ src, setValue, options }) => {
       });
     })();
   }, []);
-  return /* @__PURE__ */ jsxs11("div", { style: styles_default8.container, children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs11("div", { style: styles_default9.container, children: [
+    /* @__PURE__ */ jsx14(
       ImageEditor_default,
       {
         src,
@@ -1485,22 +1556,22 @@ var Avatar = ({ src, setValue, options }) => {
         isNew
       }
     ),
-    /* @__PURE__ */ jsx13(Image_default, { src, style: styles_default8.image }),
+    /* @__PURE__ */ jsx14(Image_default, { src, style: styles_default9.image }),
     /* @__PURE__ */ jsxs11(
       Button_default,
       {
-        style: styles_default8.upload,
+        style: styles_default9.upload,
         onClick: () => {
           var _a;
           return (_a = uploadImageRef.current) == null ? void 0 : _a.click();
         },
         children: [
-          /* @__PURE__ */ jsx13(IoCloudUploadOutline, { size: others.iconSize }),
+          /* @__PURE__ */ jsx14(IoCloudUploadOutline, { size: others.iconSize }),
           "Upload"
         ]
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       UploadImage_default,
       {
         ref: uploadImageRef,
@@ -1514,14 +1585,14 @@ var Avatar = ({ src, setValue, options }) => {
     isAbleToRemove && /* @__PURE__ */ jsxs11(
       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__ */ jsx13(FaTrashCan, { size: others.iconSize, color: "red" }),
+          /* @__PURE__ */ jsx14(FaTrashCan, { size: others.iconSize, color: "red" }),
           "Remove"
         ]
       }
@@ -1529,10 +1600,10 @@ var Avatar = ({ src, setValue, options }) => {
     isAbleToEdit && /* @__PURE__ */ jsxs11(
       Button_default,
       {
-        style: styles_default8.edit,
+        style: styles_default9.edit,
         onClick: () => setOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ jsx13(RiEditLine, { size: others.iconSize }),
+          /* @__PURE__ */ jsx14(RiEditLine, { size: others.iconSize }),
           "Edit"
         ]
       }
@@ -1542,7 +1613,7 @@ var Avatar = ({ src, setValue, options }) => {
 var Avatar_default = Avatar;
 
 // src/components/Input/InputGoogle/InputGoogle.tsx
-import { useEffect as useEffect8, useRef as useRef8, useState as useState8 } from "react";
+import { useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
 
 // src/components/Input/InputGoogle/InputGoogle.styles.ts
 var others2 = {
@@ -1556,7 +1627,7 @@ var others2 = {
   textFocus: "#0957d0",
   border: "solid 2px"
 };
-var styles9 = {
+var styles10 = {
   input: {
     boxSizing: "border-box",
     height: "40px",
@@ -1581,10 +1652,10 @@ var styles9 = {
     backgroundColor: "white"
   }
 };
-var InputGoogle_styles_default = styles9;
+var InputGoogle_styles_default = styles10;
 
 // src/components/Input/InputGoogle/InputGoogle.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var InputGoogle = (_a) => {
   var _b = _a, {
     value = "",
@@ -1598,7 +1669,7 @@ var InputGoogle = (_a) => {
     "label",
     "options"
   ]);
-  const [isFocus, setFocus] = useState8(false);
+  const [isFocus, setFocus] = useState9(false);
   const spanRef = useRef8(null);
   const inputRef = useRef8(null);
   function transitionOnFocus() {
@@ -1627,7 +1698,7 @@ var InputGoogle = (_a) => {
     transitionOffFocus();
   }, []);
   return /* @__PURE__ */ jsxs12("div", { style: InputGoogle_styles_default.container, children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "input",
       __spreadValues({
         id: crypto.randomUUID(),
@@ -1643,7 +1714,7 @@ var InputGoogle = (_a) => {
         onBlur: transitionOffFocus
       }, props)
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "span",
       {
         ref: spanRef,
@@ -1659,7 +1730,7 @@ var InputGoogle = (_a) => {
 var InputGoogle_default = InputGoogle;
 
 // src/components/Input/TextArea/TextArea.tsx
-import { useEffect as useEffect9, useRef as useRef9, useState as useState9 } from "react";
+import { useEffect as useEffect9, useRef as useRef9, useState as useState10 } from "react";
 
 // src/components/Input/TextArea/TextArea.styles.ts
 var labelHeight = 20;
@@ -1674,7 +1745,7 @@ var others3 = {
   textFocus: "#0957d0",
   border: "solid 2px"
 };
-var styles10 = {
+var styles11 = {
   input: {
     boxSizing: "border-box",
     height: "100%",
@@ -1702,10 +1773,10 @@ var styles10 = {
     backgroundColor: "white"
   }
 };
-var TextArea_styles_default = styles10;
+var TextArea_styles_default = styles11;
 
 // src/components/Input/TextArea/TextArea.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var TextArea = (_a) => {
   var _b = _a, {
     value = "",
@@ -1719,7 +1790,7 @@ var TextArea = (_a) => {
     "label",
     "options"
   ]);
-  const [isFocus, setFocus] = useState9(false);
+  const [isFocus, setFocus] = useState10(false);
   const spanRef = useRef9(null);
   const inputRef = useRef9(null);
   function transitionOnFocus() {
@@ -1748,7 +1819,7 @@ var TextArea = (_a) => {
     transitionOffFocus();
   }, []);
   return /* @__PURE__ */ jsxs13("div", { style: TextArea_styles_default.container, children: [
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       "textarea",
       __spreadValues({
         id: crypto.randomUUID(),
@@ -1763,7 +1834,7 @@ var TextArea = (_a) => {
         onBlur: transitionOffFocus
       }, props)
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       "span",
       {
         ref: spanRef,
@@ -1779,8 +1850,8 @@ var TextArea = (_a) => {
 var TextArea_default = TextArea;
 
 // src/components/Input/InputFile.tsx
-import { useState as useState10 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var InputFile = (_a) => {
   var _b = _a, {
     file,
@@ -1794,8 +1865,8 @@ var InputFile = (_a) => {
     "onCancel",
     "acceptType"
   ]);
-  const [key, setKey] = useState10(Date.now());
-  return /* @__PURE__ */ jsx16(
+  const [key, setKey] = useState11(Date.now());
+  return /* @__PURE__ */ jsx17(
     "input",
     __spreadValues({
       id: crypto.randomUUID(),
@@ -1819,7 +1890,7 @@ var InputFile = (_a) => {
 var InputFile_default = InputFile;
 
 // src/components/Image/UploadImage.tsx
-import { Fragment, jsx as jsx17 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx18 } from "react/jsx-runtime";
 var UploadImage = (_a) => {
   var _b = _a, {
     setSrc = () => {
@@ -1834,7 +1905,7 @@ var UploadImage = (_a) => {
       setSrc(src);
     });
   }
-  return /* @__PURE__ */ jsx17(Fragment, { children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(Fragment, { children: /* @__PURE__ */ jsx18(
     InputFile_default,
     __spreadProps(__spreadValues({
       onChoose: handleSetSrc,
@@ -1847,10 +1918,10 @@ var UploadImage = (_a) => {
 var UploadImage_default = UploadImage;
 
 // src/components/Image/Image.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Image = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "img",
     __spreadProps(__spreadValues({
       style: { width: "100%", height: "100%" }
@@ -1863,7 +1934,7 @@ var Image = (_a) => {
 var Image_default = Image;
 
 // src/components/Image/ImageEditor/ImageEditor.tsx
-import { useEffect as useEffect12, useMemo, useRef as useRef10, useState as useState13 } from "react";
+import { useEffect as useEffect12, useMemo, useRef as useRef10, useState as useState14 } from "react";
 
 // src/components/Image/ImageEditor/ImageEditor.styles.ts
 var imageEditorStyles = {
@@ -2282,7 +2353,7 @@ var WTouchEvent = class {
 };
 
 // src/components/Image/ImageEditor/MainElements/MainElements.tsx
-import { useEffect as useEffect11, useState as useState12 } from "react";
+import { useEffect as useEffect11, useState as useState13 } from "react";
 
 // src/components/Image/ImageEditor/context.ts
 import { createContext as createContext4, useContext as useContext4 } from "react";
@@ -2419,11 +2490,11 @@ var MainElementStyles = {
 var MainElements_styles_default = MainElementStyles;
 
 // src/components/Image/ImageEditor/MainElements/Rotate.tsx
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect10, useState as useState12 } from "react";
 import { FaArrowRotateLeft } from "react-icons/fa6";
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var Rotate = () => {
-  const [rotate, setRotate] = useState11(false);
+  const [rotate, setRotate] = useState12(false);
   const { transformOperation: transformOperation2, refs } = useMyContext3();
   const mouseEvent = new WMouseEvent(transformOperation2);
   const touchEvent = new WTouchEvent(transformOperation2);
@@ -2469,8 +2540,8 @@ var Rotate = () => {
           touchEvent.rotate(e, { top: true });
         },
         children: [
-          /* @__PURE__ */ jsx19("div", { style: handleBackground(rotate) }),
-          /* @__PURE__ */ jsx19(FaArrowRotateLeft, { size: "15" }),
+          /* @__PURE__ */ jsx20("div", { style: handleBackground(rotate) }),
+          /* @__PURE__ */ jsx20(FaArrowRotateLeft, { size: "15" }),
           rotate && /* @__PURE__ */ jsxs14(
             "p",
             {
@@ -2500,8 +2571,8 @@ var Rotate = () => {
           touchEvent.rotate(e, { bottom: true });
         },
         children: [
-          /* @__PURE__ */ jsx19("div", { style: handleBackground(rotate) }),
-          /* @__PURE__ */ jsx19(FaArrowRotateLeft, { size: "15" }),
+          /* @__PURE__ */ jsx20("div", { style: handleBackground(rotate) }),
+          /* @__PURE__ */ jsx20(FaArrowRotateLeft, { size: "15" }),
           rotate && /* @__PURE__ */ jsxs14(
             "p",
             {
@@ -2524,7 +2595,7 @@ var Rotate = () => {
 var Rotate_default = Rotate;
 
 // src/components/Image/ImageEditor/MainElements/MainElements.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var MainElements = () => {
   const {
     refs,
@@ -2534,11 +2605,11 @@ var MainElements = () => {
   } = useMyContext3();
   const mouseEvent = new WMouseEvent(transformOperation2);
   const touchEvent = new WTouchEvent(transformOperation2);
-  const [topLeft, settopLeft] = useState12(false);
-  const [topRight, settopRight] = useState12(false);
-  const [bottomLeft, setbottomLeft] = useState12(false);
-  const [bottomRight, setbottomRight] = useState12(false);
-  const [reRender, triggierReRender] = useState12(false);
+  const [topLeft, settopLeft] = useState13(false);
+  const [topRight, settopRight] = useState13(false);
+  const [bottomLeft, setbottomLeft] = useState13(false);
+  const [bottomRight, setbottomRight] = useState13(false);
+  const [reRender, triggierReRender] = useState13(false);
   const { angle, width, height } = transformOperation2.getDimension();
   const handleBackground = (value) => {
     return value ? MainElements_styles_default.buttonBackgroundDown : MainElements_styles_default.buttonBackground;
@@ -2584,7 +2655,7 @@ var MainElements = () => {
     };
   }, [reRender]);
   return /* @__PURE__ */ jsxs15("div", { ref: refs.container, style: MainElements_styles_default.container, children: [
-    /* @__PURE__ */ jsx20("div", { ref: refs.frame, style: MainElements_styles_default.frame, children: /* @__PURE__ */ jsx20("img", { src: originalSrc, style: MainElements_styles_default.img, ref: imgRefs.img }) }),
+    /* @__PURE__ */ jsx21("div", { ref: refs.frame, style: MainElements_styles_default.frame, children: /* @__PURE__ */ jsx21("img", { src: originalSrc, style: MainElements_styles_default.img, ref: imgRefs.img }) }),
     /* @__PURE__ */ jsxs15(
       "div",
       {
@@ -2593,7 +2664,7 @@ var MainElements = () => {
         onMouseDown: (e) => mouseEvent.drag(e),
         onTouchStart: (e) => touchEvent.drag(e),
         children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "div",
             {
               ref: refs.topLeft,
@@ -2610,10 +2681,10 @@ var MainElements = () => {
                   topLeft: true
                 });
               },
-              children: /* @__PURE__ */ jsx20("div", { style: handleBackground(topLeft) })
+              children: /* @__PURE__ */ jsx21("div", { style: handleBackground(topLeft) })
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "div",
             {
               ref: refs.topRight,
@@ -2630,10 +2701,10 @@ var MainElements = () => {
                   topRight: true
                 });
               },
-              children: /* @__PURE__ */ jsx20("div", { style: handleBackground(topRight) })
+              children: /* @__PURE__ */ jsx21("div", { style: handleBackground(topRight) })
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "div",
             {
               ref: refs.bottomLeft,
@@ -2650,10 +2721,10 @@ var MainElements = () => {
                   bottomLeft: true
                 });
               },
-              children: /* @__PURE__ */ jsx20("div", { style: handleBackground(bottomLeft) })
+              children: /* @__PURE__ */ jsx21("div", { style: handleBackground(bottomLeft) })
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "div",
             {
               ref: refs.bottomRight,
@@ -2670,10 +2741,10 @@ var MainElements = () => {
                   bottomRight: true
                 });
               },
-              children: /* @__PURE__ */ jsx20("div", { style: handleBackground(bottomRight) })
+              children: /* @__PURE__ */ jsx21("div", { style: handleBackground(bottomRight) })
             }
           ),
-          /* @__PURE__ */ jsx20(Rotate_default, {}),
+          /* @__PURE__ */ jsx21(Rotate_default, {}),
           (topLeft || topRight || bottomLeft || bottomRight) && /* @__PURE__ */ jsxs15(
             "p",
             {
@@ -2697,9 +2768,9 @@ var MainElements = () => {
 var MainElements_default = MainElements;
 
 // src/components/Image/ImageEditor/Instruction.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Instruction = () => {
-  return /* @__PURE__ */ jsx21("p", { style: ImageEditor_styles_default.instruction, children: "Drag, Zoom, or Rotate image" });
+  return /* @__PURE__ */ jsx22("p", { style: ImageEditor_styles_default.instruction, children: "Drag, Zoom, or Rotate image" });
 };
 var Instruction_default = Instruction;
 
@@ -2819,7 +2890,7 @@ var TransformOperation = class extends TransformOperationExtension {
 var TransformOperation_default = TransformOperation;
 
 // src/components/Image/ImageEditor/ImageEditor.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var transformOperation = new TransformOperation_default();
 var ImageEditor = ({
   src,
@@ -2840,7 +2911,7 @@ var ImageEditor = ({
   const bottomRight = useRef10(null);
   const rotate = useRef10(null);
   const rotateBottom = useRef10(null);
-  const [transform, setTransform] = useState13(
+  const [transform, setTransform] = useState14(
     void 0
   );
   const transformState = useRef10(void 0);
@@ -2911,7 +2982,7 @@ var ImageEditor = ({
     };
   }, [isOpen]);
   if (!isOpen) return;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     MyContext3.Provider,
     {
       value: {
@@ -2933,10 +3004,10 @@ var ImageEditor = ({
         transformOperation
       },
       children: /* @__PURE__ */ jsxs16("div", { style: ImageEditor_styles_default.imageEditor, children: [
-        /* @__PURE__ */ jsx22(Instruction_default, {}),
-        /* @__PURE__ */ jsx22(MainElements_default, {}),
+        /* @__PURE__ */ jsx23(Instruction_default, {}),
+        /* @__PURE__ */ jsx23(MainElements_default, {}),
         /* @__PURE__ */ jsxs16("div", { style: ImageEditor_styles_default.buttons, children: [
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Button_default,
             {
               buttonType: "solid",
@@ -2944,7 +3015,7 @@ var ImageEditor = ({
               onClick: handleAccept
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Button_default,
             {
               buttonType: "solid",
@@ -2952,7 +3023,7 @@ var ImageEditor = ({
               onClick: handleCancel
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Button_default,
             {
               buttonType: "solid",
@@ -3448,19 +3519,19 @@ function useSession() {
 }
 
 // src/auth/react/SessionProvider.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var SessionProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx23(SessionContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx24(SessionContext.Provider, { value, children });
 };
 var SessionProvider_default = SessionProvider;
 
 // src/auth/react/useAuthClient.ts
-import { useEffect as useEffect13, useRef as useRef11, useState as useState14 } from "react";
+import { useEffect as useEffect13, useRef as useRef11, useState as useState15 } from "react";
 var useAuthClient = (auth) => {
-  const [isLoading, setLoading] = useState14(false);
+  const [isLoading, setLoading] = useState15(false);
   const sessionRef = useRef11(void 0);
   useEffect13(() => {
     let is = true;
@@ -3628,6 +3699,7 @@ export {
   InputFile_default as InputFile,
   InputGoogle_default as InputGoogle,
   LinearAlgebra_default as LinearAlgebra,
+  Modern_default as ModernButton,
   MultiSelect_default as MultiSelect,
   OptionSlider_default as OptionSlider,
   RangeSlider_default as RangeSlider,