@ws-ui/http-handlers-editor 1.13.0-dev.5 → 1.13.0-dev.7

package/dist/index.es.js

@@ -5,12 +5,12 @@ import * as Ne from "react";
 import Ot, { forwardRef as ke, useState as Ie, createContext as ct, useRef as de, useEffect as ce, useCallback as W, useContext as xt, memo as Pl, useMemo as Pe, PureComponent as Al, useImperativeHandle as Hl, useLayoutEffect as Qt, cloneElement as Vl, useReducer as Ro, Component as Ll } from "react";
 import { createPortal as Ur, flushSync as na } from "react-dom";
 import { CSS as Bl } from "@dnd-kit/utilities";
-import { ModalType as Tr, ModalCloseReason as Fl, useDidMountEffect as ia, ModalColor as aa, useHotkeys as jl, ToolbarIcon as yo, Modal as Wl, TipsProvider as $l } from "@ws-ui/shared";
-import Pr from "classnames";
+import { ModalType as Pr, ModalCloseReason as Fl, useDidMountEffect as ia, ModalColor as aa, useHotkeys as jl, ToolbarIcon as yo, Modal as Wl, TipsProvider as $l } from "@ws-ui/shared";
+import Ar from "classnames";
 import { entries as Kl, omit as sa, isEqual as Yr } from "lodash";
+import { generate as er } from "short-uuid";
 import { useAppDispatch as ql, useAppSelector as Un, selectTabByPath as Gl, selectCatalog as Ul, setContent as Yl, switchEditor as Zl, openModal as Xl } from "@ws-ui/store";
 import { z as et } from "zod";
-import { generate as Ar } from "short-uuid";
 import { Subject as la } from "rxjs";
 import Yn from "randexp";
 import { HTTP_HANDLERS_EDITOR_SCOPE_CLASS as Jl } from "./common.es.js";
@@ -73,7 +73,7 @@ const sc = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBo
     d: "M10.84 2.714c0-.394.346-.714.773-.714h.774c.427 0 .773.32.773.714V9.5h5.025c.427 0 .773.32.773.714v3.572H5.042v-3.572c0-.394.346-.714.773-.714h5.025V2.714ZM5.042 14.5h13.916l1.034 6.685c.067.43-.295.815-.765.815h-2.1l-.681-5.929L15.764 22h-3.236l-.721-2.143L11.086 22h-2.85l-.682-3.929L6.872 22H4.773c-.47 0-.832-.385-.765-.815L5.042 14.5Z",
     fill: "currentColor"
   }
-) }), ir = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ p(
+) }), ar = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ p(
   "path",
   {
     d: "M4.497 5.361a.5.5 0 0 0 0 .707L10.429 12l-5.932 5.932a.5.5 0 0 0 0 .707l.864.864a.5.5 0 0 0 .707 0L12 13.571l5.932 5.932a.5.5 0 0 0 .707 0l.864-.864a.5.5 0 0 0 0-.707L13.571 12l5.932-5.932a.5.5 0 0 0 0-.707l-.864-.864a.5.5 0 0 0-.707 0L12 10.429 6.068 4.497a.5.5 0 0 0-.707 0l-.864.864Z",
@@ -176,7 +176,7 @@ const sc = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBo
     d: "M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h6.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-19a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5H9V3ZM4 7h16l-.934 14.071a1 1 0 0 1-.997.929H5.93a1 1 0 0 1-.997-.929L4 7Z",
     fill: "currentColor"
   }
-) }), Sr = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ p(
+) }), Or = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", ...e, children: /* @__PURE__ */ p(
   "path",
   {
     fillRule: "evenodd",
@@ -463,7 +463,7 @@ const sc = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBo
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   $c.test(e) && !Kc.test(e)
-), fa = () => !1, Zc = (e) => qc.test(e), Xc = (e) => Gc.test(e), Jc = (e) => !J(e) && !Q(e), Qc = (e) => Bt(e, wa, fa), J = (e) => ga.test(e), yt = (e) => Bt(e, xa, Yc), so = (e) => Bt(e, nd, pe), ei = (e) => Bt(e, ma, fa), ed = (e) => Bt(e, ba, Xc), ur = (e) => Bt(e, ya, Zc), Q = (e) => va.test(e), Gt = (e) => Ft(e, xa), td = (e) => Ft(e, id), ti = (e) => Ft(e, ma), rd = (e) => Ft(e, wa), od = (e) => Ft(e, ba), pr = (e) => Ft(e, ya, !0), Bt = (e, r, t) => {
+), fa = () => !1, Zc = (e) => qc.test(e), Xc = (e) => Gc.test(e), Jc = (e) => !J(e) && !Q(e), Qc = (e) => Bt(e, wa, fa), J = (e) => ga.test(e), yt = (e) => Bt(e, xa, Yc), so = (e) => Bt(e, nd, pe), ei = (e) => Bt(e, ma, fa), ed = (e) => Bt(e, ba, Xc), pr = (e) => Bt(e, ya, Zc), Q = (e) => va.test(e), Gt = (e) => Ft(e, xa), td = (e) => Ft(e, id), ti = (e) => Ft(e, ma), rd = (e) => Ft(e, wa), od = (e) => Ft(e, ba), hr = (e) => Ft(e, ya, !0), Bt = (e, r, t) => {
   const o = ga.exec(e);
   return o ? o[1] ? r(o[1]) : t(o[2]) : !1;
 }, Ft = (e, r, t = !1) => {
@@ -1861,8 +1861,8 @@ const sc = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBo
           "",
           "none",
           d,
-          pr,
-          ur
+          hr,
+          pr
         ]
       }],
       /**
@@ -1877,7 +1877,7 @@ const sc = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBo
        * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
        */
       "inset-shadow": [{
-        "inset-shadow": ["none", u, pr, ur]
+        "inset-shadow": ["none", u, hr, pr]
       }],
       /**
        * Inset Box Shadow Color
@@ -1944,7 +1944,7 @@ const sc = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBo
        * @see https://tailwindcss.com/docs/text-shadow
        */
       "text-shadow": [{
-        "text-shadow": ["none", h, pr, ur]
+        "text-shadow": ["none", h, hr, pr]
       }],
       /**
        * Text Shadow Color
@@ -2217,8 +2217,8 @@ const sc = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBo
           "",
           "none",
           I,
-          pr,
-          ur
+          hr,
+          pr
         ]
       }],
       /**
@@ -2945,13 +2945,13 @@ const sc = (e) => /* @__PURE__ */ p("svg", { width: "1em", height: "1em", viewBo
   experimentalParseClassName: o,
   extend: n = {},
   override: i = {}
-}) => (Xt(e, "cacheSize", r), Xt(e, "prefix", t), Xt(e, "experimentalParseClassName", o), hr(e.theme, i.theme), hr(e.classGroups, i.classGroups), hr(e.conflictingClassGroups, i.conflictingClassGroups), hr(e.conflictingClassGroupModifiers, i.conflictingClassGroupModifiers), Xt(e, "orderSensitiveModifiers", i.orderSensitiveModifiers), gr(e.theme, n.theme), gr(e.classGroups, n.classGroups), gr(e.conflictingClassGroups, n.conflictingClassGroups), gr(e.conflictingClassGroupModifiers, n.conflictingClassGroupModifiers), Ia(e, n, "orderSensitiveModifiers"), e), Xt = (e, r, t) => {
+}) => (Xt(e, "cacheSize", r), Xt(e, "prefix", t), Xt(e, "experimentalParseClassName", o), gr(e.theme, i.theme), gr(e.classGroups, i.classGroups), gr(e.conflictingClassGroups, i.conflictingClassGroups), gr(e.conflictingClassGroupModifiers, i.conflictingClassGroupModifiers), Xt(e, "orderSensitiveModifiers", i.orderSensitiveModifiers), vr(e.theme, n.theme), vr(e.classGroups, n.classGroups), vr(e.conflictingClassGroups, n.conflictingClassGroups), vr(e.conflictingClassGroupModifiers, n.conflictingClassGroupModifiers), Ia(e, n, "orderSensitiveModifiers"), e), Xt = (e, r, t) => {
   t !== void 0 && (e[r] = t);
-}, hr = (e, r) => {
+}, gr = (e, r) => {
   if (r)
     for (const t in r)
       Xt(e, t, r[t]);
-}, gr = (e, r) => {
+}, vr = (e, r) => {
   if (r)
     for (const t in r)
       Ia(e, r, t);
@@ -3026,7 +3026,7 @@ const dd = /* @__PURE__ */ ka(cd), ud = sd({
 function R(...e) {
   return ud(dd(e));
 }
-const ar = {
+const sr = {
   sm: {
     checkbox: "size-4",
     hoverSquare: "size-2.5",
@@ -3089,7 +3089,7 @@ const ar = {
   const { isChecked: o, isIndeterminate: n, isDisabled: i, isInvalid: a } = t, s = o || n;
   return R(
     pd,
-    ar[e].checkbox,
+    sr[e].checkbox,
     { "cursor-pointer": !i },
     a ? {
       // Invalid state uses negative color scheme
@@ -3115,7 +3115,7 @@ const ar = {
 }, gd = (e, r, t) => {
   const { isDisabled: o, isInvalid: n } = t;
   return R(
-    ar[e].text,
+    sr[e].text,
     n ? {
       [Ue.negative.label]: n
     } : {
@@ -3126,15 +3126,15 @@ const ar = {
   );
 }, vd = (e) => R(
   "inline-flex items-center ws-group",
-  ar[e].spacing
+  sr[e].spacing
 ), fd = (e, r, t) => R(
   "center-absolute rounded-xs transition-all duration-200 opacity-0  ws-checkbox-hover-target",
-  ar[e].hoverSquare,
+  sr[e].hoverSquare,
   {
     [Ue.negative.hoverSquare]: t,
     [Ue[r].hoverSquare]: !t
   }
-), md = (e) => `${ar[e].icon}`, bd = (e) => /* @__PURE__ */ p(
+), md = (e) => `${sr[e].icon}`, bd = (e) => /* @__PURE__ */ p(
   "svg",
   {
     className: `absolute inset-0 ${e.className}`,
@@ -3211,7 +3211,7 @@ const ar = {
   }
 );
 wd.displayName = "Checkbox";
-const sr = {
+const lr = {
   sm: {
     container: "gap-2",
     radio: "size-3",
@@ -3233,7 +3233,7 @@ const sr = {
     dot: "size-4",
     hoverDot: "size-3"
   }
-}, er = {
+}, tr = {
   primary: {
     radio: "border-body-light group-hover:border-body",
     radioInvalid: "border-negative",
@@ -3270,9 +3270,9 @@ const sr = {
   const { isDisabled: o, isInvalid: n } = t;
   return R(
     xd,
-    sr[e].radio,
-    n ? er[r].radioInvalid : {
-      [er[r].radio]: !o,
+    lr[e].radio,
+    n ? tr[r].radioInvalid : {
+      [tr[r].radio]: !o,
       "cursor-not-allowed opacity-60": o
     }
   );
@@ -3280,9 +3280,9 @@ const sr = {
   const { checked: o, isDisabled: n, isInvalid: i } = t;
   return R(
     "center-absolute rounded-full transition-all duration-200 ease-in-out",
-    sr[e].dot,
+    lr[e].dot,
     i ? "bg-negative" : {
-      [er[r].dot]: !n,
+      [tr[r].dot]: !n,
       "border-neutral": n,
       "opacity-0 scale-0": !o,
       "opacity-100 scale-100": o && !n
@@ -3290,23 +3290,23 @@ const sr = {
   );
 }, kd = (e, r, t) => R(
   "center-absolute rounded-full transition-all duration-200 opacity-0 group-hover:opacity-100",
-  sr[e].hoverDot,
+  lr[e].hoverDot,
   {
-    [er[r].hoverDot]: !t,
+    [tr[r].hoverDot]: !t,
     "bg-negative-bg": t
   }
 ), Ed = (e) => R(
   "cursor-pointer select-none transition-colors duration-200",
-  sr[e].label
+  lr[e].label
 ), Sd = (e, r, t, o) => {
   const { isDisabled: n, isInvalid: i } = t;
   return R(
     "inline-flex items-center group",
-    sr[e].container,
+    lr[e].container,
     i ? {
       "text-negative": i
     } : {
-      [er[r].label]: !n,
+      [tr[r].label]: !n,
       "text-muted": n
     },
     o
@@ -3544,7 +3544,7 @@ const Ea = {
   )
 );
 st.displayName = "Button";
-const Sa = ct(null), lr = () => {
+const Sa = ct(null), cr = () => {
   const e = xt(Sa);
   if (!e)
     throw new Error("Input components must be used within Input.Root");
@@ -3751,7 +3751,7 @@ function li(e) {
   return t || nu.test(e) ? iu(e.slice(2), t ? 2 : 8) : ru.test(e) ? si : +e;
 }
 var au = "Expected a function", su = Math.max, lu = Math.min;
-function Or(e, r, t) {
+function _r(e, r, t) {
   var o, n, i, a, s, l, c = 0, d = !1, u = !1, h = !0;
   if (typeof e != "function")
     throw new TypeError(au);
@@ -3803,7 +3803,7 @@ function du(e, r, t) {
   var o = !0, n = !0;
   if (typeof e != "function")
     throw new TypeError(cu);
-  return Vr(t) && (o = "leading" in t ? !!t.leading : o, n = "trailing" in t ? !!t.trailing : n), Or(e, r, {
+  return Vr(t) && (o = "leading" in t ? !!t.leading : o, n = "trailing" in t ? !!t.trailing : n), _r(e, r, {
     leading: o,
     maxWait: r,
     trailing: n
@@ -3966,7 +3966,7 @@ var vt = Na, co = Da, pu = za, ft = Ca, mt = Ma, je = Ra, Yt = (
         }
       }, typeof this.el != "object" || !this.el.nodeName)
         throw new Error("Argument passed to SimpleBar must be an HTML element instead of ".concat(this.el));
-      this.onMouseMove = du(this._onMouseMove, 64), this.onWindowResize = Or(this._onWindowResize, 64, { leading: !0 }), this.onStopScrolling = Or(this._onStopScrolling, this.stopScrollDelay), this.onMouseEntered = Or(this._onMouseEntered, this.stopScrollDelay), this.init();
+      this.onMouseMove = du(this._onMouseMove, 64), this.onWindowResize = _r(this._onWindowResize, 64, { leading: !0 }), this.onStopScrolling = _r(this._onStopScrolling, this.stopScrollDelay), this.onMouseEntered = _r(this._onMouseEntered, this.stopScrollDelay), this.init();
     }
     return e.getRtlHelpers = function() {
       if (e.rtlHelpers)
@@ -4255,7 +4255,7 @@ const Ta = ke(
       hasMessage: l,
       hasArea: c,
       isInvalid: d
-    } = lr();
+    } = cr();
     return /* @__PURE__ */ p(
       "div",
       {
@@ -4286,7 +4286,7 @@ const Ta = ke(
       isInvalid: i,
       isDisabled: a,
       isReadOnly: s
-    } = lr(), { isDisabled: l, isReadOnly: c, ...d } = r;
+    } = cr(), { isDisabled: l, isReadOnly: c, ...d } = r;
     return /* @__PURE__ */ p(
       "input",
       {
@@ -4308,7 +4308,7 @@ const Ta = ke(
       isDisabled: l,
       isReadOnly: c,
       setHasArea: d
-    } = lr(), u = de(null), h = n || u, I = de(null);
+    } = cr(), u = de(null), h = n || u, I = de(null);
     ce(() => (d(!0), () => {
       d(!1);
     }), [d]);
@@ -4395,7 +4395,7 @@ const Ta = ke(
     children: n,
     ...i
   }, a) => {
-    const { size: s, color: l, isDisabled: c } = lr(), d = t || c, u = Pd({
+    const { size: s, color: l, isDisabled: c } = cr(), d = t || c, u = Pd({
       size: s,
       color: l,
       isDisabled: d,
@@ -4418,7 +4418,7 @@ const Ta = ke(
   }
 ), Va = ke(
   ({ icon: e, usePortal: r = !1, className: t, children: o, ...n }, i) => {
-    const { size: a, color: s, setHasMessage: l, isDisabled: c } = lr(), d = de(null), u = de("bottom"), [h, I] = Ie(null);
+    const { size: a, color: s, setHasMessage: l, isDisabled: c } = cr(), d = de(null), u = de("bottom"), [h, I] = Ie(null);
     ce(() => (l(!0), () => l(!1)), [l]), ce(() => {
       if (!r || !d.current) return;
       const m = d.current, _ = m.closest(
@@ -4501,7 +4501,7 @@ const Zt = {
   Field: Aa,
   Icon: Ha,
   Message: Va
-}, tr = {
+}, rr = {
   primary: {
     container: "bg-primary-light",
     text: "text-primary-dark",
@@ -4528,15 +4528,15 @@ const Zt = {
   }
 }, vu = ({ color: e }) => R(
   "min-h-6 absolute py-0.5 px-1 rounded whitespace-nowrap flex items-center gap-1",
-  tr[e].container,
-  tr[e].icon
+  rr[e].container,
+  rr[e].icon
 ), fu = ({ color: e }) => R(
   "text-xs font-medium leading-3",
-  tr[e].text
+  rr[e].text
 ), mu = ({ color: e }) => R(
   "p-0.5 rounded cursor-pointer",
-  tr[e].button,
-  tr[e].icon
+  rr[e].button,
+  rr[e].icon
 ), $e = ({
   label: e,
   color: r = "primary",
@@ -4849,7 +4849,7 @@ const Zt = {
             onClick: U,
             className: mu({ color: r }),
             role: "button",
-            children: /* @__PURE__ */ p(ir, {})
+            children: /* @__PURE__ */ p(ar, {})
           }
         )
       ]
@@ -5127,7 +5127,7 @@ var Me = function() {
   top: "0px",
   left: "0px",
   cursor: "col-resize"
-}, vr = {
+}, fr = {
   width: "20px",
   height: "20px",
   position: "absolute",
@@ -5137,10 +5137,10 @@ var Me = function() {
   right: Me(Me({}, bi), { left: void 0, right: "-5px" }),
   bottom: Me(Me({}, mi), { top: void 0, bottom: "-5px" }),
   left: Me(Me({}, bi), { left: "-5px" }),
-  topRight: Me(Me({}, vr), { right: "-10px", top: "-10px", cursor: "ne-resize" }),
-  bottomRight: Me(Me({}, vr), { right: "-10px", bottom: "-10px", cursor: "se-resize" }),
-  bottomLeft: Me(Me({}, vr), { left: "-10px", bottom: "-10px", cursor: "sw-resize" }),
-  topLeft: Me(Me({}, vr), { left: "-10px", top: "-10px", cursor: "nw-resize" })
+  topRight: Me(Me({}, fr), { right: "-10px", top: "-10px", cursor: "ne-resize" }),
+  bottomRight: Me(Me({}, fr), { right: "-10px", bottom: "-10px", cursor: "se-resize" }),
+  bottomLeft: Me(Me({}, fr), { left: "-10px", bottom: "-10px", cursor: "sw-resize" }),
+  topLeft: Me(Me({}, fr), { left: "-10px", top: "-10px", cursor: "nw-resize" })
 }, _u = Pl(function(e) {
   var r = e.onResizeStart, t = e.direction, o = e.children, n = e.replaceStyles, i = e.className, a = W(function(c) {
     r(c, t);
@@ -5178,14 +5178,14 @@ var Me = function() {
 }, Du = {
   width: "auto",
   height: "auto"
-}, fr = function(e, r, t) {
+}, mr = function(e, r, t) {
   return Math.max(Math.min(e, t), r);
 }, wi = function(e, r, t) {
   var o = Math.round(e / r);
   return o * r + t * (o - 1);
 }, Ct = function(e, r) {
   return new RegExp(e, "i").test(r);
-}, mr = function(e) {
+}, br = function(e) {
   return !!(e.touches && e.touches.length);
 }, zu = function(e) {
   return !!((e.clientX || e.clientX === 0) && (e.clientY || e.clientY === 0));
@@ -5197,7 +5197,7 @@ var Me = function() {
   return t === 0 || n < t ? r[o] : e;
 }, uo = function(e) {
   return e = e.toString(), e === "auto" || e.endsWith("px") || e.endsWith("%") || e.endsWith("vh") || e.endsWith("vw") || e.endsWith("vmax") || e.endsWith("vmin") ? e : "".concat(e, "px");
-}, br = function(e, r, t, o) {
+}, wr = function(e, r, t, o) {
   if (e && typeof e == "string") {
     if (e.endsWith("px"))
       return Number(e.replace("px", ""));
@@ -5216,7 +5216,7 @@ var Me = function() {
   }
   return e;
 }, Cu = function(e, r, t, o, n, i, a) {
-  return o = br(o, e.width, r, t), n = br(n, e.height, r, t), i = br(i, e.width, r, t), a = br(a, e.height, r, t), {
+  return o = wr(o, e.width, r, t), n = wr(n, e.height, r, t), i = wr(i, e.width, r, t), a = wr(a, e.height, r, t), {
     maxWidth: typeof o > "u" ? void 0 : Number(o),
     maxHeight: typeof n > "u" ? void 0 : Number(n),
     minWidth: typeof i > "u" ? void 0 : Number(i),
@@ -5398,9 +5398,9 @@ var Me = function() {
       var a = this.props, s = a.lockAspectRatio, l = a.lockAspectRatioExtraHeight, c = a.lockAspectRatioExtraWidth, d = typeof i.width > "u" ? 10 : i.width, u = typeof n.width > "u" || n.width < 0 ? t : n.width, h = typeof i.height > "u" ? 10 : i.height, I = typeof n.height > "u" || n.height < 0 ? o : n.height, k = l || 0, x = c || 0;
       if (s) {
         var m = (h - k) * this.ratio + x, _ = (I - k) * this.ratio + x, g = (d - x) / this.ratio + k, b = (u - x) / this.ratio + k, w = Math.max(d, m), f = Math.min(u, _), O = Math.max(h, g), M = Math.min(I, b);
-        t = fr(t, w, f), o = fr(o, O, M);
+        t = mr(t, w, f), o = mr(o, O, M);
       } else
-        t = fr(t, d, u), o = fr(o, h, I);
+        t = mr(t, d, u), o = mr(o, h, I);
       return { newWidth: t, newHeight: o };
     }, r.prototype.setBoundingClientRect = function() {
       var t = 1 / (this.props.scale || 1);
@@ -5422,7 +5422,7 @@ var Me = function() {
     }, r.prototype.onResizeStart = function(t, o) {
       if (!(!this.resizable || !this.window)) {
         var n = 0, i = 0;
-        if (t.nativeEvent && zu(t.nativeEvent) ? (n = t.nativeEvent.clientX, i = t.nativeEvent.clientY) : t.nativeEvent && mr(t.nativeEvent) && (n = t.nativeEvent.touches[0].clientX, i = t.nativeEvent.touches[0].clientY), this.props.onResizeStart && this.resizable) {
+        if (t.nativeEvent && zu(t.nativeEvent) ? (n = t.nativeEvent.clientX, i = t.nativeEvent.clientY) : t.nativeEvent && br(t.nativeEvent) && (n = t.nativeEvent.touches[0].clientX, i = t.nativeEvent.touches[0].clientY), this.props.onResizeStart && this.resizable) {
           var a = this.props.onResizeStart(t, o, this.resizable);
           if (a === !1)
             return;
@@ -5454,12 +5454,12 @@ var Me = function() {
     }, r.prototype.onMouseMove = function(t) {
       var o = this;
       if (!(!this.state.isResizing || !this.resizable || !this.window)) {
-        if (this.window.TouchEvent && mr(t))
+        if (this.window.TouchEvent && br(t))
           try {
             t.preventDefault(), t.stopPropagation();
           } catch {
           }
-        var n = this.props, i = n.maxWidth, a = n.maxHeight, s = n.minWidth, l = n.minHeight, c = mr(t) ? t.touches[0].clientX : t.clientX, d = mr(t) ? t.touches[0].clientY : t.clientY, u = this.state, h = u.direction, I = u.original, k = u.width, x = u.height, m = this.getParentSize(), _ = Cu(m, this.window.innerWidth, this.window.innerHeight, i, a, s, l);
+        var n = this.props, i = n.maxWidth, a = n.maxHeight, s = n.minWidth, l = n.minHeight, c = br(t) ? t.touches[0].clientX : t.clientX, d = br(t) ? t.touches[0].clientY : t.clientY, u = this.state, h = u.direction, I = u.original, k = u.width, x = u.height, m = this.getParentSize(), _ = Cu(m, this.window.innerWidth, this.window.innerHeight, i, a, s, l);
         i = _.maxWidth, a = _.maxHeight, s = _.minWidth, l = _.minHeight;
         var g = this.calculateNewSizeFromDirection(c, d), b = g.newHeight, w = g.newWidth, f = this.calculateNewMaxFromBoundary(i, a);
         this.props.snap && this.props.snap.x && (w = xi(w, this.props.snap.x, this.props.snapGap)), this.props.snap && this.props.snap.y && (b = xi(b, this.props.snap.y, this.props.snapGap));
@@ -5713,7 +5713,7 @@ const Mt = {
     label: "text-base",
     gap: "gap-3"
   }
-}, wr = {
+}, xr = {
   primary: {
     bg: "bg-primary",
     thumb: "group-hover:bg-primary-light",
@@ -5747,7 +5747,7 @@ const Mt = {
     "border border-input-border rounded-full justify-between",
     Mt[e].track,
     {
-      [wr[r].bg]: t && !o && !n,
+      [xr[r].bg]: t && !o && !n,
       "bg-input-bg": !t && !o || n,
       "bg-panel cursor-not-allowed": o,
       "cursor-pointer": !o
@@ -5760,21 +5760,21 @@ const Mt = {
     Mt[e].thumb,
     t ? Mt[e].thumbChecked : Mt[e].thumbUnchecked,
     {
-      [wr[r].thumb]: !o,
+      [xr[r].thumb]: !o,
       "bg-canvas-subtle": o
     }
   ),
   iconLeft: R(
     "flex items-center justify-center z-10 w-1/2 p-0.5",
     {
-      [wr[r].icon]: !t && !o,
+      [xr[r].icon]: !t && !o,
       "text-panel-subtle": o || t
     }
   ),
   iconRight: R(
     "flex items-center justify-center z-10 w-1/2 p-0.5",
     {
-      [wr[r].icon]: t && !o,
+      [xr[r].icon]: t && !o,
       "text-panel-subtle": o || !t
     }
   ),
@@ -5846,7 +5846,7 @@ const Br = Ot.forwardRef(
   }
 );
 Br.displayName = "Panel";
-const rr = {
+const or = {
   sm: {
     container: "h-5 px-0.5 gap-1 rounded",
     text: "text-xxs leading-3",
@@ -5865,7 +5865,7 @@ const rr = {
     icon: "text-base",
     iconButton: "text-base p-0.5 cursor-pointer"
   }
-}, _r = {
+}, Nr = {
   primary: {
     bg: "bg-primary",
     text: "text-button-text",
@@ -5911,24 +5911,24 @@ const rr = {
   }
 }, Bu = (e, r, t, o) => R(
   "inline-flex items-center justify-center font-medium border",
-  rr[e].container,
-  _r[r].bg,
-  _r[r].text,
-  _r[r].border,
-  rr[e].text,
+  or[e].container,
+  Nr[r].bg,
+  Nr[r].text,
+  Nr[r].border,
+  or[e].text,
   {
     "opacity-60 pointer-events-none": t,
     "cursor-pointer hover:bg-opacity-90 transition-opacity": o && !t
   }
 ), Fu = (e, r, t) => R({
-  [rr[e].icon]: !t,
+  [or[e].icon]: !t,
   "bg-canvas-default outline-canvas-default text-primary": t && r !== "white" || t,
   "bg-primary outline-primary text-button-text": t && r === "white" && !t,
   "outline-solid outline-1 h-full py-0.5 grid place-items-center -my-1 only:-mx-0.5 first:-ml-1.5 last:-mr-1.5 only:rounded first:rounded-l last:rounded-r": t || t
-}), ju = (e) => R(rr[e].text), Wa = (e, r, t) => R(
+}), ju = (e) => R(or[e].text), Wa = (e, r, t) => R(
   "inline-flex items-center justify-center rounded transition-colors duration-200 focus:outline-hidden ",
-  rr[e].iconButton,
-  _r[r].buttonHover,
+  or[e].iconButton,
+  Nr[r].buttonHover,
   {
     "pointer-events-none": t
   }
@@ -6045,7 +6045,7 @@ const Bo = ke(
         onClick: r,
         "aria-label": t,
         ...n,
-        children: o || /* @__PURE__ */ p(ir, {})
+        children: o || /* @__PURE__ */ p(ar, {})
       }
     );
   }
@@ -7254,7 +7254,7 @@ function Oo(e, r) {
 function kp(e, r) {
   e.prototype = Object.create(r.prototype), e.prototype.constructor = e, Oo(e, r);
 }
-var xr = { exports: {} }, po = { exports: {} }, be = {};
+var yr = { exports: {} }, po = { exports: {} }, be = {};
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -7907,13 +7907,13 @@ function Dp() {
 }
 var Hi;
 function zp() {
-  if (Hi) return xr.exports;
+  if (Hi) return yr.exports;
   if (Hi = 1, T.NODE_ENV !== "production") {
     var e = Xa(), r = !0;
-    xr.exports = /* @__PURE__ */ Np()(e.isElement, r);
+    yr.exports = /* @__PURE__ */ Np()(e.isElement, r);
   } else
-    xr.exports = /* @__PURE__ */ Dp()();
-  return xr.exports;
+    yr.exports = /* @__PURE__ */ Dp()();
+  return yr.exports;
 }
 var Cp = /* @__PURE__ */ zp();
 const j = /* @__PURE__ */ ka(Cp);
@@ -8100,7 +8100,7 @@ function Tp() {
   return Bi || (Bi = 1, T.NODE_ENV === "production" ? bo.exports = Mp() : bo.exports = Rp()), bo.exports;
 }
 var Fi = Tp();
-const ji = (e) => typeof e == "object" && e != null && e.nodeType === 1, Wi = (e, r) => (!r || e !== "hidden") && e !== "visible" && e !== "clip", yr = (e, r) => {
+const ji = (e) => typeof e == "object" && e != null && e.nodeType === 1, Wi = (e, r) => (!r || e !== "hidden") && e !== "visible" && e !== "clip", Ir = (e, r) => {
   if (e.clientHeight < e.scrollHeight || e.clientWidth < e.scrollWidth) {
     const t = getComputedStyle(e, null);
     return Wi(t.overflowY, r) || Wi(t.overflowX, r) || ((o) => {
@@ -8116,7 +8116,7 @@ const ji = (e) => typeof e == "object" && e != null && e.nodeType === 1, Wi = (e
     })(e);
   }
   return !1;
-}, Ir = (e, r, t, o, n, i, a, s) => i < e && a > r || i > e && a < r ? 0 : i <= e && s <= t || a >= r && s >= t ? i - e - o : a > r && s < t || i < e && s > t ? a - r + n : 0, Pp = (e) => e.parentElement ?? (e.getRootNode().host || null), Ap = (e, r) => {
+}, kr = (e, r, t, o, n, i, a, s) => i < e && a > r || i > e && a < r ? 0 : i <= e && s <= t || a >= r && s >= t ? i - e - o : a > r && s < t || i < e && s > t ? a - r + n : 0, Pp = (e) => e.parentElement ?? (e.getRootNode().host || null), Ap = (e, r) => {
   var t, o, n, i;
   if (typeof document > "u") return [];
   const { inline: a, boundary: s, skipOverflowHiddenElements: l } = r, c = typeof s == "function" ? s : (re) => re !== s;
@@ -8128,7 +8128,7 @@ const ji = (e) => typeof e == "object" && e != null && e.nodeType === 1, Wi = (e
       u.push(h);
       break;
     }
-    h != null && h === document.body && yr(h) && !yr(document.documentElement) || h != null && yr(h, l) && u.push(h);
+    h != null && h === document.body && Ir(h) && !Ir(document.documentElement) || h != null && Ir(h, l) && u.push(h);
   }
   const I = (o = (t = window.visualViewport) == null ? void 0 : t.width) != null ? o : innerWidth, k = (i = (n = window.visualViewport) == null ? void 0 : n.height) != null ? i : innerHeight, { scrollX: x, scrollY: m } = window, { height: _, width: g, top: b, right: w, bottom: f, left: O } = e.getBoundingClientRect(), { top: M, right: y, left: D } = ((re) => {
     const q = window.getComputedStyle(re);
@@ -8138,13 +8138,13 @@ const ji = (e) => typeof e == "object" && e != null && e.nodeType === 1, Wi = (e
   const U = [];
   for (let re = 0; re < u.length; re++) {
     const q = u[re], { height: se, width: Y, top: le, right: $, bottom: he, left: v } = q.getBoundingClientRect();
-    if (b >= 0 && O >= 0 && f <= k && w <= I && (q === d && !yr(q) || b >= le && f <= he && O >= v && w <= $)) return U;
+    if (b >= 0 && O >= 0 && f <= k && w <= I && (q === d && !Ir(q) || b >= le && f <= he && O >= v && w <= $)) return U;
     const E = getComputedStyle(q), z = parseInt(E.borderLeftWidth, 10), P = parseInt(E.borderTopWidth, 10), S = parseInt(E.borderRightWidth, 10), H = parseInt(E.borderBottomWidth, 10);
     let C = 0, N = 0;
     const V = "offsetWidth" in q ? q.offsetWidth - q.clientWidth - z - S : 0, X = "offsetHeight" in q ? q.offsetHeight - q.clientHeight - P - H : 0, G = "offsetWidth" in q ? q.offsetWidth === 0 ? 0 : Y / q.offsetWidth : 0, oe = "offsetHeight" in q ? q.offsetHeight === 0 ? 0 : se / q.offsetHeight : 0;
-    if (d === q) C = Ir(m, m + k, k, P, H, m + F, m + F + _, _), N = a === "start" ? L : a === "center" ? L - I / 2 : a === "end" ? L - I : Ir(x, x + I, I, z, S, x + L, x + L + g, g), C = Math.max(0, C + m), N = Math.max(0, N + x);
+    if (d === q) C = kr(m, m + k, k, P, H, m + F, m + F + _, _), N = a === "start" ? L : a === "center" ? L - I / 2 : a === "end" ? L - I : kr(x, x + I, I, z, S, x + L, x + L + g, g), C = Math.max(0, C + m), N = Math.max(0, N + x);
     else {
-      C = Ir(le, he, se, P, H + X, F, F + _, _), N = a === "start" ? L - v - z : a === "center" ? L - (v + Y / 2) + V / 2 : a === "end" ? L - $ + S + V : Ir(v, $, Y, z, S + V, L, L + g, g);
+      C = kr(le, he, se, P, H + X, F, F + _, _), N = a === "start" ? L - v - z : a === "center" ? L - (v + Y / 2) + V / 2 : a === "end" ? L - $ + S + V : kr(v, $, Y, z, S + V, L, L + g, g);
       const { scrollLeft: A, scrollTop: te } = q;
       C = oe === 0 ? 0 : Math.max(0, Math.min(te + C / oe, q.scrollHeight - se / oe + X)), N = G === 0 ? 0 : Math.max(0, Math.min(A + N / G, q.scrollWidth - Y / G + V)), F += te - C, L += A - N;
     }
@@ -8238,14 +8238,14 @@ function Lp(e, r) {
   console.error('The property "' + r + '" is required in "' + e + '"');
 }
 var Bp = ["highlightedIndex", "inputValue", "isOpen", "selectedItem", "type"];
-function kr(e) {
+function Er(e) {
   e === void 0 && (e = {});
   var r = {};
   return Bp.forEach(function(t) {
     e.hasOwnProperty(t) && (r[t] = e[t]);
   }), r;
 }
-function or(e, r) {
+function nr(e, r) {
   return !e || !r ? e : Object.keys(e).reduce(function(t, o) {
     return t[o] = Fr(r, o) ? r[o] : e[o], t;
   }, {});
@@ -8323,7 +8323,7 @@ function Wp(e) {
   var r = e == null ? void 0 : e.getElementById("a11y-status-message");
   r && r.remove();
 }
-var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NODE_ENV !== "production" ? "__autocomplete_mouseup__" : 1, ss = T.NODE_ENV !== "production" ? "__autocomplete_item_mouseenter__" : 2, Nr = T.NODE_ENV !== "production" ? "__autocomplete_keydown_arrow_up__" : 3, Dr = T.NODE_ENV !== "production" ? "__autocomplete_keydown_arrow_down__" : 4, ls = T.NODE_ENV !== "production" ? "__autocomplete_keydown_escape__" : 5, cs = T.NODE_ENV !== "production" ? "__autocomplete_keydown_enter__" : 6, ds = T.NODE_ENV !== "production" ? "__autocomplete_keydown_home__" : 7, us = T.NODE_ENV !== "production" ? "__autocomplete_keydown_end__" : 8, ps = T.NODE_ENV !== "production" ? "__autocomplete_click_item__" : 9, hs = T.NODE_ENV !== "production" ? "__autocomplete_blur_input__" : 10, gs = T.NODE_ENV !== "production" ? "__autocomplete_change_input__" : 11, vs = T.NODE_ENV !== "production" ? "__autocomplete_keydown_space_button__" : 12, _o = T.NODE_ENV !== "production" ? "__autocomplete_click_button__" : 13, fs = T.NODE_ENV !== "production" ? "__autocomplete_blur_button__" : 14, ms = T.NODE_ENV !== "production" ? "__autocomplete_controlled_prop_updated_selected_item__" : 15, bs = T.NODE_ENV !== "production" ? "__autocomplete_touchend__" : 16, $p = /* @__PURE__ */ Object.freeze({
+var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NODE_ENV !== "production" ? "__autocomplete_mouseup__" : 1, ss = T.NODE_ENV !== "production" ? "__autocomplete_item_mouseenter__" : 2, Dr = T.NODE_ENV !== "production" ? "__autocomplete_keydown_arrow_up__" : 3, zr = T.NODE_ENV !== "production" ? "__autocomplete_keydown_arrow_down__" : 4, ls = T.NODE_ENV !== "production" ? "__autocomplete_keydown_escape__" : 5, cs = T.NODE_ENV !== "production" ? "__autocomplete_keydown_enter__" : 6, ds = T.NODE_ENV !== "production" ? "__autocomplete_keydown_home__" : 7, us = T.NODE_ENV !== "production" ? "__autocomplete_keydown_end__" : 8, ps = T.NODE_ENV !== "production" ? "__autocomplete_click_item__" : 9, hs = T.NODE_ENV !== "production" ? "__autocomplete_blur_input__" : 10, gs = T.NODE_ENV !== "production" ? "__autocomplete_change_input__" : 11, vs = T.NODE_ENV !== "production" ? "__autocomplete_keydown_space_button__" : 12, _o = T.NODE_ENV !== "production" ? "__autocomplete_click_button__" : 13, fs = T.NODE_ENV !== "production" ? "__autocomplete_blur_button__" : 14, ms = T.NODE_ENV !== "production" ? "__autocomplete_controlled_prop_updated_selected_item__" : 15, bs = T.NODE_ENV !== "production" ? "__autocomplete_touchend__" : 16, $p = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   blurButton: fs,
   blurInput: hs,
@@ -8332,8 +8332,8 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
   clickItem: ps,
   controlledPropUpdatedSelectedItem: ms,
   itemMouseEnter: ss,
-  keyDownArrowDown: Dr,
-  keyDownArrowUp: Nr,
+  keyDownArrowDown: zr,
+  keyDownArrowUp: Dr,
   keyDownEnd: us,
   keyDownEnter: cs,
   keyDownEscape: ls,
@@ -8363,7 +8363,7 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
         var w = i.getItemNodeFromIndex(b);
         return w && w.hasAttribute("disabled");
       }, i.setHighlightedIndex = function(g, b) {
-        g === void 0 && (g = i.props.defaultHighlightedIndex), b === void 0 && (b = {}), b = kr(b), i.internalSetState(ne({
+        g === void 0 && (g = i.props.defaultHighlightedIndex), b === void 0 && (b = {}), b = Er(b), i.internalSetState(ne({
           highlightedIndex: g
         }, b));
       }, i.clearSelection = function(g) {
@@ -8374,7 +8374,7 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
           isOpen: i.props.defaultIsOpen
         }, g);
       }, i.selectItem = function(g, b, w) {
-        b = kr(b), i.internalSetState(ne({
+        b = Er(b), i.internalSetState(ne({
           isOpen: i.props.defaultIsOpen,
           highlightedIndex: i.props.defaultHighlightedIndex,
           selectedItem: g,
@@ -8414,12 +8414,12 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
           if (g.preventDefault(), this.getState().isOpen) {
             var w = g.shiftKey ? 5 : 1;
             this.moveHighlightedIndex(w, {
-              type: Dr
+              type: zr
             });
           } else
             this.internalSetState({
               isOpen: !0,
-              type: Dr
+              type: zr
             }, function() {
               var f = b.getItemCount();
               if (f > 0) {
@@ -8427,7 +8427,7 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
                   length: f
                 }, b.isItemDisabled, !0);
                 b.setHighlightedIndex(y, {
-                  type: Dr
+                  type: zr
                 });
               }
             });
@@ -8437,12 +8437,12 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
           if (g.preventDefault(), this.getState().isOpen) {
             var w = g.shiftKey ? -5 : -1;
             this.moveHighlightedIndex(w, {
-              type: Nr
+              type: Dr
             });
           } else
             this.internalSetState({
               isOpen: !0,
-              type: Nr
+              type: Dr
             }, function() {
               var f = b.getItemCount();
               if (f > 0) {
@@ -8450,7 +8450,7 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
                   length: f
                 }, b.isItemDisabled, !0);
                 b.setHighlightedIndex(y, {
-                  type: Nr
+                  type: Dr
                 });
               }
             });
@@ -8645,7 +8645,7 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
       }, i.clearItems = function() {
         i.items = [];
       }, i.reset = function(g, b) {
-        g === void 0 && (g = {}), g = kr(g), i.internalSetState(function(w) {
+        g === void 0 && (g = {}), g = Er(g), i.internalSetState(function(w) {
           var f = w.selectedItem;
           return ne({
             isOpen: i.props.defaultIsOpen,
@@ -8654,7 +8654,7 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
           }, g);
         }, b);
       }, i.toggleMenu = function(g, b) {
-        g === void 0 && (g = {}), g = kr(g), i.internalSetState(function(w) {
+        g === void 0 && (g = {}), g = Er(g), i.internalSetState(function(w) {
           var f = w.isOpen;
           return ne({
             isOpen: !f
@@ -8700,7 +8700,7 @@ var is = T.NODE_ENV !== "production" ? "__autocomplete_unknown__" : 0, as = T.NO
         clearTimeout(n);
       }), this.timeoutIds = [];
     }, o.getState = function(n) {
-      return n === void 0 && (n = this.state), or(n, this.props);
+      return n === void 0 && (n = this.state), nr(n, this.props);
     }, o.getItemCount = function() {
       var n = this.items.length;
       return this.itemCount != null ? n = this.itemCount : this.props.itemCount !== void 0 && (n = this.props.itemCount), n;
@@ -8967,7 +8967,7 @@ function Jr(e) {
 }
 function ys(e, r, t, o) {
   var n = de(), i = de(), a = W(function(I, k) {
-    i.current = k, I = or(I, k.props);
+    i.current = k, I = nr(I, k.props);
     var x = e(I, k), m = k.props.stateReducer(I, ne({}, k, {
       changes: x
     }));
@@ -8978,13 +8978,13 @@ function ys(e, r, t, o) {
     }, I));
   }, [d]), h = i.current;
   return ce(function() {
-    var I = or(n.current, h == null ? void 0 : h.props), k = h && n.current && !o(I, l);
+    var I = nr(n.current, h == null ? void 0 : h.props), k = h && n.current && !o(I, l);
     k && Jp(h, I, l), n.current = l;
   }, [l, h, o]), [l, u];
 }
 function Is(e, r, t, o) {
   var n = ys(e, r, t, o), i = n[0], a = n[1];
-  return [or(i, r), a];
+  return [nr(i, r), a];
 }
 var Jt = {
   itemToString: function(e) {
@@ -9094,7 +9094,7 @@ T.NODE_ENV !== "production" && (Qr = function() {
 });
 function Ko(e, r, t, o) {
   o === void 0 && (o = {});
-  var n = o.document, i = cr();
+  var n = o.document, i = dr();
   ce(function() {
     if (!(!e || i || !n)) {
       var a = e(r);
@@ -9114,7 +9114,7 @@ function Ss(e) {
 }
 var eo = Le;
 T.NODE_ENV !== "production" && (eo = function(e) {
-  var r = e.props, t = e.state, o = de(r), n = cr();
+  var r = e.props, t = e.state, o = de(r), n = dr();
   ce(function() {
     n || (jo(t, o.current, r), o.current = r);
   }, [t, r, n]);
@@ -9137,7 +9137,7 @@ function Wr(e, r, t) {
 function Os(e, r) {
   return e.isOpen === r.isOpen && e.inputValue === r.inputValue && e.highlightedIndex === r.highlightedIndex && e.selectedItem === r.selectedItem;
 }
-function cr() {
+function dr() {
   var e = Ot.useRef(!0);
   return Ot.useEffect(function() {
     return e.current = !1, function() {
@@ -9153,7 +9153,7 @@ function oh(e) {
   var r = kt(e, "highlightedIndex");
   return r > -1 && e.isItemDisabled(e.items[r], r) ? -1 : r;
 }
-var zr = {
+var Cr = {
   environment: j.shape({
     addEventListener: j.func.isRequired,
     removeEventListener: j.func.isRequired,
@@ -9168,7 +9168,7 @@ var zr = {
   itemToString: j.func,
   itemToKey: j.func,
   stateReducer: j.func
-}, _s = ne({}, zr, {
+}, _s = ne({}, Cr, {
   getA11yStatusMessage: j.func,
   highlightedIndex: j.number,
   defaultHighlightedIndex: j.number,
@@ -9258,7 +9258,7 @@ var ih = Vt(Vt({}, _s), { items: j.array.isRequired, isItemDisabled: j.func }),
 T.NODE_ENV !== "production" && (Ds = function(e, r) {
   j.checkPropTypes(ih, e, "prop", r.name);
 });
-var Cr = T.NODE_ENV !== "production" ? "__togglebutton_click__" : 0, qo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_arrow_down__" : 1, Go = T.NODE_ENV !== "production" ? "__togglebutton_keydown_arrow_up__" : 2, Kr = T.NODE_ENV !== "production" ? "__togglebutton_keydown_character__" : 3, Uo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_escape__" : 4, Yo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_home__" : 5, Zo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_end__" : 6, Xo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_enter__" : 7, Jo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_space_button__" : 8, Qo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_page_up__" : 9, en = T.NODE_ENV !== "production" ? "__togglebutton_keydown_page_down__" : 10, qr = T.NODE_ENV !== "production" ? "__togglebutton_blur__" : 11, zs = T.NODE_ENV !== "production" ? "__menu_mouse_leave__" : 12, Cs = T.NODE_ENV !== "production" ? "__item_mouse_move__" : 13, tn = T.NODE_ENV !== "production" ? "__item_click__" : 14, Ms = T.NODE_ENV !== "production" ? "__function_toggle_menu__" : 15, Rs = T.NODE_ENV !== "production" ? "__function_open_menu__" : 16, Ts = T.NODE_ENV !== "production" ? "__function_close_menu__" : 17, Ps = T.NODE_ENV !== "production" ? "__function_set_highlighted_index__" : 18, rn = T.NODE_ENV !== "production" ? "__function_select_item__" : 19, No = T.NODE_ENV !== "production" ? "__function_set_input_value__" : 20, As = T.NODE_ENV !== "production" ? "__function_reset__" : 21, Hs = /* @__PURE__ */ Object.freeze({
+var Mr = T.NODE_ENV !== "production" ? "__togglebutton_click__" : 0, qo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_arrow_down__" : 1, Go = T.NODE_ENV !== "production" ? "__togglebutton_keydown_arrow_up__" : 2, Kr = T.NODE_ENV !== "production" ? "__togglebutton_keydown_character__" : 3, Uo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_escape__" : 4, Yo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_home__" : 5, Zo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_end__" : 6, Xo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_enter__" : 7, Jo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_space_button__" : 8, Qo = T.NODE_ENV !== "production" ? "__togglebutton_keydown_page_up__" : 9, en = T.NODE_ENV !== "production" ? "__togglebutton_keydown_page_down__" : 10, qr = T.NODE_ENV !== "production" ? "__togglebutton_blur__" : 11, zs = T.NODE_ENV !== "production" ? "__menu_mouse_leave__" : 12, Cs = T.NODE_ENV !== "production" ? "__item_mouse_move__" : 13, tn = T.NODE_ENV !== "production" ? "__item_click__" : 14, Ms = T.NODE_ENV !== "production" ? "__function_toggle_menu__" : 15, Rs = T.NODE_ENV !== "production" ? "__function_open_menu__" : 16, Ts = T.NODE_ENV !== "production" ? "__function_close_menu__" : 17, Ps = T.NODE_ENV !== "production" ? "__function_set_highlighted_index__" : 18, rn = T.NODE_ENV !== "production" ? "__function_select_item__" : 19, No = T.NODE_ENV !== "production" ? "__function_set_input_value__" : 20, As = T.NODE_ENV !== "production" ? "__function_reset__" : 21, Hs = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   FunctionCloseMenu: Ts,
   FunctionOpenMenu: Rs,
@@ -9271,7 +9271,7 @@ var Cr = T.NODE_ENV !== "production" ? "__togglebutton_click__" : 0, qo = T.NODE
   ItemMouseMove: Cs,
   MenuMouseLeave: zs,
   ToggleButtonBlur: qr,
-  ToggleButtonClick: Cr,
+  ToggleButtonClick: Mr,
   ToggleButtonKeyDownArrowDown: qo,
   ToggleButtonKeyDownArrowUp: Go,
   ToggleButtonKeyDownCharacter: Kr,
@@ -9460,7 +9460,7 @@ function pt(e) {
       },
       Enter: function(v) {
         v.preventDefault(), s({
-          type: _.current.state.isOpen ? Xo : Cr
+          type: _.current.state.isOpen ? Xo : Mr
         });
       },
       PageUp: function(v) {
@@ -9478,7 +9478,7 @@ function pt(e) {
         var E = _.current.state;
         if (!E.isOpen) {
           s({
-            type: Cr
+            type: Mr
           });
           return;
         }
@@ -9545,7 +9545,7 @@ function pt(e) {
     P.onPress;
     var C = P.onKeyDown, N = P.refKey, V = N === void 0 ? "ref" : N, X = P.ref, G = Be(P, dh), oe = E === void 0 ? {} : E, A = oe.suppressRefError, te = A === void 0 ? !1 : A, K = _.current.state, ge = function() {
       s({
-        type: Cr
+        type: Mr
       });
     }, fe = function() {
       K.isOpen && !O.isMouseDown && s({
@@ -9647,7 +9647,7 @@ var hh = ne({}, _s, {
   onInputValueChange: j.func
 });
 function gh(e, r, t, o) {
-  var n = de(), i = ys(e, r, t, o), a = i[0], s = i[1], l = cr();
+  var n = de(), i = ys(e, r, t, o), a = i[0], s = i[1], l = dr();
   return ce(function() {
     if (Fr(r, "selectedItem")) {
       if (!l) {
@@ -9659,7 +9659,7 @@ function gh(e, r, t, o) {
       }
       n.current = a.selectedItem === n.current ? r.selectedItem : a.selectedItem;
     }
-  }, [a.selectedItem, r.selectedItem]), [or(a, r), s];
+  }, [a.selectedItem, r.selectedItem]), [nr(a, r), s];
 }
 var Us = Le;
 T.NODE_ENV !== "production" && (Us = function(e, r) {
@@ -9771,7 +9771,7 @@ var mh = ["onMouseLeave", "refKey", "ref"], bh = ["item", "index", "refKey", "re
 We.stateChangeTypes = Gs;
 function We(e) {
   e === void 0 && (e = {}), Us(e, We);
-  var r = ne({}, vh, e), t = r.items, o = r.scrollIntoView, n = r.environment, i = r.getA11yStatusMessage, a = gh(fh, r, ph, Os), s = a[0], l = a[1], c = s.isOpen, d = s.highlightedIndex, u = s.selectedItem, h = s.inputValue, I = de(null), k = de({}), x = de(null), m = de(null), _ = cr(), g = xs(r), b = de(), w = Jr({
+  var r = ne({}, vh, e), t = r.items, o = r.scrollIntoView, n = r.environment, i = r.getA11yStatusMessage, a = gh(fh, r, ph, Os), s = a[0], l = a[1], c = s.isOpen, d = s.highlightedIndex, u = s.selectedItem, h = s.inputValue, I = de(null), k = de({}), x = de(null), m = de(null), _ = dr(), g = xs(r), b = de(), w = Jr({
     state: s,
     props: r
   }), f = W(function(S) {
@@ -10024,9 +10024,9 @@ function Ih(e, r) {
   return e.selectedItems === r.selectedItems && e.activeIndex === r.activeIndex;
 }
 var kh = {
-  stateReducer: zr.stateReducer,
-  itemToKey: zr.itemToKey,
-  environment: zr.environment,
+  stateReducer: Cr.stateReducer,
+  itemToKey: Cr.itemToKey,
+  environment: Cr.environment,
   selectedItems: j.array,
   initialSelectedItems: j.array,
   defaultSelectedItems: j.array,
@@ -10155,7 +10155,7 @@ var _h = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"], Nh
 zn.stateChangeTypes = Sh;
 function zn(e) {
   e === void 0 && (e = {}), Zs(e, zn);
-  var r = ne({}, Eh, e), t = r.getA11yStatusMessage, o = r.environment, n = r.keyNavigationNext, i = r.keyNavigationPrevious, a = Is(Oh, r, yh, Ih), s = a[0], l = a[1], c = s.activeIndex, d = s.selectedItems, u = cr(), h = de(null), I = de();
+  var r = ne({}, Eh, e), t = r.getA11yStatusMessage, o = r.environment, n = r.keyNavigationNext, i = r.keyNavigationPrevious, a = Is(Oh, r, yh, Ih), s = a[0], l = a[1], c = s.activeIndex, d = s.selectedItems, u = dr(), h = de(null), I = de();
   I.current = [];
   var k = Jr({
     state: s,
@@ -10663,7 +10663,7 @@ const zh = () => {
   className: e,
   children: r,
   isMulti: t
-}) => /* @__PURE__ */ p("div", { className: R(ip({ isMulti: t }), e), children: r }), Mr = ke(
+}) => /* @__PURE__ */ p("div", { className: R(ip({ isMulti: t }), e), children: r }), Rr = ke(
   ({ isHidden: e, inputClassName: r, className: t, ...o }, n) => {
     const { size: i, color: a } = Te();
     return e ? /* @__PURE__ */ p(
@@ -10748,7 +10748,7 @@ const zh = () => {
               isDisabled: !1
             }),
             onClick: d,
-            children: /* @__PURE__ */ p(ir, { className: "w-3 h-3" })
+            children: /* @__PURE__ */ p(ar, { className: "w-3 h-3" })
           }
         )
       ]
@@ -10825,7 +10825,7 @@ const zh = () => {
       tabIndex: -1,
       "aria-label": "Clear selection",
       ...n,
-      children: r || /* @__PURE__ */ p(ir, {})
+      children: r || /* @__PURE__ */ p(ar, {})
     }
   );
 }, el = ke(
@@ -10917,7 +10917,7 @@ const zh = () => {
       }
     );
   }
-), Rr = ({
+), Tr = ({
   className: e,
   children: r,
   data: t,
@@ -11331,14 +11331,14 @@ const zh = () => {
     ), Kn = (ae) => h ? ae.filter((ue) => !wl(ue)) : ae, xl = (ae) => h ? ae.map((ue) => ({
       ...ue,
       options: Kn(ue.options)
-    })).filter((ue) => ue.options.length > 0) : ae, Nt = So(H) ? [] : Kn(S.filteredItems), yl = { sm: 22, md: 28, lg: 36 }[v] ?? 28, Kt = Nt.length >= se, dr = ep({
+    })).filter((ue) => ue.options.length > 0) : ae, Nt = So(H) ? [] : Kn(S.filteredItems), yl = { sm: 22, md: 28, lg: 36 }[v] ?? 28, Kt = Nt.length >= se, ur = ep({
       count: Kt ? Nt.length : 0,
       getScrollElement: () => ve.current,
       estimateSize: () => yl,
       overscan: 5
     });
     ce(() => {
-      Kt && Ee && De >= 0 && De < Nt.length && dr.scrollToIndex(De, { align: "auto" });
+      Kt && Ee && De >= 0 && De < Nt.length && ur.scrollToIndex(De, { align: "auto" });
     }, [De, Kt, Ee]);
     const { registerOnSelectionComplete: qn } = Te();
     ce(() => {
@@ -11384,7 +11384,7 @@ const zh = () => {
                 }
               ) }),
               dt && d === "trigger" ? /* @__PURE__ */ p(
-                Mr,
+                Rr,
                 {
                   ref: no,
                   ...oo,
@@ -11394,7 +11394,7 @@ const zh = () => {
                 }
               ) : /* @__PURE__ */ Z(wt, { children: [
                 /* @__PURE__ */ p(
-                  Mr,
+                  Rr,
                   {
                     ref: no,
                     ...oo,
@@ -11463,7 +11463,7 @@ const zh = () => {
               children: [
                 x && x(S),
                 dt && d === "menu" && /* @__PURE__ */ p("div", { className: "p-2", children: /* @__PURE__ */ p(
-                  Mr,
+                  Rr,
                   {
                     ref: no,
                     ...oo,
@@ -11478,7 +11478,7 @@ const zh = () => {
                   Vh,
                   {
                     ref: ve,
-                    totalHeight: Kt ? dr.getTotalSize() : void 0,
+                    totalHeight: Kt ? ur.getTotalSize() : void 0,
                     children: a ? /* @__PURE__ */ p("div", { className: bp({ size: v }), children: o }) : S.filteredItems.length === 0 ? /* @__PURE__ */ p(wo, { inputValue: Ae, children: typeof r == "function" ? r(Ae) : r }) : So(H) ? (() => {
                       const ae = xl(
                         H
@@ -11498,7 +11498,7 @@ const zh = () => {
                               index: it
                             });
                             return /* @__PURE__ */ p(
-                              Rr,
+                              Tr,
                               {
                                 ...qt,
                                 data: He,
@@ -11519,7 +11519,7 @@ const zh = () => {
                         },
                         `${ue.label}-${Xe}`
                       ));
-                    })() : Nt.length === 0 ? /* @__PURE__ */ p(wo, { inputValue: Ae, children: typeof r == "function" ? r(Ae) : r }) : Kt ? dr.getVirtualItems().map((ae) => {
+                    })() : Nt.length === 0 ? /* @__PURE__ */ p(wo, { inputValue: Ae, children: typeof r == "function" ? r(Ae) : r }) : Kt ? ur.getVirtualItems().map((ae) => {
                       const ue = Nt[ae.index], Xe = N(ue), He = nt.some(
                         (Dt) => N(Dt) === Xe
                       ), Je = S.filteredItems.indexOf(ue), Qe = De === Je, it = V(ue), ht = ot({
@@ -11530,7 +11530,7 @@ const zh = () => {
                         "div",
                         {
                           "data-index": ae.index,
-                          ref: dr.measureElement,
+                          ref: ur.measureElement,
                           style: {
                             position: "absolute",
                             top: 0,
@@ -11539,7 +11539,7 @@ const zh = () => {
                             transform: `translateY(${ae.start}px)`
                           },
                           children: /* @__PURE__ */ p(
-                            Rr,
+                            Tr,
                             {
                               ...ht,
                               data: ue,
@@ -11566,7 +11566,7 @@ const zh = () => {
                         index: He
                       });
                       return /* @__PURE__ */ p(
-                        Rr,
+                        Tr,
                         {
                           ...it,
                           data: ae,
@@ -11597,11 +11597,11 @@ const zh = () => {
 Xs.displayName = "Select.Root";
 rl.displayName = "Select.Group";
 Bh.displayName = "Select.Icon";
-Mr.displayName = "Select.Input";
+Rr.displayName = "Select.Input";
 Js.displayName = "Select.MultiValue";
 Qs.displayName = "Select.ClearIndicator";
 el.displayName = "Select.DropdownIndicator";
-Rr.displayName = "Select.Option";
+Tr.displayName = "Select.Option";
 tl.displayName = "Select.OptionGroup";
 ol.displayName = "Select.Message";
 const Wh = nl;
@@ -11709,7 +11709,7 @@ function Cn(e) {
     const n = !!o.regexPattern, i = (Array.isArray(o.verbs) ? o.verbs : (o.verbs ?? "").split(",")).map((a) => a.toUpperCase()).filter(Boolean);
     return {
       ...o,
-      id: o.id ?? Ar(),
+      id: o.id ?? er(),
       verbs: i,
       asRegex: n
     };
@@ -11981,7 +11981,7 @@ var sl = (function(e) {
       try {
         t.next(r);
       } catch (o) {
-        Er(o);
+        Sr(o);
       }
   }, e.prototype.error = function(r) {
     var t = this.partialObserver;
@@ -11989,17 +11989,17 @@ var sl = (function(e) {
       try {
         t.error(r);
       } catch (o) {
-        Er(o);
+        Sr(o);
       }
     else
-      Er(r);
+      Sr(r);
   }, e.prototype.complete = function() {
     var r = this.partialObserver;
     if (r.complete)
       try {
         r.complete();
       } catch (t) {
-        Er(t);
+        Sr(t);
       }
   }, e;
 })(), rg = (function(e) {
@@ -12014,7 +12014,7 @@ var sl = (function(e) {
   }
   return r;
 })(sl);
-function Er(e) {
+function Sr(e) {
   eg(e);
 }
 function og(e) {
@@ -12169,7 +12169,7 @@ function dg(e, r) {
       };
     }
     case "ADD_HANDLER": {
-      const t = Ar();
+      const { id: t } = r;
       return {
         ...e,
         content: [...e.content, { ...r.payload, id: t }],
@@ -12205,7 +12205,7 @@ function dg(e, r) {
         ...e,
         content: [
           ...e.content,
-          { ...t, id: Ar(), isExpanded: !0 }
+          { ...t, id: er(), isExpanded: !0 }
         ]
       } : e;
     }
@@ -12218,7 +12218,7 @@ function dg(e, r) {
         }))
       };
     case "SYNC_DATA":
-      return {
+      return e.editing !== null || e.newlyCreatedHandlerID !== null ? e : {
         ...e,
         content: r.payload.map((t) => {
           const o = e.content.find((n) => n.id === t.id);
@@ -12305,30 +12305,34 @@ const Tn = ct(null), Mo = (e) => ({
   content: r,
   catalog: t = null,
   host: o = "web",
-  history: n
+  history: n,
+  editingHandlerId: i,
+  onEditingHandlerChange: a
 }) => {
-  const i = typeof r == "string" ? r : JSON.stringify(r ?? []), a = Pe(
-    () => Cn(i),
-    [i]
-  ), [s, l] = Ro(
+  const s = Pe(
+    () => Cn(r),
+    [r]
+  ), [l, c] = Ro(
     cl,
-    Mo(a)
+    Mo(s)
   );
   ce(() => {
-    l({
+    c({
       type: "SYNC_DATA",
-      payload: a
+      payload: s
     });
-  }, [a]);
-  const c = Pe(
+  }, [s]);
+  const d = Pe(
     () => ({
       catalog: t,
       host: o,
-      history: n
+      history: n,
+      editingHandlerId: i,
+      onEditingHandlerChange: a
     }),
-    [t, o, n]
+    [t, o, n, i, a]
   );
-  return /* @__PURE__ */ p(Tn.Provider, { value: { state: s, dispatch: l, external: c }, children: e });
+  return /* @__PURE__ */ p(Tn.Provider, { value: { state: l, dispatch: c, external: d }, children: e });
 };
 function pg() {
   var n, i, a, s;
@@ -12340,7 +12344,10 @@ function pg() {
   const { state: r, dispatch: t, external: o } = e;
   return {
     getHandlers: W(() => r.content, [r.content]),
-    getEditingHandlerId: W(() => r.editing, [r.editing]),
+    getEditingHandlerId: W(
+      () => o.editingHandlerId !== void 0 ? o.editingHandlerId : r.editing,
+      [o.editingHandlerId, r.editing]
+    ),
     getNewlyCreatedHandlerId: W(
       () => r.newlyCreatedHandlerID,
       [r.newlyCreatedHandlerID]
@@ -12361,9 +12368,14 @@ function pg() {
       updateHandlers: W((l) => {
         t({ type: "UPDATE_HANDLERS", payload: l });
       }, []),
-      addHandler: W((l) => {
-        t({ type: "ADD_HANDLER", payload: l });
-      }, []),
+      addHandler: W(
+        (l) => {
+          var d;
+          const c = er();
+          t({ type: "ADD_HANDLER", payload: l, id: c }), (d = o.onEditingHandlerChange) == null || d.call(o, c);
+        },
+        [o.onEditingHandlerChange]
+      ),
       updateHandler: W(
         (l, c) => {
           t({ type: "UPDATE_HANDLER", id: l, payload: c });
@@ -12382,9 +12394,13 @@ function pg() {
       toggleAllExpanded: W((l) => {
         t({ type: "TOGGLE_ALL_EXPANDED", payload: l });
       }, []),
-      setEditingHandler: W((l) => {
-        t({ type: "SET_EDITING_HANDLER", payload: l });
-      }, []),
+      setEditingHandler: W(
+        (l) => {
+          var c;
+          (c = o.onEditingHandlerChange) == null || c.call(o, l), t({ type: "SET_EDITING_HANDLER", payload: l });
+        },
+        [o.onEditingHandlerChange]
+      ),
       undo: W(() => {
         var l;
         if ((l = o.history) != null && l.onUndo) {
@@ -12403,7 +12419,7 @@ function pg() {
       }, [(s = o.history) == null ? void 0 : s.onRedo]),
       openModal: W(
         async (l) => {
-          const { type: c = Tr.ALERT } = l, d = Ar();
+          const { type: c = Pr.ALERT } = l, d = er();
           return t({
             type: "CREATE_MODAL",
             payload: {
@@ -12412,7 +12428,7 @@ function pg() {
               isOpen: !0,
               ...l
             }
-          }), c === Tr.CONFIRM ? new Promise((u) => {
+          }), c === Pr.CONFIRM ? new Promise((u) => {
             const h = ll.pipe(
               sg((I) => {
                 const k = I.list.find(
@@ -12484,7 +12500,7 @@ function jg(e, r) {
         s({ type: "UPDATE_HANDLERS", payload: l });
       }, []),
       addHandler: W((l) => {
-        s({ type: "ADD_HANDLER", payload: l });
+        s({ type: "ADD_HANDLER", payload: l, id: er() });
       }, []),
       updateHandler: W(
         (l, c) => {
@@ -12558,7 +12574,7 @@ function hg() {
     )
   };
 }
-const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.body, gg = ({
+const ir = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.body, gg = ({
   initialSelectedItems: e,
   onChange: r,
   touched: t,
@@ -12663,7 +12679,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
           {
             placeholder: "Select method...",
             renderOption: ({ data: u }) => /* @__PURE__ */ Z("div", { className: "flex items-center gap-2 truncate", children: [
-              u.exposed && /* @__PURE__ */ p(Sr, { className: "text-warning shrink-0" }),
+              u.exposed && /* @__PURE__ */ p(Or, { className: "text-warning shrink-0" }),
               /* @__PURE__ */ p("span", { className: "truncate", title: u.name, children: u.name })
             ] }),
             onBlur: n,
@@ -12737,7 +12753,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
     if (!Yr(y, D)) {
       const { confirmed: F } = await u.actions.openModal({
         title: "Cancel Changes",
-        type: Tr.CONFIRM,
+        type: Pr.CONFIRM,
         color: aa.DANGER,
         message: "Are you sure you want to cancel changes made to this Handler?",
         icon: "FdWarningDanger"
@@ -12757,7 +12773,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
     },
     []
   ), ce(() => {
-    nr.subscribe((y) => {
+    ir.subscribe((y) => {
       y === e && _();
     });
   }, [c, e]);
@@ -12869,7 +12885,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
               [c.asRegex ? "regexPattern" : "pattern"]: ""
             }));
           },
-          children: /* @__PURE__ */ p(ir, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ p(ar, { "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ p(
@@ -12950,7 +12966,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
             color: "white",
             disabled: !m(),
             onClick: _,
-            className: Pr(!m() && "cursor-not-allowed"),
+            className: Ar(!m() && "cursor-not-allowed"),
             children: /* @__PURE__ */ p(cc, {})
           }
         ) }),
@@ -13010,7 +13026,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
         {
           className: "flex items-center gap-2 rounded-b py-2.5",
           onDoubleClick: () => {
-            nr.next(x), k.actions.setEditingHandler(e);
+            ir.next(x), k.actions.setEditingHandler(e);
           },
           children: [
             /* @__PURE__ */ Z("div", { className: "flex w-60 shrink-0 items-center gap-1 ", children: [
@@ -13022,14 +13038,14 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
                 },
                 "grab-handle"
               ),
-              /* @__PURE__ */ p("div", { className: "text-s w-full", children: r ? /* @__PURE__ */ Z("div", { className: Pr("flex items-center gap-2"), children: [
+              /* @__PURE__ */ p("div", { className: "text-s w-full", children: r ? /* @__PURE__ */ Z("div", { className: Ar("flex items-center gap-2"), children: [
                 !w && /* @__PURE__ */ p(
                   $e,
                   {
                     label: `The singleton "${r}" doesn't exist.`,
                     color: "negative",
                     container: Ke(),
-                    children: /* @__PURE__ */ p("span", { className: "rounded p-0.5 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ p(Sr, { className: "h-4 w-4" }) })
+                    children: /* @__PURE__ */ p("span", { className: "rounded p-0.5 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ p(Or, { className: "h-4 w-4" }) })
                   }
                 ),
                 " ",
@@ -13039,7 +13055,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
             /* @__PURE__ */ p("div", { className: "w-60 shrink-0 ", children: /* @__PURE__ */ p("div", { className: "text-s w-full", children: t ? /* @__PURE__ */ Z(
               "div",
               {
-                className: Pr(
+                className: Ar(
                   "flex items-center gap-2",
                   !f && "text-negative-text",
                   O && "text-warning-text"
@@ -13051,7 +13067,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
                       label: `The method "${t}" doesn't exist.`,
                       color: "negative",
                       container: Ke(),
-                      children: /* @__PURE__ */ p("span", { className: "text-negative-text hover:bg-negative-hover rounded p-0.5 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ p(Sr, { className: "inline h-4 w-4" }) })
+                      children: /* @__PURE__ */ p("span", { className: "text-negative-text hover:bg-negative-hover rounded p-0.5 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ p(Or, { className: "inline h-4 w-4" }) })
                     }
                   ),
                   O && /* @__PURE__ */ p(
@@ -13060,7 +13076,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
                       label: `Method "${t}" is already exposed`,
                       color: "warning",
                       container: Ke(),
-                      children: /* @__PURE__ */ p("span", { className: "text-warning-text hover:bg-warning-hover rounded p-0.5 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ p(Sr, { className: "inline h-4 w-4" }) })
+                      children: /* @__PURE__ */ p("span", { className: "text-warning-text hover:bg-warning-hover rounded p-0.5 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ p(Or, { className: "inline h-4 w-4" }) })
                     }
                   ),
                   t
@@ -13103,7 +13119,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
                     variant: "ghost",
                     color: "white",
                     onClick: () => {
-                      nr.next(x), k.actions.setEditingHandler(e);
+                      ir.next(x), k.actions.setEditingHandler(e);
                     },
                     children: /* @__PURE__ */ p(mc, {})
                   }
@@ -13127,7 +13143,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
                           }
                           const { confirmed: y } = await k.actions.openModal({
                             title: "Delete Handler",
-                            type: Tr.CONFIRM,
+                            type: Pr.CONFIRM,
                             color: aa.DANGER,
                             message: "Are you sure you want to remove this Handler?",
                             icon: "FdWarningDanger"
@@ -13150,27 +13166,36 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
   className: e
 }) => {
   const r = Wt(), t = r.getEditingHandlerId();
-  return /* @__PURE__ */ p($e, { label: "Add a new HTTP Handler", container: Ke(), children: /* @__PURE__ */ p(
-    st,
+  return /* @__PURE__ */ p(
+    $e,
     {
-      "data-cy": "handlers-editor-add-handler-button",
-      variant: "ghost",
-      color: "white",
-      disabled: !!t,
-      onClick: () => {
-        nr.next(t), r.actions.addHandler({
-          class: "",
-          isExpanded: !0,
-          method: "",
-          pattern: "",
-          verbs: [],
-          regexPattern: ""
-        });
-      },
-      className: e,
-      children: /* @__PURE__ */ p(Ql, { className: "size-4" })
+      label: "Add a new HTTP Handler",
+      container: Ke(),
+      position: "left",
+      usePortal: !0,
+      children: /* @__PURE__ */ p(
+        st,
+        {
+          "data-cy": "handlers-editor-add-handler-button",
+          variant: "ghost",
+          color: "white",
+          disabled: !!t,
+          onClick: () => {
+            ir.next(t), r.actions.addHandler({
+              class: "",
+              isExpanded: !0,
+              method: "",
+              pattern: "",
+              verbs: [],
+              regexPattern: ""
+            });
+          },
+          className: e,
+          children: /* @__PURE__ */ p(Ql, { className: "size-4" })
+        }
+      )
     }
-  ) });
+  );
 }, bg = ({
   label: e,
   Icon: r,
@@ -13218,12 +13243,12 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
       /* @__PURE__ */ Z(
         "p",
         {
-          className: Pr(
-            "text-grey-100 text-s items-center gap-1",
+          className: Ar(
+            "text-muted text-s items-center gap-1",
             e ? "hidden lg:flex" : "flex pr-2"
           ),
           children: [
-            /* @__PURE__ */ p(oc, { className: "inline text-base text-white" }),
+            /* @__PURE__ */ p(oc, { className: "inline text-base" }),
             " HTTP handlers are evaluated in the order they are declared"
           ]
         }
@@ -13330,7 +13355,7 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
             {
               "data-cy": "handlers-editor-empty-add-handler-button",
               onClick: () => {
-                nr.next(t), e.actions.addHandler({
+                ir.next(t), e.actions.addHandler({
                   class: "",
                   isExpanded: !0,
                   method: "",
@@ -13400,7 +13425,9 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
   catalog: r,
   host: t = "vscode",
   history: o,
-  ...n
+  editingHandlerId: n,
+  onEditingHandlerChange: i,
+  ...a
 }) => /* @__PURE__ */ p(
   ug,
   {
@@ -13408,11 +13435,13 @@ const nr = new la(), Ke = () => document.querySelector(`.${Jl}`) || document.bod
     catalog: r,
     host: t,
     history: o,
-    children: /* @__PURE__ */ p(Eg, { ...n })
+    editingHandlerId: n,
+    onEditingHandlerChange: i,
+    children: /* @__PURE__ */ p(Eg, { ...a })
   }
 );
 export {
-  nr as $handlerSubject,
+  ir as $handlerSubject,
   qh as EditorStateAdapterProvider,
   Tn as EditorStateContext,
   yg as HTTPHandlersEditor,