@bitux/review-layer-react 0.1.2 → 0.1.3

package/dist/review-layer-react.js

@@ -1,6 +1,6 @@
-import Qe, { useState as A, useEffect as $, useCallback as L, useRef as ge, useMemo as Ot, createContext as It, useContext as Lt } from "react";
-import { createPortal as Ke } from "react-dom";
-var Pe = { exports: {} }, ue = {};
+import le, { memo as Rr, useState as A, useEffect as F, useCallback as j, useRef as mr, useMemo as $r, createContext as $e, useContext as Me } from "react";
+import { createPortal as se } from "react-dom";
+var Ar = { exports: {} }, lr = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -10,21 +10,21 @@ var Pe = { exports: {} }, ue = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Xe;
-function At() {
-  if (Xe) return ue;
-  Xe = 1;
-  var t = Qe, o = Symbol.for("react.element"), n = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, a = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, d = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function g(p, m, R) {
-    var h, C = {}, w = null, O = null;
-    R !== void 0 && (w = "" + R), m.key !== void 0 && (w = "" + m.key), m.ref !== void 0 && (O = m.ref);
-    for (h in m) i.call(m, h) && !d.hasOwnProperty(h) && (C[h] = m[h]);
-    if (p && p.defaultProps) for (h in m = p.defaultProps, m) C[h] === void 0 && (C[h] = m[h]);
-    return { $$typeof: o, type: p, key: w, ref: O, props: C, _owner: a.current };
+var oe;
+function We() {
+  if (oe) return lr;
+  oe = 1;
+  var e = le, t = Symbol.for("react.element"), o = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, a = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function v(g, d, w) {
+    var x, y = {}, P = null, S = null;
+    w !== void 0 && (P = "" + w), d.key !== void 0 && (P = "" + d.key), d.ref !== void 0 && (S = d.ref);
+    for (x in d) i.call(d, x) && !s.hasOwnProperty(x) && (y[x] = d[x]);
+    if (g && g.defaultProps) for (x in d = g.defaultProps, d) y[x] === void 0 && (y[x] = d[x]);
+    return { $$typeof: t, type: g, key: P, ref: S, props: y, _owner: a.current };
   }
-  return ue.Fragment = n, ue.jsx = g, ue.jsxs = g, ue;
+  return lr.Fragment = o, lr.jsx = v, lr.jsxs = v, lr;
 }
-var ce = {};
+var sr = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -34,91 +34,91 @@ var ce = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Ge;
-function Ft() {
-  return Ge || (Ge = 1, process.env.NODE_ENV !== "production" && function() {
-    var t = Qe, o = Symbol.for("react.element"), n = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), d = Symbol.for("react.profiler"), g = Symbol.for("react.provider"), p = Symbol.for("react.context"), m = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), C = Symbol.for("react.memo"), w = Symbol.for("react.lazy"), O = Symbol.for("react.offscreen"), _ = Symbol.iterator, I = "@@iterator";
-    function z(e) {
-      if (e === null || typeof e != "object")
+var te;
+function Be() {
+  return te || (te = 1, process.env.NODE_ENV !== "production" && function() {
+    var e = le, t = Symbol.for("react.element"), o = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), v = Symbol.for("react.provider"), g = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), x = Symbol.for("react.suspense_list"), y = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), S = Symbol.for("react.offscreen"), V = Symbol.iterator, $ = "@@iterator";
+    function L(r) {
+      if (r === null || typeof r != "object")
         return null;
-      var r = _ && e[_] || e[I];
-      return typeof r == "function" ? r : null;
+      var n = V && r[V] || r[$];
+      return typeof n == "function" ? n : null;
     }
-    var u = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function f(e) {
+    var c = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function p(r) {
       {
-        for (var r = arguments.length, s = new Array(r > 1 ? r - 1 : 0), c = 1; c < r; c++)
-          s[c - 1] = arguments[c];
-        k("error", e, s);
+        for (var n = arguments.length, u = new Array(n > 1 ? n - 1 : 0), f = 1; f < n; f++)
+          u[f - 1] = arguments[f];
+        I("error", r, u);
       }
     }
-    function k(e, r, s) {
+    function I(r, n, u) {
       {
-        var c = u.ReactDebugCurrentFrame, E = c.getStackAddendum();
-        E !== "" && (r += "%s", s = s.concat([E]));
-        var b = s.map(function(y) {
-          return String(y);
+        var f = c.ReactDebugCurrentFrame, E = f.getStackAddendum();
+        E !== "" && (n += "%s", u = u.concat([E]));
+        var R = u.map(function(h) {
+          return String(h);
         });
-        b.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, b);
+        R.unshift("Warning: " + n), Function.prototype.apply.call(console[r], console, R);
       }
     }
-    var U = !1, X = !1, K = !1, S = !1, j = !1, M;
-    M = Symbol.for("react.module.reference");
-    function W(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === i || e === d || j || e === a || e === R || e === h || S || e === O || U || X || K || typeof e == "object" && e !== null && (e.$$typeof === w || e.$$typeof === C || e.$$typeof === g || e.$$typeof === p || e.$$typeof === m || // This needs to include all possible module reference object
+    var N = !1, H = !1, er = !1, or = !1, tr = !1, X;
+    X = Symbol.for("react.module.reference");
+    function m(r) {
+      return !!(typeof r == "string" || typeof r == "function" || r === i || r === s || tr || r === a || r === w || r === x || or || r === S || N || H || er || typeof r == "object" && r !== null && (r.$$typeof === P || r.$$typeof === y || r.$$typeof === v || r.$$typeof === g || r.$$typeof === d || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
-      e.$$typeof === M || e.getModuleId !== void 0));
+      r.$$typeof === X || r.getModuleId !== void 0));
     }
-    function re(e, r, s) {
-      var c = e.displayName;
-      if (c)
-        return c;
-      var E = r.displayName || r.name || "";
-      return E !== "" ? s + "(" + E + ")" : s;
+    function C(r, n, u) {
+      var f = r.displayName;
+      if (f)
+        return f;
+      var E = n.displayName || n.name || "";
+      return E !== "" ? u + "(" + E + ")" : u;
     }
-    function G(e) {
-      return e.displayName || "Context";
+    function z(r) {
+      return r.displayName || "Context";
     }
-    function V(e) {
-      if (e == null)
+    function T(r) {
+      if (r == null)
         return null;
-      if (typeof e.tag == "number" && f("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
-        return e.displayName || e.name || null;
-      if (typeof e == "string")
-        return e;
-      switch (e) {
+      if (typeof r.tag == "number" && p("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof r == "function")
+        return r.displayName || r.name || null;
+      if (typeof r == "string")
+        return r;
+      switch (r) {
         case i:
           return "Fragment";
-        case n:
+        case o:
           return "Portal";
-        case d:
+        case s:
           return "Profiler";
         case a:
           return "StrictMode";
-        case R:
+        case w:
           return "Suspense";
-        case h:
+        case x:
           return "SuspenseList";
       }
-      if (typeof e == "object")
-        switch (e.$$typeof) {
-          case p:
-            var r = e;
-            return G(r) + ".Consumer";
+      if (typeof r == "object")
+        switch (r.$$typeof) {
           case g:
-            var s = e;
-            return G(s._context) + ".Provider";
-          case m:
-            return re(e, e.render, "ForwardRef");
-          case C:
-            var c = e.displayName || null;
-            return c !== null ? c : V(e.type) || "Memo";
-          case w: {
-            var E = e, b = E._payload, y = E._init;
+            var n = r;
+            return z(n) + ".Consumer";
+          case v:
+            var u = r;
+            return z(u._context) + ".Provider";
+          case d:
+            return C(r, r.render, "ForwardRef");
+          case y:
+            var f = r.displayName || null;
+            return f !== null ? f : T(r.type) || "Memo";
+          case P: {
+            var E = r, R = E._payload, h = E._init;
             try {
-              return V(y(b));
+              return T(h(R));
             } catch {
               return null;
             }
@@ -126,743 +126,764 @@ function Ft() {
         }
       return null;
     }
-    var H = Object.assign, J = 0, ne, oe, x, q, ie, ae, se;
-    function De() {
+    var G = Object.assign, Y = 0, J, dr, fr, nr, ir, _, q;
+    function ar() {
     }
-    De.__reactDisabledLog = !0;
-    function it() {
+    ar.__reactDisabledLog = !0;
+    function vr() {
       {
-        if (J === 0) {
-          ne = console.log, oe = console.info, x = console.warn, q = console.error, ie = console.group, ae = console.groupCollapsed, se = console.groupEnd;
-          var e = {
+        if (Y === 0) {
+          J = console.log, dr = console.info, fr = console.warn, nr = console.error, ir = console.group, _ = console.groupCollapsed, q = console.groupEnd;
+          var r = {
             configurable: !0,
             enumerable: !0,
-            value: De,
+            value: ar,
             writable: !0
           };
           Object.defineProperties(console, {
-            info: e,
-            log: e,
-            warn: e,
-            error: e,
-            group: e,
-            groupCollapsed: e,
-            groupEnd: e
+            info: r,
+            log: r,
+            warn: r,
+            error: r,
+            group: r,
+            groupCollapsed: r,
+            groupEnd: r
           });
         }
-        J++;
+        Y++;
       }
     }
-    function at() {
+    function pr() {
       {
-        if (J--, J === 0) {
-          var e = {
+        if (Y--, Y === 0) {
+          var r = {
             configurable: !0,
             enumerable: !0,
             writable: !0
           };
           Object.defineProperties(console, {
-            log: H({}, e, {
-              value: ne
+            log: G({}, r, {
+              value: J
             }),
-            info: H({}, e, {
-              value: oe
+            info: G({}, r, {
+              value: dr
             }),
-            warn: H({}, e, {
-              value: x
+            warn: G({}, r, {
+              value: fr
             }),
-            error: H({}, e, {
-              value: q
+            error: G({}, r, {
+              value: nr
             }),
-            group: H({}, e, {
-              value: ie
+            group: G({}, r, {
+              value: ir
             }),
-            groupCollapsed: H({}, e, {
-              value: ae
+            groupCollapsed: G({}, r, {
+              value: _
             }),
-            groupEnd: H({}, e, {
-              value: se
+            groupEnd: G({}, r, {
+              value: q
             })
           });
         }
-        J < 0 && f("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        Y < 0 && p("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var xe = u.ReactCurrentDispatcher, Ee;
-    function fe(e, r, s) {
+    var Cr = c.ReactCurrentDispatcher, kr;
+    function gr(r, n, u) {
       {
-        if (Ee === void 0)
+        if (kr === void 0)
           try {
             throw Error();
           } catch (E) {
-            var c = E.stack.trim().match(/\n( *(at )?)/);
-            Ee = c && c[1] || "";
+            var f = E.stack.trim().match(/\n( *(at )?)/);
+            kr = f && f[1] || "";
           }
         return `
-` + Ee + e;
+` + kr + r;
       }
     }
-    var we = !1, pe;
+    var Pr = !1, br;
     {
-      var st = typeof WeakMap == "function" ? WeakMap : Map;
-      pe = new st();
+      var ge = typeof WeakMap == "function" ? WeakMap : Map;
+      br = new ge();
     }
-    function Oe(e, r) {
-      if (!e || we)
+    function Mr(r, n) {
+      if (!r || Pr)
         return "";
       {
-        var s = pe.get(e);
-        if (s !== void 0)
-          return s;
+        var u = br.get(r);
+        if (u !== void 0)
+          return u;
       }
-      var c;
-      we = !0;
+      var f;
+      Pr = !0;
       var E = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var b;
-      b = xe.current, xe.current = null, it();
+      var R;
+      R = Cr.current, Cr.current = null, vr();
       try {
-        if (r) {
-          var y = function() {
+        if (n) {
+          var h = function() {
             throw Error();
           };
-          if (Object.defineProperty(y.prototype, "props", {
+          if (Object.defineProperty(h.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(y, []);
-            } catch (N) {
-              c = N;
+              Reflect.construct(h, []);
+            } catch (W) {
+              f = W;
             }
-            Reflect.construct(e, [], y);
+            Reflect.construct(r, [], h);
           } else {
             try {
-              y.call();
-            } catch (N) {
-              c = N;
+              h.call();
+            } catch (W) {
+              f = W;
             }
-            e.call(y.prototype);
+            r.call(h.prototype);
           }
         } else {
           try {
             throw Error();
-          } catch (N) {
-            c = N;
+          } catch (W) {
+            f = W;
           }
-          e();
+          r();
         }
-      } catch (N) {
-        if (N && c && typeof N.stack == "string") {
-          for (var v = N.stack.split(`
-`), F = c.stack.split(`
-`), T = v.length - 1, P = F.length - 1; T >= 1 && P >= 0 && v[T] !== F[P]; )
-            P--;
-          for (; T >= 1 && P >= 0; T--, P--)
-            if (v[T] !== F[P]) {
-              if (T !== 1 || P !== 1)
+      } catch (W) {
+        if (W && f && typeof W.stack == "string") {
+          for (var b = W.stack.split(`
+`), M = f.stack.split(`
+`), D = b.length - 1, O = M.length - 1; D >= 1 && O >= 0 && b[D] !== M[O]; )
+            O--;
+          for (; D >= 1 && O >= 0; D--, O--)
+            if (b[D] !== M[O]) {
+              if (D !== 1 || O !== 1)
                 do
-                  if (T--, P--, P < 0 || v[T] !== F[P]) {
-                    var Y = `
-` + v[T].replace(" at new ", " at ");
-                    return e.displayName && Y.includes("<anonymous>") && (Y = Y.replace("<anonymous>", e.displayName)), typeof e == "function" && pe.set(e, Y), Y;
+                  if (D--, O--, O < 0 || b[D] !== M[O]) {
+                    var U = `
+` + b[D].replace(" at new ", " at ");
+                    return r.displayName && U.includes("<anonymous>") && (U = U.replace("<anonymous>", r.displayName)), typeof r == "function" && br.set(r, U), U;
                   }
-                while (T >= 1 && P >= 0);
+                while (D >= 1 && O >= 0);
               break;
             }
         }
       } finally {
-        we = !1, xe.current = b, at(), Error.prepareStackTrace = E;
+        Pr = !1, Cr.current = R, pr(), Error.prepareStackTrace = E;
       }
-      var te = e ? e.displayName || e.name : "", Z = te ? fe(te) : "";
-      return typeof e == "function" && pe.set(e, Z), Z;
+      var K = r ? r.displayName || r.name : "", Z = K ? gr(K) : "";
+      return typeof r == "function" && br.set(r, Z), Z;
     }
-    function lt(e, r, s) {
-      return Oe(e, !1);
+    function be(r, n, u) {
+      return Mr(r, !1);
     }
-    function ut(e) {
-      var r = e.prototype;
-      return !!(r && r.isReactComponent);
+    function he(r) {
+      var n = r.prototype;
+      return !!(n && n.isReactComponent);
     }
-    function he(e, r, s) {
-      if (e == null)
+    function hr(r, n, u) {
+      if (r == null)
         return "";
-      if (typeof e == "function")
-        return Oe(e, ut(e));
-      if (typeof e == "string")
-        return fe(e);
-      switch (e) {
-        case R:
-          return fe("Suspense");
-        case h:
-          return fe("SuspenseList");
+      if (typeof r == "function")
+        return Mr(r, he(r));
+      if (typeof r == "string")
+        return gr(r);
+      switch (r) {
+        case w:
+          return gr("Suspense");
+        case x:
+          return gr("SuspenseList");
       }
-      if (typeof e == "object")
-        switch (e.$$typeof) {
-          case m:
-            return lt(e.render);
-          case C:
-            return he(e.type, r, s);
-          case w: {
-            var c = e, E = c._payload, b = c._init;
+      if (typeof r == "object")
+        switch (r.$$typeof) {
+          case d:
+            return be(r.render);
+          case y:
+            return hr(r.type, n, u);
+          case P: {
+            var f = r, E = f._payload, R = f._init;
             try {
-              return he(b(E), r, s);
+              return hr(R(E), n, u);
             } catch {
             }
           }
         }
       return "";
     }
-    var le = Object.prototype.hasOwnProperty, Ie = {}, Le = u.ReactDebugCurrentFrame;
-    function ve(e) {
-      if (e) {
-        var r = e._owner, s = he(e.type, e._source, r ? r.type : null);
-        Le.setExtraStackFrame(s);
+    var ur = Object.prototype.hasOwnProperty, Wr = {}, Br = c.ReactDebugCurrentFrame;
+    function xr(r) {
+      if (r) {
+        var n = r._owner, u = hr(r.type, r._source, n ? n.type : null);
+        Br.setExtraStackFrame(u);
       } else
-        Le.setExtraStackFrame(null);
+        Br.setExtraStackFrame(null);
     }
-    function ct(e, r, s, c, E) {
+    function xe(r, n, u, f, E) {
       {
-        var b = Function.call.bind(le);
-        for (var y in e)
-          if (b(e, y)) {
-            var v = void 0;
+        var R = Function.call.bind(ur);
+        for (var h in r)
+          if (R(r, h)) {
+            var b = void 0;
             try {
-              if (typeof e[y] != "function") {
-                var F = Error((c || "React class") + ": " + s + " type `" + y + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[y] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw F.name = "Invariant Violation", F;
+              if (typeof r[h] != "function") {
+                var M = Error((f || "React class") + ": " + u + " type `" + h + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof r[h] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw M.name = "Invariant Violation", M;
               }
-              v = e[y](r, y, c, s, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (T) {
-              v = T;
+              b = r[h](n, h, f, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (D) {
+              b = D;
             }
-            v && !(v instanceof Error) && (ve(E), f("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", c || "React class", s, y, typeof v), ve(null)), v instanceof Error && !(v.message in Ie) && (Ie[v.message] = !0, ve(E), f("Failed %s type: %s", s, v.message), ve(null));
+            b && !(b instanceof Error) && (xr(E), p("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", f || "React class", u, h, typeof b), xr(null)), b instanceof Error && !(b.message in Wr) && (Wr[b.message] = !0, xr(E), p("Failed %s type: %s", u, b.message), xr(null));
           }
       }
     }
-    var dt = Array.isArray;
-    function be(e) {
-      return dt(e);
+    var ye = Array.isArray;
+    function jr(r) {
+      return ye(r);
     }
-    function ft(e) {
+    function me(r) {
       {
-        var r = typeof Symbol == "function" && Symbol.toStringTag, s = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return s;
+        var n = typeof Symbol == "function" && Symbol.toStringTag, u = n && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return u;
       }
     }
-    function pt(e) {
+    function we(r) {
       try {
-        return Ae(e), !1;
+        return Yr(r), !1;
       } catch {
         return !0;
       }
     }
-    function Ae(e) {
-      return "" + e;
+    function Yr(r) {
+      return "" + r;
     }
-    function Fe(e) {
-      if (pt(e))
-        return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", ft(e)), Ae(e);
+    function Ur(r) {
+      if (we(r))
+        return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", me(r)), Yr(r);
     }
-    var $e = u.ReactCurrentOwner, ht = {
+    var Gr = c.ReactCurrentOwner, _e = {
       key: !0,
       ref: !0,
       __self: !0,
       __source: !0
-    }, Ne, ze;
-    function vt(e) {
-      if (le.call(e, "ref")) {
-        var r = Object.getOwnPropertyDescriptor(e, "ref").get;
-        if (r && r.isReactWarning)
+    }, Hr, Xr;
+    function Ee(r) {
+      if (ur.call(r, "ref")) {
+        var n = Object.getOwnPropertyDescriptor(r, "ref").get;
+        if (n && n.isReactWarning)
           return !1;
       }
-      return e.ref !== void 0;
+      return r.ref !== void 0;
     }
-    function gt(e) {
-      if (le.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning)
+    function Re(r) {
+      if (ur.call(r, "key")) {
+        var n = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (n && n.isReactWarning)
           return !1;
       }
-      return e.key !== void 0;
+      return r.key !== void 0;
     }
-    function yt(e, r) {
-      typeof e.ref == "string" && $e.current;
+    function Se(r, n) {
+      typeof r.ref == "string" && Gr.current;
     }
-    function mt(e, r) {
+    function Ce(r, n) {
       {
-        var s = function() {
-          Ne || (Ne = !0, f("%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://reactjs.org/link/special-props)", r));
+        var u = function() {
+          Hr || (Hr = !0, p("%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://reactjs.org/link/special-props)", n));
         };
-        s.isReactWarning = !0, Object.defineProperty(e, "key", {
-          get: s,
+        u.isReactWarning = !0, Object.defineProperty(r, "key", {
+          get: u,
           configurable: !0
         });
       }
     }
-    function xt(e, r) {
+    function ke(r, n) {
       {
-        var s = function() {
-          ze || (ze = !0, f("%s: `ref` 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://reactjs.org/link/special-props)", r));
+        var u = function() {
+          Xr || (Xr = !0, p("%s: `ref` 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://reactjs.org/link/special-props)", n));
         };
-        s.isReactWarning = !0, Object.defineProperty(e, "ref", {
-          get: s,
+        u.isReactWarning = !0, Object.defineProperty(r, "ref", {
+          get: u,
           configurable: !0
         });
       }
     }
-    var Et = function(e, r, s, c, E, b, y) {
-      var v = {
+    var Pe = function(r, n, u, f, E, R, h) {
+      var b = {
         // This tag allows us to uniquely identify this as a React Element
-        $$typeof: o,
+        $$typeof: t,
         // Built-in properties that belong on the element
-        type: e,
-        key: r,
-        ref: s,
-        props: y,
+        type: r,
+        key: n,
+        ref: u,
+        props: h,
         // Record the component responsible for creating this element.
-        _owner: b
+        _owner: R
       };
-      return v._store = {}, Object.defineProperty(v._store, "validated", {
+      return b._store = {}, Object.defineProperty(b._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: !1
-      }), Object.defineProperty(v, "_self", {
+      }), Object.defineProperty(b, "_self", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: c
-      }), Object.defineProperty(v, "_source", {
+        value: f
+      }), Object.defineProperty(b, "_source", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
         value: E
-      }), Object.freeze && (Object.freeze(v.props), Object.freeze(v)), v;
+      }), Object.freeze && (Object.freeze(b.props), Object.freeze(b)), b;
     };
-    function wt(e, r, s, c, E) {
+    function je(r, n, u, f, E) {
       {
-        var b, y = {}, v = null, F = null;
-        s !== void 0 && (Fe(s), v = "" + s), gt(r) && (Fe(r.key), v = "" + r.key), vt(r) && (F = r.ref, yt(r, E));
-        for (b in r)
-          le.call(r, b) && !ht.hasOwnProperty(b) && (y[b] = r[b]);
-        if (e && e.defaultProps) {
-          var T = e.defaultProps;
-          for (b in T)
-            y[b] === void 0 && (y[b] = T[b]);
+        var R, h = {}, b = null, M = null;
+        u !== void 0 && (Ur(u), b = "" + u), Re(n) && (Ur(n.key), b = "" + n.key), Ee(n) && (M = n.ref, Se(n, E));
+        for (R in n)
+          ur.call(n, R) && !_e.hasOwnProperty(R) && (h[R] = n[R]);
+        if (r && r.defaultProps) {
+          var D = r.defaultProps;
+          for (R in D)
+            h[R] === void 0 && (h[R] = D[R]);
         }
-        if (v || F) {
-          var P = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          v && mt(y, P), F && xt(y, P);
+        if (b || M) {
+          var O = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
+          b && Ce(h, O), M && ke(h, O);
         }
-        return Et(e, v, F, E, c, $e.current, y);
+        return Pe(r, b, M, E, f, Gr.current, h);
       }
     }
-    var Re = u.ReactCurrentOwner, Me = u.ReactDebugCurrentFrame;
-    function ee(e) {
-      if (e) {
-        var r = e._owner, s = he(e.type, e._source, r ? r.type : null);
-        Me.setExtraStackFrame(s);
+    var Vr = c.ReactCurrentOwner, Jr = c.ReactDebugCurrentFrame;
+    function Q(r) {
+      if (r) {
+        var n = r._owner, u = hr(r.type, r._source, n ? n.type : null);
+        Jr.setExtraStackFrame(u);
       } else
-        Me.setExtraStackFrame(null);
+        Jr.setExtraStackFrame(null);
     }
-    var Se;
-    Se = !1;
-    function Ce(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === o;
+    var Tr;
+    Tr = !1;
+    function Dr(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === t;
     }
-    function We() {
+    function qr() {
       {
-        if (Re.current) {
-          var e = V(Re.current.type);
-          if (e)
+        if (Vr.current) {
+          var r = T(Vr.current.type);
+          if (r)
             return `
 
-Check the render method of \`` + e + "`.";
+Check the render method of \`` + r + "`.";
         }
         return "";
       }
     }
-    function bt(e) {
+    function Ve(r) {
       return "";
     }
-    var Ve = {};
-    function Rt(e) {
+    var Zr = {};
+    function Te(r) {
       {
-        var r = We();
-        if (!r) {
-          var s = typeof e == "string" ? e : e.displayName || e.name;
-          s && (r = `
+        var n = qr();
+        if (!n) {
+          var u = typeof r == "string" ? r : r.displayName || r.name;
+          u && (n = `
 
-Check the top-level render call using <` + s + ">.");
+Check the top-level render call using <` + u + ">.");
         }
-        return r;
+        return n;
       }
     }
-    function Be(e, r) {
+    function Qr(r, n) {
       {
-        if (!e._store || e._store.validated || e.key != null)
+        if (!r._store || r._store.validated || r.key != null)
           return;
-        e._store.validated = !0;
-        var s = Rt(r);
-        if (Ve[s])
+        r._store.validated = !0;
+        var u = Te(n);
+        if (Zr[u])
           return;
-        Ve[s] = !0;
-        var c = "";
-        e && e._owner && e._owner !== Re.current && (c = " It was passed a child from " + V(e._owner.type) + "."), ee(e), f('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', s, c), ee(null);
+        Zr[u] = !0;
+        var f = "";
+        r && r._owner && r._owner !== Vr.current && (f = " It was passed a child from " + T(r._owner.type) + "."), Q(r), p('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', u, f), Q(null);
       }
     }
-    function Ye(e, r) {
+    function Kr(r, n) {
       {
-        if (typeof e != "object")
+        if (typeof r != "object")
           return;
-        if (be(e))
-          for (var s = 0; s < e.length; s++) {
-            var c = e[s];
-            Ce(c) && Be(c, r);
+        if (jr(r))
+          for (var u = 0; u < r.length; u++) {
+            var f = r[u];
+            Dr(f) && Qr(f, n);
           }
-        else if (Ce(e))
-          e._store && (e._store.validated = !0);
-        else if (e) {
-          var E = z(e);
-          if (typeof E == "function" && E !== e.entries)
-            for (var b = E.call(e), y; !(y = b.next()).done; )
-              Ce(y.value) && Be(y.value, r);
+        else if (Dr(r))
+          r._store && (r._store.validated = !0);
+        else if (r) {
+          var E = L(r);
+          if (typeof E == "function" && E !== r.entries)
+            for (var R = E.call(r), h; !(h = R.next()).done; )
+              Dr(h.value) && Qr(h.value, n);
         }
       }
     }
-    function St(e) {
+    function De(r) {
       {
-        var r = e.type;
-        if (r == null || typeof r == "string")
+        var n = r.type;
+        if (n == null || typeof n == "string")
           return;
-        var s;
-        if (typeof r == "function")
-          s = r.propTypes;
-        else if (typeof r == "object" && (r.$$typeof === m || // Note: Memo only checks outer props here.
+        var u;
+        if (typeof n == "function")
+          u = n.propTypes;
+        else if (typeof n == "object" && (n.$$typeof === d || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        r.$$typeof === C))
-          s = r.propTypes;
+        n.$$typeof === y))
+          u = n.propTypes;
         else
           return;
-        if (s) {
-          var c = V(r);
-          ct(s, e.props, "prop", c, e);
-        } else if (r.PropTypes !== void 0 && !Se) {
-          Se = !0;
-          var E = V(r);
-          f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", E || "Unknown");
+        if (u) {
+          var f = T(n);
+          xe(u, r.props, "prop", f, r);
+        } else if (n.PropTypes !== void 0 && !Tr) {
+          Tr = !0;
+          var E = T(n);
+          p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", E || "Unknown");
         }
-        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && f("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof n.getDefaultProps == "function" && !n.getDefaultProps.isReactClassApproved && p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function Ct(e) {
+    function Ie(r) {
       {
-        for (var r = Object.keys(e.props), s = 0; s < r.length; s++) {
-          var c = r[s];
-          if (c !== "children" && c !== "key") {
-            ee(e), f("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", c), ee(null);
+        for (var n = Object.keys(r.props), u = 0; u < n.length; u++) {
+          var f = n[u];
+          if (f !== "children" && f !== "key") {
+            Q(r), p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), Q(null);
             break;
           }
         }
-        e.ref !== null && (ee(e), f("Invalid attribute `ref` supplied to `React.Fragment`."), ee(null));
+        r.ref !== null && (Q(r), p("Invalid attribute `ref` supplied to `React.Fragment`."), Q(null));
       }
     }
-    var Ue = {};
-    function He(e, r, s, c, E, b) {
+    var re = {};
+    function ee(r, n, u, f, E, R) {
       {
-        var y = W(e);
-        if (!y) {
-          var v = "";
-          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (v += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var F = bt();
-          F ? v += F : v += We();
-          var T;
-          e === null ? T = "null" : be(e) ? T = "array" : e !== void 0 && e.$$typeof === o ? (T = "<" + (V(e.type) || "Unknown") + " />", v = " Did you accidentally export a JSX literal instead of a component?") : T = typeof e, f("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", T, v);
+        var h = m(r);
+        if (!h) {
+          var b = "";
+          (r === void 0 || typeof r == "object" && r !== null && Object.keys(r).length === 0) && (b += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var M = Ve();
+          M ? b += M : b += qr();
+          var D;
+          r === null ? D = "null" : jr(r) ? D = "array" : r !== void 0 && r.$$typeof === t ? (D = "<" + (T(r.type) || "Unknown") + " />", b = " Did you accidentally export a JSX literal instead of a component?") : D = typeof r, p("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", D, b);
         }
-        var P = wt(e, r, s, E, b);
-        if (P == null)
-          return P;
-        if (y) {
-          var Y = r.children;
-          if (Y !== void 0)
-            if (c)
-              if (be(Y)) {
-                for (var te = 0; te < Y.length; te++)
-                  Ye(Y[te], e);
-                Object.freeze && Object.freeze(Y);
+        var O = je(r, n, u, E, R);
+        if (O == null)
+          return O;
+        if (h) {
+          var U = n.children;
+          if (U !== void 0)
+            if (f)
+              if (jr(U)) {
+                for (var K = 0; K < U.length; K++)
+                  Kr(U[K], r);
+                Object.freeze && Object.freeze(U);
               } else
-                f("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+                p("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
-              Ye(Y, e);
+              Kr(U, r);
         }
-        if (le.call(r, "key")) {
-          var Z = V(e), N = Object.keys(r).filter(function(Dt) {
-            return Dt !== "key";
-          }), _e = N.length > 0 ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!Ue[Z + _e]) {
-            var kt = N.length > 0 ? "{" + N.join(": ..., ") + ": ...}" : "{}";
-            f(`A props object containing a "key" prop is being spread into JSX:
+        if (ur.call(n, "key")) {
+          var Z = T(r), W = Object.keys(n).filter(function(Ne) {
+            return Ne !== "key";
+          }), Ir = W.length > 0 ? "{key: someKey, " + W.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!re[Z + Ir]) {
+            var Fe = W.length > 0 ? "{" + W.join(": ..., ") + ": ...}" : "{}";
+            p(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`, _e, Z, kt, Z), Ue[Z + _e] = !0;
+  <%s key={someKey} {...props} />`, Ir, Z, Fe, Z), re[Z + Ir] = !0;
           }
         }
-        return e === i ? Ct(P) : St(P), P;
+        return r === i ? Ie(O) : De(O), O;
       }
     }
-    function _t(e, r, s) {
-      return He(e, r, s, !0);
+    function Oe(r, n, u) {
+      return ee(r, n, u, !0);
     }
-    function jt(e, r, s) {
-      return He(e, r, s, !1);
+    function Le(r, n, u) {
+      return ee(r, n, u, !1);
     }
-    var Tt = jt, Pt = _t;
-    ce.Fragment = i, ce.jsx = Tt, ce.jsxs = Pt;
-  }()), ce;
+    var ze = Le, Ae = Oe;
+    sr.Fragment = i, sr.jsx = ze, sr.jsxs = Ae;
+  }()), sr;
 }
-process.env.NODE_ENV === "production" ? Pe.exports = At() : Pe.exports = Ft();
-var l = Pe.exports;
-function $t(t) {
-  if (t.id && /^[a-zA-Z][\w-]*$/.test(t.id))
-    return `#${t.id}`;
-  const o = [];
-  let n = t;
-  for (; n && n.nodeType === Node.ELEMENT_NODE; ) {
-    let i = n.nodeName.toLowerCase();
-    if (n.id && /^[a-zA-Z][\w-]*$/.test(n.id)) {
-      o.unshift(`#${n.id}`);
+process.env.NODE_ENV === "production" ? Ar.exports = We() : Ar.exports = Be();
+var l = Ar.exports;
+function Ye(e) {
+  if (e.id && /^[a-zA-Z][\w-]*$/.test(e.id))
+    return `#${e.id}`;
+  const t = [];
+  let o = e;
+  for (; o && o.nodeType === Node.ELEMENT_NODE; ) {
+    let i = o.nodeName.toLowerCase();
+    if (o.id && /^[a-zA-Z][\w-]*$/.test(o.id)) {
+      t.unshift(`#${o.id}`);
       break;
     }
-    if (n.className && typeof n.className == "string") {
-      const a = n.className.trim().split(/\s+/).filter(Boolean);
+    if (o.className && typeof o.className == "string") {
+      const a = o.className.trim().split(/\s+/).filter(Boolean);
       if (a.length > 0) {
-        const d = a.filter((g) => /^[a-zA-Z][\w-]*$/.test(g)).slice(0, 2).map((g) => `.${g}`).join("");
-        d && (i += d);
+        const s = a.filter((v) => /^[a-zA-Z][\w-]*$/.test(v)).slice(0, 2).map((v) => `.${v}`).join("");
+        s && (i += s);
       }
     }
-    if (o.length > 0) {
-      const a = n.parentElement;
+    if (t.length > 0) {
+      const a = o.parentElement;
       if (a) {
-        const d = Array.from(a.children).filter(
-          (g) => g.nodeName === n.nodeName
+        const s = Array.from(a.children).filter(
+          (v) => v.nodeName === o.nodeName
         );
-        if (d.length > 1) {
-          const g = d.indexOf(n) + 1;
-          i += `:nth-child(${g})`;
+        if (s.length > 1) {
+          const v = s.indexOf(o) + 1;
+          i += `:nth-child(${v})`;
         }
       }
     }
-    o.unshift(i), n = n.parentElement;
+    t.unshift(i), o = o.parentElement;
   }
-  return o.join(" > ");
+  return t.join(" > ");
 }
-function et(t) {
-  if (typeof document > "u" || !(t != null && t.trim())) return null;
+const Ue = "[data-review-layer-root]", Ge = 16;
+function Fr(e, t, o = Ge) {
+  if (typeof window > "u") return { x: e, y: t };
+  const i = o, a = o, s = window.innerWidth - o, v = window.innerHeight - o;
+  return {
+    x: Math.max(i, Math.min(s, e)),
+    y: Math.max(a, Math.min(v, t))
+  };
+}
+function ce(e) {
+  var t;
+  if (typeof document > "u" || !(e != null && e.trim())) return null;
   try {
-    const o = document.querySelector(t);
-    return o ? o.getBoundingClientRect() : null;
+    const o = document.querySelector(e);
+    return !o || (t = o.closest) != null && t.call(o, Ue) ? null : o.getBoundingClientRect();
   } catch {
     return null;
   }
 }
-function Nt(t) {
+function He(e) {
   if (typeof window > "u")
     return { relativeX: 0, relativeY: 0 };
-  const o = window.innerWidth, n = window.innerHeight;
+  const t = window.innerWidth, o = window.innerHeight;
   return {
-    relativeX: o > 0 ? t.left / o : 0,
-    relativeY: n > 0 ? t.top / n : 0
+    relativeX: t > 0 ? e.left / t : 0,
+    relativeY: o > 0 ? e.top / o : 0
   };
 }
-function zt(t) {
+function Nr(e) {
   if (typeof window > "u")
     return {
-      x: t.x ?? 0,
-      y: t.y ?? 0
+      x: e.x ?? 0,
+      y: e.y ?? 0
     };
-  const o = t.relativeX ?? null, n = t.relativeY ?? null;
-  return o != null && n != null ? {
-    x: o * window.innerWidth,
-    y: n * window.innerHeight
+  const t = e.relativeX ?? e.relative_x ?? null, o = e.relativeY ?? e.relative_y ?? null;
+  return t != null && o != null ? {
+    x: t * window.innerWidth,
+    y: o * window.innerHeight
   } : {
-    x: t.x ?? 0,
-    y: t.y ?? 0
+    x: e.x ?? 0,
+    y: e.y ?? 0
   };
 }
-function ye(t) {
-  if (t.selector) {
-    const o = et(t.selector);
-    if (o != null)
-      return { x: o.left, y: o.top };
+function Xe(e) {
+  const { x: t, y: o } = Nr(e), i = e.width ?? 100, a = e.height ?? 40;
+  return new DOMRect(t, o, i, a);
+}
+function wr(e) {
+  const t = (e.relativeX ?? e.relative_x) != null && (e.relativeY ?? e.relative_y) != null, o = e.x != null && e.y != null;
+  if (t || o)
+    return Nr(e);
+  if (e.selector) {
+    const i = ce(e.selector);
+    if (i != null)
+      return { x: i.left, y: i.top };
   }
-  return zt(t);
+  return Nr(e);
 }
-const D = {
+const k = {
   PENDING: "pending",
   DEV_FIXED: "dev_fixed",
   VALIDATED: "validated"
 };
-function de(t) {
+function cr(e) {
   return {
     "Content-Type": "application/json",
-    "x-review-key": t
+    "x-review-key": e
   };
 }
-async function Mt(t, o, n) {
-  const i = await fetch(`${t}/reviewers`, {
-    headers: de(o),
-    signal: n == null ? void 0 : n.signal
+async function Je(e, t, o) {
+  const i = await fetch(`${e}/reviewers`, {
+    headers: cr(t),
+    signal: o == null ? void 0 : o.signal
   });
   if (!i.ok) throw new Error("Failed to fetch reviewers");
   return (await i.json()).data ?? [];
 }
-async function Wt(t, o, n) {
-  const i = await fetch(`${t}/comments`, {
+async function qe(e, t, o) {
+  const i = await fetch(`${e}/comments`, {
     method: "POST",
-    headers: de(o),
-    body: JSON.stringify(n)
+    headers: cr(t),
+    body: JSON.stringify(o)
   });
   if (!i.ok) {
-    const d = await i.json().catch(() => ({}));
-    throw new Error(d.message || "Failed to create comment");
+    const s = await i.json().catch(() => ({}));
+    throw new Error(s.message || "Failed to create comment");
   }
   return (await i.json()).data;
 }
-async function Vt(t, o, n, i) {
-  const a = new URLSearchParams({ url: n }), d = await fetch(`${t}/comments?${a}`, {
-    headers: de(o),
+async function Ze(e, t, o, i) {
+  const a = new URLSearchParams({ url: o }), s = await fetch(`${e}/comments?${a}`, {
+    headers: cr(t),
     signal: i == null ? void 0 : i.signal
   });
-  if (!d.ok) throw new Error("Failed to fetch comments");
-  return (await d.json()).data ?? [];
+  if (!s.ok) throw new Error("Failed to fetch comments");
+  return (await s.json()).data ?? [];
 }
-async function Bt(t, o, n, i) {
-  const a = await fetch(`${t}/comments/${n}/status`, {
+async function Qe(e, t, o, i) {
+  const a = await fetch(`${e}/comments/${o}/status`, {
     method: "PATCH",
-    headers: de(o),
+    headers: cr(t),
     body: JSON.stringify({ status: i })
   });
   if (!a.ok) {
-    const g = await a.json().catch(() => ({}));
-    throw new Error(g.message || "Failed to update comment status");
+    const v = await a.json().catch(() => ({}));
+    throw new Error(v.message || "Failed to update comment status");
   }
   return (await a.json()).data;
 }
-async function Yt(t, o, n) {
-  const i = await fetch(`${t}/comments/${n}`, {
+async function Ke(e, t, o) {
+  const i = await fetch(`${e}/comments/${o}`, {
     method: "DELETE",
-    headers: de(o)
+    headers: cr(t)
   });
   if (!i.ok) {
     const a = await i.json().catch(() => ({}));
     throw new Error(a.message || "Failed to delete comment");
   }
 }
-const Ut = {
+const ro = {
   position: "fixed",
   inset: 0,
   zIndex: 999997,
   backgroundColor: "transparent"
-}, Ht = {
+}, eo = {
   position: "fixed",
   minWidth: 320,
   maxWidth: 400,
-  padding: 16,
-  backgroundColor: "#fff",
-  border: "1px solid #e8e8e8",
-  borderRadius: 8,
-  boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+  padding: "var(--ui-positive-Value_400, 16px)",
+  backgroundColor: "var(--ui-color-bg-surface-default, #fff)",
+  border: "1px solid var(--ui-color-border-subtle, #e8e8e8)",
+  borderRadius: "var(--ui-radius_8, 8px)",
+  boxShadow: "0 8px 24px var(--ui-color-black-alpha-20, rgba(0,0,0,0.15))",
   zIndex: 999998
-}, Xt = {
+}, oo = {
   width: "100%",
   minHeight: 80,
-  padding: "8px 12px",
-  marginBottom: 12,
-  border: "1px solid #d9d9d9",
-  borderRadius: 6,
-  fontSize: 14,
+  padding: "var(--ui-positive-Value_200, 8px) var(--ui-positive-Value_300, 12px)",
+  marginBottom: "var(--ui-positive-Value_200, 12px)",
+  border: "1px solid var(--ui-color-border-default, #d9d9d9)",
+  borderRadius: "var(--ui-radius_6, 6px)",
+  fontSize: "var(--ui-font-size-sm, 14px)",
+  fontFamily: "var(--ui-font-family-ui, 'Inter', sans-serif)",
   resize: "vertical",
   boxSizing: "border-box"
-}, Gt = {
+}, to = {
   width: "100%",
-  padding: "8px 12px",
-  marginBottom: 12,
-  border: "1px solid #d9d9d9",
-  borderRadius: 6,
-  fontSize: 14
-}, Jt = {
-  padding: "8px 16px",
-  backgroundColor: "#ff4d4f",
-  color: "#fff",
+  padding: "var(--ui-positive-Value_200, 8px) var(--ui-positive-Value_300, 12px)",
+  marginBottom: "var(--ui-positive-Value_300, 12px)",
+  border: "1px solid var(--ui-color-border-default, #d9d9d9)",
+  borderRadius: "var(--ui-radius_6, 6px)",
+  fontSize: "var(--ui-font-size-sm, 14px)"
+}, no = {
+  padding: "var(--ui-positive-Value_200, 8px) var(--ui-positive-Value_400, 16px)",
+  backgroundColor: "var(--ui-color-bg-fill-danger-default, #ff4d4f)",
+  color: "var(--ui-color-text-on-color, #fff)",
   border: "none",
-  borderRadius: 6,
-  fontSize: 14,
+  borderRadius: "var(--ui-radius_6, 6px)",
+  fontSize: "var(--ui-font-size-sm, 14px)",
   cursor: "pointer",
-  fontWeight: 500
+  fontWeight: "var(--ui-font-weight-medium, 500)"
 };
-function qt({
-  apiUrl: t,
-  apiKey: o,
-  reviewers: n,
+function io({
+  apiUrl: e,
+  apiKey: t,
+  reviewers: o,
   position: i,
   payload: a,
-  onClose: d,
-  onSuccess: g
+  onClose: s,
+  onSuccess: v
 }) {
-  var z;
-  const [p, m] = A(""), [R, h] = A(
-    ((z = n[0]) == null ? void 0 : z.id) ?? 0
-  ), [C, w] = A(!1), [O, _] = A(null);
-  $(() => {
-    n.length > 0 && !R && h(n[0].id);
-  }, [n, R]);
-  const I = async (u) => {
-    if (u.preventDefault(), !(!p.trim() || !R)) {
-      w(!0), _(null);
-      try {
-        await Wt(t, o, {
-          ...a,
-          message: p.trim(),
-          reviewerId: R
-        }), g(), d();
-      } catch (f) {
-        _(f instanceof Error ? f.message : "Failed to send comment");
-      } finally {
-        w(!1);
+  var L;
+  const [g, d] = A(""), [w, x] = A(
+    ((L = o[0]) == null ? void 0 : L.id) ?? 0
+  ), [y, P] = A(!1), [S, V] = A(null);
+  F(() => {
+    o.length > 0 && !w && x(o[0].id);
+  }, [o, w]);
+  const $ = j(
+    async (c) => {
+      if (c.preventDefault(), !(!g.trim() || !w)) {
+        P(!0), V(null);
+        try {
+          await qe(e, t, {
+            ...a,
+            message: g.trim(),
+            reviewerId: w
+          }), v(), s();
+        } catch (p) {
+          V(p instanceof Error ? p.message : "Failed to send comment");
+        } finally {
+          P(!1);
+        }
       }
-    }
-  };
+    },
+    [e, t, a, g, w, v, s]
+  );
   return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
     /* @__PURE__ */ l.jsx(
       "div",
       {
         role: "presentation",
-        style: Ut,
-        onClick: d,
-        onKeyDown: (u) => u.key === "Escape" && d()
+        style: ro,
+        onClick: s,
+        onKeyDown: (c) => c.key === "Escape" && s()
       }
     ),
     /* @__PURE__ */ l.jsx(
       "div",
       {
         style: {
-          ...Ht,
+          ...eo,
           left: Math.min(i.x, typeof window < "u" ? window.innerWidth - 420 : i.x),
           top: i.y + 12
         },
-        onClick: (u) => u.stopPropagation(),
-        children: /* @__PURE__ */ l.jsxs("form", { onSubmit: I, children: [
+        onClick: (c) => c.stopPropagation(),
+        children: /* @__PURE__ */ l.jsxs("form", { onSubmit: $, children: [
           /* @__PURE__ */ l.jsx(
             "textarea",
             {
               placeholder: "Escribe tu comentario...",
-              value: p,
-              onChange: (u) => m(u.target.value),
-              style: Xt,
+              value: g,
+              onChange: (c) => d(c.target.value),
+              style: oo,
               required: !0,
               autoFocus: !0
             }
@@ -870,109 +891,133 @@ function qt({
           /* @__PURE__ */ l.jsxs(
             "select",
             {
-              value: R,
-              onChange: (u) => h(Number(u.target.value)),
-              style: Gt,
+              value: w,
+              onChange: (c) => x(Number(c.target.value)),
+              style: to,
               required: !0,
-              disabled: n.length === 0,
+              disabled: o.length === 0,
               children: [
-                /* @__PURE__ */ l.jsx("option", { value: "", children: n.length === 0 ? "No hay revisores (ejecuta php artisan db:seed en la API)" : "Selecciona revisor" }),
-                n.map((u) => /* @__PURE__ */ l.jsx("option", { value: u.id, children: u.name }, u.id))
+                /* @__PURE__ */ l.jsx("option", { value: "", children: o.length === 0 ? "No hay revisores (ejecuta php artisan db:seed en la API)" : "Selecciona revisor" }),
+                o.map((c) => /* @__PURE__ */ l.jsx("option", { value: c.id, children: c.name }, c.id))
               ]
             }
           ),
-          O && /* @__PURE__ */ l.jsx(
+          S && /* @__PURE__ */ l.jsx(
             "div",
             {
               style: {
-                color: "#ff4d4f",
-                fontSize: 12,
-                marginBottom: 8
+                color: "var(--ui-color-text-danger-default, #ff4d4f)",
+                fontSize: "var(--ui-font-size-xs, 12px)",
+                marginBottom: "var(--ui-positive-Value_200, 8px)"
               },
-              children: O
+              children: S
             }
           ),
-          /* @__PURE__ */ l.jsx(
+          /* @__PURE__ */ l.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ l.jsx(
             "button",
             {
               type: "submit",
-              style: Jt,
-              disabled: C || n.length === 0,
-              children: C ? "Enviando..." : "Enviar comentario"
+              style: no,
+              disabled: y || o.length === 0,
+              children: y ? "Enviando..." : "Enviar comentario"
             }
-          )
+          ) })
         ] })
       }
     )
   ] });
 }
-const Zt = {
-  position: "fixed",
-  outline: "2px solid #ff4d4f",
-  outlineOffset: "2px",
-  pointerEvents: "none",
-  zIndex: 999997,
-  boxSizing: "border-box"
-};
-function Qt({ selector: t, active: o }) {
-  const [n, i] = A(null), a = L(() => {
-    if (!o || !(t != null && t.trim())) {
-      i(null);
+const ao = Rr(io), uo = "var(--ui-color-red-500, #ef4444)";
+function lo(e) {
+  return {
+    position: "fixed",
+    outline: `2px solid ${e}`,
+    outlineOffset: "var(--ui-positive-Value_200, 2px)",
+    pointerEvents: "none",
+    zIndex: 999997,
+    boxSizing: "border-box"
+  };
+}
+const so = Rr(function({
+  selector: t,
+  active: o,
+  fallbackComment: i,
+  outlineColor: a = uo
+}) {
+  const [s, v] = A(null), g = j(() => {
+    if (!o) {
+      v(null);
       return;
     }
-    const d = et(t);
-    i(d);
-  }, [t, o]);
-  return $(() => {
-    a();
-  }, [a]), $(() => {
-    if (!(!o || !(t != null && t.trim())))
-      return window.addEventListener("scroll", a, !0), window.addEventListener("resize", a), () => {
-        window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
+    const d = t != null && t.trim() ? ce(t) : null;
+    if (d) {
+      v(d);
+      return;
+    }
+    if (i) {
+      v(Xe(i));
+      return;
+    }
+    v(null);
+  }, [t, o, i]);
+  return F(() => {
+    g();
+  }, [g]), F(() => {
+    if (o)
+      return window.addEventListener("scroll", g, !0), window.addEventListener("resize", g), () => {
+        window.removeEventListener("scroll", g, !0), window.removeEventListener("resize", g);
       };
-  }, [o, t, a]), !o || n == null ? null : /* @__PURE__ */ l.jsx(
+  }, [o, g]), !o || s == null ? null : /* @__PURE__ */ l.jsx(
     "div",
     {
       "aria-hidden": !0,
       style: {
-        ...Zt,
-        left: n.left,
-        top: n.top,
-        width: n.width,
-        height: n.height
+        ...lo(a),
+        left: s.left,
+        top: s.top,
+        width: s.width,
+        height: s.height
       }
     }
   );
-}
-const ke = 32, Je = 5e6, B = {
-  cardBg: "#ffffff",
-  textDark: "#333333",
-  textMuted: "#888888",
-  border: "#cccccc",
-  shadow: "0 4px 16px rgba(0, 0, 0, 0.12)"
-}, Kt = {
-  [D.PENDING]: "Pendiente",
-  [D.DEV_FIXED]: "Corregido Desarrollo",
-  [D.VALIDATED]: "Validado"
-}, er = {
-  [D.PENDING]: "PENDIENTE",
-  [D.DEV_FIXED]: "CORREGIDO DESARROLLO",
-  [D.VALIDATED]: "VALIDADO"
-}, Q = {
-  [D.PENDING]: "rgb(240, 69, 69)",
-  [D.DEV_FIXED]: "rgb(235, 179, 8)",
-  [D.VALIDATED]: "rgb(33, 196, 94)"
+}), _r = 32, ne = 15e5, Or = 250, B = {
+  cardBg: "var(--ui-color-bg-surface-default, #ffffff)",
+  cardFooterBg: "var(--ui-color-bg-surface-secondary-default, #f8fafc)",
+  textDark: "var(--ui-color-text-primary, #333333)",
+  textMuted: "var(--ui-color-text-secondary, #888888)",
+  border: "var(--ui-color-border-default, #cccccc)",
+  shadow: "var(--ui-shadow-card, 0 4px 16px rgba(0, 0, 0, 0.12))"
+}, co = {
+  [k.PENDING]: "Pendiente",
+  [k.DEV_FIXED]: "Corregido",
+  [k.VALIDATED]: "Validado"
+}, fo = {
+  [k.PENDING]: "PENDIENTE",
+  [k.DEV_FIXED]: "CORREGIDO",
+  [k.VALIDATED]: "VALIDADO"
+}, rr = {
+  [k.PENDING]: "var(--ui-color-red-500, rgb(240, 69, 69))",
+  [k.DEV_FIXED]: "var(--ui-color-yellow-500, rgb(235, 179, 8))",
+  [k.VALIDATED]: "var(--ui-color-green-500, rgb(33, 196, 94))"
+}, ie = {
+  [k.PENDING]: "var(--ui-color-bg-surface-danger-default, #fef2f2)",
+  [k.DEV_FIXED]: "var(--ui-color-bg-surface-warning-default, #fffbeb)",
+  [k.VALIDATED]: "var(--ui-color-bg-surface-success-default, #f0fdf4)"
+}, Er = {
+  [k.PENDING]: "var(--ui-color-red-500, #ef4444)",
+  [k.DEV_FIXED]: "var(--ui-color-orange-500, #f59e0b)",
+  [k.VALIDATED]: "var(--ui-color-green-500, #22c55e)"
 };
-function tr(t) {
-  const o = t.trim().split(/\s+/);
-  return o.length >= 2 ? (o[0][0] + o[o.length - 1][0]).toUpperCase() : t.slice(0, 2).toUpperCase() || "?";
+function vo(e) {
+  const t = e.trim().split(/\s+/);
+  return t.length >= 2 ? (t[0][0] + t[t.length - 1][0]).toUpperCase() : e.slice(0, 2).toUpperCase() || "?";
 }
-const rr = () => /* @__PURE__ */ l.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { marginRight: 4, flexShrink: 0 }, children: /* @__PURE__ */ l.jsx("path", { d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), nr = ({ color: t }) => /* @__PURE__ */ l.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: [
+const po = () => /* @__PURE__ */ l.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { marginRight: 4, flexShrink: 0 }, children: /* @__PURE__ */ l.jsx("path", { d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), go = ({ color: e }) => /* @__PURE__ */ l.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: [
   /* @__PURE__ */ l.jsx(
     "path",
     {
       d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z",
-      stroke: t,
+      stroke: e,
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -983,104 +1028,128 @@ const rr = () => /* @__PURE__ */ l.jsx("svg", { width: "12", height: "12", viewB
     "path",
     {
       d: "M8 10h.01M12 10h.01M16 10h.01",
-      stroke: "#fff",
+      stroke: "var(--ui-color-white, #fff)",
       strokeWidth: "1.5",
       strokeLinecap: "round"
     }
   )
-] }), or = (t) => ({
+] }), bo = (e) => ({
   position: "fixed",
-  width: ke,
-  height: ke,
+  width: _r,
+  height: _r,
   borderRadius: "50%",
-  backgroundColor: Q[t] ?? Q[D.PENDING],
-  color: "#fff",
+  backgroundColor: rr[e] ?? rr[k.PENDING],
+  color: "var(--ui-color-text-on-color, #fff)",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   cursor: "pointer",
-  fontFamily: "'Inter', sans-serif",
-  boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+  fontFamily: "var(--ui-font-family-ui, 'Inter', sans-serif)",
+  boxShadow: "0 2px 8px var(--ui-color-black-alpha-20, rgba(0,0,0,0.2))",
   zIndex: 999998,
-  border: "2px solid #fff"
-}), ir = {
+  border: "2px solid var(--ui-color-white, #fff)"
+}), ho = {
   position: "fixed",
-  maxWidth: 320,
-  padding: "16px 14px",
+  width: Or,
+  minWidth: Or,
+  maxWidth: Or,
+  boxSizing: "border-box",
   backgroundColor: B.cardBg,
-  borderRadius: 12,
+  borderRadius: "var(--ui-radius_12, 12px)",
   boxShadow: B.shadow,
-  fontSize: 13,
-  fontFamily: "'Inter', sans-serif",
+  fontSize: "var(--ui-font-size-sm, 14px)",
+  fontFamily: "var(--ui-font-family-ui, 'Inter', sans-serif)",
   zIndex: 999999,
   pointerEvents: "auto"
-}, ar = {
+}, xo = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  gap: 10,
-  marginBottom: 12
-}, sr = (t) => ({
+  gap: "var(--ui-positive-Value_250, 10px)",
+  borderBottom: `1px solid ${B.border}`,
+  padding: "var(--ui-positive-Value_300, 12px)"
+}, yo = (e) => ({
   width: 40,
   height: 40,
   borderRadius: "50%",
-  backgroundColor: Q[t] ?? Q[D.PENDING],
-  color: "#fff",
-  border: "2px solid #fff",
+  backgroundColor: rr[e] ?? rr[k.PENDING],
+  color: "var(--ui-color-text-on-color, #fff)",
+  border: "2px solid var(--ui-color-white, #fff)",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  fontSize: 14,
-  fontWeight: 700,
-  flexShrink: 0
-}), lr = {
+  fontSize: "var(--ui-font-size-sm, 14px)",
+  fontWeight: "var(--ui-font-weight-bold, 700)",
+  flexShrink: 0,
+  overflow: "hidden"
+}), mo = Rr(function({
+  reviewer: t,
+  status: o
+}) {
+  const i = t == null ? void 0 : t.image_url, a = (t == null ? void 0 : t.name) ?? "Revisor", s = yo(o);
+  if (i && i.trim()) {
+    const v = rr[o] ?? rr[k.PENDING];
+    return /* @__PURE__ */ l.jsx("div", { style: { ...s, border: `2px solid ${v}` }, children: /* @__PURE__ */ l.jsx(
+      "img",
+      {
+        src: i,
+        alt: a,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        },
+        loading: "lazy"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ l.jsx("div", { style: s, children: vo(a) });
+}), wo = {
   flexShrink: 0,
-  width: 24,
-  height: 24,
+  width: "var(--ui-positive-Value_600, 24px)",
+  height: "var(--ui-positive-Value_600, 24px)",
   padding: 0,
   border: "none",
-  borderRadius: 6,
+  borderRadius: "var(--ui-radius_6, 6px)",
   backgroundColor: "transparent",
   color: B.textDark,
   cursor: "pointer",
-  fontSize: 18,
+  fontSize: "var(--ui-positive-Value_450, 18px)",
   lineHeight: 1,
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
-}, ur = (t) => {
-  const o = t === D.DEV_FIXED;
+}, _o = (e) => {
+  const t = Er[e] ?? Er[k.PENDING];
   return {
     display: "inline-flex",
     alignItems: "center",
-    marginBottom: 10,
-    padding: "4px 10px",
-    borderRadius: 9999,
-    fontSize: 10,
-    fontWeight: 700,
-    fontFamily: "'Inter', sans-serif",
+    padding: "var(--ui-positive-Value_50, 4px) var(--ui-positive-Value_100, 10px)",
+    borderRadius: "var(--ui-radius_full, 9999px)",
+    fontSize: "8px",
+    fontWeight: "var(--ui-font-weight-bold, 700)",
+    fontFamily: "var(--ui-font-family-ui, 'Inter', sans-serif)",
     textTransform: "uppercase",
     letterSpacing: "0.02em",
-    backgroundColor: Q[t] ?? Q[D.PENDING],
-    color: o ? B.textDark : "#fff"
+    backgroundColor: ie[e] ?? ie[k.PENDING],
+    color: t,
+    border: `1px solid ${t}`
   };
-}, cr = {
+}, Eo = {
   display: "block",
-  marginTop: 12,
-  marginBottom: 6,
-  fontSize: 10,
-  fontWeight: 600,
-  fontFamily: "'Inter', sans-serif",
+  fontSize: "var(--ui-font-size-2xs, 10px)",
+  fontWeight: "var(--ui-font-weight-semibold, 600)",
+  fontFamily: "var(--ui-font-family-ui, 'Inter', sans-serif)",
   color: B.textMuted,
   textTransform: "uppercase",
   letterSpacing: "0.04em"
-}, dr = {
+}, Ro = {
   width: "100%",
-  padding: "8px 12px",
-  paddingRight: 32,
-  fontSize: 13,
-  fontFamily: "'Inter', sans-serif",
-  borderRadius: 8,
+  padding: "var(--ui-positive-Value_200, 8px) var(--ui-positive-Value_300, 12px)",
+  paddingRight: "var(--ui-positive-Value_800, 32px)",
+  fontSize: "var(--ui-font-size-xs, 13px)",
+  fontFamily: "var(--ui-font-family-ui, 'Inter', sans-serif)",
+  borderRadius: "var(--ui-radius_8, 8px)",
   border: `1px solid ${B.border}`,
   backgroundColor: B.cardBg,
   color: B.textDark,
@@ -1088,341 +1157,416 @@ const rr = () => /* @__PURE__ */ l.jsx("svg", { width: "12", height: "12", viewB
   appearance: "none",
   backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L2 4h8z'/%3E%3C/svg%3E")`,
   backgroundRepeat: "no-repeat",
-  backgroundPosition: "right 10px center"
-}, fr = {
+  backgroundPosition: "right var(--ui-positive-Value_250, 10px) center"
+}, So = {
   display: "flex",
   alignItems: "center",
   justifyContent: "flex-end",
-  gap: 8,
-  marginTop: 14,
-  paddingTop: 12,
-  borderTop: `1px solid ${B.border}`
-}, tt = {
+  gap: "var(--ui-positive-Value_200, 8px)",
+  padding: "var(--ui-positive-Value_300, 12px)",
+  borderTop: `1px solid ${B.border}`,
+  backgroundColor: B.cardFooterBg
+}, de = {
   minWidth: 100,
-  padding: "8px 14px",
-  fontSize: 13,
-  fontWeight: 600,
-  fontFamily: "'Inter', sans-serif",
-  borderRadius: 8,
+  padding: "var(--ui-positive-Value_200, 8px) var(--ui-positive-Value_350, 14px)",
+  fontSize: "var(--ui-font-size-xs, 13px)",
+  fontWeight: "var(--ui-font-weight-semibold, 600)",
+  fontFamily: "var(--ui-font-family-ui, 'Inter', sans-serif)",
+  borderRadius: "var(--ui-radius_8, 8px)",
   cursor: "pointer",
   border: "none"
-}, pr = {
-  ...tt,
+}, Co = {
+  ...de,
   backgroundColor: "transparent",
   color: B.textDark
-}, hr = {
-  ...tt,
-  backgroundColor: Q[D.VALIDATED],
-  color: "#fff"
+}, yr = "review-layer-resolve-btn", ko = [
+  "pending",
+  "dev_fixed",
+  "validated"
+], Po = {
+  ...de,
+  backgroundColor: "var(--ui-color-bg-fill-success-default, #22c55e)",
+  color: "var(--ui-color-text-on-color, #fff)"
 };
-function vr({
-  comment: t,
-  offset: o = { dx: 0, dy: 0 },
-  apiUrl: n,
+function jo({
+  comment: e,
+  offset: t = { dx: 0, dy: 0 },
+  apiUrl: o,
   apiKey: i,
-  onStatusChange: a
+  onStatusChange: a,
+  reviewMode: s = !1
 }) {
-  var ne, oe;
-  const [d, g] = A(!1), [p, m] = A(!1), [R, h] = A(() => ye(t)), [C, w] = A(!1), [O, _] = A(null), I = ge(null), z = ge(null), u = ge(null), f = L(() => {
-    h(ye(t));
-  }, [t]);
-  $(() => {
-    f();
-  }, [f]), $(() => {
+  var nr, ir;
+  const [v, g] = A(!1), [d, w] = A(!1), [x, y] = A(() => wr(e)), [P, S] = A(!1), [V, $] = A(null), L = mr(null), c = mr(null), p = mr(null), I = j(() => {
+    y(wr(e));
+  }, [e]);
+  F(() => {
+    I();
+  }, [I]), F(() => {
     if (!(typeof window > "u"))
-      return window.addEventListener("scroll", f, !0), window.addEventListener("resize", f), () => {
-        window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
+      return window.addEventListener("scroll", I, !0), window.addEventListener("resize", I), () => {
+        window.removeEventListener("scroll", I, !0), window.removeEventListener("resize", I);
       };
-  }, [f]);
-  const k = L(() => {
-    I.current !== null && (clearTimeout(I.current), I.current = null);
-  }, []), U = L(() => {
-    k(), g(!0);
-  }, [k]), X = L(() => {
-    p || (I.current = setTimeout(() => {
-      I.current = null, g(!1);
-    }, Je));
-  }, [p]), K = L(() => {
-    k(), g(!0);
-  }, [k]), S = L(() => {
-    p || (I.current = setTimeout(() => {
-      I.current = null, g(!1);
-    }, Je));
-  }, [p]), j = L(() => {
-    p ? (m(!1), g(!1)) : (m(!0), g(!0));
-  }, [p]);
-  $(() => {
-    if (!p) return;
-    const x = (q) => {
-      var ae, se;
-      const ie = q.target;
-      (ae = z.current) != null && ae.contains(ie) || (se = u.current) != null && se.contains(ie) || (m(!1), g(!1));
+  }, [I]);
+  const N = j(() => {
+    L.current !== null && (clearTimeout(L.current), L.current = null);
+  }, []), H = j(() => {
+    s || (N(), g(!0));
+  }, [s, N]), er = j(() => {
+    d || (L.current = setTimeout(() => {
+      L.current = null, g(!1);
+    }, ne));
+  }, [d]), or = j(() => {
+    N(), g(!0);
+  }, [N]), tr = j(() => {
+    d || (L.current = setTimeout(() => {
+      L.current = null, g(!1);
+    }, ne));
+  }, [d]), X = j(() => {
+    if (s) {
+      d && (w(!1), g(!1));
+      return;
+    }
+    d ? (w(!1), g(!1)) : (w(!0), g(!0));
+  }, [s, d]);
+  F(() => {
+    if (!d) return;
+    const _ = (q) => {
+      var vr, pr;
+      const ar = q.target;
+      (vr = c.current) != null && vr.contains(ar) || (pr = p.current) != null && pr.contains(ar) || (w(!1), g(!1));
     };
-    return document.addEventListener("mousedown", x, !0), () => document.removeEventListener("mousedown", x, !0);
-  }, [p]), $(() => () => k(), [k]);
-  const M = R.x + o.dx, W = R.y + o.dy, re = d, G = L(() => {
-    m(!1), g(!1);
-  }, []), V = async (x) => {
-    if (x !== t.status) {
-      _(null), w(!0);
-      try {
-        await Bt(n, i, t.id, x), a();
-      } catch (q) {
-        _(q instanceof Error ? q.message : "Error al actualizar");
-      } finally {
-        w(!1);
+    return document.addEventListener("mousedown", _, !0), () => document.removeEventListener("mousedown", _, !0);
+  }, [d]), F(() => () => N(), [N]), F(() => {
+    s && (w(!1), g(!1));
+  }, [s]);
+  const m = x.x + t.dx, C = x.y + t.dy, { x: z, y: T } = Fr(m, C, _r / 2), G = v && !d, Y = j(() => {
+    w(!1), g(!1);
+  }, []), J = j(
+    async (_) => {
+      if (_ !== e.status) {
+        $(null), S(!0);
+        try {
+          await Qe(o, i, e.id, _), a();
+        } catch (q) {
+          $(q instanceof Error ? q.message : "Error al actualizar");
+        } finally {
+          S(!1);
+        }
       }
-    }
-  }, H = async () => {
-    _(null), w(!0);
+    },
+    [o, i, e.id, e.status, a]
+  ), dr = j(async () => {
+    $(null), S(!0);
     try {
-      await Yt(n, i, t.id), a(), G();
-    } catch (x) {
-      _(x instanceof Error ? x.message : "Error al eliminar");
+      await Ke(o, i, e.id), a(), Y();
+    } catch (_) {
+      $(_ instanceof Error ? _.message : "Error al eliminar");
     } finally {
-      w(!1);
+      S(!1);
     }
-  }, J = [
-    "pending",
-    "dev_fixed",
-    "validated"
-  ];
+  }, [o, i, e.id, a, Y]), fr = $r(
+    () => ({ ...bo(e.status), left: z, top: T, transform: "translate(-50%, -50%)" }),
+    [e.status, z, T]
+  );
   return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
-    /* @__PURE__ */ l.jsx(Qt, { selector: t.selector, active: re }),
+    /* @__PURE__ */ l.jsx(
+      so,
+      {
+        selector: e.selector,
+        active: G,
+        fallbackComment: e,
+        outlineColor: Er[e.status] ?? Er[k.PENDING]
+      }
+    ),
     /* @__PURE__ */ l.jsx(
       "div",
       {
-        ref: z,
+        ref: c,
         role: "button",
         tabIndex: 0,
-        "aria-label": `Comentario: ${t.message.slice(0, 30)}...`,
-        "aria-expanded": d,
-        style: {
-          ...or(t.status),
-          left: M,
-          top: W,
-          transform: "translate(-50%, -50%)"
-        },
-        onMouseEnter: U,
-        onMouseLeave: X,
-        onClick: j,
-        children: /* @__PURE__ */ l.jsx(nr, { color: "#fff" })
+        "aria-label": `Comentario: ${e.message.slice(0, 30)}...`,
+        "aria-expanded": v,
+        style: fr,
+        onMouseEnter: H,
+        onMouseLeave: er,
+        onClick: X,
+        children: /* @__PURE__ */ l.jsx(go, { color: "var(--ui-color-white, #fff)" })
       }
     ),
-    d && /* @__PURE__ */ l.jsxs(
+    v && /* @__PURE__ */ l.jsxs(
       "div",
       {
-        ref: u,
+        ref: p,
         role: "dialog",
         "aria-label": "Detalle del comentario",
         style: {
-          ...ir,
-          left: M + ke / 2 + 6,
-          top: W
+          ...ho,
+          left: z + _r / 2 + 6,
+          top: T
         },
-        onMouseEnter: K,
-        onMouseLeave: S,
+        onMouseEnter: or,
+        onMouseLeave: tr,
         children: [
-          /* @__PURE__ */ l.jsxs("div", { style: ar, children: [
+          /* @__PURE__ */ l.jsxs("div", { style: xo, children: [
             /* @__PURE__ */ l.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ l.jsx("div", { style: sr(t.status), children: tr(((ne = t.reviewer) == null ? void 0 : ne.name) ?? "Revisor") }),
+              /* @__PURE__ */ l.jsx(mo, { reviewer: e.reviewer, status: e.status }),
               /* @__PURE__ */ l.jsxs("div", { children: [
-                /* @__PURE__ */ l.jsx("div", { style: { fontWeight: 700, fontSize: 14, color: B.textDark }, children: ((oe = t.reviewer) == null ? void 0 : oe.name) ?? "Revisor" }),
-                /* @__PURE__ */ l.jsx("div", { style: { fontSize: 12, color: B.textMuted }, children: "Revisor" })
+                /* @__PURE__ */ l.jsx("div", { style: { fontWeight: 700, fontSize: 14, color: B.textDark }, children: ((nr = e.reviewer) == null ? void 0 : nr.name) ?? "Revisor" }),
+                /* @__PURE__ */ l.jsx("div", { style: { fontSize: 12, color: B.textMuted }, children: ((ir = e.reviewer) == null ? void 0 : ir.job_title) ?? "Revisor" })
               ] })
             ] }),
             /* @__PURE__ */ l.jsx(
               "button",
               {
                 type: "button",
-                "aria-label": t.status === D.VALIDATED ? "Eliminar comentario" : "Cerrar",
-                style: lr,
-                disabled: C,
-                onClick: (x) => {
-                  x.stopPropagation(), t.status === D.VALIDATED ? H() : G();
+                "aria-label": e.status === k.VALIDATED ? "Eliminar comentario" : "Cerrar",
+                style: wo,
+                disabled: P,
+                onClick: (_) => {
+                  _.stopPropagation(), e.status === k.VALIDATED ? dr() : Y();
                 },
-                onMouseDown: (x) => x.stopPropagation(),
+                onMouseDown: (_) => _.stopPropagation(),
                 children: "✕"
               }
             )
           ] }),
-          /* @__PURE__ */ l.jsxs("div", { style: ur(t.status), children: [
-            t.status === D.VALIDATED && /* @__PURE__ */ l.jsx(rr, {}),
-            er[t.status] ?? t.status
+          /* @__PURE__ */ l.jsxs("div", { style: { padding: 12, display: "flex", alignItems: "flex-start", flexDirection: "column", gap: 4 }, children: [
+            /* @__PURE__ */ l.jsxs("div", { style: _o(e.status), children: [
+              e.status === k.VALIDATED && /* @__PURE__ */ l.jsx(po, {}),
+              fo[e.status] ?? e.status
+            ] }),
+            /* @__PURE__ */ l.jsx("div", { style: { color: B.textDark, lineHeight: 1.5, marginBottom: 12, marginTop: 12 }, children: e.message }),
+            /* @__PURE__ */ l.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: "100%" }, children: [
+              /* @__PURE__ */ l.jsx("label", { style: Eo, htmlFor: `comment-status-${e.id}`, children: "Cambiar estado" }),
+              /* @__PURE__ */ l.jsx(
+                "select",
+                {
+                  id: `comment-status-${e.id}`,
+                  style: Ro,
+                  value: e.status,
+                  disabled: P,
+                  onChange: (_) => J(_.target.value),
+                  onMouseDown: (_) => _.stopPropagation(),
+                  "aria-label": "Cambiar estado del comentario",
+                  children: ko.map((_) => /* @__PURE__ */ l.jsx("option", { value: _, children: co[_] }, _))
+                }
+              ),
+              V && /* @__PURE__ */ l.jsx("div", { style: { marginTop: 8, fontSize: 11, color: "var(--ui-color-text-danger-default, rgb(240, 69, 69))" }, children: V })
+            ] })
           ] }),
-          /* @__PURE__ */ l.jsx("div", { style: { color: B.textDark, lineHeight: 1.5 }, children: t.message }),
-          /* @__PURE__ */ l.jsx("label", { style: cr, htmlFor: `comment-status-${t.id}`, children: "Cambiar estado" }),
-          /* @__PURE__ */ l.jsx(
-            "select",
-            {
-              id: `comment-status-${t.id}`,
-              style: dr,
-              value: t.status,
-              disabled: C,
-              onChange: (x) => V(x.target.value),
-              onMouseDown: (x) => x.stopPropagation(),
-              "aria-label": "Cambiar estado del comentario",
-              children: J.map((x) => /* @__PURE__ */ l.jsx("option", { value: x, children: Kt[x] }, x))
-            }
-          ),
-          O && /* @__PURE__ */ l.jsx("div", { style: { marginTop: 8, fontSize: 11, color: "rgb(240, 69, 69)" }, children: O }),
-          /* @__PURE__ */ l.jsxs("div", { style: fr, children: [
+          /* @__PURE__ */ l.jsxs("div", { style: So, children: [
             /* @__PURE__ */ l.jsx(
               "button",
               {
                 type: "button",
-                style: pr,
-                onMouseDown: (x) => x.stopPropagation(),
-                onClick: (x) => {
-                  x.stopPropagation(), G();
+                style: Co,
+                onMouseDown: (_) => _.stopPropagation(),
+                onClick: (_) => {
+                  _.stopPropagation(), Y();
                 },
                 children: "Cerrar"
               }
             ),
-            t.status !== D.VALIDATED && /* @__PURE__ */ l.jsx(
-              "button",
-              {
-                type: "button",
-                style: hr,
-                disabled: C,
-                onMouseDown: (x) => x.stopPropagation(),
-                onClick: (x) => {
-                  x.stopPropagation(), V("validated");
-                },
-                children: "Resolver hilo"
-              }
-            )
+            e.status !== k.VALIDATED && /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+              /* @__PURE__ */ l.jsx("style", { children: `
+                  .${yr}:hover:not(:disabled) {
+                    background-color: var(--ui-color-bg-fill-success-hover, #16a34a) !important;
+                  }
+                  .${yr}:active:not(:disabled) {
+                    background-color: var(--ui-color-bg-fill-success-pressed, #15803d) !important;
+                  }
+                  .${yr}:disabled {
+                    background-color: var(--ui-color-bg-fill-success-default, #22c55e) !important;
+                    opacity: 0.7;
+                    cursor: not-allowed;
+                  }
+                ` }),
+              /* @__PURE__ */ l.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: yr,
+                  style: Po,
+                  disabled: P,
+                  onMouseDown: (_) => _.stopPropagation(),
+                  onClick: (_) => {
+                    _.stopPropagation(), J("validated");
+                  },
+                  children: "Validar"
+                }
+              )
+            ] })
           ] })
         ]
       }
     )
   ] });
 }
-const gr = 25, yr = 36;
-function mr(t) {
-  const o = /* @__PURE__ */ new Map();
-  for (let n = 0; n < t.length; n++) {
-    const i = t[n], { x: a, y: d } = ye(i);
-    let g = 0;
-    for (let p = 0; p < n; p++) {
-      const m = t[p], { x: R, y: h } = ye(m);
-      Math.hypot(a - R, d - h) < gr && g++;
+const Vo = Rr(jo), To = 25, Do = 36;
+function Io(e) {
+  const t = /* @__PURE__ */ new Map();
+  for (let o = 0; o < e.length; o++) {
+    const i = e[o], { x: a, y: s } = wr(i), { x: v, y: g } = Fr(a, s);
+    let d = 0;
+    for (let w = 0; w < o; w++) {
+      const { x, y } = wr(e[w]), { x: P, y: S } = Fr(x, y);
+      Math.hypot(v - P, g - S) < To && d++;
     }
-    o.set(i.id, { dx: g * yr, dy: 0 });
+    t.set(i.id, { dx: d * Do, dy: 0 });
   }
-  return o;
+  return t;
 }
-function xr() {
+function Oo() {
   return typeof window > "u" ? "" : `${window.innerWidth}x${window.innerHeight}`;
 }
-function Er({
-  apiUrl: t,
-  apiKey: o,
-  reviewMode: n,
-  reviewers: i,
-  comments: a,
-  loadComments: d,
+function Lo({
+  apiUrl: e,
+  apiKey: t,
+  reviewMode: o,
+  setReviewMode: i,
+  reviewers: a,
+  comments: s,
+  loadComments: v,
   commentsLoadFailed: g = !1
 }) {
-  const [p, m] = A(null), R = ge(null), [h, C] = A(null), w = L(() => {
-    p && (p.style.outline = "", p.style.outlineOffset = "", m(null));
-  }, [p]), O = L(() => {
-    R.current && (R.current.style.outline = "", R.current.style.outlineOffset = "", R.current = null);
+  const [d, w] = A(null), x = mr(null), [y, P] = A(null), S = j(() => {
+    d && (d.style.outline = "", d.style.outlineOffset = "", w(null));
+  }, [d]), V = j(() => {
+    x.current && (x.current.style.outline = "", x.current.style.outlineOffset = "", x.current = null);
   }, []);
-  $(() => {
-    n || (w(), O());
-  }, [n, w, O]), $(() => {
+  F(() => {
+    o || (S(), V());
+  }, [o, S, V]), F(() => {
     if (typeof document > "u") return;
-    const S = document.body.style.cursor;
-    return h ? document.body.style.cursor = "default" : n && (document.body.style.cursor = "crosshair"), () => {
-      document.body.style.cursor = S;
+    const m = document.body.style.cursor;
+    return y ? document.body.style.cursor = "default" : o && (document.body.style.cursor = "crosshair"), () => {
+      document.body.style.cursor = m;
     };
-  }, [n, h]);
-  const _ = L(
-    (S) => {
-      if (!n || h) return;
-      const j = S.target.nodeType === Node.ELEMENT_NODE ? S.target : S.target.parentElement;
-      j && (w(), m(j), j.style.outline = "2px solid #ff4d4f", j.style.outlineOffset = "2px");
+  }, [o, y]);
+  const $ = j((m) => {
+    var z;
+    if (!m || typeof document > "u" || m === document.body || m === document.documentElement) return !0;
+    const C = (z = m.tagName) == null ? void 0 : z.toUpperCase();
+    return C === "BODY" || C === "HTML" ? !0 : m.parentElement !== document.body ? !1 : m.id === "root" || m.getAttribute("data-review-layer-host") != null || document.body.children.length === 1;
+  }, []), L = j(
+    (m) => {
+      if (!o || y) return;
+      const C = m.target.nodeType === Node.ELEMENT_NODE ? m.target : m.target.parentElement;
+      !C || $(C) || (S(), w(C), C.style.outline = "2px solid var(--ui-color-bg-fill-danger-default, #ff4d4f)", C.style.outlineOffset = "2px");
     },
-    [n, h, w]
-  ), I = L(
-    (S) => {
-      var M;
-      if (h) return;
-      const j = S.relatedTarget;
-      p && (!j || !p.contains(j)) && !(j && ((M = p.contains) != null && M.call(p, j))) && w();
+    [o, y, S, $]
+  ), c = j(
+    (m) => {
+      var z;
+      if (y) return;
+      const C = m.relatedTarget;
+      d && (!C || !d.contains(C)) && !(C && ((z = d.contains) != null && z.call(d, C))) && S();
     },
-    [p, h, w]
-  ), z = L(
-    (S) => {
-      if (!n || h) return;
-      S.preventDefault(), S.stopPropagation();
-      const j = S.target;
-      if (!j || j.closest("[data-review-layer-pin]") || j.closest("[data-review-layer-modal]")) return;
-      w();
-      const M = j;
-      R.current = M, M.style.outline = "2px solid #ff4d4f", M.style.outlineOffset = "2px";
-      const W = M.getBoundingClientRect(), re = $t(j), { relativeX: G, relativeY: V } = Nt(W);
-      C({
-        position: { x: W.left + W.width / 2, y: W.bottom },
+    [d, y, S]
+  ), p = j(
+    (m) => {
+      if (!o || y) return;
+      const C = m.target;
+      if (!C || $(C) || C.closest("[data-review-layer-root]")) return;
+      m.preventDefault(), m.stopPropagation(), S();
+      const z = C;
+      x.current = z, z.style.outline = "2px solid var(--ui-color-bg-fill-danger-default, #ff4d4f)", z.style.outlineOffset = "2px";
+      const T = z.getBoundingClientRect(), G = Ye(C), { relativeX: Y, relativeY: J } = He(T);
+      P({
+        position: { x: T.left + T.width / 2, y: T.bottom },
         payload: {
-          selector: re,
-          x: Math.round(W.left),
-          y: Math.round(W.top),
-          relativeX: G,
-          relativeY: V,
-          width: Math.round(W.width),
-          height: Math.round(W.height),
+          selector: G,
+          x: Math.round(T.left),
+          y: Math.round(T.top),
+          relativeX: Y,
+          relativeY: J,
+          width: Math.round(T.width),
+          height: Math.round(T.height),
           url: typeof window < "u" && window.location.pathname || "/",
-          viewport: xr(),
+          viewport: Oo(),
           userAgent: typeof navigator < "u" ? navigator.userAgent : "",
           pageTitle: typeof document < "u" ? document.title : ""
         }
       });
     },
-    [n, h, w]
+    [o, y, S, $]
   );
-  $(() => {
-    if (n)
-      return document.addEventListener("mouseover", _, !0), document.addEventListener("mouseout", I, !0), document.addEventListener("click", z, !0), () => {
-        document.removeEventListener("mouseover", _, !0), document.removeEventListener("mouseout", I, !0), document.removeEventListener("click", z, !0);
+  F(() => {
+    if (o)
+      return document.addEventListener("mouseover", L, !0), document.addEventListener("mouseout", c, !0), document.addEventListener("click", p, !0), () => {
+        document.removeEventListener("mouseover", L, !0), document.removeEventListener("mouseout", c, !0), document.removeEventListener("click", p, !0);
       };
-  }, [n, _, I, z]);
-  const [u, f] = A(0);
-  $(() => {
+  }, [o, L, c, p]);
+  const [I, N] = A(0);
+  F(() => {
     if (typeof window > "u") return;
-    const S = () => f((j) => j + 1);
-    return window.addEventListener("resize", S), window.addEventListener("scroll", S, !0), () => {
-      window.removeEventListener("resize", S), window.removeEventListener("scroll", S, !0);
+    const m = () => N((C) => C + 1);
+    return window.addEventListener("resize", m), window.addEventListener("scroll", m, !0), () => {
+      window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0);
     };
   }, []);
-  const k = Ot(
-    () => mr(a),
-    [a, u]
-  ), U = {
+  const H = $r(
+    () => Io(s),
+    [s, I]
+  ), er = j(() => {
+    V(), P(null);
+  }, [V]), or = {
     position: "fixed",
     inset: 0,
     zIndex: 999999,
     pointerEvents: "none",
-    cursor: n ? "crosshair" : void 0
-  }, X = /* @__PURE__ */ l.jsxs("div", { style: U, "aria-hidden": !0, children: [
-    n && /* @__PURE__ */ l.jsx(
+    cursor: o ? "crosshair" : void 0
+  }, tr = /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    /* @__PURE__ */ l.jsx("div", { style: or, "aria-hidden": !0, "data-review-layer-root": !0 }),
+    o && /* @__PURE__ */ l.jsxs(
       "div",
       {
+        "data-review-layer-root": !0,
         style: {
           position: "fixed",
-          top: 10,
-          left: 10,
+          top: "var(--ui-positive-Value_250, 10px)",
+          left: "var(--ui-positive-Value_250, 10px)",
           zIndex: 1e6,
-          padding: "6px 12px",
-          backgroundColor: "#ff4d4f",
-          color: "#fff",
-          borderRadius: 6,
-          fontSize: 12,
-          fontWeight: 500,
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--ui-positive-Value_250, 10px)",
+          padding: "var(--ui-positive-Value_150, 6px) var(--ui-positive-Value_300, 12px)",
+          backgroundColor: "var(--ui-color-bg-fill-danger-default, #ff4d4f)",
+          color: "var(--ui-color-text-on-color, #fff)",
+          borderRadius: "var(--ui-radius_6, 6px)",
+          fontSize: "var(--ui-font-size-xs, 12px)",
+          fontWeight: "var(--ui-font-weight-medium, 500)",
           pointerEvents: "auto"
         },
-        children: "Modo revisión (Shift+R para salir)"
+        children: [
+          /* @__PURE__ */ l.jsx("span", { children: "Modo revisión (Shift+R para salir)" }),
+          /* @__PURE__ */ l.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => i(!1),
+              "aria-label": "Salir del modo revisión",
+              style: {
+                padding: 0,
+                margin: 0,
+                width: 20,
+                height: 20,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                borderRadius: "var(--ui-radius_6, 6px)",
+                backgroundColor: "rgba(255,255,255,0.2)",
+                color: "inherit",
+                fontSize: 14,
+                lineHeight: 1,
+                cursor: "pointer"
+              },
+              children: "×"
+            }
+          )
+        ]
       }
     ),
     g && /* @__PURE__ */ l.jsxs(
@@ -1430,19 +1574,19 @@ function Er({
       {
         style: {
           position: "fixed",
-          bottom: 16,
+          bottom: "var(--ui-positive-Value_400, 16px)",
           left: "50%",
           transform: "translateX(-50%)",
           display: "flex",
           alignItems: "center",
-          gap: 10,
-          padding: "8px 14px",
-          backgroundColor: "#fff",
-          border: "1px solid #e8e8e8",
-          borderRadius: 8,
-          boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
-          fontSize: 12,
-          color: "#333",
+          gap: "var(--ui-positive-Value_250, 10px)",
+          padding: "var(--ui-positive-Value_200, 8px) var(--ui-positive-Value_350, 14px)",
+          backgroundColor: "var(--ui-color-bg-surface-default, #fff)",
+          border: "1px solid var(--ui-color-border-subtle, #e8e8e8)",
+          borderRadius: "var(--ui-radius_8, 8px)",
+          boxShadow: "0 2px 12px var(--ui-color-black-alpha-10, rgba(0,0,0,0.1))",
+          fontSize: "var(--ui-font-size-xs, 12px)",
+          color: "var(--ui-color-text-primary, #333)",
           zIndex: 999997,
           pointerEvents: "auto"
         },
@@ -1452,15 +1596,15 @@ function Er({
             "button",
             {
               type: "button",
-              onClick: () => d(),
+              onClick: () => v(),
               style: {
-                padding: "4px 10px",
-                fontSize: 12,
-                fontWeight: 600,
-                backgroundColor: "rgb(33, 196, 94)",
-                color: "#fff",
+                padding: "var(--ui-positive-Value_100, 4px) var(--ui-positive-Value_250, 10px)",
+                fontSize: "var(--ui-font-size-xs, 12px)",
+                fontWeight: "var(--ui-font-weight-semibold, 600)",
+                backgroundColor: "var(--ui-color-bg-fill-success-default, rgb(33, 196, 94))",
+                color: "var(--ui-color-text-on-color, #fff)",
                 border: "none",
-                borderRadius: 6,
+                borderRadius: "var(--ui-radius_6, 6px)",
                 cursor: "pointer"
               },
               children: "Reintentar"
@@ -1469,192 +1613,528 @@ function Er({
         ]
       }
     ),
-    a.map((S) => /* @__PURE__ */ l.jsx("div", { "data-review-layer-pin": !0, style: { pointerEvents: "auto" }, children: /* @__PURE__ */ l.jsx(
-      vr,
+    s.map((m) => /* @__PURE__ */ l.jsx("div", { "data-review-layer-pin": !0, style: { pointerEvents: "auto" }, children: /* @__PURE__ */ l.jsx(
+      Vo,
       {
-        comment: S,
-        offset: k.get(S.id),
-        apiUrl: t,
-        apiKey: o,
-        onStatusChange: d
+        comment: m,
+        offset: H.get(m.id),
+        apiUrl: e,
+        apiKey: t,
+        onStatusChange: v,
+        reviewMode: o
       }
-    ) }, S.id)),
-    h && /* @__PURE__ */ l.jsx("div", { "data-review-layer-modal": !0, style: { pointerEvents: "auto" }, children: /* @__PURE__ */ l.jsx(
-      qt,
+    ) }, m.id)),
+    y && /* @__PURE__ */ l.jsx("div", { "data-review-layer-modal": !0, style: { pointerEvents: "auto" }, children: /* @__PURE__ */ l.jsx(
+      ao,
       {
-        apiUrl: t,
-        apiKey: o,
-        reviewers: i,
-        position: h.position,
-        payload: h.payload,
-        onClose: () => {
-          O(), C(null);
-        },
-        onSuccess: d
+        apiUrl: e,
+        apiKey: t,
+        reviewers: a,
+        position: y.position,
+        payload: y.payload,
+        onClose: er,
+        onSuccess: v
       }
     ) })
-  ] }), K = typeof document < "u" ? document.body : null;
-  return K ? Ke(X, K) : null;
+  ] }), X = typeof document < "u" ? document.body : null;
+  return X ? se(tr, X) : null;
 }
-function wr(t, o, n) {
-  const i = L(() => {
-    t && n((a) => !a);
-  }, [t, n]);
-  $(() => {
-    if (!t) return;
-    const a = (d) => {
-      (d.key === "r" || d.key === "R" || d.code === "KeyR") && d.shiftKey && (d.preventDefault(), i());
+const zo = `/**\r
+ * Tokens de diseño UI para review-layer-react.\r
+ * Las variables se inyectan en :root al montar ReviewProvider.\r
+ * Puedes sobrescribirlas en tu app para adaptar el tema.\r
+ */\r
+:root {\r
+  /* Colores base */\r
+  --ui-color-white: rgb(255, 255, 255);\r
+  --ui-color-black: rgb(0, 0, 0);\r
+  --ui-color-red-50: rgb(255, 242, 242);\r
+  --ui-color-red-100: rgb(252, 227, 227);\r
+  --ui-color-red-200: rgb(250, 189, 189);\r
+  --ui-color-red-300: rgb(245, 148, 148);\r
+  --ui-color-red-400: rgb(242, 107, 107);\r
+  --ui-color-red-500: rgb(240, 69, 69);\r
+  --ui-color-red-600: rgb(212, 61, 61);\r
+  --ui-color-red-700: rgb(184, 51, 51);\r
+  --ui-color-red-800: rgb(156, 43, 43);\r
+  --ui-color-red-900: rgb(128, 36, 36);\r
+  --ui-color-orange-50: rgb(255, 247, 242);\r
+  --ui-color-orange-100: rgb(252, 237, 227);\r
+  --ui-color-orange-200: rgb(252, 209, 176);\r
+  --ui-color-orange-300: rgb(250, 176, 125);\r
+  --ui-color-orange-400: rgb(250, 145, 74);\r
+  --ui-color-orange-500: rgb(250, 115, 23);\r
+  --ui-color-orange-600: rgb(219, 102, 20);\r
+  --ui-color-orange-700: rgb(189, 87, 18);\r
+  --ui-color-orange-800: rgb(158, 74, 13);\r
+  --ui-color-orange-900: rgb(128, 59, 10);\r
+  --ui-color-yellow-50: rgb(255, 250, 242);\r
+  --ui-color-yellow-100: rgb(252, 245, 227);\r
+  --ui-color-yellow-200: rgb(247, 230, 173);\r
+  --ui-color-yellow-300: rgb(242, 214, 117);\r
+  --ui-color-yellow-400: rgb(240, 196, 64);\r
+  --ui-color-yellow-500: rgb(235, 179, 8);\r
+  --ui-color-yellow-600: rgb(209, 158, 8);\r
+  --ui-color-yellow-700: rgb(181, 140, 5);\r
+  --ui-color-yellow-800: rgb(156, 120, 5);\r
+  --ui-color-yellow-900: rgb(128, 97, 5);\r
+  --ui-color-lime-50: rgb(250, 255, 242);\r
+  --ui-color-lime-100: rgb(242, 252, 227);\r
+  --ui-color-lime-200: rgb(214, 240, 176);\r
+  --ui-color-lime-300: rgb(186, 227, 125);\r
+  --ui-color-lime-400: rgb(161, 217, 74);\r
+  --ui-color-lime-500: rgb(133, 204, 23);\r
+  --ui-color-lime-600: rgb(120, 186, 20);\r
+  --ui-color-lime-700: rgb(107, 166, 18);\r
+  --ui-color-lime-800: rgb(97, 148, 15);\r
+  --ui-color-lime-900: rgb(84, 128, 13);\r
+  --ui-color-green-50: rgb(242, 255, 245);\r
+  --ui-color-green-100: rgb(227, 252, 237);\r
+  --ui-color-green-200: rgb(179, 240, 201);\r
+  --ui-color-green-300: rgb(130, 224, 166);\r
+  --ui-color-green-400: rgb(84, 212, 130);\r
+  --ui-color-green-500: rgb(33, 196, 94);\r
+  --ui-color-green-600: rgb(31, 181, 87);\r
+  --ui-color-green-700: rgb(28, 163, 79);\r
+  --ui-color-green-800: rgb(26, 145, 69);\r
+  --ui-color-green-900: rgb(23, 128, 61);\r
+  --ui-color-cyan-50: rgb(242, 252, 255);\r
+  --ui-color-cyan-100: rgb(227, 250, 252);\r
+  --ui-color-cyan-200: rgb(171, 232, 242);\r
+  --ui-color-cyan-300: rgb(117, 217, 232);\r
+  --ui-color-cyan-400: rgb(61, 199, 222);\r
+  --ui-color-cyan-500: rgb(5, 181, 212);\r
+  --ui-color-cyan-600: rgb(5, 163, 191);\r
+  --ui-color-cyan-700: rgb(5, 145, 171);\r
+  --ui-color-cyan-800: rgb(5, 128, 148);\r
+  --ui-color-cyan-900: rgb(5, 110, 128);\r
+  --ui-color-azure-50: rgb(242, 250, 255);\r
+  --ui-color-azure-100: rgb(227, 245, 252);\r
+  --ui-color-azure-200: rgb(173, 224, 247);\r
+  --ui-color-azure-300: rgb(120, 204, 242);\r
+  --ui-color-azure-400: rgb(69, 186, 237);\r
+  --ui-color-azure-500: rgb(13, 166, 232);\r
+  --ui-color-azure-600: rgb(13, 148, 207);\r
+  --ui-color-azure-700: rgb(10, 128, 181);\r
+  --ui-color-azure-800: rgb(10, 110, 156);\r
+  --ui-color-azure-900: rgb(8, 89, 128);\r
+  --ui-color-blue-50: rgb(242, 245, 255);\r
+  --ui-color-blue-100: rgb(227, 232, 252);\r
+  --ui-color-blue-200: rgb(184, 196, 237);\r
+  --ui-color-blue-300: rgb(140, 161, 222);\r
+  --ui-color-blue-400: rgb(97, 125, 209);\r
+  --ui-color-blue-500: rgb(54, 89, 194);\r
+  --ui-color-blue-600: rgb(51, 82, 176);\r
+  --ui-color-blue-700: rgb(46, 74, 161);\r
+  --ui-color-blue-800: rgb(41, 66, 145);\r
+  --ui-color-blue-900: rgb(36, 59, 128);\r
+  --ui-color-violet-50: rgb(245, 242, 255);\r
+  --ui-color-violet-100: rgb(237, 227, 252);\r
+  --ui-color-violet-200: rgb(209, 186, 250);\r
+  --ui-color-violet-300: rgb(181, 143, 245);\r
+  --ui-color-violet-400: rgb(153, 102, 242);\r
+  --ui-color-violet-500: rgb(125, 59, 237);\r
+  --ui-color-violet-600: rgb(110, 51, 209);\r
+  --ui-color-violet-700: rgb(97, 46, 184);\r
+  --ui-color-violet-800: rgb(82, 38, 156);\r
+  --ui-color-violet-900: rgb(66, 31, 128);\r
+  --ui-color-magenta-50: rgb(255, 242, 247);\r
+  --ui-color-magenta-100: rgb(252, 227, 240);\r
+  --ui-color-magenta-200: rgb(247, 184, 214);\r
+  --ui-color-magenta-300: rgb(245, 140, 186);\r
+  --ui-color-magenta-400: rgb(240, 94, 161);\r
+  --ui-color-magenta-500: rgb(235, 51, 135);\r
+  --ui-color-magenta-600: rgb(209, 46, 120);\r
+  --ui-color-magenta-700: rgb(181, 41, 105);\r
+  --ui-color-magenta-800: rgb(156, 33, 89);\r
+  --ui-color-magenta-900: rgb(128, 28, 74);\r
+  --ui-color-rose-50: rgb(255, 242, 245);\r
+  --ui-color-rose-100: rgb(252, 227, 232);\r
+  --ui-color-rose-200: rgb(245, 179, 194);\r
+  --ui-color-rose-300: rgb(240, 128, 153);\r
+  --ui-color-rose-400: rgb(232, 79, 112);\r
+  --ui-color-rose-500: rgb(224, 28, 71);\r
+  --ui-color-rose-600: rgb(201, 26, 64);\r
+  --ui-color-rose-700: rgb(176, 23, 56);\r
+  --ui-color-rose-800: rgb(153, 20, 48);\r
+  --ui-color-rose-900: rgb(128, 15, 41);\r
+  --ui-color-light-gray-50: rgb(247, 247, 250);\r
+  --ui-color-light-gray-100: rgb(240, 242, 242);\r
+  --ui-color-light-gray-200: rgb(224, 227, 230);\r
+  --ui-color-light-gray-300: rgb(212, 214, 217);\r
+  --ui-color-light-gray-400: rgb(199, 199, 204);\r
+  --ui-color-light-gray-500: rgb(186, 189, 191);\r
+  --ui-color-light-gray-600: rgb(171, 173, 179);\r
+  --ui-color-light-gray-700: rgb(158, 163, 166);\r
+  --ui-color-light-gray-800: rgb(145, 148, 153);\r
+  --ui-color-light-gray-900: rgb(133, 135, 140);\r
+  --ui-color-dark-gray-50: rgb(120, 122, 128);\r
+  --ui-color-dark-gray-100: rgb(107, 110, 115);\r
+  --ui-color-dark-gray-200: rgb(97, 99, 105);\r
+  --ui-color-dark-gray-300: rgb(89, 89, 94);\r
+  --ui-color-dark-gray-400: rgb(77, 79, 84);\r
+  --ui-color-dark-gray-500: rgb(69, 69, 74);\r
+  --ui-color-dark-gray-600: rgb(59, 61, 64);\r
+  --ui-color-dark-gray-700: rgb(48, 51, 54);\r
+  --ui-color-dark-gray-800: rgb(38, 41, 43);\r
+  --ui-color-dark-gray-900: rgb(31, 31, 33);\r
+  --ui-color-black-alpha-transparent: rgba(0, 0, 0, 0);\r
+  --ui-color-black-alpha-5: rgba(0, 0, 0, 0.05);\r
+  --ui-color-black-alpha-10: rgba(0, 0, 0, 0.1);\r
+  --ui-color-black-alpha-20: rgba(0, 0, 0, 0.2);\r
+  --ui-color-black-alpha-30: rgba(0, 0, 0, 0.3);\r
+  --ui-color-black-alpha-40: rgba(0, 0, 0, 0.4);\r
+  --ui-color-black-alpha-50: rgba(0, 0, 0, 0.5);\r
+  --ui-color-black-alpha-60: rgba(0, 0, 0, 0.6);\r
+  --ui-color-black-alpha-70: rgba(0, 0, 0, 0.7);\r
+  --ui-color-black-alpha-80: rgba(0, 0, 0, 0.8);\r
+  --ui-color-black-alpha-90: rgba(0, 0, 0, 0.9);\r
+\r
+  /* Espaciado positivo */\r
+  --ui-positive-Value_0: 0;\r
+  --ui-positive-Value_12: 0.66px;\r
+  --ui-positive-Value_25: 1px;\r
+  --ui-positive-Value_50: 2px;\r
+  --ui-positive-Value_100: 4px;\r
+  --ui-positive-Value_150: 6px;\r
+  --ui-positive-Value_200: 8px;\r
+  --ui-positive-Value_250: 10px;\r
+  --ui-positive-Value_275: 11px;\r
+  --ui-positive-Value_300: 12px;\r
+  --ui-positive-Value_325: 13px;\r
+  --ui-positive-Value_350: 14px;\r
+  --ui-positive-Value_400: 16px;\r
+  --ui-positive-Value_450: 18px;\r
+  --ui-positive-Value_500: 20px;\r
+  --ui-positive-Value_600: 24px;\r
+  --ui-positive-Value_700: 28px;\r
+  --ui-positive-Value_750: 30px;\r
+  --ui-positive-Value_800: 32px;\r
+  --ui-positive-Value_900: 36px;\r
+  --ui-positive-Value_1000: 40px;\r
+  --ui-positive-Value_1200: 48px;\r
+  --ui-positive-Value_1400: 56px;\r
+  --ui-positive-Value_1600: 64px;\r
+  --ui-positive-Value_2000: 80px;\r
+  --ui-positive-Value_2400: 96px;\r
+  --ui-positive-Value_2800: 112px;\r
+  --ui-positive-Value_3200: 128px;\r
+  --ui-positive-Value_full: 9999px;\r
+\r
+  /* Sombras */\r
+  --ui-shadow-01-x: 0;\r
+  --ui-shadow-01-y: 1px;\r
+  --ui-shadow-01-blur: 2px;\r
+  --ui-shadow-01-Spread: 0;\r
+  --ui-shadow-02-x: 0;\r
+  --ui-shadow-02-y: 2px;\r
+  --ui-shadow-02-blur: 4px;\r
+  --ui-shadow-02-Spread: -1px;\r
+  --ui-shadow-03-x: 0;\r
+  --ui-shadow-03-y: 4px;\r
+  --ui-shadow-03-blur: 8px;\r
+  --ui-shadow-03-Spread: -2px;\r
+  --ui-shadow-04-x: 0;\r
+  --ui-shadow-04-y: 8px;\r
+  --ui-shadow-04-blur: 16px;\r
+  --ui-shadow-04-Spread: -4px;\r
+  --ui-shadow-05-x: 0;\r
+  --ui-shadow-05-y: 16px;\r
+  --ui-shadow-05-blur: 24px;\r
+  --ui-shadow-05-Spread: -8px;\r
+  --ui-shadow-01-Color: var(--ui-color-black-alpha-10);\r
+  --ui-shadow-02-Color: var(--ui-color-black-alpha-20);\r
+  --ui-shadow-03-Color: var(--ui-color-black-alpha-20);\r
+  --ui-shadow-04-Color: var(--ui-color-black-alpha-30);\r
+  --ui-shadow-05-Color: var(--ui-color-black-alpha-30);\r
+\r
+  /* Z-index */\r
+  --ui-z-hide: -1;\r
+  --ui-z-base: 0;\r
+  --ui-z-raised: 100;\r
+  --ui-z-sticky: 200;\r
+  --ui-z-shell: 300;\r
+  --ui-z-dropdown: 400;\r
+  --ui-z-popover: 500;\r
+  --ui-z-tooltip: 600;\r
+  --ui-z-modalBackdrop: 690;\r
+  --ui-z-modal: 700;\r
+  --ui-z-toast: 800;\r
+  --ui-z-overlay: 900;\r
+  --ui-z-max: 99999;\r
+\r
+  /* Tipografía */\r
+  --ui-font-family-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\r
+  --ui-font-family-mono: "IBM Plex Mono";\r
+  --ui-font-weight-regular: 400;\r
+  --ui-font-weight-medium: 500;\r
+  --ui-font-weight-semibold: 600;\r
+  --ui-font-weight-bold: 700;\r
+\r
+  /* Radios */\r
+  --ui-radius_0: 0;\r
+  --ui-radius_2: 2px;\r
+  --ui-radius_4: 4px;\r
+  --ui-radius_6: 6px;\r
+  --ui-radius_8: 8px;\r
+  --ui-radius_10: 10px;\r
+  --ui-radius_12: 12px;\r
+  --ui-radius_16: 16px;\r
+  --ui-radius_24: 24px;\r
+  --ui-radius_full: 9999px;\r
+\r
+  /* Semánticos: texto */\r
+  --ui-color-text-primary: var(--ui-color-dark-gray-700);\r
+  --ui-color-text-secondary: var(--ui-color-dark-gray-300);\r
+  --ui-color-text-tertiary: var(--ui-color-dark-gray-100);\r
+  --ui-color-text-disabled: var(--ui-color-light-gray-500);\r
+  --ui-color-text-on-color: var(--ui-color-white);\r
+  --ui-color-text-danger-default: var(--ui-color-red-700);\r
+  --ui-color-text-danger-hover: var(--ui-color-red-800);\r
+  --ui-color-text-danger-pressed: var(--ui-color-red-900);\r
+\r
+  /* Semánticos: bordes */\r
+  --ui-color-border-default: var(--ui-color-light-gray-400);\r
+  --ui-color-border-subtle: var(--ui-color-light-gray-300);\r
+  --ui-color-border-strong: var(--ui-color-dark-gray-400);\r
+  --ui-color-border-danger: var(--ui-color-red-500);\r
+\r
+  /* Semánticos: superficies y fondos */\r
+  --ui-color-bg-surface-default: var(--ui-color-white);\r
+  --ui-color-bg-surface-secondary-default: var(--ui-color-light-gray-50);\r
+  --ui-color-bg-surface-secondary-hover: var(--ui-color-light-gray-100);\r
+  --ui-color-bg-fill-danger-default: var(--ui-color-red-500);\r
+  --ui-color-bg-fill-danger-hover: var(--ui-color-red-600);\r
+  --ui-color-bg-fill-danger-pressed: var(--ui-color-red-700);\r
+  --ui-color-bg-fill-success-default: var(--ui-color-green-500);\r
+  --ui-color-bg-fill-success-hover: var(--ui-color-green-600);\r
+  --ui-color-bg-fill-success-pressed: var(--ui-color-green-700);\r
+  --ui-color-bg-surface-success-default: var(--ui-color-green-50);\r
+  --ui-color-bg-surface-success-hover: var(--ui-color-green-100);\r
+  --ui-color-bg-surface-success-selected: var(--ui-color-green-200);\r
+  --ui-color-bg-surface-danger-default: var(--ui-color-red-50);\r
+  --ui-color-bg-surface-danger-hover: var(--ui-color-red-100);\r
+  --ui-color-bg-surface-danger-selected: var(--ui-color-red-200);\r
+  --ui-color-bg-surface-warning-default: var(--ui-color-yellow-50);\r
+  --ui-color-bg-surface-warning-hover: var(--ui-color-yellow-100);\r
+  --ui-color-bg-surface-warning-selected: var(--ui-color-yellow-200);\r
+\r
+  /* Espaciado (space) */\r
+  --ui-Positive-space_0: var(--ui-positive-Value_0);\r
+  --ui-Positive-space_2: var(--ui-positive-Value_100);\r
+  --ui-Positive-space_4: var(--ui-positive-Value_100);\r
+  --ui-Positive-space_6: var(--ui-positive-Value_150);\r
+  --ui-Positive-space_8: var(--ui-positive-Value_200);\r
+  --ui-Positive-space_10: var(--ui-positive-Value_250);\r
+  --ui-Positive-space_12: var(--ui-positive-Value_300);\r
+  --ui-Positive-space_16: var(--ui-positive-Value_400);\r
+  --ui-Positive-space_20: var(--ui-positive-Value_500);\r
+  --ui-Positive-space_24: var(--ui-positive-Value_600);\r
+  --ui-Positive-space_28: var(--ui-positive-Value_700);\r
+  --ui-Positive-space_32: var(--ui-positive-Value_800);\r
+  --ui-Positive-space_40: var(--ui-positive-Value_1000);\r
+  --ui-Positive-space_48: var(--ui-positive-Value_1200);\r
+  --ui-Positive-space_56: var(--ui-positive-Value_1400);\r
+  --ui-Positive-space_64: var(--ui-positive-Value_1600);\r
+  --ui-Positive-space_80: var(--ui-positive-Value_2000);\r
+  --ui-Positive-space_96: var(--ui-positive-Value_2400);\r
+\r
+  /* Tamaños de fuente */\r
+  --ui-font-size-2xs: var(--ui-positive-Value_250);\r
+  --ui-font-size-xs: var(--ui-positive-Value_300);\r
+  --ui-font-size-sm: var(--ui-positive-Value_350);\r
+  --ui-font-size-md: var(--ui-positive-Value_400);\r
+  --ui-font-size-lg: var(--ui-positive-Value_450);\r
+  --ui-font-size-xl: var(--ui-positive-Value_500);\r
+  --ui-font-size-2xl: var(--ui-positive-Value_600);\r
+  --ui-font-size-3xl: var(--ui-positive-Value_750);\r
+  --ui-font-size-4xl: var(--ui-positive-Value_900);\r
+  --ui-font-size-5xl: var(--ui-positive-Value_1200);\r
+\r
+  /* Line height (muestra) */\r
+  --ui-font-lh-10-normal: 14.5px;\r
+  --ui-font-lh-12-normal: 17.5px;\r
+  --ui-font-lh-14-normal: 20.5px;\r
+  --ui-font-lh-16-normal: 23px;\r
+  --ui-font-lh-18-normal: 26px;\r
+  --ui-font-lh-20-snug: 25px;\r
+\r
+  /* Sombras compuestas (para uso en box-shadow) */\r
+  --ui-shadow-card: 0 4px 16px var(--ui-shadow-01-Color);\r
+  --ui-shadow-popover: 0 var(--ui-shadow-02-y) var(--ui-shadow-02-blur) var(--ui-shadow-02-Color);\r
+  --ui-shadow-modal: 0 var(--ui-shadow-04-y) var(--ui-shadow-04-blur) var(--ui-shadow-04-Color);\r
+}\r
+`;
+function Ao(e, t, o) {
+  const i = j(() => {
+    e && o((a) => !a);
+  }, [e, o]);
+  F(() => {
+    if (!e) return;
+    const a = (s) => {
+      (s.key === "r" || s.key === "R" || s.code === "KeyR") && s.shiftKey && !s.ctrlKey && !s.metaKey && (s.preventDefault(), i());
     };
     return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
-  }, [t, i]);
+  }, [e, i]);
 }
-const br = "review_layer:v1:";
-function Rr(t, o) {
-  if (t == null) return o;
+const Fo = "review_layer:v1:";
+function No(e, t) {
+  if (e == null) return t;
   try {
-    return JSON.parse(t) ?? o;
+    return JSON.parse(e) ?? t;
   } catch {
-    return o;
+    return t;
   }
 }
-function me(t, o, n, i) {
-  const a = `${br}${Sr(t)}:${n}`;
+function Sr(e, t, o, i) {
+  const a = `${Fo}${$o(e)}:${o}`;
   return i != null ? `${a}:${i}` : a;
 }
-function Sr(t) {
-  return t.replace(/\/+$/, "") || "/";
+function $o(e) {
+  return e.replace(/\/+$/, "") || "/";
 }
-function rt(t) {
+function fe(e) {
   if (typeof localStorage > "u") return null;
-  const o = localStorage.getItem(t);
-  return Rr(o, null);
+  const t = localStorage.getItem(e);
+  return No(t, null);
 }
-function nt(t, o) {
+function ve(e, t) {
   if (!(typeof localStorage > "u"))
     try {
-      localStorage.setItem(t, JSON.stringify({ data: o, at: Date.now() }));
+      localStorage.setItem(e, JSON.stringify({ data: t, at: Date.now() }));
     } catch {
     }
 }
-function je(t, o, n) {
-  const i = rt(me(t, o, "comments", n));
+function Lr(e, t, o) {
+  const i = fe(Sr(e, t, "comments", o));
   return (i == null ? void 0 : i.data) ?? null;
 }
-function Cr(t, o, n, i) {
-  nt(me(t, o, "comments", n), i);
+function Mo(e, t, o, i) {
+  ve(Sr(e, t, "comments", o), i);
 }
-function qe(t, o) {
-  const n = rt(me(t, o, "reviewers"));
-  return (n == null ? void 0 : n.data) ?? null;
+function ae(e, t) {
+  const o = fe(Sr(e, t, "reviewers"));
+  return (o == null ? void 0 : o.data) ?? null;
 }
-function _r(t, o, n) {
-  nt(me(t, o, "reviewers"), n);
+function Wo(e, t, o) {
+  ve(Sr(e, t, "reviewers"), o);
 }
-const jr = "https://review-layer-api.onrender.com/api";
-function Ze() {
+const Bo = "https://review-layer-api.onrender.com/api";
+function ue() {
   return typeof window > "u" ? "/" : window.location.pathname || "/";
 }
-const ot = It(null);
-let Te = null;
-function kr() {
-  const t = Lt(ot);
-  if (!t)
+const pe = $e(null);
+let zr = null;
+function Go() {
+  const e = Me(pe);
+  if (!e)
     throw new Error("useReview must be used within ReviewProvider");
-  return t;
+  return e;
 }
-function Dr({
-  children: t,
-  enabled: o = !0,
-  apiUrl: n,
+function Ho({
+  children: e,
+  enabled: t = !0,
+  apiUrl: o,
   apiKey: i
 }) {
-  const a = (n == null ? void 0 : n.trim()) || jr, [d, g] = A(!1), [p, m] = A([]), [R, h] = A([]), [C, w] = A(!1);
-  wr(o, d, g);
-  const O = L(
-    async (u) => {
-      if (!(!o || !a || !i))
+  const a = (o == null ? void 0 : o.trim()) || Bo, [s, v] = A(!1), [g, d] = A([]), [w, x] = A([]), [y, P] = A(!1);
+  Ao(t, s, v);
+  const S = j(
+    async (c) => {
+      if (!(!t || !a || !i))
         try {
-          const f = await Mt(a, i, { signal: u });
-          u != null && u.aborted || (m(f), _r(a, i, f));
-        } catch (f) {
-          if (f instanceof Error && f.name === "AbortError") return;
-          if (!(u != null && u.aborted)) {
-            const k = qe(a, i);
-            k != null && m(k);
+          const p = await Je(a, i, { signal: c });
+          c != null && c.aborted || (d(p), Wo(a, i, p));
+        } catch (p) {
+          if (p instanceof Error && p.name === "AbortError") return;
+          if (!(c != null && c.aborted)) {
+            const I = ae(a, i);
+            I != null && d(I);
           }
         }
     },
-    [o, a, i]
-  ), _ = L(
-    async (u) => {
-      if (!o || !a || !i) return;
-      const f = Ze(), k = je(a, i, f);
-      k != null && h(k);
+    [t, a, i]
+  ), V = j(
+    async (c) => {
+      if (!t || !a || !i) return;
+      const p = ue(), I = Lr(a, i, p);
+      I != null && x(I);
       try {
-        w(!1);
-        const U = await Vt(a, i, f, { signal: u });
-        u != null && u.aborted || (h(U), Cr(a, i, f, U));
-      } catch (U) {
-        if (U instanceof Error && U.name === "AbortError") return;
-        if (!(u != null && u.aborted)) {
-          w(!0);
-          const X = je(a, i, f);
-          X != null && h(X);
+        P(!1);
+        const N = await Ze(a, i, p, { signal: c });
+        c != null && c.aborted || (x(N), Mo(a, i, p, N));
+      } catch (N) {
+        if (N instanceof Error && N.name === "AbortError") return;
+        if (!(c != null && c.aborted)) {
+          P(!0);
+          const H = Lr(a, i, p);
+          H != null && x(H);
         }
       }
     },
-    [o, a, i]
+    [t, a, i]
   );
-  $(() => {
-    if (!o || !a || !i) return;
-    const u = Ze(), f = qe(a, i), k = je(a, i, u);
-    f != null && m(f), k != null && h(k);
-  }, [o, a, i]), $(() => {
-    if (!o || !a || !i) return;
-    const u = `${a}:${i}`;
-    if (Te !== u)
-      return Te = u, O(), _(), () => {
+  F(() => {
+    if (!t || !a || !i) return;
+    const c = ue(), p = ae(a, i), I = Lr(a, i, c);
+    p != null && d(p), I != null && x(I);
+  }, [t, a, i]), F(() => {
+    if (typeof document > "u") return;
+    const c = "review-layer-ui-variables";
+    if (!document.getElementById(c)) {
+      const p = document.createElement("style");
+      p.id = c, p.textContent = zo, document.head.appendChild(p);
+    }
+  }, []), F(() => {
+    if (!t || !a || !i) return;
+    const c = `${a}:${i}`;
+    if (zr !== c)
+      return zr = c, S(), V(), () => {
         setTimeout(() => {
-          Te = null;
+          zr = null;
         }, 0);
       };
-  }, [o, a, i, O, _]), $(() => {
-    if (!o) return;
-    const u = () => _();
-    return window.addEventListener("popstate", u), () => window.removeEventListener("popstate", u);
-  }, [o, _]);
-  const I = {
-    apiUrl: a,
-    apiKey: i,
-    reviewMode: d,
-    setReviewMode: g,
-    reviewers: p,
-    comments: R,
-    loadComments: _,
-    commentsLoadFailed: C
-  }, z = o && typeof document < "u" ? Ke(
+  }, [t, a, i, S, V]), F(() => {
+    if (!t) return;
+    const c = () => V();
+    return window.addEventListener("popstate", c), () => window.removeEventListener("popstate", c);
+  }, [t, V]);
+  const $ = $r(
+    () => ({
+      apiUrl: a,
+      apiKey: i,
+      reviewMode: s,
+      setReviewMode: v,
+      reviewers: g,
+      comments: w,
+      loadComments: V,
+      commentsLoadFailed: y
+    }),
+    [a, i, s, v, g, w, V, y]
+  ), L = t && typeof document < "u" ? se(
     /* @__PURE__ */ l.jsx(
-      Er,
+      Lo,
       {
         apiUrl: a,
         apiKey: i,
-        reviewMode: d,
-        reviewers: p,
-        comments: R,
-        loadComments: _,
-        commentsLoadFailed: C
+        reviewMode: s,
+        setReviewMode: v,
+        reviewers: g,
+        comments: w,
+        loadComments: V,
+        commentsLoadFailed: y
       }
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ l.jsxs(ot.Provider, { value: I, children: [
-    t,
-    z
+  return /* @__PURE__ */ l.jsxs(pe.Provider, { value: $, children: [
+    e,
+    L
   ] });
 }
 export {
-  jr as DEFAULT_API_URL,
-  Dr as ReviewProvider,
-  kr as useReview
+  Bo as DEFAULT_API_URL,
+  Ho as ReviewProvider,
+  Go as useReview
 };
 //# sourceMappingURL=review-layer-react.js.map