@caspeco/casper-ui-library 10.4.0 → 10.5.0

package/dist/components/image-upload/image-cropper.js

@@ -1,185 +1,158 @@
-import { jsx as q } from "react/jsx-runtime";
-import { useRef as R, useState as J, useEffect as j } from "react";
-import { adjustCrop as E, ScalingDirection as b, getAspectRatioValue as y, calculateHandlePositions as W, getCursorStyle as K, isPointInsideRect as B, getOppositeCorner as N } from "./image-cropper.helper.js";
-function _(I) {
-  document.body.style.userSelect = I;
+import { ScalingDirection as e, adjustCrop as t, calculateHandlePositions as n, getAspectRatioValue as r, getCursorStyle as i, getOppositeCorner as a, isPointInsideRect as o } from "./image-cropper.helper.js";
+import { useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region lib/components/image-upload/image-cropper.tsx
+function d(e) {
+	document.body.style.userSelect = e;
 }
-function x({
-  src: I,
-  crop: z,
-  onCropCallback: P,
-  setPreviewImage: Y,
-  aspectRatio: F
-}) {
-  const S = R(null), m = R(null), v = R(null), C = R(null), s = R({
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0
-  }), a = R({
-    left: 0,
-    top: 0
-  }), [U, V] = J("crosshair"), T = 10, k = (e) => {
-    if (m.current && v.current) {
-      const t = {
-        width: v.current.width,
-        height: v.current.height
-      }, o = E(s.current, m.current, t, e);
-      P(o);
-    }
-  }, A = (e, t, o, w) => {
-    e.fillStyle = "rgba(0, 0, 0, 0.5)", e.fillRect(0, 0, t.width, t.height), e.save(), e.beginPath(), e.rect(o.left, o.top, o.width, o.height), e.clip(), m.current && e.drawImage(m.current, 0, 0, t.width, t.height), e.restore(), e.strokeStyle = "rgba(255, 255, 255, 0.88)", e.lineWidth = 1, e.strokeRect(o.left, o.top, o.width, o.height), w !== "new-selection" && W(o, T).forEach(({
-      x: g,
-      y: d,
-      corner: M
-    }) => {
-      const i = T / 2, p = 3, c = (n, r = 0) => {
-        e.strokeStyle = n, e.lineWidth = p + r, e.beginPath();
-        const l = Math.min(o.width / 2, 16), h = Math.min(o.height / 2, 16);
-        switch (M) {
-          case "bottom-left":
-            e.moveTo(g + i, d - h + i), e.lineTo(g + i, d + i), e.lineTo(g + l + i, d + i);
-            break;
-          case "bottom-right":
-            e.moveTo(g + i, d - h + i), e.lineTo(g + i, d + i), e.lineTo(g - l + i, d + i);
-            break;
-          case "top-left":
-            e.moveTo(g + i, d + h + i), e.lineTo(g + i, d + i), e.lineTo(g + l + i, d + i);
-            break;
-          case "top-right":
-            e.moveTo(g + i, d + h + i), e.lineTo(g + i, d + i), e.lineTo(g - l + i, d + i);
-            break;
-        }
-        e.stroke();
-      };
-      c("#000", 1), c("#FFF");
-    });
-  }, D = () => {
-    if (S.current && m.current && v.current) {
-      const e = document.createElement("canvas");
-      e.width = m.current.width, e.height = m.current.height;
-      const t = e.getContext("2d"), o = {
-        width: v.current.width,
-        height: v.current.height
-      }, w = E(s.current, m.current, o, b.ToFullSize);
-      if (t)
-        return t.drawImage(
-          m.current,
-          // Reference to the original image
-          w.left,
-          w.top,
-          w.width,
-          w.height,
-          0,
-          0,
-          e.width,
-          e.height
-        ), e.toDataURL("image/jpeg");
-    }
-    return null;
-  };
-  j(() => {
-    const e = S.current, t = e?.getContext("2d");
-    if (!e || !t) return;
-    const o = new Image();
-    o.src = I, o.onload = () => {
-      const {
-        width: d
-      } = o, {
-        height: M
-      } = o, i = Math.min(528 / d, 418 / M), p = d * i, c = M * i;
-      e.width = p, e.height = c, t.drawImage(o, 0, 0, e.width, e.height), m.current = o, m.current && t.drawImage(m.current, 0, 0, e.width, e.height), v.current = {
-        width: p,
-        height: c
-      };
-      let n, r, l;
-      if (z)
-        l = E(z, m.current, v.current, b.ToDisplayedSize);
-      else {
-        const h = y(F);
-        h ? p / c < h ? (n = p, r = n / h) : (r = c, n = r * h) : (n = p, r = c), l = {
-          width: n,
-          height: r,
-          left: (p - n) / 2,
-          top: (c - r) / 2
-        };
-      }
-      s.current = l, A(t, e, l, C.current), k(b.ToFullSize), Y(D() || "");
-    };
-  }, [I]);
-  const L = () => {
-    const e = S.current, t = e?.getContext("2d");
-    !t || !e || (t.clearRect(0, 0, e.width, e.height), m.current && t.drawImage(m.current, 0, 0, e.width, e.height), A(t, e, s.current, null));
-  }, G = (e) => {
-    const t = K(e, S, s.current, T, W(s.current, T));
-    V(t);
-  }, H = (e) => {
-    const t = S.current, o = t?.getContext("2d");
-    if (!t || !o) return;
-    const w = t.getBoundingClientRect(), g = e.clientX - w.left, d = e.clientY - w.top;
-    let M = 0, i = 0;
-    a.current && (M = g - a.current.left, i = d - a.current.top);
-    let p = {
-      ...s.current
-    };
-    if (C.current === "new-selection" || C.current === "resize") {
-      if (!a.current) return;
-      const c = y(F);
-      let n = 0, r = 0, l = M, h = i, u = a.current.left, f = a.current.top;
-      l >= 0 && h >= 0 ? (n = Math.min(t.width - u, l), r = n / c, r > h && (r = Math.min(t.height - f, h), n = r * c), u + n >= t.width && (n = t.width - u, r = n / c), f + r >= t.height && (r = t.height - f, n = r * c)) : l >= 0 && h < 0 ? (h = -h, n = Math.min(t.width - u, l), r = n / c, r > h && (r = h, n = r * c), f = a.current.top - r, f <= 0 && (r += f, f = 0, n = r * c)) : l < 0 && h >= 0 ? (u = Math.max(0, u + l), l = -l, n = l, r = n / c, r > h && (r = Math.min(t.height - f, h), n = r * c), u = a.current.left - n, u <= 0 && (n += u, u = 0, r = n / c), f + r >= t.height && (r = t.height - f, n = r * c, u = a.current.left - n)) : l < 0 && h < 0 && (u = Math.max(0, u + l), f = Math.max(0, f + h), l = -l, h = -h, n = l, r = n / c, r > h && (r = h, n = r * c), u = a.current.left - n, f = a.current.top - r, u <= 0 && (n += u, u = 0, r = n / c), f <= 0 && (r += f, f = 0, n = r * c), u + n > t.width && (n = t.width - u, r = n / c), f + r > t.height && (r = t.height - f, n = r * c), u = a.current.left - n, f = a.current.top - r), p = {
-        left: u,
-        top: f,
-        width: n,
-        height: r
-      };
-    } else if (C.current === "move") {
-      if (!a.current) return;
-      let c = Math.min(Math.max(s.current.left + M, 0), t.width - s.current.width), n = Math.min(Math.max(s.current.top + i, 0), t.height - s.current.height);
-      c = Math.max(0, Math.min(c, t.width - s.current.width)), n = Math.max(0, Math.min(n, t.height - s.current.height)), a.current = {
-        left: (a.current?.left || 0) + c - s.current.left,
-        top: (a.current?.top || 0) + n - s.current.top
-      }, p = {
-        ...s.current,
-        left: c,
-        top: n
-      };
-    }
-    s.current = p, L();
-  }, X = () => {
-    window.removeEventListener("mouseup", X), window.removeEventListener("mousemove", H), _(""), C.current = null, L(), k(b.ToFullSize), Y(D() || "");
-  };
-  function O(e) {
-    const t = S.current;
-    if (!t) return;
-    _("none");
-    const o = t.getBoundingClientRect(), w = W(s.current, T).find((i) => B(e.clientX - o.left, e.clientY - o.top, i.x, i.y, T, T)), g = e.clientX - o.left, d = e.clientY - o.top, M = B(e.clientX - o.left, e.clientY - o.top, s.current.left, s.current.top, s.current.width, s.current.height);
-    if (w) {
-      const i = N(s.current, w.corner);
-      C.current = "resize", a.current = {
-        left: i.x,
-        top: i.y
-      };
-    } else M ? (a.current = {
-      left: e.clientX - o.left,
-      top: e.clientY - o.top
-    }, C.current = "move") : (a.current = {
-      left: g,
-      top: d
-    }, C.current = "new-selection", s.current = {
-      left: g,
-      top: d,
-      width: 0,
-      height: 0
-    });
-    window.addEventListener("mouseup", X), window.addEventListener("mousemove", H);
-  }
-  return j(() => () => {
-    window.removeEventListener("mouseup", X), window.removeEventListener("mousemove", H);
-  }, []), /* @__PURE__ */ q("canvas", { ref: S, onMouseDown: O, onMouseMove: G, draggable: !1, style: {
-    cursor: U,
-    margin: "0 auto"
-  } });
+function f({ src: f, crop: p, onCropCallback: m, setPreviewImage: h, aspectRatio: g }) {
+	let _ = c(null), v = c(null), y = c(null), b = c(null), x = c({
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	}), S = c({
+		left: 0,
+		top: 0
+	}), [C, w] = l("crosshair"), T = (e) => {
+		if (v.current && y.current) {
+			let n = {
+				width: y.current.width,
+				height: y.current.height
+			};
+			m(t(x.current, v.current, n, e));
+		}
+	}, E = (e, t, r, i) => {
+		e.fillStyle = "rgba(0, 0, 0, 0.5)", e.fillRect(0, 0, t.width, t.height), e.save(), e.beginPath(), e.rect(r.left, r.top, r.width, r.height), e.clip(), v.current && e.drawImage(v.current, 0, 0, t.width, t.height), e.restore(), e.strokeStyle = "rgba(255, 255, 255, 0.88)", e.lineWidth = 1, e.strokeRect(r.left, r.top, r.width, r.height), i !== "new-selection" && n(r, 10).forEach(({ x: t, y: n, corner: i }) => {
+			let a = (a, o = 0) => {
+				e.strokeStyle = a, e.lineWidth = 3 + o, e.beginPath();
+				let s = Math.min(r.width / 2, 16), c = Math.min(r.height / 2, 16);
+				switch (i) {
+					case "bottom-left":
+						e.moveTo(t + 5, n - c + 5), e.lineTo(t + 5, n + 5), e.lineTo(t + s + 5, n + 5);
+						break;
+					case "bottom-right":
+						e.moveTo(t + 5, n - c + 5), e.lineTo(t + 5, n + 5), e.lineTo(t - s + 5, n + 5);
+						break;
+					case "top-left":
+						e.moveTo(t + 5, n + c + 5), e.lineTo(t + 5, n + 5), e.lineTo(t + s + 5, n + 5);
+						break;
+					case "top-right": e.moveTo(t + 5, n + c + 5), e.lineTo(t + 5, n + 5), e.lineTo(t - s + 5, n + 5);
+				}
+				e.stroke();
+			};
+			a("#000", 1), a("#FFF");
+		});
+	}, D = () => {
+		if (_.current && v.current && y.current) {
+			let n = document.createElement("canvas");
+			n.width = v.current.width, n.height = v.current.height;
+			let r = n.getContext("2d"), i = {
+				width: y.current.width,
+				height: y.current.height
+			}, a = t(x.current, v.current, i, e.ToFullSize);
+			if (r) return r.drawImage(v.current, a.left, a.top, a.width, a.height, 0, 0, n.width, n.height), n.toDataURL("image/jpeg");
+		}
+		return null;
+	};
+	s(() => {
+		let n = _.current, i = n?.getContext("2d");
+		if (!n || !i) return;
+		let a = new Image();
+		a.src = f, a.onload = () => {
+			let { width: o } = a, { height: s } = a, c = Math.min(528 / o, 418 / s), l = o * c, u = s * c;
+			n.width = l, n.height = u, i.drawImage(a, 0, 0, n.width, n.height), v.current = a, v.current && i.drawImage(v.current, 0, 0, n.width, n.height), y.current = {
+				width: l,
+				height: u
+			};
+			let d, f, m;
+			if (p) m = t(p, v.current, y.current, e.ToDisplayedSize);
+			else {
+				let e = r(g);
+				e ? l / u < e ? (d = l, f = d / e) : (f = u, d = f * e) : (d = l, f = u), m = {
+					width: d,
+					height: f,
+					left: (l - d) / 2,
+					top: (u - f) / 2
+				};
+			}
+			x.current = m, E(i, n, m, b.current), T(e.ToFullSize), h(D() || "");
+		};
+	}, [f]);
+	let O = () => {
+		let e = _.current, t = e?.getContext("2d");
+		!t || !e || (t.clearRect(0, 0, e.width, e.height), v.current && t.drawImage(v.current, 0, 0, e.width, e.height), E(t, e, x.current, null));
+	}, k = (e) => {
+		let t = i(e, _, x.current, 10, n(x.current, 10));
+		w(t);
+	}, A = (e) => {
+		let t = _.current, n = t?.getContext("2d");
+		if (!t || !n) return;
+		let i = t.getBoundingClientRect(), a = e.clientX - i.left, o = e.clientY - i.top, s = 0, c = 0;
+		S.current && (s = a - S.current.left, c = o - S.current.top);
+		let l = { ...x.current };
+		if (b.current === "new-selection" || b.current === "resize") {
+			if (!S.current) return;
+			let e = r(g), n = 0, i = 0, a = s, o = c, u = S.current.left, d = S.current.top;
+			a >= 0 && o >= 0 ? (n = Math.min(t.width - u, a), i = n / e, i > o && (i = Math.min(t.height - d, o), n = i * e), u + n >= t.width && (n = t.width - u, i = n / e), d + i >= t.height && (i = t.height - d, n = i * e)) : a >= 0 && o < 0 ? (o = -o, n = Math.min(t.width - u, a), i = n / e, i > o && (i = o, n = i * e), d = S.current.top - i, d <= 0 && (i += d, d = 0, n = i * e)) : a < 0 && o >= 0 ? (u = Math.max(0, u + a), a = -a, n = a, i = n / e, i > o && (i = Math.min(t.height - d, o), n = i * e), u = S.current.left - n, u <= 0 && (n += u, u = 0, i = n / e), d + i >= t.height && (i = t.height - d, n = i * e, u = S.current.left - n)) : a < 0 && o < 0 && (u = Math.max(0, u + a), d = Math.max(0, d + o), a = -a, o = -o, n = a, i = n / e, i > o && (i = o, n = i * e), u = S.current.left - n, d = S.current.top - i, u <= 0 && (n += u, u = 0, i = n / e), d <= 0 && (i += d, d = 0, n = i * e), u + n > t.width && (n = t.width - u, i = n / e), d + i > t.height && (i = t.height - d, n = i * e), u = S.current.left - n, d = S.current.top - i), l = {
+				left: u,
+				top: d,
+				width: n,
+				height: i
+			};
+		} else if (b.current === "move") {
+			if (!S.current) return;
+			let e = Math.min(Math.max(x.current.left + s, 0), t.width - x.current.width), n = Math.min(Math.max(x.current.top + c, 0), t.height - x.current.height);
+			e = Math.max(0, Math.min(e, t.width - x.current.width)), n = Math.max(0, Math.min(n, t.height - x.current.height)), S.current = {
+				left: (S.current?.left || 0) + e - x.current.left,
+				top: (S.current?.top || 0) + n - x.current.top
+			}, l = {
+				...x.current,
+				left: e,
+				top: n
+			};
+		}
+		x.current = l, O();
+	}, j = () => {
+		window.removeEventListener("mouseup", j), window.removeEventListener("mousemove", A), d(""), b.current = null, O(), T(e.ToFullSize), h(D() || "");
+	};
+	function M(e) {
+		let t = _.current;
+		if (!t) return;
+		d("none");
+		let r = t.getBoundingClientRect(), i = n(x.current, 10).find((t) => o(e.clientX - r.left, e.clientY - r.top, t.x, t.y, 10, 10)), s = e.clientX - r.left, c = e.clientY - r.top, l = o(e.clientX - r.left, e.clientY - r.top, x.current.left, x.current.top, x.current.width, x.current.height);
+		if (i) {
+			let e = a(x.current, i.corner);
+			b.current = "resize", S.current = {
+				left: e.x,
+				top: e.y
+			};
+		} else l ? (S.current = {
+			left: e.clientX - r.left,
+			top: e.clientY - r.top
+		}, b.current = "move") : (S.current = {
+			left: s,
+			top: c
+		}, b.current = "new-selection", x.current = {
+			left: s,
+			top: c,
+			width: 0,
+			height: 0
+		});
+		window.addEventListener("mouseup", j), window.addEventListener("mousemove", A);
+	}
+	return s(() => () => {
+		window.removeEventListener("mouseup", j), window.removeEventListener("mousemove", A);
+	}, []), /* @__PURE__ */ u("canvas", {
+		ref: _,
+		onMouseDown: M,
+		onMouseMove: k,
+		draggable: !1,
+		style: {
+			cursor: C,
+			margin: "0 auto"
+		}
+	});
 }
-export {
-  x as ImageCropper
-};
+//#endregion
+export { f as ImageCropper };

package/dist/components/image-upload/image-upload-dropzone.js

@@ -1,113 +1,135 @@
-import { jsx as u, jsxs as M, Fragment as te } from "react/jsx-runtime";
-import { c as re } from "../../_virtual/compiler-runtime.js";
-import { Text as N, Box as $, Input as le } from "@chakra-ui/react";
-import ae, { useState as V } from "react";
-import { sanitizeFilename as oe } from "./image-upload-helper.js";
-import { ImageIconLarge as ne } from "./image-upload-icons.js";
-import { translations as g } from "./translations.js";
-import { Alert as q } from "../alert/alert.js";
-import { ThemeColorVariable as H, ThemeRadiusVariable as ie, ThemeSpaceVariable as G } from "../../theme/theme-types.js";
-function _e(J) {
-  const e = re.c(37), {
-    locale: r,
-    setFileItem: A,
-    setHasImageChanged: C
-  } = J, [K, z] = V(!1), [w, O] = V(!1), [E, W] = V(!1);
-  let h;
-  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = ae.createRef(), e[0] = h) : h = e[0];
-  const o = h;
-  let b;
-  e[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (b = function(l, a) {
-    const R = new FileReader();
-    R.onload = a, R.readAsDataURL(l);
-  }, e[1] = b) : b = e[1];
-  const P = b;
-  let _;
-  e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = ["image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"], e[2] = _) : _ = e[2];
-  const Q = _;
-  let D;
-  e[3] !== A || e[4] !== C ? (D = (t) => {
-    const {
-      target: l
-    } = t;
-    if (!l || !l.files || !l.files[0])
-      return;
-    const a = l.files[0];
-    if (!Q.includes(a.type)) {
-      W(!0);
-      return;
-    }
-    W(!1), a.size > 3145728 ? O(!0) : (O(!1), P(a, (R) => {
-      const v = R.target?.result, ee = {
-        fileName: oe(a.name),
-        data: v
-      };
-      A(ee), C(!0);
-    }));
-  }, e[3] = A, e[4] = C, e[5] = D) : D = e[5];
-  const n = D;
-  let x;
-  e[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = () => {
-    o.current && o.current.click();
-  }, e[6] = x) : x = e[6];
-  const X = x;
-  let y;
-  e[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (y = (t) => {
-    t.preventDefault(), t.dataTransfer.items && t.dataTransfer.items.length > 0 && z(!0);
-  }, e[7] = y) : y = e[7];
-  const Y = y;
-  let F;
-  e[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (F = () => {
-    z(!1);
-  }, e[8] = F) : F = e[8];
-  const Z = F;
-  let S;
-  e[9] !== n ? (S = (t) => {
-    if (t.preventDefault(), !!o.current && t.dataTransfer.files && t.dataTransfer.files.length > 0) {
-      const l = new DataTransfer();
-      Array.from(t.dataTransfer.files).forEach((a) => {
-        l.items.add(a);
-      }), o.current.files = l.files, n({
-        target: o.current
-      }), t.dataTransfer.clearData(), z(!1);
-    }
-  }, e[9] = n, e[10] = S) : S = e[10];
-  const U = S, j = K ? H.OnSurfaceBorder : "transparent";
-  let T;
-  e[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (T = /* @__PURE__ */ u(ne, {}), e[11] = T) : T = e[11];
-  const k = g[r];
-  let i;
-  e[12] !== k.pullAndDrop ? (i = /* @__PURE__ */ u(N, { children: k.pullAndDrop }), e[12] = k.pullAndDrop, e[13] = i) : i = e[13];
-  const B = g[r], L = g[r];
-  let s;
-  e[14] !== L.upload ? (s = /* @__PURE__ */ u($, { as: "span", color: H.Accent, textDecoration: "underline", children: L.upload }), e[14] = L.upload, e[15] = s) : s = e[15];
-  let c;
-  e[16] !== B.or || e[17] !== s ? (c = /* @__PURE__ */ M(N, { children: [
-    B.or,
-    " ",
-    s,
-    "."
-  ] }), e[16] = B.or, e[17] = s, e[18] = c) : c = e[18];
-  let f;
-  e[19] !== n ? (f = /* @__PURE__ */ u(le, { type: "file", ref: o, display: "none", onChange: n }), e[19] = n, e[20] = f) : f = e[20];
-  let m;
-  e[21] !== U || e[22] !== i || e[23] !== c || e[24] !== f || e[25] !== j ? (m = /* @__PURE__ */ M($, { p: "108px", bg: H.BackgroundDisabled, borderWidth: "1px", borderColor: j, transition: "150ms ease", borderRadius: ie.Medium, display: "flex", alignItems: "center", justifyContent: "center", flexDir: "column", onDragOver: Y, onDragLeave: Z, onDrop: U, onClick: X, cursor: "pointer", children: [
-    T,
-    i,
-    c,
-    f
-  ] }), e[21] = U, e[22] = i, e[23] = c, e[24] = f, e[25] = j, e[26] = m) : m = e[26];
-  let d;
-  e[27] !== r || e[28] !== E ? (d = E && /* @__PURE__ */ u(q, { mt: G.Medium, type: "error", children: g[r].unsupportedFormat }), e[27] = r, e[28] = E, e[29] = d) : d = e[29];
-  let p;
-  e[30] !== r || e[31] !== w ? (p = w && /* @__PURE__ */ u(q, { mt: G.Medium, type: "error", children: g[r].sizeExceeded }), e[30] = r, e[31] = w, e[32] = p) : p = e[32];
-  let I;
-  return e[33] !== m || e[34] !== d || e[35] !== p ? (I = /* @__PURE__ */ M(te, { children: [
-    m,
-    d,
-    p
-  ] }), e[33] = m, e[34] = d, e[35] = p, e[36] = I) : I = e[36], I;
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { ThemeColorVariable as t, ThemeRadiusVariable as n, ThemeSpaceVariable as r } from "../../theme/theme-types.js";
+import { Alert as i } from "../alert/alert.js";
+import { ImageIconLarge as a } from "./image-upload-icons.js";
+import { sanitizeFilename as o } from "./image-upload-helper.js";
+import { translations as s } from "./translations.js";
+import c, { useState as l } from "react";
+import { Box as u, Input as d, Text as f } from "@chakra-ui/react";
+import { Fragment as ee, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region lib/components/image-upload/image-upload-dropzone.tsx
+var h = e();
+function g(e) {
+	let g = (0, h.c)(37), { locale: _, setFileItem: v, setHasImageChanged: y } = e, [te, b] = l(!1), [x, S] = l(!1), [C, w] = l(!1), T;
+	g[0] === Symbol.for("react.memo_cache_sentinel") ? (T = c.createRef(), g[0] = T) : T = g[0];
+	let E = T, D;
+	g[1] === Symbol.for("react.memo_cache_sentinel") ? (D = function(e, t) {
+		let n = new FileReader();
+		n.onload = t, n.readAsDataURL(e);
+	}, g[1] = D) : D = g[1];
+	let O = D, k;
+	g[2] === Symbol.for("react.memo_cache_sentinel") ? (k = [
+		"image/jpeg",
+		"image/png",
+		"image/webp",
+		"image/gif",
+		"image/svg+xml"
+	], g[2] = k) : k = g[2];
+	let A = k, j;
+	g[3] !== v || g[4] !== y ? (j = (e) => {
+		let { target: t } = e;
+		if (!t || !t.files || !t.files[0]) return;
+		let n = t.files[0];
+		if (!A.includes(n.type)) {
+			w(!0);
+			return;
+		}
+		w(!1), n.size > 3145728 ? S(!0) : (S(!1), O(n, (e) => {
+			let t = e.target?.result, r = {
+				fileName: o(n.name),
+				data: t
+			};
+			v(r), y(!0);
+		}));
+	}, g[3] = v, g[4] = y, g[5] = j) : j = g[5];
+	let M = j, N;
+	g[6] === Symbol.for("react.memo_cache_sentinel") ? (N = () => {
+		E.current && E.current.click();
+	}, g[6] = N) : N = g[6];
+	let P = N, F;
+	g[7] === Symbol.for("react.memo_cache_sentinel") ? (F = (e) => {
+		e.preventDefault(), e.dataTransfer.items && e.dataTransfer.items.length > 0 && b(!0);
+	}, g[7] = F) : F = g[7];
+	let I = F, L;
+	g[8] === Symbol.for("react.memo_cache_sentinel") ? (L = () => {
+		b(!1);
+	}, g[8] = L) : L = g[8];
+	let R = L, z;
+	g[9] === M ? z = g[10] : (z = (e) => {
+		if (e.preventDefault(), E.current && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+			let t = new DataTransfer();
+			Array.from(e.dataTransfer.files).forEach((e) => {
+				t.items.add(e);
+			}), E.current.files = t.files, M({ target: E.current }), e.dataTransfer.clearData(), b(!1);
+		}
+	}, g[9] = M, g[10] = z);
+	let B = z, V = te ? t.OnSurfaceBorder : "transparent", H;
+	g[11] === Symbol.for("react.memo_cache_sentinel") ? (H = /* @__PURE__ */ p(a, {}), g[11] = H) : H = g[11];
+	let U = s[_], W;
+	g[12] === U.pullAndDrop ? W = g[13] : (W = /* @__PURE__ */ p(f, { children: U.pullAndDrop }), g[12] = U.pullAndDrop, g[13] = W);
+	let G = s[_], K = s[_], q;
+	g[14] === K.upload ? q = g[15] : (q = /* @__PURE__ */ p(u, {
+		as: "span",
+		color: t.Accent,
+		textDecoration: "underline",
+		children: K.upload
+	}), g[14] = K.upload, g[15] = q);
+	let J;
+	g[16] !== G.or || g[17] !== q ? (J = /* @__PURE__ */ m(f, { children: [
+		G.or,
+		" ",
+		q,
+		"."
+	] }), g[16] = G.or, g[17] = q, g[18] = J) : J = g[18];
+	let Y;
+	g[19] === M ? Y = g[20] : (Y = /* @__PURE__ */ p(d, {
+		type: "file",
+		ref: E,
+		display: "none",
+		onChange: M
+	}), g[19] = M, g[20] = Y);
+	let X;
+	g[21] !== B || g[22] !== W || g[23] !== J || g[24] !== Y || g[25] !== V ? (X = /* @__PURE__ */ m(u, {
+		p: "108px",
+		bg: t.BackgroundDisabled,
+		borderWidth: "1px",
+		borderColor: V,
+		transition: "150ms ease",
+		borderRadius: n.Medium,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexDir: "column",
+		onDragOver: I,
+		onDragLeave: R,
+		onDrop: B,
+		onClick: P,
+		cursor: "pointer",
+		children: [
+			H,
+			W,
+			J,
+			Y
+		]
+	}), g[21] = B, g[22] = W, g[23] = J, g[24] = Y, g[25] = V, g[26] = X) : X = g[26];
+	let Z;
+	g[27] !== _ || g[28] !== C ? (Z = C && /* @__PURE__ */ p(i, {
+		mt: r.Medium,
+		type: "error",
+		children: s[_].unsupportedFormat
+	}), g[27] = _, g[28] = C, g[29] = Z) : Z = g[29];
+	let Q;
+	g[30] !== _ || g[31] !== x ? (Q = x && /* @__PURE__ */ p(i, {
+		mt: r.Medium,
+		type: "error",
+		children: s[_].sizeExceeded
+	}), g[30] = _, g[31] = x, g[32] = Q) : Q = g[32];
+	let $;
+	return g[33] !== X || g[34] !== Z || g[35] !== Q ? ($ = /* @__PURE__ */ m(ee, { children: [
+		X,
+		Z,
+		Q
+	] }), g[33] = X, g[34] = Z, g[35] = Q, g[36] = $) : $ = g[36], $;
 }
-export {
-  _e as default
-};
+//#endregion
+export { g as default };