@willphan1712000/frontend 1.0.3 → 1.1.0

package/dist/index.js

@@ -10,6 +10,54 @@ function _array_with_holes(arr) {
 function _array_without_holes(arr) {
     if (Array.isArray(arr)) return _array_like_to_array(arr);
 }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -23,6 +71,20 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
 function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
@@ -56,6 +118,10 @@ function _non_iterable_rest() {
 function _non_iterable_spread() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _object_destructuring_empty(o) {
+    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
+    return o;
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -140,9 +206,102 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = function(target, all) {
     for(var name in all)__defProp(target, name, {
@@ -181,6 +340,16 @@ var __copyProps = function(to, from, except, desc) {
     }
     return to;
 };
+var __toESM = function(mod, isNodeMode, target) {
+    return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+        value: mod,
+        enumerable: true
+    }) : target, mod);
+};
 var __toCommonJS = function(mod) {
     return __copyProps(__defProp({}, "__esModule", {
         value: true
@@ -189,15 +358,36 @@ var __toCommonJS = function(mod) {
 // index.ts
 var index_exports = {};
 __export(index_exports, {
+    Avatar: function() {
+        return Avatar_default;
+    },
     Button: function() {
         return Button_default;
     },
+    Canvas: function() {
+        return Canvas;
+    },
     ColorPickerSlider: function() {
         return ColorPickerSlider_default;
     },
     DropdownSelect: function() {
         return DropdownSelect_default;
     },
+    Image: function() {
+        return Image_default;
+    },
+    ImageEditor: function() {
+        return ImageEditor_default;
+    },
+    ImageUtilities: function() {
+        return Image_default2;
+    },
+    InputFile: function() {
+        return InputFile_default;
+    },
+    InputGoogle: function() {
+        return InputGoogle_default;
+    },
     MultiSelect: function() {
         return MultiSelect_default;
     },
@@ -206,6 +396,15 @@ __export(index_exports, {
     },
     RangeSlider: function() {
         return RangeSlider_default;
+    },
+    TextArea: function() {
+        return TextArea_default;
+    },
+    Transform: function() {
+        return Transform;
+    },
+    UploadImage: function() {
+        return UploadImage_default;
     }
 });
 module.exports = __toCommonJS(index_exports);
@@ -1243,7 +1442,7 @@ var import_framer_motion = require("framer-motion");
 // src/components/Buttons/gradient/styles.ts
 var borderRadius = "20px";
 var styles6 = function(first, second) {
-    var styles8 = {
+    var styles11 = {
         container: {
             position: "relative",
             borderRadius: borderRadius,
@@ -1318,21 +1517,21 @@ var styles6 = function(first, second) {
             width: "100%"
         }
     };
-    return styles8;
+    return styles11;
 };
 var styles_default6 = styles6;
 // src/components/Buttons/gradient/Gradient.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Gradient = function() {
     var data = useButtonContext();
-    var styles8 = styles_default6(data.first, data.second);
+    var styles11 = styles_default6(data.first, data.second);
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", {
-        style: _object_spread_props(_object_spread({}, styles8.container), {
+        style: _object_spread_props(_object_spread({}, styles11.container), {
             overflow: data.isLoading ? "hidden" : ""
         }),
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", _object_spread_props(_object_spread({
-                style: styles8.btn
+                style: styles11.btn
             }, data.props), {
                 children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", {
                     style: {
@@ -1340,30 +1539,34 @@ var Gradient = function() {
                     },
                     children: [
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
-                            style: styles8.labelBefore
+                            style: styles11.labelBefore
                         }),
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
-                            style: _object_spread_props(_object_spread({}, styles8.label), {
+                            style: _object_spread_props(_object_spread({}, styles11.label), {
                                 backgroundColor: data.main
                             }),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", {
-                                style: _object_spread_props(_object_spread({}, styles8.p), {
+                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", {
+                                style: _object_spread_props(_object_spread({}, styles11.p), {
                                     color: "".concat(data.text)
                                 }),
-                                children: data.content
+                                children: [
+                                    data.children,
+                                    " ",
+                                    data.content
+                                ]
                             })
                         }),
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
-                            style: styles8.labelAfter
+                            style: styles11.labelAfter
                         })
                     ]
                 })
             })),
             !data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
-                style: styles8.btnAfter
+                style: styles11.btnAfter
             }),
             data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_framer_motion.motion.div, {
-                style: styles8.btnAfter,
+                style: styles11.btnAfter,
                 animate: {
                     rotate: 360
                 },
@@ -1379,8 +1582,8 @@ var Gradient = function() {
 var Gradient_default = Gradient;
 // src/components/Buttons/solid/styles.ts
 var styles7 = function(first) {
-    var styles8 = {
-        "btn": {
+    var styles11 = {
+        btn: {
             cursor: "pointer",
             position: "relative",
             zIndex: 0,
@@ -1392,7 +1595,7 @@ var styles7 = function(first) {
             backgroundColor: first,
             border: "none"
         },
-        "btnAfter": {
+        btnAfter: {
             position: "absolute",
             top: 0,
             left: 0,
@@ -1402,12 +1605,12 @@ var styles7 = function(first) {
             backgroundColor: first,
             filter: "blur(10px)"
         },
-        "label": {
+        label: {
             borderRadius: "0.75rem",
             padding: "0.5rem 2rem",
             color: "white"
         },
-        "labelBefore": {
+        labelBefore: {
             position: "absolute",
             top: "20%",
             right: "50%",
@@ -1419,7 +1622,7 @@ var styles7 = function(first) {
             backgroundColor: first,
             filter: "blur(15px)"
         },
-        "labelAfter": {
+        labelAfter: {
             position: "absolute",
             top: "20%",
             left: "50%",
@@ -1430,27 +1633,27 @@ var styles7 = function(first) {
             zIndex: 0,
             filter: "blur(20px)"
         },
-        "p": {
+        p: {
             zIndex: 1,
             position: "relative",
             margin: 0
         }
     };
-    return styles8;
+    return styles11;
 };
 var styles_default7 = styles7;
 // src/components/Buttons/solid/Solid.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Solid = function() {
     var data = useButtonContext();
-    var styles8 = styles_default7(data.first);
+    var styles11 = styles_default7(data.first);
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", {
         style: {
             position: "relative"
         },
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", _object_spread_props(_object_spread({
-                style: styles8.btn
+                style: styles11.btn
             }, data.props), {
                 children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", {
                     style: {
@@ -1458,27 +1661,31 @@ var Solid = function() {
                     },
                     children: [
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
-                            style: styles8.labelBefore
+                            style: styles11.labelBefore
                         }),
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
-                            style: _object_spread_props(_object_spread({}, styles8.label), {
+                            style: _object_spread_props(_object_spread({}, styles11.label), {
                                 backgroundColor: data.main
                             }),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", {
-                                style: _object_spread_props(_object_spread({}, styles8.p), {
+                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", {
+                                style: _object_spread_props(_object_spread({}, styles11.p), {
                                     color: "".concat(data.text)
                                 }),
-                                children: data.content
+                                children: [
+                                    data.children,
+                                    " ",
+                                    data.content
+                                ]
                             })
                         }),
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
-                            style: styles8.labelAfter
+                            style: styles11.labelAfter
                         })
                     ]
                 })
             })),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
-                style: styles8.btnAfter
+                style: styles11.btnAfter
             })
         ]
     });
@@ -1495,14 +1702,15 @@ function useButtonContext() {
     return data;
 }
 var Button = function(_param) {
-    var _param_buttonType = _param.buttonType, buttonType = _param_buttonType === void 0 ? "normal" : _param_buttonType, content = _param.content, _param_main = _param.main, main = _param_main === void 0 ? "#111723" : _param_main, _param_first = _param.first, first = _param_first === void 0 ? "#3e8fbc" : _param_first, _param_second = _param.second, second = _param_second === void 0 ? "#aa6392" : _param_second, _param_text = _param.text, text = _param_text === void 0 ? "#fff" : _param_text, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, props = _object_without_properties(_param, [
+    var _param_buttonType = _param.buttonType, buttonType = _param_buttonType === void 0 ? "normal" : _param_buttonType, _param_content = _param.content, content = _param_content === void 0 ? "" : _param_content, _param_main = _param.main, main = _param_main === void 0 ? "#111723" : _param_main, _param_first = _param.first, first = _param_first === void 0 ? "#3e8fbc" : _param_first, _param_second = _param.second, second = _param_second === void 0 ? "#aa6392" : _param_second, _param_text = _param.text, text = _param_text === void 0 ? "#fff" : _param_text, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_children = _param.children, children = _param_children === void 0 ? void 0 : _param_children, props = _object_without_properties(_param, [
         "buttonType",
         "content",
         "main",
         "first",
         "second",
         "text",
-        "isLoading"
+        "isLoading",
+        "children"
     ]);
     switch(buttonType){
         case "gradient":
@@ -1514,7 +1722,8 @@ var Button = function(_param) {
                     second: second,
                     text: text,
                     props: props,
-                    isLoading: isLoading
+                    isLoading: isLoading,
+                    children: children
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Gradient_default, {})
             });
@@ -1526,23 +1735,1294 @@ var Button = function(_param) {
                     first: first,
                     text: text,
                     props: props,
-                    isLoading: isLoading
+                    isLoading: isLoading,
+                    children: children
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Solid_default, {})
             });
         default:
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", _object_spread_props(_object_spread({}, props), {
-                children: content
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", _object_spread_props(_object_spread({}, props), {
+                children: [
+                    children,
+                    " ",
+                    content
+                ]
             }));
     }
 };
 var Button_default = Button;
+// 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"
+};
+var button = {
+    fontSize: "0.8rem",
+    border: "none",
+    borderRadius: "15px",
+    padding: "3%",
+    display: "flex",
+    gap: "5px",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer",
+    position: "absolute"
+};
+var styles8 = {
+    container: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        position: "relative"
+    },
+    image: {
+        borderRadius: "50%",
+        background: "white",
+        objectFit: "cover",
+        width: "100%",
+        height: "100%"
+    },
+    unknown: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        height: "100%"
+    },
+    upload: _object_spread_props(_object_spread({}, button), {
+        bottom: 0,
+        right: 0
+    }),
+    remove: _object_spread_props(_object_spread({}, button), {
+        top: 0,
+        right: 0
+    }),
+    edit: _object_spread({}, button)
+};
+var styles_default8 = styles8;
+// src/components/Avatar/Avatar.tsx
+var import_react10 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Avatar = function(param) {
+    var src = param.src, setValue = param.setValue;
+    var setSrc = function setSrc() {
+        return _async_to_generator(function() {
+            var translatedSrc;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            Image_default2.FromStringToImageSrc(src)
+                        ];
+                    case 1:
+                        translatedSrc = _state.sent();
+                        if (!translatedSrc) return [
+                            2
+                        ];
+                        defaultImage.current = translatedSrc;
+                        setValue(translatedSrc);
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    var _ref = _sliced_to_array((0, import_react10.useState)(false), 2), isOpen = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react10.useState)(false), 2), isNew = _ref1[0], setNew = _ref1[1];
+    var uploadImageRef = (0, import_react10.useRef)(null);
+    var defaultImage = (0, import_react10.useRef)("");
+    (0, import_react10.useEffect)(function() {
+        setSrc();
+    }, [
+        src
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", {
+        style: styles_default8.container,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ImageEditor_default, {
+                src: src,
+                setSrc: setValue,
+                isOpen: isOpen,
+                setOpen: setOpen,
+                isNew: isNew
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Image_default, {
+                src: src,
+                style: styles_default8.image
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button_default, {
+                style: styles_default8.upload,
+                onClick: function() {
+                    var _uploadImageRef_current;
+                    return (_uploadImageRef_current = uploadImageRef.current) === null || _uploadImageRef_current === void 0 ? void 0 : _uploadImageRef_current.click();
+                },
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_io5.IoCloudUploadOutline, {
+                        size: others.iconSize
+                    }),
+                    "Upload"
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(UploadImage_default, {
+                ref: uploadImageRef,
+                setSrc: function(e) {
+                    setValue(e);
+                    setOpen(true);
+                    setNew(function(prev) {
+                        return !prev;
+                    });
+                }
+            }),
+            src !== defaultImage.current && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, {
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button_default, {
+                        style: styles_default8.remove,
+                        onClick: function() {
+                            setValue(defaultImage.current);
+                            setNew(function(prev) {
+                                return !prev;
+                            });
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa6.FaTrashCan, {
+                                size: others.iconSize,
+                                color: "red"
+                            }),
+                            "Remove"
+                        ]
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button_default, {
+                        style: styles_default8.edit,
+                        onClick: function() {
+                            return setOpen(function(prev) {
+                                return !prev;
+                            });
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ri.RiEditLine, {
+                                size: others.iconSize
+                            }),
+                            "Edit"
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+var Avatar_default = Avatar;
+// src/components/Input/InputGoogle/InputGoogle.tsx
+var import_react11 = require("react");
+// src/components/Input/InputGoogle/InputGoogle.styles.ts
+var others2 = {
+    topRelease: "50%",
+    topFocus: "0",
+    fontSizeRelease: "16px",
+    fontSizeFocus: "14px",
+    borderRelease: "#cbcbcb",
+    borderFocus: "#0957d0",
+    textRelease: "#000",
+    textFocus: "#0957d0",
+    border: "solid 2px"
+};
+var styles9 = {
+    input: {
+        boxSizing: "border-box",
+        height: "40px",
+        width: "100%",
+        border: "".concat(others2.border, " ").concat(others2.borderRelease),
+        borderRadius: "6px",
+        padding: "10px",
+        outline: "none"
+    },
+    container: {
+        width: "100%",
+        position: "relative"
+    },
+    label: {
+        position: "absolute",
+        top: "50%",
+        left: "10px",
+        fontSize: "16px",
+        transform: "translateY(-50%)",
+        transition: "all .1s linear",
+        padding: "0px 5px",
+        backgroundColor: "white"
+    }
+};
+var InputGoogle_styles_default = styles9;
+// src/components/Input/InputGoogle/InputGoogle.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var InputGoogle = function(_param) {
+    var transitionOnFocus = function transitionOnFocus() {
+        setFocus(true);
+        if (spanRef.current) {
+            spanRef.current.style.top = others2.topFocus;
+            spanRef.current.style.fontSize = others2.fontSizeFocus;
+        }
+    };
+    var transitionOffFocus = function transitionOffFocus() {
+        setFocus(false);
+        if (value) return;
+        if (spanRef.current) {
+            spanRef.current.style.top = others2.topRelease;
+            spanRef.current.style.fontSize = others2.fontSizeRelease;
+        }
+    };
+    var handleClickOnLabel = function handleClickOnLabel() {
+        var _inputRef_current;
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+    };
+    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, _param_setValue = _param.setValue, setValue = _param_setValue === void 0 ? function() {} : _param_setValue, _param_label = _param.label, label = _param_label === void 0 ? "Input Google Component Label" : _param_label, options = _param.options, props = _object_without_properties(_param, [
+        "value",
+        "setValue",
+        "label",
+        "options"
+    ]);
+    var _ref = _sliced_to_array((0, import_react11.useState)(false), 2), isFocus = _ref[0], setFocus = _ref[1];
+    var spanRef = (0, import_react11.useRef)(null);
+    var inputRef = (0, import_react11.useRef)(null);
+    var inputBorder = isFocus ? "".concat(others2.border, " ").concat(options ? options.focusColor : others2.borderFocus) : "".concat(others2.border, " ").concat(others2.borderRelease);
+    var labelTextColor = isFocus ? "".concat(options ? options.focusColor : others2.textFocus) : "".concat(others2.textRelease);
+    (0, import_react11.useEffect)(function() {
+        transitionOnFocus();
+        transitionOffFocus();
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", {
+        style: InputGoogle_styles_default.container,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", _object_spread({
+                id: "will-input-google",
+                ref: inputRef,
+                value: value,
+                onChange: function(e) {
+                    return setValue(e.target.value);
+                },
+                type: "text",
+                style: _object_spread_props(_object_spread({}, InputGoogle_styles_default.input), {
+                    border: inputBorder
+                }),
+                onFocus: transitionOnFocus,
+                onBlur: transitionOffFocus
+            }, props)),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", {
+                ref: spanRef,
+                style: _object_spread_props(_object_spread({}, InputGoogle_styles_default.label), {
+                    color: labelTextColor
+                }),
+                onClick: handleClickOnLabel,
+                children: label
+            })
+        ]
+    });
+};
+var InputGoogle_default = InputGoogle;
+// src/components/Input/TextArea/TextArea.tsx
+var import_react12 = require("react");
+// src/components/Input/TextArea/TextArea.styles.ts
+var labelHeight = 20;
+var others3 = {
+    topRelease: "".concat(labelHeight + 5, "px"),
+    topFocus: "0",
+    fontSizeRelease: "16px",
+    fontSizeFocus: "14px",
+    borderRelease: "#cbcbcb",
+    borderFocus: "#0957d0",
+    textRelease: "#000",
+    textFocus: "#0957d0",
+    border: "solid 2px"
+};
+var styles10 = {
+    input: {
+        boxSizing: "border-box",
+        height: "100%",
+        width: "100%",
+        border: "".concat(others3.border, " ").concat(others3.borderRelease),
+        borderRadius: "6px",
+        padding: "10px",
+        outline: "none",
+        resize: "none"
+    },
+    container: {
+        width: "100%",
+        height: "100%",
+        position: "relative"
+    },
+    label: {
+        height: "".concat(labelHeight, "px"),
+        position: "absolute",
+        top: "".concat(labelHeight + 5, "px"),
+        left: "10px",
+        fontSize: "16px",
+        transform: "translateY(-50%)",
+        transition: "all .1s linear",
+        padding: "0px 5px",
+        backgroundColor: "white"
+    }
+};
+var TextArea_styles_default = styles10;
+// src/components/Input/TextArea/TextArea.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TextArea = function(_param) {
+    var transitionOnFocus = function transitionOnFocus() {
+        setFocus(true);
+        if (spanRef.current) {
+            spanRef.current.style.top = others3.topFocus;
+            spanRef.current.style.fontSize = others3.fontSizeFocus;
+        }
+    };
+    var transitionOffFocus = function transitionOffFocus() {
+        setFocus(false);
+        if (value) return;
+        if (spanRef.current) {
+            spanRef.current.style.top = others3.topRelease;
+            spanRef.current.style.fontSize = others3.fontSizeRelease;
+        }
+    };
+    var handleClickOnLabel = function handleClickOnLabel() {
+        var _inputRef_current;
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+    };
+    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, _param_setValue = _param.setValue, setValue = _param_setValue === void 0 ? function() {} : _param_setValue, _param_label = _param.label, label = _param_label === void 0 ? "Text Component Label" : _param_label, options = _param.options, props = _object_without_properties(_param, [
+        "value",
+        "setValue",
+        "label",
+        "options"
+    ]);
+    var _ref = _sliced_to_array((0, import_react12.useState)(false), 2), isFocus = _ref[0], setFocus = _ref[1];
+    var spanRef = (0, import_react12.useRef)(null);
+    var inputRef = (0, import_react12.useRef)(null);
+    var inputBorder = isFocus ? "".concat(others3.border, " ").concat(options ? options.focusColor : others3.borderFocus) : "".concat(others3.border, " ").concat(others3.borderRelease);
+    var labelTextColor = isFocus ? "".concat(options ? options.focusColor : others3.textFocus) : "".concat(others3.textRelease);
+    (0, import_react12.useEffect)(function() {
+        transitionOnFocus();
+        transitionOffFocus();
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", {
+        style: TextArea_styles_default.container,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("textarea", _object_spread({
+                id: "will-textarea",
+                ref: inputRef,
+                value: value,
+                onChange: function(e) {
+                    return setValue(e.target.value);
+                },
+                style: _object_spread_props(_object_spread({}, TextArea_styles_default.input), {
+                    border: inputBorder
+                }),
+                onFocus: transitionOnFocus,
+                onBlur: transitionOffFocus
+            }, props)),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", {
+                ref: spanRef,
+                style: _object_spread_props(_object_spread({}, TextArea_styles_default.label), {
+                    color: labelTextColor
+                }),
+                onClick: handleClickOnLabel,
+                children: label
+            })
+        ]
+    });
+};
+var TextArea_default = TextArea;
+// src/components/Input/InputFile.tsx
+var import_react13 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var InputFile = function(_param) {
+    var file = _param.file, onChoose = _param.onChoose, _param_onCancel = _param.onCancel, onCancel = _param_onCancel === void 0 ? function() {} : _param_onCancel, _param_acceptType = _param.acceptType, acceptType = _param_acceptType === void 0 ? "image/*" : _param_acceptType, props = _object_without_properties(_param, [
+        "file",
+        "onChoose",
+        "onCancel",
+        "acceptType"
+    ]);
+    var _ref = _sliced_to_array((0, import_react13.useState)(Date.now()), 2), key = _ref[0], setKey = _ref[1];
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", _object_spread_props(_object_spread({
+        type: "file"
+    }, props), {
+        onChange: function(e) {
+            var _target_files;
+            var target = e.target;
+            var file2 = (_target_files = target.files) === null || _target_files === void 0 ? void 0 : _target_files[0];
+            if (file2) {
+                setKey(Date.now());
+                onChoose(file2);
+            } else {
+                onCancel();
+            }
+        }
+    }), key);
+};
+var InputFile_default = InputFile;
+// src/components/Image/UploadImage.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var UploadImage = function(_param) {
+    var handleSetSrc = function handleSetSrc(file) {
+        return _async_to_generator(function() {
+            var src;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            Image_default2.FromFileToImageSrc(file)
+                        ];
+                    case 1:
+                        src = _state.sent();
+                        if (!src) return [
+                            2
+                        ];
+                        setSrc(src);
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    var _param_setSrc = _param.setSrc, setSrc = _param_setSrc === void 0 ? function() {} : _param_setSrc, props = _object_without_properties(_param, [
+        "setSrc"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputFile_default, _object_spread_props(_object_spread({
+            onChoose: handleSetSrc,
+            acceptType: "image/*"
+        }, props), {
+            hidden: true
+        }))
+    });
+};
+var UploadImage_default = UploadImage;
+// src/components/Image/Image.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Image = function(_param) {
+    var props = _extends({}, _object_destructuring_empty(_param));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", _object_spread_props(_object_spread({
+        style: {
+            width: "100%",
+            height: "100%"
+        }
+    }, props), {
+        alt: "Will-Image-Component",
+        draggable: false
+    }));
+};
+var Image_default = Image;
+// src/components/Image/ImageEditor/ImageEditor.tsx
+var import_react14 = require("react");
+// src/components/Image/ImageEditor/ImageEditor.styles.ts
+var imageEditorStyles = {
+    imageEditor: {
+        width: "100vw",
+        height: "100dvh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        backdropFilter: "blur(20px)",
+        zIndex: 99,
+        paddingLeft: "30px",
+        paddingRight: "30px"
+    },
+    frame: {
+        padding: "50px",
+        backgroundColor: "white",
+        border: "solid 4px #000",
+        borderStyle: "dashed",
+        borderRadius: "50%",
+        overflow: "hidden",
+        maxWidth: "500px",
+        width: "100%",
+        maxHeight: "500px",
+        aspectRatio: 1 / 1,
+        position: "relative"
+    },
+    wrapper: {
+        position: "absolute",
+        transformOrigin: "top left",
+        userSelect: "none"
+    },
+    img: {
+        objectFit: "contain",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        display: "block",
+        zIndex: 1,
+        transform: "translate(-50%, -50%)"
+    },
+    buttons: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "20px",
+        padding: "30px"
+    }
+};
+var ImageEditor_styles_default = imageEditorStyles;
+// src/components/Image/ImageEditor/ImageEditor.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ImageEditor = function(param) {
+    var src = param.src, _param_setSrc = param.setSrc, setSrc = _param_setSrc === void 0 ? function() {} : _param_setSrc, _param_isOpen = param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_setOpen = param.setOpen, setOpen = _param_setOpen === void 0 ? function() {} : _param_setOpen, _param_isNew = param.isNew, isNew = _param_isNew === void 0 ? false : _param_isNew;
+    var createTransform = function createTransform() {
+        return _async_to_generator(function() {
+            var transform2;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (!frame.current || !wrapper.current || !img.current) return [
+                            2
+                        ];
+                        transform2 = new Transform(wrapper.current, frame.current);
+                        return [
+                            4,
+                            transform2.initialize()
+                        ];
+                    case 1:
+                        _state.sent();
+                        if (transformState.current) {
+                            transform2.setState(transformState.current);
+                        } else {
+                            transform2.reset();
+                        }
+                        setTransform(transform2);
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    var handleCanvasToSrc = function handleCanvasToSrc() {
+        if (!frame.current || !wrapper.current || !img.current || !transform) return;
+        var canvasInstance = new Canvas();
+        var _canvasInstance_createCanvas = canvasInstance.createCanvas(700, 700), canvas = _canvasInstance_createCanvas.canvas, context = _canvasInstance_createCanvas.context;
+        var _transform_exportData = transform.exportData(), x = _transform_exportData.x, y = _transform_exportData.y, angle = _transform_exportData.angle;
+        transformState.current = transform.exportData();
+        var _canvasInstance_drawImage = canvasInstance.drawImage(img.current, context, x, y, 1, angle, canvas, frame.current.clientWidth, frame.current.clientHeight), src2 = _canvasInstance_drawImage.src;
+        return src2;
+    };
+    var handleAccept = function handleAccept() {
+        setSrc(handleCanvasToSrc());
+        setOpen(false);
+    };
+    var handleCancel = function handleCancel() {
+        setOpen(false);
+    };
+    var handleReset = function handleReset() {
+        if (!transform) return;
+        transform.reset();
+    };
+    var frame = (0, import_react14.useRef)(null);
+    var wrapper = (0, import_react14.useRef)(null);
+    var img = (0, import_react14.useRef)(null);
+    var _ref = _sliced_to_array((0, import_react14.useState)(void 0), 2), transform = _ref[0], setTransform = _ref[1];
+    var transformState = (0, import_react14.useRef)(void 0);
+    var originalSrc = (0, import_react14.useMemo)(function() {
+        transformState.current = void 0;
+        return src;
+    }, [
+        isNew
+    ]);
+    (0, import_react14.useEffect)(function() {
+        isOpen ? createTransform() : setTransform(void 0);
+    }, [
+        isOpen
+    ]);
+    if (!isOpen) return;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", {
+        style: ImageEditor_styles_default.imageEditor,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", {
+                children: "Drag, Zoom, or Rotate image"
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", {
+                ref: frame,
+                style: ImageEditor_styles_default.frame,
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", {
+                    ref: wrapper,
+                    style: ImageEditor_styles_default.wrapper,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", {
+                        src: originalSrc,
+                        style: ImageEditor_styles_default.img,
+                        ref: img
+                    })
+                })
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", {
+                style: ImageEditor_styles_default.buttons,
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button_default, {
+                        buttonType: "solid",
+                        content: "Accept",
+                        onClick: handleAccept
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button_default, {
+                        buttonType: "solid",
+                        content: "Cancel",
+                        onClick: handleCancel
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button_default, {
+                        buttonType: "solid",
+                        content: "Reset",
+                        onClick: handleReset
+                    })
+                ]
+            })
+        ]
+    });
+};
+var ImageEditor_default = ImageEditor;
+// src/utilities/canvas/Canvas.ts
+var Canvas = /*#__PURE__*/ function() {
+    function Canvas() {
+        _class_call_check(this, Canvas);
+    }
+    _create_class(Canvas, [
+        {
+            key: "createCanvas",
+            value: function createCanvas(width, height) {
+                var canvas = document.createElement("canvas");
+                var context = canvas.getContext("2d");
+                canvas.width = width;
+                canvas.height = height;
+                return {
+                    canvas: canvas,
+                    context: context
+                };
+            }
+        },
+        {
+            key: "drawImage",
+            value: function drawImage(e, ctx, x, y, scale, angle, canvas, containerWidth, containerHeight) {
+                var ratioX = canvas.width / containerWidth;
+                var ratioY = canvas.height / containerHeight;
+                var finalX = x * ratioX;
+                var finalY = y * ratioY;
+                var midleWidth = e.width * ratioX;
+                var midleHeight = e.height * ratioY;
+                var finalWidth = e.width * ratioX * scale;
+                var finalHeight = e.height * ratioY * scale;
+                ctx.save();
+                ctx.translate(finalX + midleWidth / 2, finalY + midleHeight / 2);
+                ctx.rotate(angle * Math.PI / 180);
+                ctx.drawImage(e, -finalWidth / 2, -finalHeight / 2, finalWidth, finalHeight);
+                ctx.restore();
+                var src = ctx.canvas.toDataURL();
+                var srcEncoded = src.split(",")[1];
+                return {
+                    context: ctx,
+                    src: src
+                };
+            }
+        },
+        {
+            key: "drawColor",
+            value: function drawColor(type, color, ctx, width, ratio) {
+                if (type === "") color = "#ffffff";
+                if (type === "gradient") {
+                    var breakdownArr = color.split(",");
+                    var _ref = [
+                        Number(breakdownArr[0]),
+                        breakdownArr[1],
+                        Number(breakdownArr[2]),
+                        breakdownArr[3],
+                        Number(breakdownArr[4])
+                    ], angle = _ref[0], color1 = _ref[1], percent1 = _ref[2], color2 = _ref[3], percent2 = _ref[4];
+                    var radians = (angle - 180) * Math.PI / 180;
+                    var x0 = width / 2 + width / 2 * Math.cos(radians - Math.PI / 2);
+                    var y0 = width * ratio / 2 + width * ratio / 2 * Math.sin(radians - Math.PI / 2);
+                    var x1 = width / 2 - width / 2 * Math.cos(radians - Math.PI / 2);
+                    var y1 = width * ratio / 2 - width * ratio / 2 * Math.sin(radians - Math.PI / 2);
+                    var gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+                    gradient.addColorStop(percent1 / 100, color1);
+                    gradient.addColorStop(percent2 / 100, color2);
+                    ctx.fillStyle = gradient;
+                    ctx.fillRect(0, 0, width, width * ratio);
+                    var srcEncoded = ctx.canvas.toDataURL().split(",")[1];
+                    return [
+                        ctx,
+                        srcEncoded
+                    ];
+                } else {
+                    ctx.fillStyle = color;
+                    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+                    var srcEncoded1 = ctx.canvas.toDataURL().split(",")[1];
+                    return [
+                        ctx,
+                        srcEncoded1
+                    ];
+                }
+            }
+        }
+    ]);
+    return Canvas;
+}();
+// src/utilities/canvas/Image.ts
+var Image2 = {
+    /**
+   * Convert file (blob) to base64 string format
+   * @param file
+   * @returns
+   */ FromFileToImageSrc: function FromFileToImageSrc(file) {
+        return new Promise(function(resolve, reject) {
+            if (!file) return resolve(null);
+            var reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = function(readerEvent) {
+                var _readerEvent_target;
+                if ((_readerEvent_target = readerEvent.target) === null || _readerEvent_target === void 0 ? void 0 : _readerEvent_target.result) {
+                    var _readerEvent_target1;
+                    return resolve((_readerEvent_target1 = readerEvent.target) === null || _readerEvent_target1 === void 0 ? void 0 : _readerEvent_target1.result);
+                }
+                reject("Error getting the image source");
+            };
+            reader.onerror = function() {
+                reject("Error getting the image source");
+            };
+        });
+    },
+    FromStringToImageSrc: /**
+   * Convert urlst
+   * @param url
+   * @returns
+   */ function FromStringToImageSrc(url) {
+        return _async_to_generator(function() {
+            var res, blob, src;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (!url || Image2.isBase64(url)) return [
+                            2,
+                            null
+                        ];
+                        return [
+                            4,
+                            fetch(url)
+                        ];
+                    case 1:
+                        res = _state.sent();
+                        return [
+                            4,
+                            res.blob()
+                        ];
+                    case 2:
+                        blob = _state.sent();
+                        return [
+                            4,
+                            Image2.FromFileToImageSrc(blob)
+                        ];
+                    case 3:
+                        src = _state.sent();
+                        return [
+                            2,
+                            src
+                        ];
+                }
+            });
+        })();
+    },
+    /**
+   * Check if the url is base64 format
+   * @param url
+   * @deprecated Using a weak condition and might be changed later. Use checkBase64 instead
+   */ checkBase64: function checkBase64(url) {
+        if (!url || url === "") return false;
+        return url.includes("base64,");
+    },
+    isBase64: function isBase64(url) {
+        return Image2.checkBase64(url);
+    }
+};
+var Image_default2 = Image2;
+// src/utilities/Transform/Transform.ts
+var import_jquery2 = __toESM(require("jquery"));
+// src/utilities/Transform/TransformController.ts
+var import_jquery = __toESM(require("jquery"));
+var import_fontawesome_svg_core = require("@fortawesome/fontawesome-svg-core");
+var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
+var TransformController = /*#__PURE__*/ function() {
+    function TransformController(wrapper, frame, controller) {
+        _class_call_check(this, TransformController);
+        this.wrapper = wrapper;
+        this.frame = frame;
+        this.controller = controller;
+    }
+    _create_class(TransformController, [
+        {
+            key: "addController",
+            value: function addController() {
+                var _this = this;
+                return new Promise(function(res) {
+                    var styleElement = document.createElement("style");
+                    styleElement.textContent = _this.css();
+                    document.head.appendChild(styleElement);
+                    (0, import_jquery.default)("." + _this.frame).after(_this.controllerTemplate());
+                    res();
+                });
+            }
+        },
+        {
+            key: "css",
+            value: function css() {
+                return "\n        .".concat(this.wrapper, " {\n            position: absolute;\n            transform-origin: top left;\n            user-select: none;\n        }\n        .").concat(this.wrapper, " > img {\n            object-fit: contain;\n            position: absolute;\n            top: 0;\n            left: 0;\n            display: block;\n            z-index: 1;\n            transform: translate(-50%, -50%)\n        }\n        .").concat(this.controller, "--container {\n            position: absolute;\n            transform-origin: top left;\n            user-select: none;\n        }\n        .").concat(this.controller, " {\n            position: absolute;\n            user-select: none;\n            border: solid 3px #6924d5;\n            z-index: 1;\n            top: 0;\n            left: 0;\n            transform: translate(-50%, -50%);\n        }\n        .").concat(this.controller, " .resize {\n            background-color: #fff;\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n            transition: all .1s linear;\n        }\n        .").concat(this.controller, " .resize.show {\n            background-color: #6924d5;\n        }\n        .").concat(this.controller, " .resize > .circle {\n            background-color: #f0f0f0a8;\n            position: absolute;\n            top: -15px;\n            left: -15px;\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n            z-index: -1;\n            visibility: hidden;\n            transition: all .1s linear;\n        }\n        .").concat(this.controller, " .resize > .circle.show {\n            visibility: visible;\n        }\n        .").concat(this.controller, " .resize.resize-topleft {\n            position: absolute;\n            top: -10px;\n            left: -10px;\n        }\n        .").concat(this.controller, " .resize.resize-topright {\n            position: absolute;\n            top: -10px;\n            right: -10px;\n        }\n        .").concat(this.controller, " .resize.resize-bottomleft {\n            position: absolute;\n            bottom: -10px;\n            left: -10px;\n        }\n        .").concat(this.controller, " .resize.resize-bottomright {\n            position: absolute;\n            bottom: -10px;\n            right: -10px;\n        }\n        .").concat(this.controller, " .rotate {\n            position: absolute;\n            top: -50px;\n            left: calc(50% - 15px);\n            width: 30px;\n            height: 30px;\n            background-color: #fff;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n        .").concat(this.controller, " .delete {\n            position: absolute;\n            bottom: -50px;\n            left: calc(50% + 40px);\n            width: 30px;\n            height: 30px;\n            background-color: #fff;\n            border-radius: 50%;\n            display: none;\n            justify-content: center;\n            align-items: center;\n        }\n    ");
+            }
+        },
+        {
+            key: "controllerTemplate",
+            value: function controllerTemplate() {
+                return '\n            <div class="'.concat(this.controller, '--container">\n                <div class="').concat(this.controller, '">\n                    <div class="dot resize resize-topleft"><div class="circle"></div></div>\n                    <div class="dot resize resize-topright"><div class="circle"></div></div>\n                    <div class="dot resize resize-bottomleft"><div class="circle"></div></div>\n                    <div class="dot resize resize-bottomright"><div class="circle"></div></div>\n                    <div class="dot rotate">').concat((0, import_fontawesome_svg_core.icon)(import_free_solid_svg_icons.faRotate).html[0], '</div>\n                    <div class="dot rotate shadow" style="visibility: hidden;">').concat((0, import_fontawesome_svg_core.icon)(import_free_solid_svg_icons.faRotate).html[0], '</div>\n                    <div class="dot delete">').concat((0, import_fontawesome_svg_core.icon)(import_free_solid_svg_icons.faTrash).html[0], '</div>\n                    <div class="dot delete shadow" style="visibility: hidden;">').concat((0, import_fontawesome_svg_core.icon)(import_free_solid_svg_icons.faTrash).html[0], "</div>\n                </div>\n            </div>\n            ");
+            }
+        }
+    ]);
+    return TransformController;
+}();
+// src/utilities/Transform/Transform.ts
+var Transform = /*#__PURE__*/ function() {
+    function Transform(ele1, ele2, ele3) {
+        _class_call_check(this, Transform);
+        this.ele1 = ele1;
+        this.ele2 = ele2;
+        this.x = 0;
+        this.y = 0;
+        this.angle = 90;
+        this.w = 0;
+        this.h = 0;
+        if (this.ele1 === null) {
+            throw new Error("wrapper elemenet is not defined or not rendered yet");
+        }
+        this.wrapperClass = "_" + (Date.now() + 5e3).toString();
+        (0, import_jquery2.default)(this.ele1).addClass(this.wrapperClass);
+        this.imgFrame = this.ele2;
+        if (this.imgFrame === null) {
+            throw new Error("frame element is not defined or not rendered yet");
+        }
+        this.frameClass = "_" + (Date.now() - 5e3).toString();
+        (0, import_jquery2.default)(this.ele2).addClass(this.frameClass);
+        this.img = this.ele1.querySelector("img");
+        if (this.img === null) {
+            throw new Error("image element is not defined or not rendered yet");
+        }
+        this.ratio = this.img.clientWidth / this.img.clientHeight;
+        this.controllerClassName = "_" + Date.now().toString();
+        this.isRotateOffScreen = false;
+    }
+    _create_class(Transform, [
+        {
+            key: "initialize",
+            value: function initialize() {
+                return _async_to_generator(function() {
+                    var transformController;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                transformController = new TransformController(this.wrapperClass, this.frameClass, this.controllerClassName);
+                                return [
+                                    4,
+                                    transformController.addController()
+                                ];
+                            case 1:
+                                _state.sent();
+                                this.controllerContainer = document.querySelector("." + this.controllerClassName + "--container");
+                                this.controller = document.querySelector("." + this.controllerClassName);
+                                this.handleElementGoOffScreen("." + this.controllerClassName + " .rotate", "." + this.controllerClassName + " .rotate.shadow", "rotate").handleElementGoOffScreen("." + this.controllerClassName + " .delete", "." + this.controllerClassName + " .delete.shadow", "delete").transform();
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                }).call(this);
+            }
+        },
+        {
+            key: "reset",
+            value: function reset() {
+                this.setState({
+                    x: 0,
+                    y: this.imgFrame.clientHeight / 2 - this.img.height / 2,
+                    angle: 0,
+                    w: this.imgFrame.clientWidth
+                });
+            }
+        },
+        {
+            key: "setState",
+            value: function setState(param) {
+                var x = param.x, y = param.y, angle = param.angle, w = param.w;
+                this.repositionElement(x + this.imgFrame.clientWidth / 2, y + this.img.height / 2);
+                this.rotateBox(angle);
+                this.resize(w, w / this.ratio);
+                this.setValue(x, y, angle, w, w / this.ratio);
+            }
+        },
+        {
+            key: "setValue",
+            value: function setValue(x, y, angle, w, h) {
+                this.x = x !== void 0 ? x : this.x;
+                this.y = y !== void 0 ? y : this.y;
+                this.angle = angle !== void 0 ? angle : this.angle;
+                this.w = w !== void 0 ? w : this.w;
+                this.h = h !== void 0 ? h : this.h;
+            }
+        },
+        {
+            key: "exportData",
+            value: function exportData() {
+                return {
+                    x: this.x,
+                    y: this.y,
+                    angle: this.angle,
+                    w: this.w,
+                    h: this.h
+                };
+            }
+        },
+        {
+            key: "repositionElement",
+            value: function repositionElement(x, y) {
+                var controllerWrapper = this.controllerContainer;
+                var boxWrapper = this.ele1;
+                boxWrapper.style.left = x + "px";
+                boxWrapper.style.top = y + "px";
+                controllerWrapper.style.left = x + this.imgFrame.offsetLeft + 3 + "px";
+                controllerWrapper.style.top = y + this.imgFrame.offsetTop + 3 + "px";
+            }
+        },
+        {
+            key: "resize",
+            value: function resize(w, h) {
+                var controller = this.controller;
+                var img = this.img;
+                var wrapper = this.ele1;
+                controller.style.width = w + "px";
+                controller.style.height = h + "px";
+                img.style.width = w + "px";
+                wrapper.style.width = w + "px";
+            }
+        },
+        {
+            key: "rotateBox",
+            value: function rotateBox(deg) {
+                var controllerWrapper = this.controllerContainer;
+                var boxWrapper = this.ele1;
+                boxWrapper.style.transform = "rotate(".concat(deg, "deg)");
+                controllerWrapper.style.rotate = "".concat(deg, "deg");
+            }
+        },
+        {
+            key: "handleElementGoOffScreen",
+            value: function handleElementGoOffScreen(main, shadow, type) {
+                var _this = this;
+                var mainEle = document.querySelector(main);
+                var shadowEle = document.querySelector(shadow);
+                var options = {
+                    root: null,
+                    rootMargin: "0px",
+                    threshold: 0.1
+                };
+                var callback = function(entries) {
+                    entries.forEach(function(entry) {
+                        switch(type){
+                            case "rotate":
+                                if (!entry.isIntersecting) {
+                                    mainEle.style.top = "auto";
+                                    mainEle.style.bottom = "-50px";
+                                    _this.isRotateOffScreen = true;
+                                } else {
+                                    mainEle.style.bottom = "auto";
+                                    mainEle.style.top = "-50px";
+                                    _this.isRotateOffScreen = false;
+                                }
+                                break;
+                            case "delete":
+                                if (!entry.isIntersecting) {
+                                    mainEle.style.bottom = "auto";
+                                    mainEle.style.top = "-50px";
+                                } else {
+                                    mainEle.style.top = "auto";
+                                    mainEle.style.bottom = "-50px";
+                                }
+                                break;
+                        }
+                    });
+                };
+                var observer = new IntersectionObserver(callback, options);
+                observer.observe(shadowEle);
+                return this;
+            }
+        },
+        {
+            key: "transform",
+            value: function transform() {
+                var _this = this;
+                var _this1 = this;
+                var controllerWrapper = this.controllerContainer;
+                var boxWrapper = this.ele1;
+                var minWidth = 40;
+                var minHeight = 40;
+                var initX, initY, mousePressX, mousePressY, initW, initH, initRotate;
+                function getCurrentRotation(el) {
+                    var st = window.getComputedStyle(el, null);
+                    var tm = st.getPropertyValue("-webkit-transform") || st.getPropertyValue("-moz-transform") || st.getPropertyValue("-ms-transform") || st.getPropertyValue("-o-transform") || st.getPropertyValue("transform");
+                    "none";
+                    if (tm != "none") {
+                        var values = tm.split("(")[1].split(")")[0].split(",");
+                        var angle = Math.round(Math.atan2(Number(values[1]), Number(values[0])) * (180 / Math.PI));
+                        return angle < 0 ? angle + 360 : angle;
+                    }
+                    return 0;
+                }
+                function mousedownCb(event) {
+                    event.target.classList.add("show");
+                    event.target.querySelector(".circle").classList.add("show");
+                }
+                function mouseupCb(event) {
+                    event.target.classList.remove("show");
+                    event.target.querySelector(".circle").classList.remove("show");
+                }
+                var handleDrag = function(event, type) {
+                    event.stopPropagation();
+                    var initX2 = boxWrapper.offsetLeft;
+                    var initY2 = boxWrapper.offsetTop;
+                    var mousePressX2 = type === "desk" ? event.clientX : event.touches[0].clientX;
+                    var mousePressY2 = type === "desk" ? event.clientY : event.touches[0].clientY;
+                    var _this_exportData = _this.exportData(), w = _this_exportData.w, h = _this_exportData.h;
+                    var eventMoveHandler = function(event2) {
+                        var x = type === "desk" ? event2.clientX : event2.touches[0].clientX;
+                        var y = type === "desk" ? event2.clientY : event2.touches[0].clientY;
+                        var posX = initX2 + (x - mousePressX2);
+                        var posY = initY2 + (y - mousePressY2);
+                        _this.repositionElement(posX, posY);
+                        _this.setValue(posX - w / 2, posY - h / 2, void 0, void 0, void 0);
+                    };
+                    if (type === "desk") {
+                        controllerWrapper.addEventListener("mousemove", eventMoveHandler, false);
+                        window.addEventListener("mouseup", function eventEndHandler() {
+                            controllerWrapper.removeEventListener("mousemove", eventMoveHandler, false);
+                            window.removeEventListener("mouseup", eventEndHandler);
+                        }, false);
+                    } else {
+                        controllerWrapper.addEventListener("touchmove", eventMoveHandler, {
+                            passive: true
+                        });
+                        window.addEventListener("touchend", function eventEndHandler() {
+                            controllerWrapper.removeEventListener("touchmove", eventMoveHandler);
+                            window.removeEventListener("touchend", eventEndHandler);
+                        }, false);
+                    }
+                };
+                controllerWrapper.addEventListener("mousedown", function(e) {
+                    return handleDrag(e, "desk");
+                }, false);
+                controllerWrapper.addEventListener("touchstart", function(e) {
+                    return handleDrag(e, "touch");
+                }, {
+                    passive: true
+                });
+                var leftTop = document.querySelector("." + this.controllerClassName + " .resize-topleft");
+                var rightTop = document.querySelector("." + this.controllerClassName + " .resize-topright");
+                var rightBottom = document.querySelector("." + this.controllerClassName + " .resize-bottomright");
+                var leftBottom = document.querySelector("." + this.controllerClassName + " .resize-bottomleft");
+                var resizeHandler = function(event) {
+                    var left = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, top = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false, xResize = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, yResize = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false, type = arguments.length > 5 ? arguments[5] : void 0;
+                    event.stopPropagation();
+                    initX = boxWrapper.offsetLeft;
+                    initY = boxWrapper.offsetTop;
+                    mousePressX = type === "desk" ? event.clientX : event.touches[0].clientX;
+                    mousePressY = type === "desk" ? event.clientY : event.touches[0].clientY;
+                    initW = _this1.img.offsetWidth;
+                    initH = _this1.img.offsetHeight;
+                    initRotate = getCurrentRotation(boxWrapper);
+                    var initRadians = initRotate * Math.PI / 180;
+                    var cosFraction = Math.cos(initRadians);
+                    var sinFraction = Math.sin(initRadians);
+                    mousedownCb(event);
+                    var vectorC = [
+                        mousePressX - initX - _this1.imgFrame.offsetLeft,
+                        mousePressY - initY - _this1.imgFrame.offsetTop
+                    ];
+                    var eventMoveHandler = function(event2) {
+                        var x = type === "desk" ? event2.clientX : event2.touches[0].clientX;
+                        var y = type === "desk" ? event2.clientY : event2.touches[0].clientY;
+                        var wDiff = x - mousePressX;
+                        var hDiff = y - mousePressY;
+                        var vectorD = [
+                            wDiff,
+                            hDiff
+                        ];
+                        var c = (vectorC[0] * vectorD[0] + vectorC[1] * vectorD[1]) / (vectorC[0] * vectorC[0] + vectorC[1] * vectorC[1]);
+                        var vectorH = [
+                            c * vectorC[0],
+                            c * vectorC[1]
+                        ];
+                        var rotatedWDiff = cosFraction * vectorH[0] + sinFraction * vectorH[1];
+                        var rotatedHDiff = cosFraction * vectorH[1] - sinFraction * vectorH[0];
+                        rotatedHDiff = rotatedHDiff * rotatedWDiff > 0 ? rotatedWDiff / _this1.ratio : -rotatedWDiff / _this1.ratio;
+                        var newW = initW, newH = initH, newX = initX, newY = initY;
+                        if (xResize) {
+                            if (left) {
+                                newW = initW - rotatedWDiff;
+                                if (newW < minWidth) {
+                                    newW = minWidth;
+                                    rotatedWDiff = initW - minWidth;
+                                }
+                            } else {
+                                newW = initW + rotatedWDiff;
+                                if (newW < minWidth) {
+                                    newW = minWidth;
+                                    rotatedWDiff = minWidth - initW;
+                                }
+                            }
+                            newX += 0.5 * rotatedWDiff * cosFraction;
+                            newY += 0.5 * rotatedWDiff * sinFraction;
+                        }
+                        if (yResize) {
+                            if (top) {
+                                newH = initH - rotatedHDiff;
+                                if (newH < minHeight) {
+                                    newH = minHeight;
+                                    rotatedHDiff = initH - minHeight;
+                                }
+                            } else {
+                                newH = initH + rotatedHDiff;
+                                if (newH < minHeight) {
+                                    newH = minHeight;
+                                    rotatedHDiff = minHeight - initH;
+                                }
+                            }
+                            newX -= 0.5 * rotatedHDiff * sinFraction;
+                            newY += 0.5 * rotatedHDiff * cosFraction;
+                        }
+                        _this1.resize(newW, newH);
+                        _this1.repositionElement(newX, newY);
+                        _this1.setValue(newX - newW / 2, newY - newH / 2, void 0, newW, newH);
+                    };
+                    if (type === "desk") {
+                        window.addEventListener("mousemove", eventMoveHandler, false);
+                        window.addEventListener("mouseup", function eventEndHandler() {
+                            mouseupCb(event);
+                            window.removeEventListener("mousemove", eventMoveHandler, false);
+                            window.removeEventListener("mouseup", eventEndHandler);
+                        }, false);
+                    } else {
+                        window.addEventListener("touchmove", eventMoveHandler, {
+                            passive: true
+                        });
+                        window.addEventListener("touchend", function eventEndHandler() {
+                            mouseupCb(event);
+                            window.removeEventListener("touchmove", eventMoveHandler, false);
+                            window.removeEventListener("touchend", eventEndHandler);
+                        }, false);
+                    }
+                };
+                leftTop.addEventListener("mousedown", function(e) {
+                    return resizeHandler(e, true, true, true, true, "desk");
+                });
+                rightTop.addEventListener("mousedown", function(e) {
+                    return resizeHandler(e, false, true, true, true, "desk");
+                });
+                rightBottom.addEventListener("mousedown", function(e) {
+                    return resizeHandler(e, false, false, true, true, "desk");
+                });
+                leftBottom.addEventListener("mousedown", function(e) {
+                    return resizeHandler(e, true, false, true, true, "desk");
+                });
+                leftTop.addEventListener("touchstart", function(e) {
+                    return resizeHandler(e, true, true, true, true, "touch");
+                }, {
+                    passive: true
+                });
+                rightTop.addEventListener("touchstart", function(e) {
+                    return resizeHandler(e, false, true, true, true, "touch");
+                }, {
+                    passive: true
+                });
+                rightBottom.addEventListener("touchstart", function(e) {
+                    return resizeHandler(e, false, false, true, true, "touch");
+                }, {
+                    passive: true
+                });
+                leftBottom.addEventListener("touchstart", function(e) {
+                    return resizeHandler(e, true, false, true, true, "touch");
+                }, {
+                    passive: true
+                });
+                var rotate = document.querySelector("." + this.controllerClassName + " .rotate");
+                var handleRotate = function(event, type) {
+                    event.stopPropagation();
+                    initX = event.target.offsetLeft;
+                    initY = event.target.offsetTop;
+                    mousePressX = type === "desk" ? event.clientX : event.touches[0].clientX;
+                    mousePressY = type === "desk" ? event.clientY : event.touches[0].clientY;
+                    var arrow = _this.controller;
+                    var arrowRects = arrow.getBoundingClientRect();
+                    var arrowX = arrowRects.left + arrowRects.width / 2;
+                    var arrowY = arrowRects.top + arrowRects.height / 2;
+                    var compensation = _this.isRotateOffScreen ? 180 : 0;
+                    var eventMoveHandler = function(event2) {
+                        var x = type === "desk" ? event2.clientX : event2.touches[0].clientX;
+                        var y = type === "desk" ? event2.clientY : event2.touches[0].clientY;
+                        var angle = Math.atan2(y - arrowY, x - arrowX) + Math.PI / 2;
+                        angle *= 180 / Math.PI;
+                        angle += compensation;
+                        _this.rotateBox(angle);
+                        _this.setValue(void 0, void 0, angle, void 0, void 0);
+                    };
+                    if (type === "desk") {
+                        window.addEventListener("mousemove", eventMoveHandler, false);
+                        window.addEventListener("mouseup", function eventEndHandler() {
+                            window.removeEventListener("mousemove", eventMoveHandler, false);
+                            window.removeEventListener("mouseup", eventEndHandler);
+                        }, false);
+                    } else {
+                        window.addEventListener("touchmove", eventMoveHandler, {
+                            passive: true
+                        });
+                        window.addEventListener("touchend", function eventEndHandler() {
+                            window.removeEventListener("touchmove", eventMoveHandler, false);
+                            window.removeEventListener("touchend", eventEndHandler);
+                        }, false);
+                    }
+                };
+                rotate.addEventListener("mousedown", function(e) {
+                    return handleRotate(e, "desk");
+                }, false);
+                rotate.addEventListener("touchstart", function(e) {
+                    return handleRotate(e, "touch");
+                }, {
+                    passive: true
+                });
+                this.reset();
+                return this;
+            }
+        }
+    ]);
+    return Transform;
+}();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+    Avatar: Avatar,
     Button: Button,
+    Canvas: Canvas,
     ColorPickerSlider: ColorPickerSlider,
     DropdownSelect: DropdownSelect,
+    Image: Image,
+    ImageEditor: ImageEditor,
+    ImageUtilities: ImageUtilities,
+    InputFile: InputFile,
+    InputGoogle: InputGoogle,
     MultiSelect: MultiSelect,
     OptionSlider: OptionSlider,
-    RangeSlider: RangeSlider
+    RangeSlider: RangeSlider,
+    TextArea: TextArea,
+    Transform: Transform,
+    UploadImage: UploadImage
 });