react-img-cutout 1.3.0 → 1.4.0

package/dist/index.js

@@ -1,23 +1,23 @@
-import Ct, { useState as O, useRef as N, useCallback as M, useMemo as V, useEffect as W, useContext as Y, createContext as lt } from "react";
+import Ct, { useState as L, useRef as V, useCallback as M, useMemo as B, useEffect as W, useContext as N, createContext as lt } from "react";
 var st = { exports: {} }, tt = {};
 var ut;
 function Mt() {
   if (ut) return tt;
   ut = 1;
   var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), r = /* @__PURE__ */ Symbol.for("react.fragment");
-  function n(e, c, i) {
-    var s = null;
-    if (i !== void 0 && (s = "" + i), c.key !== void 0 && (s = "" + c.key), "key" in c) {
-      i = {};
-      for (var o in c)
-        o !== "key" && (i[o] = c[o]);
-    } else i = c;
-    return c = i.ref, {
+  function n(e, l, s) {
+    var i = null;
+    if (s !== void 0 && (i = "" + s), l.key !== void 0 && (i = "" + l.key), "key" in l) {
+      s = {};
+      for (var o in l)
+        o !== "key" && (s[o] = l[o]);
+    } else s = l;
+    return l = s.ref, {
       $$typeof: t,
       type: e,
-      key: s,
-      ref: c !== void 0 ? c : null,
-      props: i
+      key: i,
+      ref: l !== void 0 ? l : null,
+      props: s
     };
   }
   return tt.Fragment = r, tt.jsx = n, tt.jsxs = n, tt;
@@ -32,17 +32,17 @@ function It() {
         return a.$$typeof === Q ? null : a.displayName || a.name || null;
       if (typeof a == "string") return a;
       switch (a) {
-        case d:
+        case g:
           return "Fragment";
-        case f:
+        case d:
           return "Profiler";
         case h:
           return "StrictMode";
-        case A:
+        case R:
           return "Suspense";
-        case _:
+        case P:
           return "SuspenseList";
-        case U:
+        case H:
           return "Activity";
       }
       if (typeof a == "object")
@@ -51,19 +51,19 @@ function It() {
         ), a.$$typeof) {
           case y:
             return "Portal";
-          case k:
+          case C:
             return a.displayName || "Context";
           case w:
             return (a._context.displayName || "Context") + ".Consumer";
           case b:
-            var E = a.render;
-            return a = a.displayName, a || (a = E.displayName || E.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
-          case X:
-            return E = a.displayName || null, E !== null ? E : t(a.type) || "Memo";
+            var k = a.render;
+            return a = a.displayName, a || (a = k.displayName || k.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
+          case U:
+            return k = a.displayName || null, k !== null ? k : t(a.type) || "Memo";
           case D:
-            E = a._payload, a = a._init;
+            k = a._payload, a = a._init;
             try {
-              return t(a(E));
+              return t(a(k));
             } catch {
             }
         }
@@ -75,74 +75,74 @@ function It() {
     function n(a) {
       try {
         r(a);
-        var E = !1;
+        var k = !1;
       } catch {
-        E = !0;
+        k = !0;
       }
-      if (E) {
-        E = console;
-        var j = E.error, $ = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
-        return j.call(
-          E,
+      if (k) {
+        k = console;
+        var _ = k.error, $ = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
+        return _.call(
+          k,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           $
         ), r(a);
       }
     }
     function e(a) {
-      if (a === d) return "<>";
+      if (a === g) return "<>";
       if (typeof a == "object" && a !== null && a.$$typeof === D)
         return "<...>";
       try {
-        var E = t(a);
-        return E ? "<" + E + ">" : "<...>";
+        var k = t(a);
+        return k ? "<" + k + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function c() {
-      var a = B.A;
+    function l() {
+      var a = q.A;
       return a === null ? null : a.getOwner();
     }
-    function i() {
+    function s() {
       return Error("react-stack-top-frame");
     }
-    function s(a) {
-      if (q.call(a, "key")) {
-        var E = Object.getOwnPropertyDescriptor(a, "key").get;
-        if (E && E.isReactWarning) return !1;
+    function i(a) {
+      if (G.call(a, "key")) {
+        var k = Object.getOwnPropertyDescriptor(a, "key").get;
+        if (k && k.isReactWarning) return !1;
       }
       return a.key !== void 0;
     }
-    function o(a, E) {
-      function j() {
-        P || (P = !0, console.error(
+    function o(a, k) {
+      function _() {
+        I || (I = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          E
+          k
         ));
       }
-      j.isReactWarning = !0, Object.defineProperty(a, "key", {
-        get: j,
+      _.isReactWarning = !0, Object.defineProperty(a, "key", {
+        get: _,
         configurable: !0
       });
     }
-    function l() {
+    function c() {
       var a = t(this.type);
-      return I[a] || (I[a] = !0, console.error(
+      return S[a] || (S[a] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), a = this.props.ref, a !== void 0 ? a : null;
     }
-    function u(a, E, j, $, ot, it) {
-      var T = j.ref;
+    function u(a, k, _, $, ot, it) {
+      var T = _.ref;
       return a = {
-        $$typeof: g,
+        $$typeof: f,
         type: a,
-        key: E,
-        props: j,
+        key: k,
+        props: _,
         _owner: $
       }, (T !== void 0 ? T : null) !== null ? Object.defineProperty(a, "ref", {
         enumerable: !1,
-        get: l
+        get: c
       }) : Object.defineProperty(a, "ref", { enumerable: !1, value: null }), a._store = {}, Object.defineProperty(a._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -165,11 +165,11 @@ function It() {
         value: it
       }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
     }
-    function p(a, E, j, $, ot, it) {
-      var T = E.children;
+    function p(a, k, _, $, ot, it) {
+      var T = k.children;
       if (T !== void 0)
         if ($)
-          if (S(T)) {
+          if (j(T)) {
             for ($ = 0; $ < T.length; $++)
               m(T[$]);
             Object.freeze && Object.freeze(T);
@@ -178,12 +178,12 @@ function It() {
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
         else m(T);
-      if (q.call(E, "key")) {
+      if (G.call(k, "key")) {
         T = t(a);
-        var K = Object.keys(E).filter(function(Et) {
+        var K = Object.keys(k).filter(function(Et) {
           return Et !== "key";
         });
-        $ = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", G[T + $] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
+        $ = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", Y[T + $] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -194,21 +194,21 @@ React keys must be passed directly to JSX without using spread:
           T,
           K,
           T
-        ), G[T + $] = !0);
+        ), Y[T + $] = !0);
       }
-      if (T = null, j !== void 0 && (n(j), T = "" + j), s(E) && (n(E.key), T = "" + E.key), "key" in E) {
-        j = {};
-        for (var at in E)
-          at !== "key" && (j[at] = E[at]);
-      } else j = E;
+      if (T = null, _ !== void 0 && (n(_), T = "" + _), i(k) && (n(k.key), T = "" + k.key), "key" in k) {
+        _ = {};
+        for (var at in k)
+          at !== "key" && (_[at] = k[at]);
+      } else _ = k;
       return T && o(
-        j,
+        _,
         typeof a == "function" ? a.displayName || a.name || "Unknown" : a
       ), u(
         a,
         T,
-        j,
-        c(),
+        _,
+        l(),
         ot,
         it
       );
@@ -217,9 +217,9 @@ React keys must be passed directly to JSX without using spread:
       v(a) ? a._store && (a._store.validated = 1) : typeof a == "object" && a !== null && a.$$typeof === D && (a._payload.status === "fulfilled" ? v(a._payload.value) && a._payload.value._store && (a._payload.value._store.validated = 1) : a._store && (a._store.validated = 1));
     }
     function v(a) {
-      return typeof a == "object" && a !== null && a.$$typeof === g;
+      return typeof a == "object" && a !== null && a.$$typeof === f;
     }
-    var x = Ct, g = /* @__PURE__ */ Symbol.for("react.transitional.element"), y = /* @__PURE__ */ Symbol.for("react.portal"), d = /* @__PURE__ */ Symbol.for("react.fragment"), h = /* @__PURE__ */ Symbol.for("react.strict_mode"), f = /* @__PURE__ */ Symbol.for("react.profiler"), w = /* @__PURE__ */ Symbol.for("react.consumer"), k = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), A = /* @__PURE__ */ Symbol.for("react.suspense"), _ = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), D = /* @__PURE__ */ Symbol.for("react.lazy"), U = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), B = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, q = Object.prototype.hasOwnProperty, S = Array.isArray, R = console.createTask ? console.createTask : function() {
+    var x = Ct, f = /* @__PURE__ */ Symbol.for("react.transitional.element"), y = /* @__PURE__ */ Symbol.for("react.portal"), g = /* @__PURE__ */ Symbol.for("react.fragment"), h = /* @__PURE__ */ Symbol.for("react.strict_mode"), d = /* @__PURE__ */ Symbol.for("react.profiler"), w = /* @__PURE__ */ Symbol.for("react.consumer"), C = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), R = /* @__PURE__ */ Symbol.for("react.suspense"), P = /* @__PURE__ */ Symbol.for("react.suspense_list"), U = /* @__PURE__ */ Symbol.for("react.memo"), D = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), q = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, j = Array.isArray, A = console.createTask ? console.createTask : function() {
       return null;
     };
     x = {
@@ -227,29 +227,29 @@ React keys must be passed directly to JSX without using spread:
         return a();
       }
     };
-    var P, I = {}, z = x.react_stack_bottom_frame.bind(
+    var I, S = {}, O = x.react_stack_bottom_frame.bind(
       x,
-      i
-    )(), L = R(e(i)), G = {};
-    et.Fragment = d, et.jsx = function(a, E, j) {
-      var $ = 1e4 > B.recentlyCreatedOwnerStacks++;
+      s
+    )(), z = A(e(s)), Y = {};
+    et.Fragment = g, et.jsx = function(a, k, _) {
+      var $ = 1e4 > q.recentlyCreatedOwnerStacks++;
       return p(
         a,
-        E,
-        j,
+        k,
+        _,
         !1,
-        $ ? Error("react-stack-top-frame") : z,
-        $ ? R(e(a)) : L
+        $ ? Error("react-stack-top-frame") : O,
+        $ ? A(e(a)) : z
       );
-    }, et.jsxs = function(a, E, j) {
-      var $ = 1e4 > B.recentlyCreatedOwnerStacks++;
+    }, et.jsxs = function(a, k, _) {
+      var $ = 1e4 > q.recentlyCreatedOwnerStacks++;
       return p(
         a,
-        E,
-        j,
+        k,
+        _,
         !0,
-        $ ? Error("react-stack-top-frame") : z,
-        $ ? R(e(a)) : L
+        $ ? Error("react-stack-top-frame") : O,
+        $ ? A(e(a)) : z
       );
     };
   })()), et;
@@ -258,36 +258,36 @@ var ft;
 function Rt() {
   return ft || (ft = 1, process.env.NODE_ENV === "production" ? st.exports = Mt() : st.exports = It()), st.exports;
 }
-var C = Rt();
+var E = Rt();
 const At = 400;
 function Pt(t, r, n) {
-  const e = n[0] - r[0], c = n[1] - r[1], i = e * e + c * c;
-  if (i === 0) {
-    const o = t[0] - r[0], l = t[1] - r[1];
-    return Math.sqrt(o * o + l * l);
+  const e = n[0] - r[0], l = n[1] - r[1], s = e * e + l * l;
+  if (s === 0) {
+    const o = t[0] - r[0], c = t[1] - r[1];
+    return Math.sqrt(o * o + c * c);
   }
-  return Math.abs(e * (r[1] - t[1]) - c * (r[0] - t[0])) / Math.sqrt(i);
+  return Math.abs(e * (r[1] - t[1]) - l * (r[0] - t[0])) / Math.sqrt(s);
 }
 function ct(t, r) {
   if (t.length <= 2) return t;
   let n = 0, e = 0;
-  const c = t[0], i = t[t.length - 1];
-  for (let s = 1; s < t.length - 1; s++) {
-    const o = Pt(t[s], c, i);
-    o > n && (n = o, e = s);
+  const l = t[0], s = t[t.length - 1];
+  for (let i = 1; i < t.length - 1; i++) {
+    const o = Pt(t[i], l, s);
+    o > n && (n = o, e = i);
   }
   if (n > r) {
-    const s = ct(t.slice(0, e + 1), r), o = ct(t.slice(e), r);
-    return s.slice(0, -1).concat(o);
+    const i = ct(t.slice(0, e + 1), r), o = ct(t.slice(e), r);
+    return i.slice(0, -1).concat(o);
   }
-  return [c, i];
+  return [l, s];
 }
 function dt(t) {
   let r = 0;
   const n = t.length;
   for (let e = 0; e < n; e++) {
-    const [c, i] = t[e], [s, o] = t[(e + 1) % n];
-    r += c * o - s * i;
+    const [l, s] = t[e], [i, o] = t[(e + 1) % n];
+    r += l * o - i * s;
   }
   return r * 0.5;
 }
@@ -331,98 +331,98 @@ const jt = [
   // 15  (1111)
 ];
 function _t(t, r, n, e) {
-  const c = [];
-  for (let i = 0; i < n - 1; i++)
-    for (let s = 0; s < r - 1; s++) {
-      const o = t[i * r + s], l = t[i * r + s + 1], u = t[(i + 1) * r + s + 1], p = t[(i + 1) * r + s];
+  const l = [];
+  for (let s = 0; s < n - 1; s++)
+    for (let i = 0; i < r - 1; i++) {
+      const o = t[s * r + i], c = t[s * r + i + 1], u = t[(s + 1) * r + i + 1], p = t[(s + 1) * r + i];
       let m = 0;
-      if (o >= e && (m |= 1), l >= e && (m |= 2), u >= e && (m |= 4), p >= e && (m |= 8), m === 0 || m === 15) continue;
+      if (o >= e && (m |= 1), c >= e && (m |= 2), u >= e && (m |= 4), p >= e && (m |= 8), m === 0 || m === 15) continue;
       const v = (x) => {
         switch (x) {
           case 0: {
-            const g = l - o, y = Math.abs(g) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - o) / g));
-            return [s + y, i];
+            const f = c - o, y = Math.abs(f) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - o) / f));
+            return [i + y, s];
           }
           case 1: {
-            const g = u - l, y = Math.abs(g) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - l) / g));
-            return [s + 1, i + y];
+            const f = u - c, y = Math.abs(f) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - c) / f));
+            return [i + 1, s + y];
           }
           case 2: {
-            const g = u - p, y = Math.abs(g) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - p) / g));
-            return [s + y, i + 1];
+            const f = u - p, y = Math.abs(f) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - p) / f));
+            return [i + y, s + 1];
           }
           case 3: {
-            const g = p - o, y = Math.abs(g) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - o) / g));
-            return [s, i + y];
+            const f = p - o, y = Math.abs(f) < 1e-10 ? 0.5 : Math.max(0, Math.min(1, (e - o) / f));
+            return [i, s + y];
           }
           default:
-            return [s + 0.5, i + 0.5];
+            return [i + 0.5, s + 0.5];
         }
       };
-      for (const [x, g] of jt[m])
-        c.push([v(x), v(g)]);
+      for (const [x, f] of jt[m])
+        l.push([v(x), v(f)]);
     }
-  return c;
+  return l;
 }
 function $t(t) {
   if (t.length === 0) return [];
-  const r = (i) => `${Math.round(i[0] * 1e4)},${Math.round(i[1] * 1e4)}`, n = /* @__PURE__ */ new Map();
-  for (let i = 0; i < t.length; i++)
-    for (const s of [0, 1]) {
-      const o = r(t[i][s]);
-      let l = n.get(o);
-      l || (l = [], n.set(o, l)), l.push({ idx: i, end: s });
+  const r = (s) => `${Math.round(s[0] * 1e4)},${Math.round(s[1] * 1e4)}`, n = /* @__PURE__ */ new Map();
+  for (let s = 0; s < t.length; s++)
+    for (const i of [0, 1]) {
+      const o = r(t[s][i]);
+      let c = n.get(o);
+      c || (c = [], n.set(o, c)), c.push({ idx: s, end: i });
     }
-  const e = new Uint8Array(t.length), c = [];
-  for (let i = 0; i < t.length; i++) {
-    if (e[i]) continue;
-    const s = [];
-    let o = i, l = 1, u = 0;
+  const e = new Uint8Array(t.length), l = [];
+  for (let s = 0; s < t.length; s++) {
+    if (e[s]) continue;
+    const i = [];
+    let o = s, c = 1, u = 0;
     const p = t.length + 1;
     for (; u++ < p && !e[o]; ) {
       e[o] = 1;
-      const m = l === 1 ? 0 : 1;
-      s.push(t[o][m]);
-      const v = t[o][l], x = r(v), g = n.get(x);
-      if (!g) break;
-      const y = g.find((d) => !e[d.idx]);
+      const m = c === 1 ? 0 : 1;
+      i.push(t[o][m]);
+      const v = t[o][c], x = r(v), f = n.get(x);
+      if (!f) break;
+      const y = f.find((g) => !e[g.idx]);
       if (!y) break;
-      o = y.idx, l = y.end === 0 ? 1 : 0;
+      o = y.idx, c = y.end === 0 ? 1 : 0;
     }
-    s.length >= 3 && c.push(s);
+    i.length >= 3 && l.push(i);
   }
-  return c;
+  return l;
 }
-function Tt(t, r, n, e = 30, c = 2e-3) {
+function Tt(t, r, n, e = 30, l = 2e-3) {
   if (r <= 0 || n <= 0 || t.length === 0) return [];
-  const i = Math.min(1, At / Math.max(r, n)), s = Math.max(1, Math.round(r * i)), o = Math.max(1, Math.round(n * i)), l = s + 2, u = o + 2, p = new Float32Array(l * u);
+  const s = Math.min(1, At / Math.max(r, n)), i = Math.max(1, Math.round(r * s)), o = Math.max(1, Math.round(n * s)), c = i + 2, u = o + 2, p = new Float32Array(c * u);
   for (let h = 0; h < o; h++) {
-    const f = Math.min(n - 1, Math.floor(h / i));
-    for (let w = 0; w < s; w++) {
-      const k = Math.min(r - 1, Math.floor(w / i));
-      p[(h + 1) * l + (w + 1)] = t[f * r + k];
+    const d = Math.min(n - 1, Math.floor(h / s));
+    for (let w = 0; w < i; w++) {
+      const C = Math.min(r - 1, Math.floor(w / s));
+      p[(h + 1) * c + (w + 1)] = t[d * r + C];
     }
   }
-  const m = _t(p, l, u, e), v = $t(m);
+  const m = _t(p, c, u, e), v = $t(m);
   if (v.length === 0) return [];
-  let x = v[0], g = Math.abs(dt(x));
+  let x = v[0], f = Math.abs(dt(x));
   for (let h = 1; h < v.length; h++) {
-    const f = Math.abs(dt(v[h]));
-    f > g && (x = v[h], g = f);
+    const d = Math.abs(dt(v[h]));
+    d > f && (x = v[h], f = d);
   }
-  const y = x.map(([h, f]) => [
-    (h - 1) / s,
-    (f - 1) / o
-  ]), d = St(y, c);
-  return d.length >= 3 ? d : y;
+  const y = x.map(([h, d]) => [
+    (h - 1) / i,
+    (d - 1) / o
+  ]), g = St(y, l);
+  return g.length >= 3 ? g : y;
 }
 function Dt(t) {
   const r = t.length;
   if (r < 3) return "";
   const n = [`M${t[0][0]},${t[0][1]}`];
   for (let e = 0; e < r; e++) {
-    const c = t[(e - 1 + r) % r], i = t[e], s = t[(e + 1) % r], o = t[(e + 2) % r], l = i[0] + (s[0] - c[0]) / 6, u = i[1] + (s[1] - c[1]) / 6, p = s[0] - (o[0] - i[0]) / 6, m = s[1] - (o[1] - i[1]) / 6;
-    n.push(`C${l},${u} ${p},${m} ${s[0]},${s[1]}`);
+    const l = t[(e - 1 + r) % r], s = t[e], i = t[(e + 1) % r], o = t[(e + 2) % r], c = s[0] + (i[0] - l[0]) / 6, u = s[1] + (i[1] - l[1]) / 6, p = i[0] - (o[0] - s[0]) / 6, m = i[1] - (o[1] - s[1]) / 6;
+    n.push(`C${c},${u} ${p},${m} ${i[0]},${i[1]}`);
   }
   return n.push("Z"), n.join("");
 }
@@ -432,20 +432,20 @@ function Wt(t, r) {
     n[e] = t[e * 4 + 3];
   return n;
 }
-function zt(t, r, n, e) {
+function Ot(t, r, n, e) {
   if (r <= 0 || n <= 0) return { x: 0, y: 0, w: 1, h: 1 };
-  let c = r, i = n, s = 0, o = 0, l = !1;
+  let l = r, s = n, i = 0, o = 0, c = !1;
   for (let u = 0; u < n; u++)
     for (let p = 0; p < r; p++)
-      t[u * r + p] > e && (p < c && (c = p), p > s && (s = p), u < i && (i = u), u > o && (o = u), l = !0);
-  return l ? {
-    x: c / r,
-    y: i / n,
-    w: (s - c + 1) / r,
-    h: (o - i + 1) / n
+      t[u * r + p] > e && (p < l && (l = p), p > i && (i = p), u < s && (s = u), u > o && (o = u), c = !0);
+  return c ? {
+    x: l / r,
+    y: s / n,
+    w: (i - l + 1) / r,
+    h: (o - s + 1) / n
   } : { x: 0, y: 0, w: 1, h: 1 };
 }
-class Ot {
+class zt {
   id;
   bounds = { x: 0, y: 0, w: 1, h: 1 };
   contour = [];
@@ -477,19 +477,19 @@ class Ot {
    */
   async prepare() {
     const r = new Image();
-    r.crossOrigin = "anonymous", r.src = this.src, await new Promise((s) => {
-      r.onload = () => s(), r.onerror = () => s();
+    r.crossOrigin = "anonymous", r.src = this.src, await new Promise((i) => {
+      r.onload = () => i(), r.onerror = () => i();
     });
     const n = r.naturalWidth, e = r.naturalHeight;
     if (n <= 0 || e <= 0) return;
-    const c = document.createElement("canvas");
-    c.width = n, c.height = e;
-    const i = c.getContext("2d", { willReadFrequently: !0 });
-    if (i)
+    const l = document.createElement("canvas");
+    l.width = n, l.height = e;
+    const s = l.getContext("2d", { willReadFrequently: !0 });
+    if (s)
       try {
-        i.drawImage(r, 0, 0);
-        const s = i.getImageData(0, 0, n, e);
-        this.alpha = Wt(s.data, n * e), this.width = n, this.height = e, this.bounds = zt(this.alpha, n, e, this.threshold), this.contour = Tt(this.alpha, n, e, this.threshold);
+        s.drawImage(r, 0, 0);
+        const i = s.getImageData(0, 0, n, e);
+        this.alpha = Wt(i.data, n * e), this.width = n, this.height = e, this.bounds = Ot(this.alpha, n, e, this.threshold), this.contour = Tt(this.alpha, n, e, this.threshold);
       } catch {
         this.alpha = new Uint8Array(0);
       }
@@ -513,11 +513,11 @@ class Ot {
     if (this.alpha.length === 0) return !1;
     const e = this.bounds;
     if (r < e.x || r > e.x + e.w || n < e.y || n > e.y + e.h) return !1;
-    const c = Math.min(this.width - 1, Math.max(0, Math.floor(r * this.width))), i = Math.min(
+    const l = Math.min(this.width - 1, Math.max(0, Math.floor(r * this.width))), s = Math.min(
       this.height - 1,
       Math.max(0, Math.floor(n * this.height))
     );
-    return this.alpha[i * this.width + c] > this.threshold;
+    return this.alpha[s * this.width + l] > this.threshold;
   }
 }
 class Lt {
@@ -533,9 +533,9 @@ class Lt {
 }
 function Yt(t, r, n) {
   let e = !1;
-  for (let c = 0, i = n.length - 1; c < n.length; i = c++) {
-    const s = n[c][0], o = n[c][1], l = n[i][0], u = n[i][1];
-    o > r != u > r && t < (l - s) * (r - o) / (u - o) + s && (e = !e);
+  for (let l = 0, s = n.length - 1; l < n.length; s = l++) {
+    const i = n[l][0], o = n[l][1], c = n[s][0], u = n[s][1];
+    o > r != u > r && t < (c - i) * (r - o) / (u - o) + i && (e = !e);
   }
   return e;
 }
@@ -545,14 +545,14 @@ class Nt {
   points;
   constructor(r) {
     this.id = r.id, this.points = r.points;
-    let n = 1 / 0, e = 1 / 0, c = -1 / 0, i = -1 / 0;
-    for (const [s, o] of r.points)
-      s < n && (n = s), s > c && (c = s), o < e && (e = o), o > i && (i = o);
+    let n = 1 / 0, e = 1 / 0, l = -1 / 0, s = -1 / 0;
+    for (const [i, o] of r.points)
+      i < n && (n = i), i > l && (l = i), o < e && (e = o), o > s && (s = o);
     this.bounds = {
       x: n,
       y: e,
-      w: c - n,
-      h: i - e
+      w: l - n,
+      h: s - e
     };
   }
   /**
@@ -581,8 +581,8 @@ class Vt {
   ry;
   constructor(r, n = 1, e = 1) {
     this.id = r.id, this.cx = r.center.x, this.cy = r.center.y;
-    const c = Math.max(1, n), i = Math.max(1, e), s = Math.min(c, i);
-    this.rx = r.radius * s / c, this.ry = r.radius * s / i, this.bounds = {
+    const l = Math.max(1, n), s = Math.max(1, e), i = Math.min(l, s);
+    this.rx = r.radius * i / l, this.ry = r.radius * i / s, this.bounds = {
       x: r.center.x - this.rx,
       y: r.center.y - this.ry,
       w: this.rx * 2,
@@ -591,14 +591,14 @@ class Vt {
   }
   hitTest(r, n) {
     if (this.rx <= 0 || this.ry <= 0) return !1;
-    const e = (r - this.cx) / this.rx, c = (n - this.cy) / this.ry;
-    return e * e + c * c <= 1;
+    const e = (r - this.cx) / this.rx, l = (n - this.cy) / this.ry;
+    return e * e + l * l <= 1;
   }
 }
 function Bt(t, r, n) {
   switch (t.type) {
     case "image":
-      return new Ot(t, r);
+      return new zt(t, r);
     case "bbox":
       return new Lt(t);
     case "polygon":
@@ -620,116 +620,116 @@ function Ht(t) {
   }
 }
 function Ft(t, r = !0, n = 30, e = 150) {
-  const [c, i] = O(null), [s, o] = O(null), l = N(null), u = N([]), [p, m] = O({}), [v, x] = O({ width: 1, height: 1 }), [g, y] = O({}), d = Math.min(255, Math.max(0, n)), h = N(null), f = M(() => {
+  const [l, s] = L(null), [i, o] = L(null), c = V(null), u = V([]), [p, m] = L({}), [v, x] = L({ width: 1, height: 1 }), [f, y] = L({}), g = Math.min(255, Math.max(0, n)), h = V(null), d = M(() => {
     h.current === null && (h.current = setTimeout(() => {
-      h.current = null, i(null);
+      h.current = null, s(null);
     }, e));
   }, [e]), w = M(() => {
     h.current !== null && (clearTimeout(h.current), h.current = null);
-  }, []), k = t.map(Ht).join("|"), b = V(() => t, [k]);
+  }, []), C = t.map(Ht).join("|"), b = B(() => t, [C]);
   W(() => {
-    const S = l.current;
-    if (!S) return;
-    const R = () => {
-      const I = S.getBoundingClientRect();
+    const j = c.current;
+    if (!j) return;
+    const A = () => {
+      const S = j.getBoundingClientRect();
       x({
-        width: Math.max(1, I.width),
-        height: Math.max(1, I.height)
+        width: Math.max(1, S.width),
+        height: Math.max(1, S.height)
       });
     };
-    R();
-    const P = new ResizeObserver(R);
-    return P.observe(S), () => P.disconnect();
+    A();
+    const I = new ResizeObserver(A);
+    return I.observe(j), () => I.disconnect();
   }, []), W(() => {
     if (!r) {
       u.current = [];
       return;
     }
-    let S = !1, R = [];
-    async function P() {
-      const I = [], z = {}, L = {};
-      for (const G of b) {
-        const a = Bt(G, d, {
+    let j = !1, A = [];
+    async function I() {
+      const S = [], O = {}, z = {};
+      for (const Y of b) {
+        const a = Bt(Y, g, {
           viewportWidth: v.width,
           viewportHeight: v.height
         });
-        if (a.prepare && await a.prepare(), S) return;
-        I.push(a), z[a.id] = a.bounds, a.contour && a.contour.length >= 3 && (L[a.id] = a.contour);
+        if (a.prepare && await a.prepare(), j) return;
+        S.push(a), O[a.id] = a.bounds, a.contour && a.contour.length >= 3 && (z[a.id] = a.contour);
       }
-      S || (R = I, u.current = I, m(z), y(L));
+      j || (A = S, u.current = S, m(O), y(z));
     }
-    return P(), () => {
-      S = !0;
-      for (const I of R)
-        I.dispose?.();
+    return I(), () => {
+      j = !0;
+      for (const S of A)
+        S.dispose?.();
     };
-  }, [b, r, d, v.width, v.height]);
-  const A = M(
-    (S, R) => {
-      const P = u.current;
-      for (let I = P.length - 1; I >= 0; I--)
-        if (P[I].hitTest(S, R))
-          return P[I].id;
+  }, [b, r, g, v.width, v.height]);
+  const R = M(
+    (j, A) => {
+      const I = u.current;
+      for (let S = I.length - 1; S >= 0; S--)
+        if (I[S].hitTest(j, A))
+          return I[S].id;
       return null;
     },
     []
-  ), _ = M(
-    (S) => {
-      const R = l.current;
-      if (!R) return null;
-      const P = R.getBoundingClientRect(), I = (S.clientX - P.left) / P.width, z = (S.clientY - P.top) / P.height;
-      return I < 0 || I > 1 || z < 0 || z > 1 ? null : { nx: I, ny: z };
+  ), P = M(
+    (j) => {
+      const A = c.current;
+      if (!A) return null;
+      const I = A.getBoundingClientRect(), S = (j.clientX - I.left) / I.width, O = (j.clientY - I.top) / I.height;
+      return S < 0 || S > 1 || O < 0 || O > 1 ? null : { nx: S, ny: O };
     },
     []
-  ), X = M(
-    (S) => {
+  ), U = M(
+    (j) => {
       if (!r) return;
-      const R = _(S);
-      if (!R) {
-        f();
+      const A = P(j);
+      if (!A) {
+        d();
         return;
       }
-      const P = A(R.nx, R.ny);
-      if (P === null) {
-        if (S.target?.closest('[data-cutout-overlay="true"]')) {
+      const I = R(A.nx, A.ny);
+      if (I === null) {
+        if (j.target?.closest('[data-cutout-overlay="true"]')) {
           w();
           return;
         }
-        f();
+        d();
         return;
       }
-      w(), i(P);
+      w(), s(I);
     },
-    [r, _, A, f, w]
+    [r, P, R, d, w]
   ), D = M(() => {
-    f();
-  }, [f]), U = M(
-    (S) => {
+    d();
+  }, [d]), H = M(
+    (j) => {
       if (!r) return;
-      const R = _(S);
-      if (!R) {
+      const A = P(j);
+      if (!A) {
         o(null);
         return;
       }
-      const P = A(R.nx, R.ny);
-      o(P === s || P === null ? null : P);
+      const I = R(A.nx, A.ny);
+      o(I === i || I === null ? null : I);
     },
-    [r, _, A, s]
-  ), Q = s ?? c, B = r ? p : {}, q = r ? g : {};
+    [r, P, R, i]
+  ), Q = i ?? l, q = r ? p : {}, G = r ? f : {};
   return W(() => () => {
     w();
   }, [w]), {
-    hoveredId: c,
-    selectedId: s,
+    hoveredId: l,
+    selectedId: i,
     activeId: Q,
     viewportSize: v,
-    boundsMap: B,
-    contourMap: q,
-    containerRef: l,
+    boundsMap: q,
+    contourMap: G,
+    containerRef: c,
     containerProps: {
-      onPointerMove: X,
+      onPointerMove: U,
       onPointerLeave: D,
-      onClick: U
+      onClick: H
     }
   };
 }
@@ -1022,32 +1022,32 @@ const rt = "all 0.5s cubic-bezier(0.22, 1, 0.36, 1)", Ut = {
   subtle: Kt,
   trace: Jt,
   shimmer: Zt
-}, H = lt(null), kt = lt(null);
+}, F = lt(null), kt = lt(null);
 function nt() {
-  const t = Y(kt);
+  const t = N(kt);
   if (!t) throw new Error("Must be used inside <CutoutViewer>");
   return t;
 }
 const Z = lt(null);
 function de() {
-  const t = Y(Z);
+  const t = N(Z);
   if (!t)
     throw new Error("useCutout must be used inside <CutoutViewer.Cutout>");
   return t;
 }
-function Qt({ id: t, src: r, label: n, effect: e, children: c, renderLayer: i }) {
-  const s = Y(H), o = nt();
-  if (!s)
+function Qt({ id: t, src: r, label: n, effect: e, children: l, renderLayer: s }) {
+  const i = N(F), o = nt();
+  if (!i)
     throw new Error("<CutoutViewer.Cutout> must be used inside <CutoutViewer>");
-  W(() => (s.registerCutout({ type: "image", id: t, src: r, label: n }), () => s.unregisterCutout(t)), [t, r, n, s]);
-  const l = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, u = o.contourMap[t] ?? null, p = V(() => {
+  W(() => (i.registerCutout({ type: "image", id: t, src: r, label: n }), () => i.unregisterCutout(t)), [t, r, n, i]);
+  const c = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, u = o.contourMap[t] ?? null, p = B(() => {
     if (!u) return null;
-    const w = o.viewportSize.width || 1, k = o.viewportSize.height || 1, b = u.map(([A, _]) => [A * w, _ * k]);
+    const w = o.viewportSize.width || 1, C = o.viewportSize.height || 1, b = u.map(([R, P]) => [R * w, P * C]);
     return Dt(b);
-  }, [u, o.viewportSize.width, o.viewportSize.height]), m = o.activeId === t, v = o.hoveredId === t, x = o.selectedId === t, g = { x: 0, y: 0, w: 1, h: 1 }, y = o.boundsMap[t] ?? g;
-  let d, h;
-  !o.enabled || !o.isAnyActive && !o.showAll ? (d = l.cutoutIdle, h = l.geometryIdle) : o.showAll || m ? (d = l.cutoutActive, h = l.geometryActive) : (d = l.cutoutInactive, h = l.geometryInactive);
-  const f = V(
+  }, [u, o.viewportSize.width, o.viewportSize.height]), m = o.activeId === t, v = o.hoveredId === t, x = o.selectedId === t, f = { x: 0, y: 0, w: 1, h: 1 }, y = o.boundsMap[t] ?? f;
+  let g, h;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (g = c.cutoutIdle, h = c.geometryIdle) : o.showAll || m ? (g = c.cutoutActive, h = c.geometryActive) : (g = c.cutoutInactive, h = c.geometryInactive);
+  const d = B(
     () => ({
       id: t,
       label: n,
@@ -1055,12 +1055,12 @@ function Qt({ id: t, src: r, label: n, effect: e, children: c, renderLayer: i })
       isActive: m,
       isHovered: v,
       isSelected: x,
-      effect: l
+      effect: c
     }),
-    [t, n, y, m, v, x, l]
+    [t, n, y, m, v, x, c]
   );
-  return /* @__PURE__ */ C.jsxs(Z.Provider, { value: f, children: [
-    /* @__PURE__ */ C.jsxs(
+  return /* @__PURE__ */ E.jsxs(Z.Provider, { value: d, children: [
+    /* @__PURE__ */ E.jsxs(
       "div",
       {
         "data-cutout-id": t,
@@ -1069,11 +1069,11 @@ function Qt({ id: t, src: r, label: n, effect: e, children: c, renderLayer: i })
           position: "absolute",
           inset: 0,
           zIndex: m ? 20 : 10,
-          transition: l.transition,
-          ...d
+          transition: c.transition,
+          ...g
         },
         children: [
-          i ? i({ isActive: m, isHovered: v, isSelected: x, bounds: y, effect: l }) : /* @__PURE__ */ C.jsx(
+          s ? s({ isActive: m, isHovered: v, isSelected: x, bounds: y, effect: c }) : /* @__PURE__ */ E.jsx(
             "img",
             {
               src: r,
@@ -1087,7 +1087,7 @@ function Qt({ id: t, src: r, label: n, effect: e, children: c, renderLayer: i })
               }
             }
           ),
-          p && h && /* @__PURE__ */ C.jsx(
+          p && h && /* @__PURE__ */ E.jsx(
             "svg",
             {
               viewBox: `0 0 ${o.viewportSize.width || 1} ${o.viewportSize.height || 1}`,
@@ -1100,7 +1100,7 @@ function Qt({ id: t, src: r, label: n, effect: e, children: c, renderLayer: i })
                 overflow: "visible",
                 filter: h.glow ? `drop-shadow(${h.glow.split(",")[0]?.trim() ?? ""})` : "none"
               },
-              children: /* @__PURE__ */ C.jsx(
+              children: /* @__PURE__ */ E.jsx(
                 "path",
                 {
                   d: p,
@@ -1112,7 +1112,7 @@ function Qt({ id: t, src: r, label: n, effect: e, children: c, renderLayer: i })
                   strokeDasharray: h.strokeDasharray,
                   pathLength: h.strokeDasharray ? 1 : void 0,
                   style: {
-                    transition: l.transition,
+                    transition: c.transition,
                     animation: h.animation
                   }
                 }
@@ -1122,7 +1122,7 @@ function Qt({ id: t, src: r, label: n, effect: e, children: c, renderLayer: i })
         ]
       }
     ),
-    c
+    l
   ] });
 }
 function mt(t) {
@@ -1134,37 +1134,37 @@ function te({
   bounds: r,
   label: n,
   effect: e,
-  children: c,
-  renderLayer: i
+  children: l,
+  renderLayer: s
 }) {
-  const s = Y(H), o = nt();
-  if (!s)
+  const i = N(F), o = nt();
+  if (!i)
     throw new Error(
       "<CutoutViewer.BBoxCutout> must be used inside <CutoutViewer>"
     );
-  const { x: l, y: u, w: p, h: m } = r;
-  W(() => (s.registerCutout({ type: "bbox", id: t, bounds: { x: l, y: u, w: p, h: m }, label: n }), () => s.unregisterCutout(t)), [t, l, u, p, m, n, s]);
-  const v = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, x = o.activeId === t, g = o.hoveredId === t, y = o.selectedId === t, d = { x: 0, y: 0, w: 1, h: 1 }, h = o.boundsMap[t] ?? d;
-  let f, w;
-  !o.enabled || !o.isAnyActive && !o.showAll ? (w = { ...v.cutoutIdle, filter: "none", opacity: 0 }, f = v.geometryIdle) : o.showAll || x ? (w = mt(v.cutoutActive), f = v.geometryActive) : (w = mt(v.cutoutInactive), f = v.geometryInactive);
-  const b = f ?? {
+  const { x: c, y: u, w: p, h: m } = r;
+  W(() => (i.registerCutout({ type: "bbox", id: t, bounds: { x: c, y: u, w: p, h: m }, label: n }), () => i.unregisterCutout(t)), [t, c, u, p, m, n, i]);
+  const v = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, x = o.activeId === t, f = o.hoveredId === t, y = o.selectedId === t, g = { x: 0, y: 0, w: 1, h: 1 }, h = o.boundsMap[t] ?? g;
+  let d, w;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (w = { ...v.cutoutIdle, filter: "none", opacity: 0 }, d = v.geometryIdle) : o.showAll || x ? (w = mt(v.cutoutActive), d = v.geometryActive) : (w = mt(v.cutoutInactive), d = v.geometryInactive);
+  const b = d ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, A = V(
+  }, R = B(
     () => ({
       id: t,
       label: n,
       bounds: h,
       isActive: x,
-      isHovered: g,
+      isHovered: f,
       isSelected: y,
       effect: v
     }),
-    [t, n, h, x, g, y, v]
+    [t, n, h, x, f, y, v]
   );
-  return /* @__PURE__ */ C.jsxs(Z.Provider, { value: A, children: [
-    /* @__PURE__ */ C.jsx(
+  return /* @__PURE__ */ E.jsxs(Z.Provider, { value: R, children: [
+    /* @__PURE__ */ E.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -1176,7 +1176,7 @@ function te({
           transition: v.transition,
           ...w
         },
-        children: i ? i({ isActive: x, isHovered: g, isSelected: y, bounds: h, effect: v }) : /* @__PURE__ */ C.jsx(
+        children: s ? s({ isActive: x, isHovered: f, isSelected: y, bounds: h, effect: v }) : /* @__PURE__ */ E.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -1189,7 +1189,7 @@ function te({
               overflow: "visible",
               filter: b.glow ? `drop-shadow(${b.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ C.jsx(
+            children: /* @__PURE__ */ E.jsx(
               "rect",
               {
                 x: h.x,
@@ -1213,7 +1213,7 @@ function te({
         )
       }
     ),
-    c
+    l
   ] });
 }
 function vt(t) {
@@ -1225,37 +1225,37 @@ function ee({
   points: r,
   label: n,
   effect: e,
-  children: c,
-  renderLayer: i
+  children: l,
+  renderLayer: s
 }) {
-  const s = Y(H), o = nt();
-  if (!s)
+  const i = N(F), o = nt();
+  if (!i)
     throw new Error(
       "<CutoutViewer.PolygonCutout> must be used inside <CutoutViewer>"
     );
-  const l = r.flat().join(",");
-  W(() => (s.registerCutout({ type: "polygon", id: t, points: r, label: n }), () => s.unregisterCutout(t)), [t, l, n, s]);
-  const u = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, p = o.activeId === t, m = o.hoveredId === t, v = o.selectedId === t, x = { x: 0, y: 0, w: 1, h: 1 }, g = o.boundsMap[t] ?? x;
-  let y, d;
-  !o.enabled || !o.isAnyActive && !o.showAll ? (d = { ...u.cutoutIdle, filter: "none", opacity: 0 }, y = u.geometryIdle) : o.showAll || p ? (d = vt(u.cutoutActive), y = u.geometryActive) : (d = vt(u.cutoutInactive), y = u.geometryInactive);
-  const f = y ?? {
+  const c = r.flat().join(",");
+  W(() => (i.registerCutout({ type: "polygon", id: t, points: r, label: n }), () => i.unregisterCutout(t)), [t, c, n, i]);
+  const u = e ? typeof e == "string" ? J[e] ?? o.effect : e : o.effect, p = o.activeId === t, m = o.hoveredId === t, v = o.selectedId === t, x = { x: 0, y: 0, w: 1, h: 1 }, f = o.boundsMap[t] ?? x;
+  let y, g;
+  !o.enabled || !o.isAnyActive && !o.showAll ? (g = { ...u.cutoutIdle, filter: "none", opacity: 0 }, y = u.geometryIdle) : o.showAll || p ? (g = vt(u.cutoutActive), y = u.geometryActive) : (g = vt(u.cutoutInactive), y = u.geometryInactive);
+  const d = y ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, w = V(
+  }, w = B(
     () => ({
       id: t,
       label: n,
-      bounds: g,
+      bounds: f,
       isActive: p,
       isHovered: m,
       isSelected: v,
       effect: u
     }),
-    [t, n, g, p, m, v, u]
+    [t, n, f, p, m, v, u]
   );
-  return /* @__PURE__ */ C.jsxs(Z.Provider, { value: w, children: [
-    /* @__PURE__ */ C.jsx(
+  return /* @__PURE__ */ E.jsxs(Z.Provider, { value: w, children: [
+    /* @__PURE__ */ E.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -1265,9 +1265,9 @@ function ee({
           inset: 0,
           zIndex: p ? 20 : 10,
           transition: u.transition,
-          ...d
+          ...g
         },
-        children: i ? i({ isActive: p, isHovered: m, isSelected: v, bounds: g, effect: u }) : /* @__PURE__ */ C.jsx(
+        children: s ? s({ isActive: p, isHovered: m, isSelected: v, bounds: f, effect: u }) : /* @__PURE__ */ E.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -1278,22 +1278,22 @@ function ee({
               width: "100%",
               height: "100%",
               overflow: "visible",
-              filter: f.glow ? `drop-shadow(${f.glow.split(",")[0]?.trim() ?? ""})` : "none"
+              filter: d.glow ? `drop-shadow(${d.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ C.jsx(
+            children: /* @__PURE__ */ E.jsx(
               "polygon",
               {
-                points: r.map(([k, b]) => `${k},${b}`).join(" "),
-                fill: f.fill,
-                stroke: f.stroke,
-                strokeWidth: (f.strokeWidth ?? 2) * 15e-4,
+                points: r.map(([C, b]) => `${C},${b}`).join(" "),
+                fill: d.fill,
+                stroke: d.stroke,
+                strokeWidth: (d.strokeWidth ?? 2) * 15e-4,
                 strokeLinejoin: "round",
-                strokeLinecap: f.strokeDasharray ? "round" : void 0,
-                strokeDasharray: f.strokeDasharray,
-                pathLength: f.strokeDasharray ? 1 : void 0,
+                strokeLinecap: d.strokeDasharray ? "round" : void 0,
+                strokeDasharray: d.strokeDasharray,
+                pathLength: d.strokeDasharray ? 1 : void 0,
                 style: {
                   transition: u.transition,
-                  animation: f.animation
+                  animation: d.animation
                 }
               }
             )
@@ -1301,7 +1301,7 @@ function ee({
         )
       }
     ),
-    c
+    l
   ] });
 }
 function wt(t) {
@@ -1313,38 +1313,38 @@ function re({
   center: r,
   radius: n,
   label: e,
-  effect: c,
-  children: i,
-  renderLayer: s
+  effect: l,
+  children: s,
+  renderLayer: i
 }) {
-  const o = Y(H), l = nt();
+  const o = N(F), c = nt();
   if (!o)
     throw new Error(
       "<CutoutViewer.CircleCutout> must be used inside <CutoutViewer>"
     );
   const { x: u, y: p } = r;
   W(() => (o.registerCutout({ type: "circle", id: t, center: { x: u, y: p }, radius: n, label: e }), () => o.unregisterCutout(t)), [t, u, p, n, e, o]);
-  const m = c ? typeof c == "string" ? J[c] ?? l.effect : c : l.effect, v = l.activeId === t, x = l.hoveredId === t, g = l.selectedId === t, y = { x: 0, y: 0, w: 1, h: 1 }, d = l.boundsMap[t] ?? y, h = Math.max(1, l.viewportSize.width), f = Math.max(1, l.viewportSize.height), w = Math.min(h, f), k = n * w / h, b = n * w / f;
-  let A, _;
-  !l.enabled || !l.isAnyActive && !l.showAll ? (_ = { ...m.cutoutIdle, filter: "none", opacity: 0 }, A = m.geometryIdle) : l.showAll || v ? (_ = wt(m.cutoutActive), A = m.geometryActive) : (_ = wt(m.cutoutInactive), A = m.geometryInactive);
-  const D = A ?? {
+  const m = l ? typeof l == "string" ? J[l] ?? c.effect : l : c.effect, v = c.activeId === t, x = c.hoveredId === t, f = c.selectedId === t, y = { x: 0, y: 0, w: 1, h: 1 }, g = c.boundsMap[t] ?? y, h = Math.max(1, c.viewportSize.width), d = Math.max(1, c.viewportSize.height), w = Math.min(h, d), C = n * w / h, b = n * w / d;
+  let R, P;
+  !c.enabled || !c.isAnyActive && !c.showAll ? (P = { ...m.cutoutIdle, filter: "none", opacity: 0 }, R = m.geometryIdle) : c.showAll || v ? (P = wt(m.cutoutActive), R = m.geometryActive) : (P = wt(m.cutoutInactive), R = m.geometryInactive);
+  const D = R ?? {
     fill: "rgba(37, 99, 235, 0.15)",
     stroke: "rgba(37, 99, 235, 0.6)",
     strokeWidth: 2
-  }, U = V(
+  }, H = B(
     () => ({
       id: t,
       label: e,
-      bounds: d,
+      bounds: g,
       isActive: v,
       isHovered: x,
-      isSelected: g,
+      isSelected: f,
       effect: m
     }),
-    [t, e, d, v, x, g, m]
+    [t, e, g, v, x, f, m]
   );
-  return /* @__PURE__ */ C.jsxs(Z.Provider, { value: U, children: [
-    /* @__PURE__ */ C.jsx(
+  return /* @__PURE__ */ E.jsxs(Z.Provider, { value: H, children: [
+    /* @__PURE__ */ E.jsx(
       "div",
       {
         "data-cutout-id": t,
@@ -1354,9 +1354,9 @@ function re({
           inset: 0,
           zIndex: v ? 20 : 10,
           transition: m.transition,
-          ..._
+          ...P
         },
-        children: s ? s({ isActive: v, isHovered: x, isSelected: g, bounds: d, effect: m }) : /* @__PURE__ */ C.jsx(
+        children: i ? i({ isActive: v, isHovered: x, isSelected: f, bounds: g, effect: m }) : /* @__PURE__ */ E.jsx(
           "svg",
           {
             viewBox: "0 0 1 1",
@@ -1369,12 +1369,12 @@ function re({
               overflow: "visible",
               filter: D.glow ? `drop-shadow(${D.glow.split(",")[0]?.trim() ?? ""})` : "none"
             },
-            children: /* @__PURE__ */ C.jsx(
+            children: /* @__PURE__ */ E.jsx(
               "ellipse",
               {
                 cx: r.x,
                 cy: r.y,
-                rx: k,
+                rx: C,
                 ry: b,
                 fill: D.fill,
                 stroke: D.stroke,
@@ -1392,18 +1392,18 @@ function re({
         )
       }
     ),
-    i
+    s
   ] });
 }
 function ne(t, r) {
-  const { x: n, y: e, w: c, h: i } = r;
-  let s, o;
-  t.includes("left") ? (s = `${n * 100}%`, o = "0") : t.includes("right") ? (s = `${(n + c) * 100}%`, o = "-100%") : (s = `${(n + c / 2) * 100}%`, o = "-50%");
-  let l, u;
-  return t.startsWith("top") ? (l = `${e * 100}%`, u = "-100%") : t.startsWith("bottom") ? (l = `${(e + i) * 100}%`, u = "0") : (l = `${(e + i / 2) * 100}%`, u = "-50%"), {
+  const { x: n, y: e, w: l, h: s } = r;
+  let i, o;
+  t.includes("left") ? (i = `${n * 100}%`, o = "0") : t.includes("right") ? (i = `${(n + l) * 100}%`, o = "-100%") : (i = `${(n + l / 2) * 100}%`, o = "-50%");
+  let c, u;
+  return t.startsWith("top") ? (c = `${e * 100}%`, u = "-100%") : t.startsWith("bottom") ? (c = `${(e + s) * 100}%`, u = "0") : (c = `${(e + s / 2) * 100}%`, u = "-50%"), {
     position: "absolute",
-    left: s,
-    top: l,
+    left: i,
+    top: c,
     transform: `translate(${o}, ${u})`
   };
 }
@@ -1411,25 +1411,26 @@ function oe({
   placement: t = "top-center",
   children: r,
   className: n = "",
-  style: e
+  style: e,
+  showOverlay: l = void 0
 }) {
-  const c = Y(Z), i = nt();
-  if (!c)
+  const s = N(Z), i = nt();
+  if (!s)
     throw new Error(
       "<CutoutViewer.Overlay> must be used inside <CutoutViewer.Cutout>"
     );
-  const s = i.enabled && (i.showAll || c.isActive), o = ne(t, c.bounds);
-  return /* @__PURE__ */ C.jsx(
+  const o = l ?? i.showOverlays, c = i.enabled && (i.showAll || o || s.isActive), u = ne(t, s.bounds);
+  return /* @__PURE__ */ E.jsx(
     "div",
     {
       "data-cutout-overlay": "true",
       className: n,
       style: {
         zIndex: 30,
-        transition: c.effect.transition,
-        opacity: s ? 1 : 0,
-        pointerEvents: s ? "auto" : "none",
-        ...o,
+        transition: s.effect.transition,
+        opacity: c ? 1 : 0,
+        pointerEvents: c ? "auto" : "none",
+        ...u,
         ...e
       },
       children: r
@@ -1441,68 +1442,68 @@ function se({
   minPoints: r = 3,
   closeThreshold: n = 0.03
 }) {
-  const [e, c] = O([]), [i, s] = O(null), o = N(null), l = M(
-    (f, w) => {
-      const k = o.current;
-      if (!k) return null;
-      const b = k.getBoundingClientRect(), A = (f - b.left) / b.width, _ = (w - b.top) / b.height;
-      return A < 0 || A > 1 || _ < 0 || _ > 1 ? null : [A, _];
+  const [e, l] = L([]), [s, i] = L(null), o = V(null), c = M(
+    (d, w) => {
+      const C = o.current;
+      if (!C) return null;
+      const b = C.getBoundingClientRect(), R = (d - b.left) / b.width, P = (w - b.top) / b.height;
+      return R < 0 || R > 1 || P < 0 || P > 1 ? null : [R, P];
     },
     []
   ), u = M(
-    (f, w) => {
+    (d, w) => {
       if (w.length < r) return !1;
-      const k = f[0] - w[0][0], b = f[1] - w[0][1];
-      return Math.sqrt(k * k + b * b) < n;
+      const C = d[0] - w[0][0], b = d[1] - w[0][1];
+      return Math.sqrt(C * C + b * b) < n;
     },
     [r, n]
   ), p = M(
-    (f) => {
-      f.length < r || (t(f), c([]), s(null));
+    (d) => {
+      d.length < r || (t(d), l([]), i(null));
     },
     [t, r]
   ), m = M(() => {
-    c([]), s(null);
+    l([]), i(null);
   }, []), v = M(
-    (f) => {
-      s(l(f.clientX, f.clientY));
+    (d) => {
+      i(c(d.clientX, d.clientY));
     },
-    [l]
+    [c]
   ), x = M(() => {
-    s(null);
-  }, []), g = M(
-    (f) => {
-      f.stopPropagation();
-      const w = l(f.clientX, f.clientY);
-      w && c((k) => u(w, k) ? (p(k), []) : [...k, w]);
+    i(null);
+  }, []), f = M(
+    (d) => {
+      d.stopPropagation();
+      const w = c(d.clientX, d.clientY);
+      w && l((C) => u(w, C) ? (p(C), []) : [...C, w]);
     },
-    [l, u, p]
+    [c, u, p]
   ), y = M(
-    (f) => {
-      f.stopPropagation(), c((w) => {
-        const k = w.slice(0, -1);
-        return k.length >= r ? (p(k), []) : k;
+    (d) => {
+      d.stopPropagation(), l((w) => {
+        const C = w.slice(0, -1);
+        return C.length >= r ? (p(C), []) : C;
       });
     },
     [r, p]
-  ), d = M(
-    (f) => {
-      f.preventDefault(), c((w) => w.slice(0, -1));
+  ), g = M(
+    (d) => {
+      d.preventDefault(), l((w) => w.slice(0, -1));
     },
     []
-  ), h = i !== null && u(i, e);
+  ), h = s !== null && u(s, e);
   return {
     points: e,
-    previewPoint: i,
+    previewPoint: s,
     willClose: h,
     reset: m,
     containerRef: o,
     containerProps: {
       onPointerMove: v,
       onPointerLeave: x,
-      onClick: g,
+      onClick: f,
       onDoubleClick: y,
-      onContextMenu: d
+      onContextMenu: g
     }
   };
 }
@@ -1511,16 +1512,16 @@ function ie({
   minPoints: r = 3,
   closeThreshold: n = 0.03,
   strokeColor: e = "#3b82f6",
-  enabled: c = !0,
-  style: i,
-  className: s = ""
+  enabled: l = !0,
+  style: s,
+  className: i = ""
 }) {
-  if (!Y(H))
+  if (!N(F))
     throw new Error(
       "<CutoutViewer.DrawPolygon> must be used inside <CutoutViewer>"
     );
   const {
-    points: l,
+    points: c,
     previewPoint: u,
     willClose: p,
     reset: m,
@@ -1528,30 +1529,30 @@ function ie({
     containerProps: x
   } = se({ onComplete: t, minPoints: r, closeThreshold: n });
   W(() => {
-    function d(h) {
+    function g(h) {
       h.key === "Escape" && m();
     }
-    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+    return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
   }, [m]), W(() => {
-    c || m();
-  }, [c, m]);
-  const g = u ? [...l, u] : l, y = g.map(([d, h]) => `${d},${h}`).join(" ");
-  return /* @__PURE__ */ C.jsx(
+    l || m();
+  }, [l, m]);
+  const f = u ? [...c, u] : c, y = f.map(([g, h]) => `${g},${h}`).join(" ");
+  return /* @__PURE__ */ E.jsx(
     "div",
     {
       ref: v,
       "data-draw-polygon": "true",
-      className: s,
+      className: i,
       style: {
         position: "absolute",
         inset: 0,
-        cursor: c ? p ? "cell" : "crosshair" : "default",
+        cursor: l ? p ? "cell" : "crosshair" : "default",
         zIndex: 30,
-        pointerEvents: c ? "auto" : "none",
-        ...i
+        pointerEvents: l ? "auto" : "none",
+        ...s
       },
-      ...c ? x : {},
-      children: l.length > 0 && /* @__PURE__ */ C.jsxs(
+      ...l ? x : {},
+      children: c.length > 0 && /* @__PURE__ */ E.jsxs(
         "svg",
         {
           viewBox: "0 0 1 1",
@@ -1565,16 +1566,16 @@ function ie({
             pointerEvents: "none"
           },
           children: [
-            l.length >= 3 && /* @__PURE__ */ C.jsx(
+            c.length >= 3 && /* @__PURE__ */ E.jsx(
               "polygon",
               {
-                points: l.map(([d, h]) => `${d},${h}`).join(" "),
+                points: c.map(([g, h]) => `${g},${h}`).join(" "),
                 fill: e,
                 fillOpacity: 0.15,
                 stroke: "none"
               }
             ),
-            g.length >= 2 && /* @__PURE__ */ C.jsx(
+            f.length >= 2 && /* @__PURE__ */ E.jsx(
               "polyline",
               {
                 points: y,
@@ -1586,13 +1587,13 @@ function ie({
                 strokeDasharray: u ? "0.015 0.008" : void 0
               }
             ),
-            u && l.length >= 1 && /* @__PURE__ */ C.jsx(
+            u && c.length >= 1 && /* @__PURE__ */ E.jsx(
               "line",
               {
                 x1: u[0],
                 y1: u[1],
-                x2: l[0][0],
-                y2: l[0][1],
+                x2: c[0][0],
+                y2: c[0][1],
                 stroke: e,
                 strokeWidth: 2e-3,
                 strokeDasharray: "0.015 0.008",
@@ -1600,19 +1601,19 @@ function ie({
                 opacity: p ? 0.9 : 0.35
               }
             ),
-            l.map(([d, h], f) => /* @__PURE__ */ C.jsx(
+            c.map(([g, h], d) => /* @__PURE__ */ E.jsx(
               "circle",
               {
-                cx: d,
+                cx: g,
                 cy: h,
-                r: f === 0 ? 0.012 : 7e-3,
-                fill: f === 0 && p ? e : "white",
+                r: d === 0 ? 0.012 : 7e-3,
+                fill: d === 0 && p ? e : "white",
                 stroke: e,
                 strokeWidth: 2e-3
               },
-              f
+              d
             )),
-            u && /* @__PURE__ */ C.jsx(
+            u && /* @__PURE__ */ E.jsx(
               "circle",
               {
                 cx: u[0],
@@ -1634,64 +1635,64 @@ function ae({
   onComplete: t,
   minSize: r = 0.01
 }) {
-  const [n, e] = O(null), [c, i] = O(null), s = N(null), o = M(
-    (g, y) => {
-      const d = s.current;
-      if (!d) return null;
-      const h = d.getBoundingClientRect(), f = (g - h.left) / h.width, w = (y - h.top) / h.height;
+  const [n, e] = L(null), [l, s] = L(null), i = V(null), o = M(
+    (f, y) => {
+      const g = i.current;
+      if (!g) return null;
+      const h = g.getBoundingClientRect(), d = (f - h.left) / h.width, w = (y - h.top) / h.height;
       return {
-        x: Math.max(0, Math.min(1, f)),
+        x: Math.max(0, Math.min(1, d)),
         y: Math.max(0, Math.min(1, w))
       };
     },
     []
-  ), l = M(
-    (g, y) => {
-      const d = Math.min(g.x, y.x), h = Math.min(g.y, y.y), f = Math.abs(y.x - g.x), w = Math.abs(y.y - g.y);
-      return { x: d, y: h, w: f, h: w };
+  ), c = M(
+    (f, y) => {
+      const g = Math.min(f.x, y.x), h = Math.min(f.y, y.y), d = Math.abs(y.x - f.x), w = Math.abs(y.y - f.y);
+      return { x: g, y: h, w: d, h: w };
     },
     []
   ), u = M(() => {
-    e(null), i(null);
+    e(null), s(null);
   }, []);
   W(() => {
-    function g(y) {
+    function f(y) {
       y.key === "Escape" && u();
     }
-    return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
+    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
   }, [u]);
   const p = M(
-    (g) => {
-      g.currentTarget.setPointerCapture(g.pointerId);
-      const y = o(g.clientX, g.clientY);
-      y && (e(y), i({ x: y.x, y: y.y, w: 0, h: 0 }));
+    (f) => {
+      f.currentTarget.setPointerCapture(f.pointerId);
+      const y = o(f.clientX, f.clientY);
+      y && (e(y), s({ x: y.x, y: y.y, w: 0, h: 0 }));
     },
     [o]
   ), m = M(
-    (g) => {
+    (f) => {
       if (!n) return;
-      const y = o(g.clientX, g.clientY);
-      y && i(l(n, y));
+      const y = o(f.clientX, f.clientY);
+      y && s(c(n, y));
     },
-    [n, o, l]
+    [n, o, c]
   ), v = M(
-    (g) => {
+    (f) => {
       if (!n) return;
-      const y = o(g.clientX, g.clientY);
+      const y = o(f.clientX, f.clientY);
       if (y) {
-        const d = l(n, y);
-        d.w >= r && d.h >= r && t(d);
+        const g = c(n, y);
+        g.w >= r && g.h >= r && t(g);
       }
-      e(null), i(null);
+      e(null), s(null);
     },
-    [n, o, l, r, t]
+    [n, o, c, r, t]
   ), x = M(() => {
   }, []);
   return {
-    rect: c,
+    rect: l,
     isDragging: n !== null,
     reset: u,
-    containerRef: s,
+    containerRef: i,
     containerProps: {
       onPointerDown: p,
       onPointerMove: m,
@@ -1705,35 +1706,35 @@ function ce({
   minSize: r,
   strokeColor: n = "#3b82f6",
   enabled: e = !0,
-  style: c,
-  className: i = ""
+  style: l,
+  className: s = ""
 }) {
-  if (!Y(H))
+  if (!N(F))
     throw new Error(
       "<CutoutViewer.DrawRectangle> must be used inside <CutoutViewer>"
     );
-  const { rect: o, reset: l, containerRef: u, containerProps: p } = ae({
+  const { rect: o, reset: c, containerRef: u, containerProps: p } = ae({
     onComplete: t,
     minSize: r
   });
   return W(() => {
-    e || l();
-  }, [e, l]), /* @__PURE__ */ C.jsx(
+    e || c();
+  }, [e, c]), /* @__PURE__ */ E.jsx(
     "div",
     {
       ref: u,
       "data-draw-rectangle": "true",
-      className: i,
+      className: s,
       style: {
         position: "absolute",
         inset: 0,
         cursor: e ? "crosshair" : "default",
         zIndex: 30,
         pointerEvents: e ? "auto" : "none",
-        ...c
+        ...l
       },
       ...e ? p : {},
-      children: o && o.w > 0 && o.h > 0 && /* @__PURE__ */ C.jsx(
+      children: o && o.w > 0 && o.h > 0 && /* @__PURE__ */ E.jsx(
         "svg",
         {
           viewBox: "0 0 1 1",
@@ -1746,7 +1747,7 @@ function ce({
             overflow: "visible",
             pointerEvents: "none"
           },
-          children: /* @__PURE__ */ C.jsx(
+          children: /* @__PURE__ */ E.jsx(
             "rect",
             {
               x: o.x,
@@ -1771,86 +1772,86 @@ function le({
   onComplete: t,
   minRadius: r = 0.01
 }) {
-  const [n, e] = O(null), [c, i] = O(null), [s, o] = O({ width: 1, height: 1 }), l = N(null);
+  const [n, e] = L(null), [l, s] = L(null), [i, o] = L({ width: 1, height: 1 }), c = V(null);
   W(() => {
-    const d = l.current;
-    if (!d) return;
+    const g = c.current;
+    if (!g) return;
     const h = () => {
-      const w = d.getBoundingClientRect();
+      const w = g.getBoundingClientRect();
       o({
         width: Math.max(1, w.width),
         height: Math.max(1, w.height)
       });
     };
     h();
-    const f = new ResizeObserver(h);
-    return f.observe(d), () => f.disconnect();
+    const d = new ResizeObserver(h);
+    return d.observe(g), () => d.disconnect();
   }, []);
   const u = M(
-    (d, h) => {
-      const f = l.current;
-      if (!f) return null;
-      const w = f.getBoundingClientRect(), k = (d - w.left) / w.width, b = (h - w.top) / w.height;
+    (g, h) => {
+      const d = c.current;
+      if (!d) return null;
+      const w = d.getBoundingClientRect(), C = (g - w.left) / w.width, b = (h - w.top) / w.height;
       return {
-        x: Math.max(0, Math.min(1, k)),
+        x: Math.max(0, Math.min(1, C)),
         y: Math.max(0, Math.min(1, b))
       };
     },
     []
   ), p = M(
-    (d, h) => {
-      const f = (d.x - h.x) * s.width, w = (d.y - h.y) * s.height, k = Math.sqrt(f * f + w * w), b = Math.min(s.width, s.height);
-      return k / b;
+    (g, h) => {
+      const d = (g.x - h.x) * i.width, w = (g.y - h.y) * i.height, C = Math.sqrt(d * d + w * w), b = Math.min(i.width, i.height);
+      return C / b;
     },
-    [s.height, s.width]
+    [i.height, i.width]
   ), m = M(() => {
-    e(null), i(null);
+    e(null), s(null);
   }, []);
   W(() => {
-    function d(h) {
+    function g(h) {
       h.key === "Escape" && m();
     }
-    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+    return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
   }, [m]);
   const v = M(
-    (d) => {
-      d.currentTarget.setPointerCapture(d.pointerId);
-      const h = u(d.clientX, d.clientY);
-      h && (e(h), i({ center: h, radius: 0 }));
+    (g) => {
+      g.currentTarget.setPointerCapture(g.pointerId);
+      const h = u(g.clientX, g.clientY);
+      h && (e(h), s({ center: h, radius: 0 }));
     },
     [u]
   ), x = M(
-    (d) => {
+    (g) => {
       if (!n) return;
-      const h = u(d.clientX, d.clientY);
+      const h = u(g.clientX, g.clientY);
       if (!h) return;
-      const f = p(h, n);
-      i({ center: n, radius: f });
+      const d = p(h, n);
+      s({ center: n, radius: d });
     },
     [n, u, p]
-  ), g = M(
-    (d) => {
+  ), f = M(
+    (g) => {
       if (!n) return;
-      const h = u(d.clientX, d.clientY);
+      const h = u(g.clientX, g.clientY);
       if (h) {
-        const f = p(h, n);
-        f >= r && t({ center: n, radius: f });
+        const d = p(h, n);
+        d >= r && t({ center: n, radius: d });
       }
-      e(null), i(null);
+      e(null), s(null);
     },
     [n, u, p, r, t]
   ), y = M(() => {
   }, []);
   return {
-    circle: c,
-    viewportSize: s,
+    circle: l,
+    viewportSize: i,
     isDragging: n !== null,
     reset: m,
-    containerRef: l,
+    containerRef: c,
     containerProps: {
       onPointerDown: v,
       onPointerMove: x,
-      onPointerUp: g,
+      onPointerUp: f,
       onPointerLeave: y
     }
   };
@@ -1860,35 +1861,35 @@ function ue({
   minRadius: r,
   strokeColor: n = "#3b82f6",
   enabled: e = !0,
-  style: c,
-  className: i = ""
+  style: l,
+  className: s = ""
 }) {
-  if (!Y(H))
+  if (!N(F))
     throw new Error(
       "<CutoutViewer.DrawCircle> must be used inside <CutoutViewer>"
     );
-  const { circle: o, viewportSize: l, reset: u, containerRef: p, containerProps: m } = le({
+  const { circle: o, viewportSize: c, reset: u, containerRef: p, containerProps: m } = le({
     onComplete: t,
     minRadius: r
-  }), v = Math.max(1, l.width), x = Math.max(1, l.height), g = Math.min(v, x);
+  }), v = Math.max(1, c.width), x = Math.max(1, c.height), f = Math.min(v, x);
   return W(() => {
     e || u();
-  }, [e, u]), /* @__PURE__ */ C.jsx(
+  }, [e, u]), /* @__PURE__ */ E.jsx(
     "div",
     {
       ref: p,
       "data-draw-circle": "true",
-      className: i,
+      className: s,
       style: {
         position: "absolute",
         inset: 0,
         cursor: e ? "crosshair" : "default",
         zIndex: 30,
         pointerEvents: e ? "auto" : "none",
-        ...c
+        ...l
       },
       ...e ? m : {},
-      children: o && o.radius > 0 && /* @__PURE__ */ C.jsx(
+      children: o && o.radius > 0 && /* @__PURE__ */ E.jsx(
         "svg",
         {
           viewBox: "0 0 1 1",
@@ -1901,13 +1902,13 @@ function ue({
             overflow: "visible",
             pointerEvents: "none"
           },
-          children: /* @__PURE__ */ C.jsx(
+          children: /* @__PURE__ */ E.jsx(
             "ellipse",
             {
               cx: o.center.x,
               cy: o.center.y,
-              rx: o.radius * g / v,
-              ry: o.radius * g / x,
+              rx: o.radius * f / v,
+              ry: o.radius * f / x,
               fill: n,
               fillOpacity: 0.15,
               stroke: n,
@@ -1938,78 +1939,80 @@ function he({
   mainImageAlt: r = "Main image",
   effect: n = "elevate",
   enabled: e = !0,
-  showAll: c = !1,
+  showAll: l = !1,
+  showOverlays: s = !1,
   alphaThreshold: i = 30,
-  hoverLeaveDelay: s = 150,
-  children: o,
-  className: l = "",
-  style: u,
-  onHover: p,
-  onActiveChange: m,
-  onSelect: v
+  hoverLeaveDelay: o = 150,
+  children: c,
+  className: u = "",
+  style: p,
+  onHover: m,
+  onActiveChange: v,
+  onSelect: x
 }) {
-  const x = typeof n == "string" ? J[n] ?? J.elevate : n;
+  const f = typeof n == "string" ? J[n] ?? J.elevate : n;
   W(() => {
-    Xt(x);
-  }, [x]);
-  const [g, y] = O(() => /* @__PURE__ */ new Map()), d = M(
-    (I) => {
-      y((z) => {
-        const L = z.get(I.id);
-        if (L && xt(L) === xt(I))
+    Xt(f);
+  }, [f]);
+  const [y, g] = L(() => /* @__PURE__ */ new Map()), h = M(
+    (O) => {
+      g((z) => {
+        const Y = z.get(O.id);
+        if (Y && xt(Y) === xt(O))
           return z;
-        const G = new Map(z);
-        return G.set(I.id, I), G;
+        const a = new Map(z);
+        return a.set(O.id, O), a;
       });
     },
     []
-  ), h = M((I) => {
-    y((z) => {
-      if (!z.has(I)) return z;
-      const L = new Map(z);
-      return L.delete(I), L;
+  ), d = M((O) => {
+    g((z) => {
+      if (!z.has(O)) return z;
+      const Y = new Map(z);
+      return Y.delete(O), Y;
     });
-  }, []), f = V(
-    () => ({ registerCutout: d, unregisterCutout: h }),
-    [d, h]
-  ), w = V(() => Array.from(g.values()), [g]), { activeId: k, selectedId: b, hoveredId: A, viewportSize: _, boundsMap: X, contourMap: D, containerRef: U, containerProps: Q } = Ft(w, e, i, s), B = N(null), q = N(null), S = N(null);
+  }, []), w = B(
+    () => ({ registerCutout: h, unregisterCutout: d }),
+    [h, d]
+  ), C = B(() => Array.from(y.values()), [y]), { activeId: b, selectedId: R, hoveredId: P, viewportSize: U, boundsMap: D, contourMap: H, containerRef: Q, containerProps: q } = Ft(C, e, i, o), G = V(null), j = V(null), A = V(null);
   W(() => {
-    A !== B.current && (B.current = A, p?.(A));
-  }, [A, p]), W(() => {
-    k !== q.current && (q.current = k, m?.(k));
-  }, [k, m]), W(() => {
-    b !== S.current && (S.current = b, v?.(b));
-  }, [b, v]);
-  const R = c || k !== null, P = V(
+    P !== G.current && (G.current = P, m?.(P));
+  }, [P, m]), W(() => {
+    b !== j.current && (j.current = b, v?.(b));
+  }, [b, v]), W(() => {
+    R !== A.current && (A.current = R, x?.(R));
+  }, [R, x]);
+  const I = l || b !== null, S = B(
     () => ({
-      activeId: k,
-      selectedId: b,
-      hoveredId: A,
-      viewportSize: _,
-      effect: x,
+      activeId: b,
+      selectedId: R,
+      hoveredId: P,
+      viewportSize: U,
+      effect: f,
       enabled: e,
-      showAll: c,
-      boundsMap: X,
-      contourMap: D,
-      isAnyActive: R
+      showAll: l,
+      showOverlays: s,
+      boundsMap: D,
+      contourMap: H,
+      isAnyActive: I
     }),
-    [k, b, A, _, x, e, c, X, D, R]
+    [b, R, P, U, f, e, l, s, D, H, I]
   );
-  return /* @__PURE__ */ C.jsx(H.Provider, { value: f, children: /* @__PURE__ */ C.jsx(kt.Provider, { value: P, children: /* @__PURE__ */ C.jsxs(
+  return /* @__PURE__ */ E.jsx(F.Provider, { value: w, children: /* @__PURE__ */ E.jsx(kt.Provider, { value: S, children: /* @__PURE__ */ E.jsxs(
     "div",
     {
-      ref: U,
-      className: l,
+      ref: Q,
+      className: u,
       style: {
         position: "relative",
         width: "100%",
         overflow: "hidden",
-        cursor: R && e ? "pointer" : "default",
-        ...u
+        cursor: I && e ? "pointer" : "default",
+        ...p
       },
-      ...Q,
+      ...q,
       children: [
-        /* @__PURE__ */ C.jsx(
+        /* @__PURE__ */ E.jsx(
           "img",
           {
             src: t,
@@ -2020,46 +2023,46 @@ function he({
               width: "100%",
               height: "auto",
               userSelect: "none",
-              transition: x.transition,
-              ...R && e ? x.mainImageHovered : {}
+              transition: f.transition,
+              ...I && e ? f.mainImageHovered : {}
             }
           }
         ),
-        /* @__PURE__ */ C.jsx(
+        /* @__PURE__ */ E.jsx(
           "div",
           {
             style: {
               pointerEvents: "none",
               position: "absolute",
               inset: 0,
-              transition: x.transition,
-              opacity: R && e ? 1 : 0,
-              ...x.vignetteStyle
+              transition: f.transition,
+              opacity: I && e ? 1 : 0,
+              ...f.vignetteStyle
             }
           }
         ),
-        o
+        c
       ]
     }
   ) }) });
 }
-const F = he;
-F.Cutout = Qt;
-F.BBoxCutout = te;
-F.PolygonCutout = ee;
-F.CircleCutout = re;
-F.Overlay = oe;
-F.DrawPolygon = ie;
-F.DrawRectangle = ce;
-F.DrawCircle = ue;
+const X = he;
+X.Cutout = Qt;
+X.BBoxCutout = te;
+X.PolygonCutout = ee;
+X.CircleCutout = re;
+X.Overlay = oe;
+X.DrawPolygon = ie;
+X.DrawRectangle = ce;
+X.DrawCircle = ue;
 export {
   Vt as CircleHitTestStrategy,
   oe as CutoutOverlay,
-  F as CutoutViewer,
+  X as CutoutViewer,
   ue as DrawCircle,
   ie as DrawPolygon,
   ce as DrawRectangle,
-  Ot as ImageHitTestStrategy,
+  zt as ImageHitTestStrategy,
   Nt as PolygonHitTestStrategy,
   Lt as RectHitTestStrategy,
   Bt as createHitTestStrategy,