@m4l/components 0.2.1 → 0.2.2

package/node_modules.f907e6dd.js

@@ -0,0 +1,4736 @@
+import * as React$1 from "react";
+import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect, forwardRef, useContext } from "react";
+import { a as getRegisteredStyles, r as registerStyles, b as insertStyles } from "./utils/index.b22c4c1a.js";
+import isUndefined$1$1 from "lodash/isUndefined";
+import isObject$1 from "lodash/isObject";
+import get$1 from "lodash/get";
+function u$1() {
+  return (u$1 = Object.assign || function(e) {
+    for (var r2 = 1; r2 < arguments.length; r2++) {
+      var t2 = arguments[r2];
+      for (var n2 in t2)
+        Object.prototype.hasOwnProperty.call(t2, n2) && (e[n2] = t2[n2]);
+    }
+    return e;
+  }).apply(this, arguments);
+}
+function c$1(e, r2) {
+  if (null == e)
+    return {};
+  var t2, n2, o2 = {}, a2 = Object.keys(e);
+  for (n2 = 0; n2 < a2.length; n2++)
+    r2.indexOf(t2 = a2[n2]) >= 0 || (o2[t2] = e[t2]);
+  return o2;
+}
+function i$2(e) {
+  var t2 = useRef(e), n2 = useRef(function(e2) {
+    t2.current && t2.current(e2);
+  });
+  return t2.current = e, n2.current;
+}
+var s$2 = function(e, r2, t2) {
+  return void 0 === r2 && (r2 = 0), void 0 === t2 && (t2 = 1), e > t2 ? t2 : e < r2 ? r2 : e;
+}, f$1 = function(e) {
+  return "touches" in e;
+}, v$1 = function(e) {
+  return e && e.ownerDocument.defaultView || self;
+}, d$1 = function(e, r2, t2) {
+  var n2 = e.getBoundingClientRect(), o2 = f$1(r2) ? function(e2, r3) {
+    for (var t3 = 0; t3 < e2.length; t3++)
+      if (e2[t3].identifier === r3)
+        return e2[t3];
+    return e2[0];
+  }(r2.touches, t2) : r2;
+  return { left: s$2((o2.pageX - (n2.left + v$1(e).pageXOffset)) / n2.width), top: s$2((o2.pageY - (n2.top + v$1(e).pageYOffset)) / n2.height) };
+}, h$1 = function(e) {
+  !f$1(e) && e.preventDefault();
+}, m$1 = React__default.memo(function(o2) {
+  var a2 = o2.onMove, l2 = o2.onKey, s2 = c$1(o2, ["onMove", "onKey"]), m2 = useRef(null), g2 = i$2(a2), p2 = i$2(l2), b2 = useRef(null), _2 = useRef(false), x2 = useMemo(function() {
+    var e = function(e2) {
+      h$1(e2), (f$1(e2) ? e2.touches.length > 0 : e2.buttons > 0) && m2.current ? g2(d$1(m2.current, e2, b2.current)) : t2(false);
+    }, r2 = function() {
+      return t2(false);
+    };
+    function t2(t3) {
+      var n2 = _2.current, o3 = v$1(m2.current), a3 = t3 ? o3.addEventListener : o3.removeEventListener;
+      a3(n2 ? "touchmove" : "mousemove", e), a3(n2 ? "touchend" : "mouseup", r2);
+    }
+    return [function(e2) {
+      var r3 = e2.nativeEvent, n2 = m2.current;
+      if (n2 && (h$1(r3), !function(e3, r4) {
+        return r4 && !f$1(e3);
+      }(r3, _2.current) && n2)) {
+        if (f$1(r3)) {
+          _2.current = true;
+          var o3 = r3.changedTouches || [];
+          o3.length && (b2.current = o3[0].identifier);
+        }
+        n2.focus(), g2(d$1(n2, r3, b2.current)), t2(true);
+      }
+    }, function(e2) {
+      var r3 = e2.which || e2.keyCode;
+      r3 < 37 || r3 > 40 || (e2.preventDefault(), p2({ left: 39 === r3 ? 0.05 : 37 === r3 ? -0.05 : 0, top: 40 === r3 ? 0.05 : 38 === r3 ? -0.05 : 0 }));
+    }, t2];
+  }, [p2, g2]), C2 = x2[0], E2 = x2[1], H2 = x2[2];
+  return useEffect(function() {
+    return H2;
+  }, [H2]), React__default.createElement("div", u$1({}, s2, { onTouchStart: C2, onMouseDown: C2, className: "react-colorful__interactive", ref: m2, onKeyDown: E2, tabIndex: 0, role: "slider" }));
+}), g$1 = function(e) {
+  return e.filter(Boolean).join(" ");
+}, p$1 = function(r2) {
+  var t2 = r2.color, n2 = r2.left, o2 = r2.top, a2 = void 0 === o2 ? 0.5 : o2, l2 = g$1(["react-colorful__pointer", r2.className]);
+  return React__default.createElement("div", { className: l2, style: { top: 100 * a2 + "%", left: 100 * n2 + "%" } }, React__default.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: t2 } }));
+}, b$1 = function(e, r2, t2) {
+  return void 0 === r2 && (r2 = 0), void 0 === t2 && (t2 = Math.pow(10, r2)), Math.round(t2 * e) / t2;
+}, x$1 = function(e) {
+  return L$1(C$1(e));
+}, C$1 = function(e) {
+  return "#" === e[0] && (e = e.substring(1)), e.length < 6 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: 4 === e.length ? b$1(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : { r: parseInt(e.substring(0, 2), 16), g: parseInt(e.substring(2, 4), 16), b: parseInt(e.substring(4, 6), 16), a: 8 === e.length ? b$1(parseInt(e.substring(6, 8), 16) / 255, 2) : 1 };
+}, w$1 = function(e) {
+  return K(I$1(e));
+}, y$1 = function(e) {
+  var r2 = e.s, t2 = e.v, n2 = e.a, o2 = (200 - r2) * t2 / 100;
+  return { h: b$1(e.h), s: b$1(o2 > 0 && o2 < 200 ? r2 * t2 / 100 / (o2 <= 100 ? o2 : 200 - o2) * 100 : 0), l: b$1(o2 / 2), a: b$1(n2, 2) };
+}, q$1 = function(e) {
+  var r2 = y$1(e);
+  return "hsl(" + r2.h + ", " + r2.s + "%, " + r2.l + "%)";
+}, I$1 = function(e) {
+  var r2 = e.h, t2 = e.s, n2 = e.v, o2 = e.a;
+  r2 = r2 / 360 * 6, t2 /= 100, n2 /= 100;
+  var a2 = Math.floor(r2), l2 = n2 * (1 - t2), u2 = n2 * (1 - (r2 - a2) * t2), c2 = n2 * (1 - (1 - r2 + a2) * t2), i = a2 % 6;
+  return { r: b$1(255 * [n2, u2, l2, l2, c2, n2][i]), g: b$1(255 * [c2, n2, n2, u2, l2, l2][i]), b: b$1(255 * [l2, l2, c2, n2, n2, u2][i]), a: b$1(o2, 2) };
+}, D$1 = function(e) {
+  var r2 = e.toString(16);
+  return r2.length < 2 ? "0" + r2 : r2;
+}, K = function(e) {
+  var r2 = e.r, t2 = e.g, n2 = e.b, o2 = e.a, a2 = o2 < 1 ? D$1(b$1(255 * o2)) : "";
+  return "#" + D$1(r2) + D$1(t2) + D$1(n2) + a2;
+}, L$1 = function(e) {
+  var r2 = e.r, t2 = e.g, n2 = e.b, o2 = e.a, a2 = Math.max(r2, t2, n2), l2 = a2 - Math.min(r2, t2, n2), u2 = l2 ? a2 === r2 ? (t2 - n2) / l2 : a2 === t2 ? 2 + (n2 - r2) / l2 : 4 + (r2 - t2) / l2 : 0;
+  return { h: b$1(60 * (u2 < 0 ? u2 + 6 : u2)), s: b$1(a2 ? l2 / a2 * 100 : 0), v: b$1(a2 / 255 * 100), a: o2 };
+}, S$1 = React__default.memo(function(r2) {
+  var t2 = r2.hue, n2 = r2.onChange, o2 = g$1(["react-colorful__hue", r2.className]);
+  return React__default.createElement("div", { className: o2 }, React__default.createElement(m$1, { onMove: function(e) {
+    n2({ h: 360 * e.left });
+  }, onKey: function(e) {
+    n2({ h: s$2(t2 + 360 * e.left, 0, 360) });
+  }, "aria-label": "Hue", "aria-valuenow": b$1(t2), "aria-valuemax": "360", "aria-valuemin": "0" }, React__default.createElement(p$1, { className: "react-colorful__hue-pointer", left: t2 / 360, color: q$1({ h: t2, s: 100, v: 100, a: 1 }) })));
+}), T = React__default.memo(function(r2) {
+  var t2 = r2.hsva, n2 = r2.onChange, o2 = { backgroundColor: q$1({ h: t2.h, s: 100, v: 100, a: 1 }) };
+  return React__default.createElement("div", { className: "react-colorful__saturation", style: o2 }, React__default.createElement(m$1, { onMove: function(e) {
+    n2({ s: 100 * e.left, v: 100 - 100 * e.top });
+  }, onKey: function(e) {
+    n2({ s: s$2(t2.s + 100 * e.left, 0, 100), v: s$2(t2.v - 100 * e.top, 0, 100) });
+  }, "aria-label": "Color", "aria-valuetext": "Saturation " + b$1(t2.s) + "%, Brightness " + b$1(t2.v) + "%" }, React__default.createElement(p$1, { className: "react-colorful__saturation-pointer", top: 1 - t2.v / 100, left: t2.s / 100, color: q$1(t2) })));
+}), F = function(e, r2) {
+  if (e === r2)
+    return true;
+  for (var t2 in e)
+    if (e[t2] !== r2[t2])
+      return false;
+  return true;
+}, X$1 = function(e, r2) {
+  return e.toLowerCase() === r2.toLowerCase() || F(C$1(e), C$1(r2));
+};
+function Y$1(e, t2, l2) {
+  var u2 = i$2(l2), c2 = useState(function() {
+    return e.toHsva(t2);
+  }), s2 = c2[0], f2 = c2[1], v2 = useRef({ color: t2, hsva: s2 });
+  useEffect(function() {
+    if (!e.equal(t2, v2.current.color)) {
+      var r2 = e.toHsva(t2);
+      v2.current = { hsva: r2, color: t2 }, f2(r2);
+    }
+  }, [t2, e]), useEffect(function() {
+    var r2;
+    F(s2, v2.current.hsva) || e.equal(r2 = e.fromHsva(s2), v2.current.color) || (v2.current = { hsva: s2, color: r2 }, u2(r2));
+  }, [s2, e, u2]);
+  var d2 = useCallback(function(e2) {
+    f2(function(r2) {
+      return Object.assign({}, r2, e2);
+    });
+  }, []);
+  return [s2, d2];
+}
+var V$1 = "undefined" != typeof window ? useLayoutEffect : useEffect, $ = function() {
+  return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0;
+}, J = /* @__PURE__ */ new Map(), Q$1 = function(e) {
+  V$1(function() {
+    var r2 = e.current ? e.current.ownerDocument : document;
+    if (void 0 !== r2 && !J.has(r2)) {
+      var t2 = r2.createElement("style");
+      t2.innerHTML = `.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`, J.set(r2, t2);
+      var n2 = $();
+      n2 && t2.setAttribute("nonce", n2), r2.head.appendChild(t2);
+    }
+  }, []);
+}, U$1 = function(t2) {
+  var n2 = t2.className, o2 = t2.colorModel, a2 = t2.color, l2 = void 0 === a2 ? o2.defaultColor : a2, i = t2.onChange, s2 = c$1(t2, ["className", "colorModel", "color", "onChange"]), f2 = useRef(null);
+  Q$1(f2);
+  var v2 = Y$1(o2, l2, i), d2 = v2[0], h2 = v2[1], m2 = g$1(["react-colorful", n2]);
+  return React__default.createElement("div", u$1({}, s2, { ref: f2, className: m2 }), React__default.createElement(T, { hsva: d2, onChange: h2 }), React__default.createElement(S$1, { hue: d2.h, onChange: h2, className: "react-colorful__last-control" }));
+}, W$1 = { defaultColor: "000", toHsva: x$1, fromHsva: function(e) {
+  return w$1({ h: e.h, s: e.s, v: e.v, a: 1 });
+}, equal: X$1 }, Z$1 = function(r2) {
+  return React__default.createElement(U$1, u$1({}, r2, { colorModel: W$1 }));
+};
+function n$1(n2) {
+  for (var r2 = arguments.length, t2 = Array(r2 > 1 ? r2 - 1 : 0), e = 1; e < r2; e++)
+    t2[e - 1] = arguments[e];
+  if ("production" !== process.env.NODE_ENV) {
+    var i = Y[n2], o2 = i ? "function" == typeof i ? i.apply(null, t2) : i : "unknown error nr: " + n2;
+    throw Error("[Immer] " + o2);
+  }
+  throw Error("[Immer] minified error nr: " + n2 + (t2.length ? " " + t2.map(function(n3) {
+    return "'" + n3 + "'";
+  }).join(",") : "") + ". Find the full error at: https://bit.ly/3cXEKWf");
+}
+function r$1(n2) {
+  return !!n2 && !!n2[Q];
+}
+function t$1(n2) {
+  var r2;
+  return !!n2 && (function(n3) {
+    if (!n3 || "object" != typeof n3)
+      return false;
+    var r3 = Object.getPrototypeOf(n3);
+    if (null === r3)
+      return true;
+    var t2 = Object.hasOwnProperty.call(r3, "constructor") && r3.constructor;
+    return t2 === Object || "function" == typeof t2 && Function.toString.call(t2) === Z;
+  }(n2) || Array.isArray(n2) || !!n2[L] || !!(null === (r2 = n2.constructor) || void 0 === r2 ? void 0 : r2[L]) || s$1(n2) || v(n2));
+}
+function i$1(n2, r2, t2) {
+  void 0 === t2 && (t2 = false), 0 === o$1(n2) ? (t2 ? Object.keys : nn)(n2).forEach(function(e) {
+    t2 && "symbol" == typeof e || r2(e, n2[e], n2);
+  }) : n2.forEach(function(t3, e) {
+    return r2(e, t3, n2);
+  });
+}
+function o$1(n2) {
+  var r2 = n2[Q];
+  return r2 ? r2.i > 3 ? r2.i - 4 : r2.i : Array.isArray(n2) ? 1 : s$1(n2) ? 2 : v(n2) ? 3 : 0;
+}
+function u(n2, r2) {
+  return 2 === o$1(n2) ? n2.has(r2) : Object.prototype.hasOwnProperty.call(n2, r2);
+}
+function a$1(n2, r2) {
+  return 2 === o$1(n2) ? n2.get(r2) : n2[r2];
+}
+function f(n2, r2, t2) {
+  var e = o$1(n2);
+  2 === e ? n2.set(r2, t2) : 3 === e ? n2.add(t2) : n2[r2] = t2;
+}
+function c(n2, r2) {
+  return n2 === r2 ? 0 !== n2 || 1 / n2 == 1 / r2 : n2 != n2 && r2 != r2;
+}
+function s$1(n2) {
+  return X && n2 instanceof Map;
+}
+function v(n2) {
+  return q && n2 instanceof Set;
+}
+function p(n2) {
+  return n2.o || n2.t;
+}
+function l(n2) {
+  if (Array.isArray(n2))
+    return Array.prototype.slice.call(n2);
+  var r2 = rn(n2);
+  delete r2[Q];
+  for (var t2 = nn(r2), e = 0; e < t2.length; e++) {
+    var i = t2[e], o2 = r2[i];
+    false === o2.writable && (o2.writable = true, o2.configurable = true), (o2.get || o2.set) && (r2[i] = { configurable: true, writable: true, enumerable: o2.enumerable, value: n2[i] });
+  }
+  return Object.create(Object.getPrototypeOf(n2), r2);
+}
+function d(n2, e) {
+  return void 0 === e && (e = false), y(n2) || r$1(n2) || !t$1(n2) || (o$1(n2) > 1 && (n2.set = n2.add = n2.clear = n2.delete = h), Object.freeze(n2), e && i$1(n2, function(n3, r2) {
+    return d(r2, true);
+  }, true)), n2;
+}
+function h() {
+  n$1(2);
+}
+function y(n2) {
+  return null == n2 || "object" != typeof n2 || Object.isFrozen(n2);
+}
+function b(r2) {
+  var t2 = tn[r2];
+  return t2 || n$1(18, r2), t2;
+}
+function m(n2, r2) {
+  tn[n2] || (tn[n2] = r2);
+}
+function _() {
+  return "production" === process.env.NODE_ENV || U || n$1(0), U;
+}
+function j(n2, r2) {
+  r2 && (b("Patches"), n2.u = [], n2.s = [], n2.v = r2);
+}
+function g(n2) {
+  O(n2), n2.p.forEach(S), n2.p = null;
+}
+function O(n2) {
+  n2 === U && (U = n2.l);
+}
+function w(n2) {
+  return U = { p: [], l: U, h: n2, m: true, _: 0 };
+}
+function S(n2) {
+  var r2 = n2[Q];
+  0 === r2.i || 1 === r2.i ? r2.j() : r2.g = true;
+}
+function P(r2, e) {
+  e._ = e.p.length;
+  var i = e.p[0], o2 = void 0 !== r2 && r2 !== i;
+  return e.h.O || b("ES5").S(e, r2, o2), o2 ? (i[Q].P && (g(e), n$1(4)), t$1(r2) && (r2 = M(e, r2), e.l || x(e, r2)), e.u && b("Patches").M(i[Q].t, r2, e.u, e.s)) : r2 = M(e, i, []), g(e), e.u && e.v(e.u, e.s), r2 !== H ? r2 : void 0;
+}
+function M(n2, r2, t2) {
+  if (y(r2))
+    return r2;
+  var e = r2[Q];
+  if (!e)
+    return i$1(r2, function(i, o3) {
+      return A(n2, e, r2, i, o3, t2);
+    }, true), r2;
+  if (e.A !== n2)
+    return r2;
+  if (!e.P)
+    return x(n2, e.t, true), e.t;
+  if (!e.I) {
+    e.I = true, e.A._--;
+    var o2 = 4 === e.i || 5 === e.i ? e.o = l(e.k) : e.o, u2 = o2, a2 = false;
+    3 === e.i && (u2 = new Set(o2), o2.clear(), a2 = true), i$1(u2, function(r3, i) {
+      return A(n2, e, o2, r3, i, t2, a2);
+    }), x(n2, o2, false), t2 && n2.u && b("Patches").N(e, t2, n2.u, n2.s);
+  }
+  return e.o;
+}
+function A(e, i, o2, a2, c2, s2, v2) {
+  if ("production" !== process.env.NODE_ENV && c2 === o2 && n$1(5), r$1(c2)) {
+    var p2 = M(e, c2, s2 && i && 3 !== i.i && !u(i.R, a2) ? s2.concat(a2) : void 0);
+    if (f(o2, a2, p2), !r$1(p2))
+      return;
+    e.m = false;
+  } else
+    v2 && o2.add(c2);
+  if (t$1(c2) && !y(c2)) {
+    if (!e.h.D && e._ < 1)
+      return;
+    M(e, c2), i && i.A.l || x(e, c2);
+  }
+}
+function x(n2, r2, t2) {
+  void 0 === t2 && (t2 = false), !n2.l && n2.h.D && n2.m && d(r2, t2);
+}
+function z(n2, r2) {
+  var t2 = n2[Q];
+  return (t2 ? p(t2) : n2)[r2];
+}
+function I(n2, r2) {
+  if (r2 in n2)
+    for (var t2 = Object.getPrototypeOf(n2); t2; ) {
+      var e = Object.getOwnPropertyDescriptor(t2, r2);
+      if (e)
+        return e;
+      t2 = Object.getPrototypeOf(t2);
+    }
+}
+function k(n2) {
+  n2.P || (n2.P = true, n2.l && k(n2.l));
+}
+function E(n2) {
+  n2.o || (n2.o = l(n2.t));
+}
+function N(n2, r2, t2) {
+  var e = s$1(r2) ? b("MapSet").F(r2, t2) : v(r2) ? b("MapSet").T(r2, t2) : n2.O ? function(n3, r3) {
+    var t3 = Array.isArray(n3), e2 = { i: t3 ? 1 : 0, A: r3 ? r3.A : _(), P: false, I: false, R: {}, l: r3, t: n3, k: null, o: null, j: null, C: false }, i = e2, o2 = en;
+    t3 && (i = [e2], o2 = on);
+    var u2 = Proxy.revocable(i, o2), a2 = u2.revoke, f2 = u2.proxy;
+    return e2.k = f2, e2.j = a2, f2;
+  }(r2, t2) : b("ES5").J(r2, t2);
+  return (t2 ? t2.A : _()).p.push(e), e;
+}
+function R(e) {
+  return r$1(e) || n$1(22, e), function n2(r2) {
+    if (!t$1(r2))
+      return r2;
+    var e2, u2 = r2[Q], c2 = o$1(r2);
+    if (u2) {
+      if (!u2.P && (u2.i < 4 || !b("ES5").K(u2)))
+        return u2.t;
+      u2.I = true, e2 = D(r2, c2), u2.I = false;
+    } else
+      e2 = D(r2, c2);
+    return i$1(e2, function(r3, t2) {
+      u2 && a$1(u2.t, r3) === t2 || f(e2, r3, n2(t2));
+    }), 3 === c2 ? new Set(e2) : e2;
+  }(e);
+}
+function D(n2, r2) {
+  switch (r2) {
+    case 2:
+      return new Map(n2);
+    case 3:
+      return Array.from(n2);
+  }
+  return l(n2);
+}
+function C() {
+  function r2(n2, r3) {
+    function t2() {
+      this.constructor = n2;
+    }
+    a2(n2, r3), n2.prototype = (t2.prototype = r3.prototype, new t2());
+  }
+  function e(n2) {
+    n2.o || (n2.R = /* @__PURE__ */ new Map(), n2.o = new Map(n2.t));
+  }
+  function o2(n2) {
+    n2.o || (n2.o = /* @__PURE__ */ new Set(), n2.t.forEach(function(r3) {
+      if (t$1(r3)) {
+        var e2 = N(n2.A.h, r3, n2);
+        n2.p.set(r3, e2), n2.o.add(e2);
+      } else
+        n2.o.add(r3);
+    }));
+  }
+  function u2(r3) {
+    r3.g && n$1(3, JSON.stringify(p(r3)));
+  }
+  var a2 = function(n2, r3) {
+    return (a2 = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(n3, r4) {
+      n3.__proto__ = r4;
+    } || function(n3, r4) {
+      for (var t2 in r4)
+        r4.hasOwnProperty(t2) && (n3[t2] = r4[t2]);
+    })(n2, r3);
+  }, f2 = function() {
+    function n2(n3, r3) {
+      return this[Q] = { i: 2, l: r3, A: r3 ? r3.A : _(), P: false, I: false, o: void 0, R: void 0, t: n3, k: this, C: false, g: false }, this;
+    }
+    r2(n2, Map);
+    var o3 = n2.prototype;
+    return Object.defineProperty(o3, "size", { get: function() {
+      return p(this[Q]).size;
+    } }), o3.has = function(n3) {
+      return p(this[Q]).has(n3);
+    }, o3.set = function(n3, r3) {
+      var t2 = this[Q];
+      return u2(t2), p(t2).has(n3) && p(t2).get(n3) === r3 || (e(t2), k(t2), t2.R.set(n3, true), t2.o.set(n3, r3), t2.R.set(n3, true)), this;
+    }, o3.delete = function(n3) {
+      if (!this.has(n3))
+        return false;
+      var r3 = this[Q];
+      return u2(r3), e(r3), k(r3), r3.t.has(n3) ? r3.R.set(n3, false) : r3.R.delete(n3), r3.o.delete(n3), true;
+    }, o3.clear = function() {
+      var n3 = this[Q];
+      u2(n3), p(n3).size && (e(n3), k(n3), n3.R = /* @__PURE__ */ new Map(), i$1(n3.t, function(r3) {
+        n3.R.set(r3, false);
+      }), n3.o.clear());
+    }, o3.forEach = function(n3, r3) {
+      var t2 = this;
+      p(this[Q]).forEach(function(e2, i) {
+        n3.call(r3, t2.get(i), i, t2);
+      });
+    }, o3.get = function(n3) {
+      var r3 = this[Q];
+      u2(r3);
+      var i = p(r3).get(n3);
+      if (r3.I || !t$1(i))
+        return i;
+      if (i !== r3.t.get(n3))
+        return i;
+      var o4 = N(r3.A.h, i, r3);
+      return e(r3), r3.o.set(n3, o4), o4;
+    }, o3.keys = function() {
+      return p(this[Q]).keys();
+    }, o3.values = function() {
+      var n3, r3 = this, t2 = this.keys();
+      return (n3 = {})[V] = function() {
+        return r3.values();
+      }, n3.next = function() {
+        var n4 = t2.next();
+        return n4.done ? n4 : { done: false, value: r3.get(n4.value) };
+      }, n3;
+    }, o3.entries = function() {
+      var n3, r3 = this, t2 = this.keys();
+      return (n3 = {})[V] = function() {
+        return r3.entries();
+      }, n3.next = function() {
+        var n4 = t2.next();
+        if (n4.done)
+          return n4;
+        var e2 = r3.get(n4.value);
+        return { done: false, value: [n4.value, e2] };
+      }, n3;
+    }, o3[V] = function() {
+      return this.entries();
+    }, n2;
+  }(), c2 = function() {
+    function n2(n3, r3) {
+      return this[Q] = { i: 3, l: r3, A: r3 ? r3.A : _(), P: false, I: false, o: void 0, t: n3, k: this, p: /* @__PURE__ */ new Map(), g: false, C: false }, this;
+    }
+    r2(n2, Set);
+    var t2 = n2.prototype;
+    return Object.defineProperty(t2, "size", { get: function() {
+      return p(this[Q]).size;
+    } }), t2.has = function(n3) {
+      var r3 = this[Q];
+      return u2(r3), r3.o ? !!r3.o.has(n3) || !(!r3.p.has(n3) || !r3.o.has(r3.p.get(n3))) : r3.t.has(n3);
+    }, t2.add = function(n3) {
+      var r3 = this[Q];
+      return u2(r3), this.has(n3) || (o2(r3), k(r3), r3.o.add(n3)), this;
+    }, t2.delete = function(n3) {
+      if (!this.has(n3))
+        return false;
+      var r3 = this[Q];
+      return u2(r3), o2(r3), k(r3), r3.o.delete(n3) || !!r3.p.has(n3) && r3.o.delete(r3.p.get(n3));
+    }, t2.clear = function() {
+      var n3 = this[Q];
+      u2(n3), p(n3).size && (o2(n3), k(n3), n3.o.clear());
+    }, t2.values = function() {
+      var n3 = this[Q];
+      return u2(n3), o2(n3), n3.o.values();
+    }, t2.entries = function() {
+      var n3 = this[Q];
+      return u2(n3), o2(n3), n3.o.entries();
+    }, t2.keys = function() {
+      return this.values();
+    }, t2[V] = function() {
+      return this.values();
+    }, t2.forEach = function(n3, r3) {
+      for (var t3 = this.values(), e2 = t3.next(); !e2.done; )
+        n3.call(r3, e2.value, e2.value, this), e2 = t3.next();
+    }, n2;
+  }();
+  m("MapSet", { F: function(n2, r3) {
+    return new f2(n2, r3);
+  }, T: function(n2, r3) {
+    return new c2(n2, r3);
+  } });
+}
+var G, U, W = "undefined" != typeof Symbol && "symbol" == typeof Symbol("x"), X = "undefined" != typeof Map, q = "undefined" != typeof Set, B = "undefined" != typeof Proxy && void 0 !== Proxy.revocable && "undefined" != typeof Reflect, H = W ? Symbol.for("immer-nothing") : ((G = {})["immer-nothing"] = true, G), L = W ? Symbol.for("immer-draftable") : "__$immer_draftable", Q = W ? Symbol.for("immer-state") : "__$immer_state", V = "undefined" != typeof Symbol && Symbol.iterator || "@@iterator", Y = { 0: "Illegal state", 1: "Immer drafts cannot have computed properties", 2: "This object has been frozen and should not be mutated", 3: function(n2) {
+  return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? " + n2;
+}, 4: "An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.", 5: "Immer forbids circular references", 6: "The first or second argument to `produce` must be a function", 7: "The third argument to `produce` must be a function or undefined", 8: "First argument to `createDraft` must be a plain object, an array, or an immerable object", 9: "First argument to `finishDraft` must be a draft returned by `createDraft`", 10: "The given draft is already finalized", 11: "Object.defineProperty() cannot be used on an Immer draft", 12: "Object.setPrototypeOf() cannot be used on an Immer draft", 13: "Immer only supports deleting array indices", 14: "Immer only supports setting array indices and the 'length' property", 15: function(n2) {
+  return "Cannot apply patch, path doesn't resolve: " + n2;
+}, 16: 'Sets cannot have "replace" patches.', 17: function(n2) {
+  return "Unsupported patch operation: " + n2;
+}, 18: function(n2) {
+  return "The plugin for '" + n2 + "' has not been loaded into Immer. To enable the plugin, import and call `enable" + n2 + "()` when initializing your application.";
+}, 20: "Cannot use proxies if Proxy, Proxy.revocable or Reflect are not available", 21: function(n2) {
+  return "produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '" + n2 + "'";
+}, 22: function(n2) {
+  return "'current' expects a draft, got: " + n2;
+}, 23: function(n2) {
+  return "'original' expects a draft, got: " + n2;
+}, 24: "Patching reserved attributes like __proto__, prototype and constructor is not allowed" }, Z = "" + Object.prototype.constructor, nn = "undefined" != typeof Reflect && Reflect.ownKeys ? Reflect.ownKeys : void 0 !== Object.getOwnPropertySymbols ? function(n2) {
+  return Object.getOwnPropertyNames(n2).concat(Object.getOwnPropertySymbols(n2));
+} : Object.getOwnPropertyNames, rn = Object.getOwnPropertyDescriptors || function(n2) {
+  var r2 = {};
+  return nn(n2).forEach(function(t2) {
+    r2[t2] = Object.getOwnPropertyDescriptor(n2, t2);
+  }), r2;
+}, tn = {}, en = { get: function(n2, r2) {
+  if (r2 === Q)
+    return n2;
+  var e = p(n2);
+  if (!u(e, r2))
+    return function(n3, r3, t2) {
+      var e2, i2 = I(r3, t2);
+      return i2 ? "value" in i2 ? i2.value : null === (e2 = i2.get) || void 0 === e2 ? void 0 : e2.call(n3.k) : void 0;
+    }(n2, e, r2);
+  var i = e[r2];
+  return n2.I || !t$1(i) ? i : i === z(n2.t, r2) ? (E(n2), n2.o[r2] = N(n2.A.h, i, n2)) : i;
+}, has: function(n2, r2) {
+  return r2 in p(n2);
+}, ownKeys: function(n2) {
+  return Reflect.ownKeys(p(n2));
+}, set: function(n2, r2, t2) {
+  var e = I(p(n2), r2);
+  if (null == e ? void 0 : e.set)
+    return e.set.call(n2.k, t2), true;
+  if (!n2.P) {
+    var i = z(p(n2), r2), o2 = null == i ? void 0 : i[Q];
+    if (o2 && o2.t === t2)
+      return n2.o[r2] = t2, n2.R[r2] = false, true;
+    if (c(t2, i) && (void 0 !== t2 || u(n2.t, r2)))
+      return true;
+    E(n2), k(n2);
+  }
+  return n2.o[r2] === t2 && (void 0 !== t2 || r2 in n2.o) || Number.isNaN(t2) && Number.isNaN(n2.o[r2]) || (n2.o[r2] = t2, n2.R[r2] = true), true;
+}, deleteProperty: function(n2, r2) {
+  return void 0 !== z(n2.t, r2) || r2 in n2.t ? (n2.R[r2] = false, E(n2), k(n2)) : delete n2.R[r2], n2.o && delete n2.o[r2], true;
+}, getOwnPropertyDescriptor: function(n2, r2) {
+  var t2 = p(n2), e = Reflect.getOwnPropertyDescriptor(t2, r2);
+  return e ? { writable: true, configurable: 1 !== n2.i || "length" !== r2, enumerable: e.enumerable, value: t2[r2] } : e;
+}, defineProperty: function() {
+  n$1(11);
+}, getPrototypeOf: function(n2) {
+  return Object.getPrototypeOf(n2.t);
+}, setPrototypeOf: function() {
+  n$1(12);
+} }, on = {};
+i$1(en, function(n2, r2) {
+  on[n2] = function() {
+    return arguments[0] = arguments[0][0], r2.apply(this, arguments);
+  };
+}), on.deleteProperty = function(r2, t2) {
+  return "production" !== process.env.NODE_ENV && isNaN(parseInt(t2)) && n$1(13), on.set.call(this, r2, t2, void 0);
+}, on.set = function(r2, t2, e) {
+  return "production" !== process.env.NODE_ENV && "length" !== t2 && isNaN(parseInt(t2)) && n$1(14), en.set.call(this, r2[0], t2, e, r2[0]);
+};
+var un = function() {
+  function e(r2) {
+    var e2 = this;
+    this.O = B, this.D = true, this.produce = function(r3, i2, o2) {
+      if ("function" == typeof r3 && "function" != typeof i2) {
+        var u2 = i2;
+        i2 = r3;
+        var a2 = e2;
+        return function(n2) {
+          var r4 = this;
+          void 0 === n2 && (n2 = u2);
+          for (var t2 = arguments.length, e3 = Array(t2 > 1 ? t2 - 1 : 0), o3 = 1; o3 < t2; o3++)
+            e3[o3 - 1] = arguments[o3];
+          return a2.produce(n2, function(n3) {
+            var t3;
+            return (t3 = i2).call.apply(t3, [r4, n3].concat(e3));
+          });
+        };
+      }
+      var f2;
+      if ("function" != typeof i2 && n$1(6), void 0 !== o2 && "function" != typeof o2 && n$1(7), t$1(r3)) {
+        var c2 = w(e2), s2 = N(e2, r3, void 0), v2 = true;
+        try {
+          f2 = i2(s2), v2 = false;
+        } finally {
+          v2 ? g(c2) : O(c2);
+        }
+        return "undefined" != typeof Promise && f2 instanceof Promise ? f2.then(function(n2) {
+          return j(c2, o2), P(n2, c2);
+        }, function(n2) {
+          throw g(c2), n2;
+        }) : (j(c2, o2), P(f2, c2));
+      }
+      if (!r3 || "object" != typeof r3) {
+        if (void 0 === (f2 = i2(r3)) && (f2 = r3), f2 === H && (f2 = void 0), e2.D && d(f2, true), o2) {
+          var p2 = [], l2 = [];
+          b("Patches").M(r3, f2, p2, l2), o2(p2, l2);
+        }
+        return f2;
+      }
+      n$1(21, r3);
+    }, this.produceWithPatches = function(n2, r3) {
+      if ("function" == typeof n2)
+        return function(r4) {
+          for (var t3 = arguments.length, i3 = Array(t3 > 1 ? t3 - 1 : 0), o3 = 1; o3 < t3; o3++)
+            i3[o3 - 1] = arguments[o3];
+          return e2.produceWithPatches(r4, function(r5) {
+            return n2.apply(void 0, [r5].concat(i3));
+          });
+        };
+      var t2, i2, o2 = e2.produce(n2, r3, function(n3, r4) {
+        t2 = n3, i2 = r4;
+      });
+      return "undefined" != typeof Promise && o2 instanceof Promise ? o2.then(function(n3) {
+        return [n3, t2, i2];
+      }) : [o2, t2, i2];
+    }, "boolean" == typeof (null == r2 ? void 0 : r2.useProxies) && this.setUseProxies(r2.useProxies), "boolean" == typeof (null == r2 ? void 0 : r2.autoFreeze) && this.setAutoFreeze(r2.autoFreeze);
+  }
+  var i = e.prototype;
+  return i.createDraft = function(e2) {
+    t$1(e2) || n$1(8), r$1(e2) && (e2 = R(e2));
+    var i2 = w(this), o2 = N(this, e2, void 0);
+    return o2[Q].C = true, O(i2), o2;
+  }, i.finishDraft = function(r2, t2) {
+    var e2 = r2 && r2[Q];
+    "production" !== process.env.NODE_ENV && (e2 && e2.C || n$1(9), e2.I && n$1(10));
+    var i2 = e2.A;
+    return j(i2, t2), P(void 0, i2);
+  }, i.setAutoFreeze = function(n2) {
+    this.D = n2;
+  }, i.setUseProxies = function(r2) {
+    r2 && !B && n$1(20), this.O = r2;
+  }, i.applyPatches = function(n2, t2) {
+    var e2;
+    for (e2 = t2.length - 1; e2 >= 0; e2--) {
+      var i2 = t2[e2];
+      if (0 === i2.path.length && "replace" === i2.op) {
+        n2 = i2.value;
+        break;
+      }
+    }
+    e2 > -1 && (t2 = t2.slice(e2 + 1));
+    var o2 = b("Patches").$;
+    return r$1(n2) ? o2(n2, t2) : this.produce(n2, function(n3) {
+      return o2(n3, t2);
+    });
+  }, e;
+}(), an = new un();
+an.produce;
+an.produceWithPatches.bind(an);
+an.setAutoFreeze.bind(an);
+an.setUseProxies.bind(an);
+an.applyPatches.bind(an);
+an.createDraft.bind(an);
+an.finishDraft.bind(an);
+var t = function() {
+  var e = { name: "__LSM__", middleWares: [], persist: "action" }, t2 = {};
+  try {
+    e.storageType = "undefined" != typeof sessionStorage ? window.sessionStorage : void 0;
+  } catch (e2) {
+  }
+  return { updateStore: function(n2) {
+    try {
+      t2 = e.storageType && JSON.parse(e.storageType.getItem(e.name) || "") || n2;
+    } catch (e2) {
+      t2 = n2;
+    }
+  }, saveStore: function() {
+    e.storageType && e.storageType.setItem(e.name, JSON.stringify(t2));
+  }, get state() {
+    return t2;
+  }, set state(e2) {
+    t2 = e2;
+  }, get options() {
+    return e;
+  }, set options(t3) {
+    e = t3;
+  } };
+}(), n = React$1.createContext(void 0), o = function(o2) {
+  var r2 = o2.children, s2 = React$1.useState(t.state), a2 = s2[0], i = s2[1];
+  return React$1.useEffect(function() {
+    "beforeUnload" === t.options.persist && (window.onbeforeunload = function() {
+      return t.saveStore();
+    }, t.options.storageType && t.options.storageType.removeItem(t.options.name));
+  }, []), React$1.createElement(n.Provider, { value: { state: a2, setState: i } }, r2);
+};
+function r() {
+  return r = Object.assign || function(e) {
+    for (var t2 = 1; t2 < arguments.length; t2++) {
+      var n2 = arguments[t2];
+      for (var o2 in n2)
+        Object.prototype.hasOwnProperty.call(n2, o2) && (e[o2] = n2[o2]);
+    }
+    return e;
+  }, r.apply(this, arguments);
+}
+function s(e, n2) {
+  n2 && (t.options = r({}, t.options, n2)), "production" !== process.env.NODE_ENV && "undefined" != typeof window && (window.__LSM_NAME__ = t.options.name, window.__LSM_RESET__ = function() {
+    return t.options.storageType && t.options.storageType.removeItem(t.options.name);
+  }), t.updateStore(e);
+}
+function a(o2) {
+  var r2 = React$1.useContext(n), s2 = r2.state, a2 = r2.setState, i = React$1.useRef(Object.entries(o2 || {}).reduce(function(e, n2) {
+    var o3;
+    return Object.assign({}, e, ((o3 = {})[n2[0]] = function(e2, n3) {
+      return function(o4, r3) {
+        "production" !== process.env.NODE_ENV && (window.__LSM_NAME__ = n3.name), t.state = n3(t.state, o4), t.options.middleWares && (t.state = t.options.middleWares.reduce(function(e3, t2) {
+          return t2(e3, n3.name, o4) || e3;
+        }, t.state)), (!r3 || !r3.skipRender) && e2(t.state), "action" === t.options.persist && t.saveStore();
+      };
+    }(a2, n2[1]), o3));
+  }, {}));
+  return { actions: i.current, state: s2, getState: React$1.useCallback(function() {
+    return t.state;
+  }, []) };
+}
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== "undefined" && typeof msCrypto.getRandomValues === "function" && msCrypto.getRandomValues.bind(msCrypto);
+    if (!getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+  }
+  return getRandomValues(rnds8);
+}
+const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+function validate(uuid) {
+  return typeof uuid === "string" && REGEX.test(uuid);
+}
+var byteToHex = [];
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).substr(1));
+}
+function stringify$1(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  if (!validate(uuid)) {
+    throw TypeError("Stringified UUID is invalid");
+  }
+  return uuid;
+}
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)();
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  if (buf) {
+    offset = offset || 0;
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+    return buf;
+  }
+  return stringify$1(rnds);
+}
+var dist = {};
+Object.defineProperty(dist, "__esModule", { value: true });
+var React = React__default;
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  var n2 = /* @__PURE__ */ Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function(k2) {
+      if (k2 !== "default") {
+        var d2 = Object.getOwnPropertyDescriptor(e, k2);
+        Object.defineProperty(n2, k2, d2.get ? d2 : {
+          enumerable: true,
+          get: function() {
+            return e[k2];
+          }
+        });
+      }
+    });
+  }
+  n2["default"] = e;
+  return Object.freeze(n2);
+}
+var React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const DEFAULT_DURATION = 0.3;
+const DEFAULT_EASE_TYPE = "linear";
+const DEFAULT_DIRECTION = "normal";
+const DEFAULT_FILLMODE = "none";
+const RUNNING = "running";
+const PAUSED = "paused";
+const ALL = "all";
+var calculateTotalDuration = ({ duration = DEFAULT_DURATION, delay = 0, overlay = 0 }) => duration + delay - overlay || 0;
+var isUndefined$1 = (val) => val === void 0;
+function getSequenceId(sequenceIndex, sequenceId, defaultValue) {
+  if (isUndefined$1(sequenceId) && isUndefined$1(sequenceIndex)) {
+    return defaultValue || 0;
+  }
+  if (sequenceIndex && sequenceIndex >= 0) {
+    return sequenceIndex;
+  }
+  if (sequenceId) {
+    return sequenceId;
+  }
+  return 0;
+}
+const AnimateContext = React__namespace.createContext({
+  animationStates: {},
+  register: () => {
+  }
+});
+function AnimateGroup({ play, sequences = [], children }) {
+  const [animationStates, setAnimationStates] = React__namespace.useState({});
+  const animationsRef = React__namespace.useRef({});
+  const register = React__namespace.useCallback((data) => {
+    const { sequenceIndex, sequenceId } = data;
+    if (!isUndefined$1(sequenceId) || !isUndefined$1(sequenceIndex)) {
+      animationsRef.current[getSequenceId(sequenceIndex, sequenceId)] = data;
+    }
+  }, []);
+  React__namespace.useEffect(() => {
+    const sequencesToAnimate = Array.isArray(sequences) && sequences.length ? sequences : Object.values(animationsRef.current);
+    const localAnimationState = {};
+    (play ? sequencesToAnimate : [...sequencesToAnimate].reverse()).reduce((previous, { sequenceId, sequenceIndex, duration = DEFAULT_DURATION, delay, overlay }, currentIndex) => {
+      const id = getSequenceId(sequenceIndex, sequenceId, currentIndex);
+      const currentTotalDuration = calculateTotalDuration({
+        duration,
+        delay,
+        overlay
+      });
+      const totalDuration = currentTotalDuration + previous;
+      localAnimationState[id] = {
+        play,
+        pause: !play,
+        delay: (delay || 0) + previous,
+        controlled: true
+      };
+      return totalDuration;
+    }, 0);
+    setAnimationStates(localAnimationState);
+  }, [play]);
+  return React__namespace.createElement(AnimateContext.Provider, { value: { animationStates, register } }, children);
+}
+var secToMs = (ms) => (ms || 0) * 1e3;
+function Animate(props) {
+  const { play, children, render, start, end, complete = "", onComplete, delay = 0, duration = DEFAULT_DURATION, easeType = DEFAULT_EASE_TYPE, sequenceId, sequenceIndex } = props;
+  const onCompleteTimeRef = React__namespace.useRef();
+  const [style, setStyle] = React__namespace.useState(start || {});
+  const { register, animationStates = {} } = React__namespace.useContext(AnimateContext);
+  const id = getSequenceId(sequenceIndex, sequenceId);
+  React__namespace.useEffect(() => {
+    if (!isUndefined$1(sequenceIndex) && sequenceIndex >= 0 || sequenceId) {
+      register(props);
+    }
+  }, []);
+  React__namespace.useEffect(() => {
+    const animationState = animationStates[id] || {};
+    setStyle({
+      ...play || animationState.play ? end : start,
+      transition: `${ALL} ${duration}s ${easeType} ${animationState.delay || delay}s`
+    });
+    if (play && (complete || onComplete)) {
+      onCompleteTimeRef.current = setTimeout(() => {
+        complete && setStyle(complete);
+        onComplete && onComplete();
+      }, secToMs((animationState.delay || delay) + duration));
+    }
+    return () => onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current);
+  }, [
+    id,
+    animationStates,
+    play,
+    duration,
+    easeType,
+    delay,
+    onComplete,
+    start,
+    end,
+    complete
+  ]);
+  return render ? render({ style }) : React__namespace.createElement("div", { style }, children);
+}
+var camelCaseToDash = (camelCase) => camelCase ? camelCase.replace(/[A-Z]/g, (c2) => `-${c2.toLowerCase()}`) : "";
+const generateKeyframes = (keyframes) => {
+  const animationLength = keyframes.length;
+  return keyframes.reduce((previous, keyframe, currentIndex) => {
+    const keyframePercentage = parseFloat((100 / (animationLength - 1)).toFixed(2)) * currentIndex;
+    if (typeof keyframe === "string") {
+      return `${previous} ${keyframePercentage}% {${keyframe}}`;
+    }
+    const keys = Object.keys(keyframe);
+    if (keys.length && isNaN(+keys[0])) {
+      const keyframeContent = keys.reduce((acc, key) => `${acc} ${camelCaseToDash(key)}: ${keyframe[key]};`, "");
+      return `${previous} ${keyframePercentage}% {${keyframeContent}}`;
+    }
+    return `${previous} ${keys[0]}% {${keyframe[keys[0]]}}`;
+  }, "");
+};
+function createStyle({ keyframes, animationName }) {
+  return `@keyframes ${animationName} {${generateKeyframes(keyframes)}}`;
+}
+function createTag({ keyframes, animationName }) {
+  var _a, _b, _c, _d;
+  let styleTag = document.querySelector("style[data-id=rsi]");
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.setAttribute("data-id", "rsi");
+    document.head.appendChild(styleTag);
+  }
+  const index = (_c = (_b = (_a = styleTag.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+  try {
+    (_d = styleTag.sheet) === null || _d === void 0 ? void 0 : _d.insertRule(createStyle({
+      keyframes,
+      animationName
+    }), index);
+  } catch (e) {
+    console.error("react simple animate, error found during insert style ", e);
+  }
+  return {
+    styleTag,
+    index
+  };
+}
+var deleteRules = (sheet, deleteName) => {
+  if (!sheet) {
+    return;
+  }
+  const index = Object.values(sheet.cssRules).findIndex(({ name }) => name === deleteName);
+  if (index >= 0) {
+    sheet.deleteRule(index);
+  }
+};
+var createRandomName = () => `RSI-${Math.random().toString(36).substr(2, 9)}`;
+var getPlayState = (pause) => pause ? PAUSED : RUNNING;
+function AnimateKeyframes(props) {
+  const { children, play = false, pause = false, render, duration = DEFAULT_DURATION, delay = 0, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, iterationCount = 1, sequenceIndex, keyframes, sequenceId } = props;
+  let pauseValue;
+  const animationNameRef = React__namespace.useRef({
+    forward: "",
+    reverse: ""
+  });
+  const controlled = React__namespace.useRef(false);
+  const styleTagRef = React__namespace.useRef({
+    forward: null,
+    reverse: null
+  });
+  const id = getSequenceId(sequenceIndex, sequenceId);
+  const { register, animationStates = {} } = React__namespace.useContext(AnimateContext);
+  const animateState = animationStates[id] || {};
+  const [, forceUpdate] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    const styleTag = styleTagRef.current;
+    const animationName = animationNameRef.current;
+    animationNameRef.current.forward = createRandomName();
+    let result = createTag({
+      animationName: animationNameRef.current.forward,
+      keyframes
+    });
+    styleTagRef.current.forward = result.styleTag;
+    animationNameRef.current.reverse = createRandomName();
+    result = createTag({
+      animationName: animationNameRef.current.reverse,
+      keyframes: keyframes.reverse()
+    });
+    styleTagRef.current.reverse = result.styleTag;
+    register(props);
+    if (play) {
+      forceUpdate(true);
+    }
+    return () => {
+      var _a, _b;
+      deleteRules((_a = styleTag.forward) === null || _a === void 0 ? void 0 : _a.sheet, animationName.forward);
+      deleteRules((_b = styleTag.reverse) === null || _b === void 0 ? void 0 : _b.sheet, animationName.reverse);
+    };
+  }, []);
+  if (animateState.controlled && !controlled.current) {
+    pauseValue = animateState.pause;
+    if (!animateState.pause) {
+      controlled.current = true;
+    }
+  } else {
+    pauseValue = pause;
+  }
+  const style = {
+    animation: `${duration}s ${easeType} ${animateState.delay || delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(pauseValue)} ${((animateState.controlled ? animateState.play : play) ? animationNameRef.current.forward : animationNameRef.current.reverse) || ""}`
+  };
+  return render ? render({ style }) : React__namespace.createElement("div", { style: style || {} }, children);
+}
+function useAnimate(props) {
+  const { start, end, complete, onComplete, delay = 0, duration = DEFAULT_DURATION, easeType = DEFAULT_EASE_TYPE } = props;
+  const transition = React__namespace.useMemo(() => `${ALL} ${duration}s ${easeType} ${delay}s`, [duration, easeType, delay]);
+  const [animate, setAnimate] = React__namespace.useState({
+    isPlaying: false,
+    style: { ...start, transition }
+  });
+  const { isPlaying, style } = animate;
+  const onCompleteTimeRef = React__namespace.useRef();
+  React__namespace.useEffect(() => {
+    if ((onComplete || complete) && isPlaying) {
+      onCompleteTimeRef.current = setTimeout(() => {
+        if (onComplete) {
+          onComplete();
+        }
+        if (complete) {
+          setAnimate((animate2) => ({
+            ...animate2,
+            style: complete
+          }));
+        }
+      }, secToMs(delay + duration));
+    }
+    return () => onCompleteTimeRef.current && clearTimeout(onCompleteTimeRef.current);
+  }, [animate, complete, delay, duration, isPlaying, onComplete]);
+  return {
+    isPlaying,
+    style,
+    play: React__namespace.useCallback((isPlaying2) => {
+      setAnimate((animate2) => ({
+        ...animate2,
+        style: {
+          ...isPlaying2 ? end : start,
+          transition
+        },
+        isPlaying: isPlaying2
+      }));
+    }, [end, start, transition])
+  };
+}
+function useAnimateKeyframes(props) {
+  const { duration = DEFAULT_DURATION, delay = 0, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, iterationCount = 1, keyframes } = props;
+  const animationNameRef = React__namespace.useRef({
+    forward: "",
+    reverse: ""
+  });
+  const styleTagRef = React__namespace.useRef({
+    forward: null,
+    reverse: null
+  });
+  const { register } = React__namespace.useContext(AnimateContext);
+  const [isPlaying, setIsPlaying] = React__namespace.useState(null);
+  const [isPaused, setIsPaused] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    const styleTag = styleTagRef.current;
+    const animationName = animationNameRef.current;
+    animationNameRef.current.forward = createRandomName();
+    let result = createTag({
+      animationName: animationNameRef.current.forward,
+      keyframes
+    });
+    styleTagRef.current.forward = result.styleTag;
+    animationNameRef.current.reverse = createRandomName();
+    result = createTag({
+      animationName: animationNameRef.current.reverse,
+      keyframes: keyframes.reverse()
+    });
+    styleTagRef.current.reverse = result.styleTag;
+    register(props);
+    return () => {
+      var _a, _b;
+      deleteRules((_a = styleTag.forward) === null || _a === void 0 ? void 0 : _a.sheet, animationName.forward);
+      deleteRules((_b = styleTag.reverse) === null || _b === void 0 ? void 0 : _b.sheet, animationName.reverse);
+    };
+  }, []);
+  const style = {
+    animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(isPaused)} ${isPlaying === null ? "" : isPlaying ? animationNameRef.current.forward : animationNameRef.current.reverse}`
+  };
+  return {
+    style,
+    play: setIsPlaying,
+    pause: setIsPaused,
+    isPlaying: !!isPlaying
+  };
+}
+function createArrayWithNumbers(length2) {
+  return Array.from({ length: length2 }, () => null);
+}
+function useAnimateGroup(props) {
+  const { sequences = [] } = props;
+  const defaultArray = createArrayWithNumbers(sequences.length).map((_2, index) => props.sequences[index].start);
+  const [styles, setStyles] = React__namespace.useState(defaultArray);
+  const [isPlaying, setPlaying] = React__namespace.useState(false);
+  const animationNamesRef = React__namespace.useRef([]);
+  const styleTagRef = React__namespace.useRef([]);
+  React__namespace.useEffect(() => {
+    sequences.forEach(({ keyframes }, i) => {
+      if (!Array.isArray(keyframes)) {
+        return;
+      }
+      if (!animationNamesRef.current[i]) {
+        animationNamesRef.current[i] = {};
+        styleTagRef.current[i] = {};
+      }
+      animationNamesRef.current[i].forward = createRandomName();
+      let result = createTag({
+        animationName: animationNamesRef.current[i].forward,
+        keyframes
+      });
+      styleTagRef.current[i].forward = result.styleTag;
+      animationNamesRef.current[i].reverse = createRandomName();
+      result = createTag({
+        animationName: animationNamesRef.current[i].reverse,
+        keyframes: keyframes.reverse()
+      });
+      styleTagRef.current[i].reverse = result.styleTag;
+    });
+    const styleTags = styleTagRef.current;
+    const animationNames = animationNamesRef.current;
+    return () => Object.values(animationNames).forEach(({ forward, reverse }, i) => {
+      var _a, _b;
+      deleteRules((_a = styleTags[i].forward) === null || _a === void 0 ? void 0 : _a.sheet, forward);
+      deleteRules((_b = styleTags[i].reverse) === null || _b === void 0 ? void 0 : _b.sheet, reverse);
+    });
+  }, []);
+  const play = React__namespace.useCallback((isPlay) => {
+    let totalDuration = 0;
+    const animationRefWithOrder = isPlay ? animationNamesRef.current : [...animationNamesRef.current].reverse();
+    const styles2 = (isPlay ? sequences : [...sequences].reverse()).map((current, currentIndex) => {
+      const { duration = DEFAULT_DURATION, delay = 0, overlay, keyframes, iterationCount = 1, easeType = DEFAULT_EASE_TYPE, direction = DEFAULT_DIRECTION, fillMode = DEFAULT_FILLMODE, end = {}, start = {} } = current;
+      const delayDuration = currentIndex === 0 ? delay : totalDuration;
+      const transition = `${ALL} ${duration}s ${easeType} ${delayDuration}s`;
+      totalDuration = calculateTotalDuration({ duration, delay, overlay }) + totalDuration;
+      return keyframes ? {
+        animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${RUNNING} ${isPlay ? animationRefWithOrder[currentIndex].forward : animationRefWithOrder[currentIndex].reverse}`
+      } : {
+        ...isPlay ? end : start,
+        transition
+      };
+    });
+    setStyles(isPlay ? styles2 : [...styles2].reverse());
+    setPlaying(isPlay);
+  }, []);
+  return { styles, play, isPlaying };
+}
+var Animate_1 = dist.Animate = Animate;
+dist.AnimateGroup = AnimateGroup;
+dist.AnimateKeyframes = AnimateKeyframes;
+dist.useAnimate = useAnimate;
+dist.useAnimateGroup = useAnimateGroup;
+dist.useAnimateKeyframes = useAnimateKeyframes;
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function memoize(fn) {
+  var cache = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache[arg] === void 0)
+      cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var isPropValid = /* @__PURE__ */ memoize(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+);
+function sheetForTag(tag) {
+  if (tag.sheet) {
+    return tag.sheet;
+  }
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    if (document.styleSheets[i].ownerNode === tag) {
+      return document.styleSheets[i];
+    }
+  }
+}
+function createStyleElement(options) {
+  var tag = document.createElement("style");
+  tag.setAttribute("data-emotion", options.key);
+  if (options.nonce !== void 0) {
+    tag.setAttribute("nonce", options.nonce);
+  }
+  tag.appendChild(document.createTextNode(""));
+  tag.setAttribute("data-s", "");
+  return tag;
+}
+var StyleSheet = /* @__PURE__ */ function() {
+  function StyleSheet2(options) {
+    var _this = this;
+    this._insertTag = function(tag) {
+      var before;
+      if (_this.tags.length === 0) {
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
+      } else {
+        before = _this.tags[_this.tags.length - 1].nextSibling;
+      }
+      _this.container.insertBefore(tag, before);
+      _this.tags.push(tag);
+    };
+    this.isSpeedy = options.speedy === void 0 ? process.env.NODE_ENV === "production" : options.speedy;
+    this.tags = [];
+    this.ctr = 0;
+    this.nonce = options.nonce;
+    this.key = options.key;
+    this.container = options.container;
+    this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
+    this.before = null;
+  }
+  var _proto = StyleSheet2.prototype;
+  _proto.hydrate = function hydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+  _proto.insert = function insert(rule) {
+    if (this.ctr % (this.isSpeedy ? 65e3 : 1) === 0) {
+      this._insertTag(createStyleElement(this));
+    }
+    var tag = this.tags[this.tags.length - 1];
+    if (process.env.NODE_ENV !== "production") {
+      var isImportRule3 = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
+      if (isImportRule3 && this._alreadyInsertedOrderInsensitiveRule) {
+        console.error("You're attempting to insert the following rule:\n" + rule + "\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.");
+      }
+      this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule3;
+    }
+    if (this.isSpeedy) {
+      var sheet = sheetForTag(tag);
+      try {
+        sheet.insertRule(rule, sheet.cssRules.length);
+      } catch (e) {
+        if (process.env.NODE_ENV !== "production" && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(rule)) {
+          console.error('There was a problem inserting the following rule: "' + rule + '"', e);
+        }
+      }
+    } else {
+      tag.appendChild(document.createTextNode(rule));
+    }
+    this.ctr++;
+  };
+  _proto.flush = function flush() {
+    this.tags.forEach(function(tag) {
+      return tag.parentNode && tag.parentNode.removeChild(tag);
+    });
+    this.tags = [];
+    this.ctr = 0;
+    if (process.env.NODE_ENV !== "production") {
+      this._alreadyInsertedOrderInsensitiveRule = false;
+    }
+  };
+  return StyleSheet2;
+}();
+var MS = "-ms-";
+var MOZ = "-moz-";
+var WEBKIT = "-webkit-";
+var COMMENT = "comm";
+var RULESET = "rule";
+var DECLARATION = "decl";
+var IMPORT = "@import";
+var KEYFRAMES = "@keyframes";
+var LAYER = "@layer";
+var abs = Math.abs;
+var from = String.fromCharCode;
+var assign = Object.assign;
+function hash(value, length2) {
+  return charat(value, 0) ^ 45 ? (((length2 << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
+}
+function trim(value) {
+  return value.trim();
+}
+function match(value, pattern) {
+  return (value = pattern.exec(value)) ? value[0] : value;
+}
+function replace(value, pattern, replacement) {
+  return value.replace(pattern, replacement);
+}
+function indexof(value, search) {
+  return value.indexOf(search);
+}
+function charat(value, index) {
+  return value.charCodeAt(index) | 0;
+}
+function substr(value, begin, end) {
+  return value.slice(begin, end);
+}
+function strlen(value) {
+  return value.length;
+}
+function sizeof(value) {
+  return value.length;
+}
+function append(value, array) {
+  return array.push(value), value;
+}
+function combine(array, callback) {
+  return array.map(callback).join("");
+}
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = "";
+function node(value, root, parent, type, props, children, length2) {
+  return { value, root, parent, type, props, children, line, column, length: length2, return: "" };
+}
+function copy(root, props) {
+  return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props);
+}
+function char() {
+  return character;
+}
+function prev() {
+  character = position > 0 ? charat(characters, --position) : 0;
+  if (column--, character === 10)
+    column = 1, line--;
+  return character;
+}
+function next() {
+  character = position < length ? charat(characters, position++) : 0;
+  if (column++, character === 10)
+    column = 1, line++;
+  return character;
+}
+function peek() {
+  return charat(characters, position);
+}
+function caret() {
+  return position;
+}
+function slice(begin, end) {
+  return substr(characters, begin, end);
+}
+function token(type) {
+  switch (type) {
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    case 58:
+      return 3;
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+function alloc(value) {
+  return line = column = 1, length = strlen(characters = value), position = 0, [];
+}
+function dealloc(value) {
+  return characters = "", value;
+}
+function delimit(type) {
+  return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
+}
+function whitespace(type) {
+  while (character = peek())
+    if (character < 33)
+      next();
+    else
+      break;
+  return token(type) > 2 || token(character) > 3 ? "" : " ";
+}
+function escaping(index, count) {
+  while (--count && next())
+    if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97)
+      break;
+  return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
+}
+function delimiter(type) {
+  while (next())
+    switch (character) {
+      case type:
+        return position;
+      case 34:
+      case 39:
+        if (type !== 34 && type !== 39)
+          delimiter(character);
+        break;
+      case 40:
+        if (type === 41)
+          delimiter(type);
+        break;
+      case 92:
+        next();
+        break;
+    }
+  return position;
+}
+function commenter(type, index) {
+  while (next())
+    if (type + character === 47 + 10)
+      break;
+    else if (type + character === 42 + 42 && peek() === 47)
+      break;
+  return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next());
+}
+function identifier(index) {
+  while (!token(peek()))
+    next();
+  return slice(index, position);
+}
+function compile(value) {
+  return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value));
+}
+function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
+  var index = 0;
+  var offset = 0;
+  var length2 = pseudo;
+  var atrule = 0;
+  var property = 0;
+  var previous = 0;
+  var variable = 1;
+  var scanning = 1;
+  var ampersand = 1;
+  var character2 = 0;
+  var type = "";
+  var props = rules;
+  var children = rulesets;
+  var reference = rule;
+  var characters2 = type;
+  while (scanning)
+    switch (previous = character2, character2 = next()) {
+      case 40:
+        if (previous != 108 && charat(characters2, length2 - 1) == 58) {
+          if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f") != -1)
+            ampersand = -1;
+          break;
+        }
+      case 34:
+      case 39:
+      case 91:
+        characters2 += delimit(character2);
+        break;
+      case 9:
+      case 10:
+      case 13:
+      case 32:
+        characters2 += whitespace(previous);
+        break;
+      case 92:
+        characters2 += escaping(caret() - 1, 7);
+        continue;
+      case 47:
+        switch (peek()) {
+          case 42:
+          case 47:
+            append(comment(commenter(next(), caret()), root, parent), declarations);
+            break;
+          default:
+            characters2 += "/";
+        }
+        break;
+      case 123 * variable:
+        points[index++] = strlen(characters2) * ampersand;
+      case 125 * variable:
+      case 59:
+      case 0:
+        switch (character2) {
+          case 0:
+          case 125:
+            scanning = 0;
+          case 59 + offset:
+            if (ampersand == -1)
+              characters2 = replace(characters2, /\f/g, "");
+            if (property > 0 && strlen(characters2) - length2)
+              append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2), declarations);
+            break;
+          case 59:
+            characters2 += ";";
+          default:
+            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2), rulesets);
+            if (character2 === 123)
+              if (offset === 0)
+                parse(characters2, root, reference, reference, props, rulesets, length2, points, children);
+              else
+                switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
+                  case 100:
+                  case 108:
+                  case 109:
+                  case 115:
+                    parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2), children), rules, children, length2, points, rule ? props : children);
+                    break;
+                  default:
+                    parse(characters2, reference, reference, reference, [""], children, 0, points, children);
+                }
+        }
+        index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
+        break;
+      case 58:
+        length2 = 1 + strlen(characters2), property = previous;
+      default:
+        if (variable < 1) {
+          if (character2 == 123)
+            --variable;
+          else if (character2 == 125 && variable++ == 0 && prev() == 125)
+            continue;
+        }
+        switch (characters2 += from(character2), character2 * variable) {
+          case 38:
+            ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
+            break;
+          case 44:
+            points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
+            break;
+          case 64:
+            if (peek() === 45)
+              characters2 += delimit(next());
+            atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
+            break;
+          case 45:
+            if (previous === 45 && strlen(characters2) == 2)
+              variable = 0;
+        }
+    }
+  return rulesets;
+}
+function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length2) {
+  var post = offset - 1;
+  var rule = offset === 0 ? rules : [""];
+  var size = sizeof(rule);
+  for (var i = 0, j2 = 0, k2 = 0; i < index; ++i)
+    for (var x2 = 0, y2 = substr(value, post + 1, post = abs(j2 = points[i])), z2 = value; x2 < size; ++x2)
+      if (z2 = trim(j2 > 0 ? rule[x2] + " " + y2 : replace(y2, /&\f/g, rule[x2])))
+        props[k2++] = z2;
+  return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length2);
+}
+function comment(value, root, parent) {
+  return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
+}
+function declaration(value, root, parent, length2) {
+  return node(value, root, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2);
+}
+function serialize(children, callback) {
+  var output = "";
+  var length2 = sizeof(children);
+  for (var i = 0; i < length2; i++)
+    output += callback(children[i], i, children, callback) || "";
+  return output;
+}
+function stringify(element, index, children, callback) {
+  switch (element.type) {
+    case LAYER:
+      if (element.children.length)
+        break;
+    case IMPORT:
+    case DECLARATION:
+      return element.return = element.return || element.value;
+    case COMMENT:
+      return "";
+    case KEYFRAMES:
+      return element.return = element.value + "{" + serialize(element.children, callback) + "}";
+    case RULESET:
+      element.value = element.props.join(",");
+  }
+  return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
+}
+function middleware(collection) {
+  var length2 = sizeof(collection);
+  return function(element, index, children, callback) {
+    var output = "";
+    for (var i = 0; i < length2; i++)
+      output += collection[i](element, index, children, callback) || "";
+    return output;
+  };
+}
+function rulesheet(callback) {
+  return function(element) {
+    if (!element.root) {
+      if (element = element.return)
+        callback(element);
+    }
+  };
+}
+var identifierWithPointTracking = function identifierWithPointTracking2(begin, points, index) {
+  var previous = 0;
+  var character2 = 0;
+  while (true) {
+    previous = character2;
+    character2 = peek();
+    if (previous === 38 && character2 === 12) {
+      points[index] = 1;
+    }
+    if (token(character2)) {
+      break;
+    }
+    next();
+  }
+  return slice(begin, position);
+};
+var toRules = function toRules2(parsed, points) {
+  var index = -1;
+  var character2 = 44;
+  do {
+    switch (token(character2)) {
+      case 0:
+        if (character2 === 38 && peek() === 12) {
+          points[index] = 1;
+        }
+        parsed[index] += identifierWithPointTracking(position - 1, points, index);
+        break;
+      case 2:
+        parsed[index] += delimit(character2);
+        break;
+      case 4:
+        if (character2 === 44) {
+          parsed[++index] = peek() === 58 ? "&\f" : "";
+          points[index] = parsed[index].length;
+          break;
+        }
+      default:
+        parsed[index] += from(character2);
+    }
+  } while (character2 = next());
+  return parsed;
+};
+var getRules = function getRules2(value, points) {
+  return dealloc(toRules(alloc(value), points));
+};
+var fixedElements = /* @__PURE__ */ new WeakMap();
+var compat = function compat2(element) {
+  if (element.type !== "rule" || !element.parent || element.length < 1) {
+    return;
+  }
+  var value = element.value, parent = element.parent;
+  var isImplicitRule = element.column === parent.column && element.line === parent.line;
+  while (parent.type !== "rule") {
+    parent = parent.parent;
+    if (!parent)
+      return;
+  }
+  if (element.props.length === 1 && value.charCodeAt(0) !== 58 && !fixedElements.get(parent)) {
+    return;
+  }
+  if (isImplicitRule) {
+    return;
+  }
+  fixedElements.set(element, true);
+  var points = [];
+  var rules = getRules(value, points);
+  var parentRules = parent.props;
+  for (var i = 0, k2 = 0; i < rules.length; i++) {
+    for (var j2 = 0; j2 < parentRules.length; j2++, k2++) {
+      element.props[k2] = points[i] ? rules[i].replace(/&\f/g, parentRules[j2]) : parentRules[j2] + " " + rules[i];
+    }
+  }
+};
+var removeLabel = function removeLabel2(element) {
+  if (element.type === "decl") {
+    var value = element.value;
+    if (value.charCodeAt(0) === 108 && value.charCodeAt(2) === 98) {
+      element["return"] = "";
+      element.value = "";
+    }
+  }
+};
+var ignoreFlag = "emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason";
+var isIgnoringComment = function isIgnoringComment2(element) {
+  return element.type === "comm" && element.children.indexOf(ignoreFlag) > -1;
+};
+var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm2(cache) {
+  return function(element, index, children) {
+    if (element.type !== "rule" || cache.compat)
+      return;
+    var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
+    if (unsafePseudoClasses) {
+      var isNested = !!element.parent;
+      var commentContainer = isNested ? element.parent.children : children;
+      for (var i = commentContainer.length - 1; i >= 0; i--) {
+        var node2 = commentContainer[i];
+        if (node2.line < element.line) {
+          break;
+        }
+        if (node2.column < element.column) {
+          if (isIgnoringComment(node2)) {
+            return;
+          }
+          break;
+        }
+      }
+      unsafePseudoClasses.forEach(function(unsafePseudoClass) {
+        console.error('The pseudo class "' + unsafePseudoClass + '" is potentially unsafe when doing server-side rendering. Try changing it to "' + unsafePseudoClass.split("-child")[0] + '-of-type".');
+      });
+    }
+  };
+};
+var isImportRule = function isImportRule2(element) {
+  return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
+};
+var isPrependedWithRegularRules = function isPrependedWithRegularRules2(index, children) {
+  for (var i = index - 1; i >= 0; i--) {
+    if (!isImportRule(children[i])) {
+      return true;
+    }
+  }
+  return false;
+};
+var nullifyElement = function nullifyElement2(element) {
+  element.type = "";
+  element.value = "";
+  element["return"] = "";
+  element.children = "";
+  element.props = "";
+};
+var incorrectImportAlarm = function incorrectImportAlarm2(element, index, children) {
+  if (!isImportRule(element)) {
+    return;
+  }
+  if (element.parent) {
+    console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
+    nullifyElement(element);
+  } else if (isPrependedWithRegularRules(index, children)) {
+    console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
+    nullifyElement(element);
+  }
+};
+function prefix(value, length2) {
+  switch (hash(value, length2)) {
+    case 5103:
+      return WEBKIT + "print-" + value + value;
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value;
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value;
+    case 6828:
+    case 4268:
+      return WEBKIT + value + MS + value + value;
+    case 6165:
+      return WEBKIT + value + MS + "flex-" + value + value;
+    case 5187:
+      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
+    case 5443:
+      return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/, "") + value;
+    case 4675:
+      return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/, "") + value;
+    case 5548:
+      return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
+    case 5292:
+      return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
+    case 6060:
+      return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
+    case 4554:
+      return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
+    case 6187:
+      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
+    case 4968:
+      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      if (strlen(value) - 1 - length2 > 6)
+        switch (charat(value, length2 + 1)) {
+          case 109:
+            if (charat(value, length2 + 4) !== 45)
+              break;
+          case 102:
+            return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
+          case 115:
+            return ~indexof(value, "stretch") ? prefix(replace(value, "stretch", "fill-available"), length2) + value : value;
+        }
+      break;
+    case 4949:
+      if (charat(value, length2 + 1) !== 115)
+        break;
+    case 6444:
+      switch (charat(value, strlen(value) - 3 - (~indexof(value, "!important") && 10))) {
+        case 107:
+          return replace(value, ":", ":" + WEBKIT) + value;
+        case 101:
+          return replace(value, /(.+:)([^;!]+)(;|!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
+      }
+      break;
+    case 5936:
+      switch (charat(value, length2 + 11)) {
+        case 114:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
+        case 108:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
+        case 45:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
+      }
+      return WEBKIT + value + MS + value + value;
+  }
+  return value;
+}
+var prefixer = function prefixer2(element, index, children, callback) {
+  if (element.length > -1) {
+    if (!element["return"])
+      switch (element.type) {
+        case DECLARATION:
+          element["return"] = prefix(element.value, element.length);
+          break;
+        case KEYFRAMES:
+          return serialize([copy(element, {
+            value: replace(element.value, "@", "@" + WEBKIT)
+          })], callback);
+        case RULESET:
+          if (element.length)
+            return combine(element.props, function(value) {
+              switch (match(value, /(::plac\w+|:read-\w+)/)) {
+                case ":read-only":
+                case ":read-write":
+                  return serialize([copy(element, {
+                    props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")]
+                  })], callback);
+                case "::placeholder":
+                  return serialize([copy(element, {
+                    props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")]
+                  }), copy(element, {
+                    props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")]
+                  }), copy(element, {
+                    props: [replace(value, /:(plac\w+)/, MS + "input-$1")]
+                  })], callback);
+              }
+              return "";
+            });
+      }
+  }
+};
+var defaultStylisPlugins = [prefixer];
+var createCache = function createCache2(options) {
+  var key = options.key;
+  if (process.env.NODE_ENV !== "production" && !key) {
+    throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\nIf multiple caches share the same key they might \"fight\" for each other's style elements.");
+  }
+  if (key === "css") {
+    var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
+    Array.prototype.forEach.call(ssrStyles, function(node2) {
+      var dataEmotionAttribute = node2.getAttribute("data-emotion");
+      if (dataEmotionAttribute.indexOf(" ") === -1) {
+        return;
+      }
+      document.head.appendChild(node2);
+      node2.setAttribute("data-s", "");
+    });
+  }
+  var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
+  if (process.env.NODE_ENV !== "production") {
+    if (/[^a-z-]/.test(key)) {
+      throw new Error('Emotion key must only contain lower case alphabetical characters and - but "' + key + '" was passed');
+    }
+  }
+  var inserted = {};
+  var container;
+  var nodesToHydrate = [];
+  {
+    container = options.container || document.head;
+    Array.prototype.forEach.call(
+      document.querySelectorAll('style[data-emotion^="' + key + ' "]'),
+      function(node2) {
+        var attrib = node2.getAttribute("data-emotion").split(" ");
+        for (var i = 1; i < attrib.length; i++) {
+          inserted[attrib[i]] = true;
+        }
+        nodesToHydrate.push(node2);
+      }
+    );
+  }
+  var _insert;
+  var omnipresentPlugins = [compat, removeLabel];
+  if (process.env.NODE_ENV !== "production") {
+    omnipresentPlugins.push(createUnsafeSelectorsAlarm({
+      get compat() {
+        return cache.compat;
+      }
+    }), incorrectImportAlarm);
+  }
+  {
+    var currentSheet;
+    var finalizingPlugins = [stringify, process.env.NODE_ENV !== "production" ? function(element) {
+      if (!element.root) {
+        if (element["return"]) {
+          currentSheet.insert(element["return"]);
+        } else if (element.value && element.type !== COMMENT) {
+          currentSheet.insert(element.value + "{}");
+        }
+      }
+    } : rulesheet(function(rule) {
+      currentSheet.insert(rule);
+    })];
+    var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
+    var stylis = function stylis2(styles) {
+      return serialize(compile(styles), serializer);
+    };
+    _insert = function insert(selector, serialized, sheet, shouldCache) {
+      currentSheet = sheet;
+      if (process.env.NODE_ENV !== "production" && serialized.map !== void 0) {
+        currentSheet = {
+          insert: function insert2(rule) {
+            sheet.insert(rule + serialized.map);
+          }
+        };
+      }
+      stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+      if (shouldCache) {
+        cache.inserted[serialized.name] = true;
+      }
+    };
+  }
+  var cache = {
+    key,
+    sheet: new StyleSheet({
+      key,
+      container,
+      nonce: options.nonce,
+      speedy: options.speedy,
+      prepend: options.prepend,
+      insertionPoint: options.insertionPoint
+    }),
+    nonce: options.nonce,
+    inserted,
+    registered: {},
+    insert: _insert
+  };
+  cache.sheet.hydrate(nodesToHydrate);
+  return cache;
+};
+function murmur2(str) {
+  var h2 = 0;
+  var k2, i = 0, len = str.length;
+  for (; len >= 4; ++i, len -= 4) {
+    k2 = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
+    k2 = (k2 & 65535) * 1540483477 + ((k2 >>> 16) * 59797 << 16);
+    k2 ^= k2 >>> 24;
+    h2 = (k2 & 65535) * 1540483477 + ((k2 >>> 16) * 59797 << 16) ^ (h2 & 65535) * 1540483477 + ((h2 >>> 16) * 59797 << 16);
+  }
+  switch (len) {
+    case 3:
+      h2 ^= (str.charCodeAt(i + 2) & 255) << 16;
+    case 2:
+      h2 ^= (str.charCodeAt(i + 1) & 255) << 8;
+    case 1:
+      h2 ^= str.charCodeAt(i) & 255;
+      h2 = (h2 & 65535) * 1540483477 + ((h2 >>> 16) * 59797 << 16);
+  }
+  h2 ^= h2 >>> 13;
+  h2 = (h2 & 65535) * 1540483477 + ((h2 >>> 16) * 59797 << 16);
+  return ((h2 ^ h2 >>> 15) >>> 0).toString(36);
+}
+var unitlessKeys = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+var ILLEGAL_ESCAPE_SEQUENCE_ERROR$1 = `You have illegal escape sequence in your template literal, most likely inside content's property value.
+Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
+You can read more about this here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`;
+var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+var isCustomProperty = function isCustomProperty2(property) {
+  return property.charCodeAt(1) === 45;
+};
+var isProcessableValue = function isProcessableValue2(value) {
+  return value != null && typeof value !== "boolean";
+};
+var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
+});
+var processStyleValue = function processStyleValue2(key, value) {
+  switch (key) {
+    case "animation":
+    case "animationName": {
+      if (typeof value === "string") {
+        return value.replace(animationRegex, function(match2, p1, p2) {
+          cursor = {
+            name: p1,
+            styles: p2,
+            next: cursor
+          };
+          return p1;
+        });
+      }
+    }
+  }
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) {
+    return value + "px";
+  }
+  return value;
+};
+if (process.env.NODE_ENV !== "production") {
+  var contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+  var contentValues = ["normal", "none", "initial", "inherit", "unset"];
+  var oldProcessStyleValue = processStyleValue;
+  var msPattern = /^-ms-/;
+  var hyphenPattern = /-(.)/g;
+  var hyphenatedCache = {};
+  processStyleValue = function processStyleValue3(key, value) {
+    if (key === "content") {
+      if (typeof value !== "string" || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
+        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+      }
+    }
+    var processed = oldProcessStyleValue(key, value);
+    if (processed !== "" && !isCustomProperty(key) && key.indexOf("-") !== -1 && hyphenatedCache[key] === void 0) {
+      hyphenatedCache[key] = true;
+      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, "ms-").replace(hyphenPattern, function(str, _char) {
+        return _char.toUpperCase();
+      }) + "?");
+    }
+    return processed;
+  };
+}
+var noComponentSelectorMessage = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return "";
+  }
+  if (interpolation.__emotion_styles !== void 0) {
+    if (process.env.NODE_ENV !== "production" && interpolation.toString() === "NO_COMPONENT_SELECTOR") {
+      throw new Error(noComponentSelectorMessage);
+    }
+    return interpolation;
+  }
+  switch (typeof interpolation) {
+    case "boolean": {
+      return "";
+    }
+    case "object": {
+      if (interpolation.anim === 1) {
+        cursor = {
+          name: interpolation.name,
+          styles: interpolation.styles,
+          next: cursor
+        };
+        return interpolation.name;
+      }
+      if (interpolation.styles !== void 0) {
+        var next2 = interpolation.next;
+        if (next2 !== void 0) {
+          while (next2 !== void 0) {
+            cursor = {
+              name: next2.name,
+              styles: next2.styles,
+              next: cursor
+            };
+            next2 = next2.next;
+          }
+        }
+        var styles = interpolation.styles + ";";
+        if (process.env.NODE_ENV !== "production" && interpolation.map !== void 0) {
+          styles += interpolation.map;
+        }
+        return styles;
+      }
+      return createStringFromObject(mergedProps, registered, interpolation);
+    }
+    case "function": {
+      if (mergedProps !== void 0) {
+        var previousCursor = cursor;
+        var result = interpolation(mergedProps);
+        cursor = previousCursor;
+        return handleInterpolation(mergedProps, registered, result);
+      } else if (process.env.NODE_ENV !== "production") {
+        console.error("Functions that are interpolated in css calls will be stringified.\nIf you want to have a css call based on props, create a function that returns a css call like this\nlet dynamicStyle = (props) => css`color: ${props.color}`\nIt can be called directly with props or interpolated in a styled call like this\nlet SomeComponent = styled('div')`${dynamicStyle}`");
+      }
+      break;
+    }
+    case "string":
+      if (process.env.NODE_ENV !== "production") {
+        var matched = [];
+        var replaced = interpolation.replace(animationRegex, function(match2, p1, p2) {
+          var fakeVarName = "animation" + matched.length;
+          matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, "") + "`");
+          return "${" + fakeVarName + "}";
+        });
+        if (matched.length) {
+          console.error("`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\nInstead of doing this:\n\n" + [].concat(matched, ["`" + replaced + "`"]).join("\n") + "\n\nYou should wrap it with `css` like this:\n\n" + ("css`" + replaced + "`"));
+        }
+      }
+      break;
+  }
+  if (registered == null) {
+    return interpolation;
+  }
+  var cached = registered[interpolation];
+  return cached !== void 0 ? cached : interpolation;
+}
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = "";
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var _key in obj) {
+      var value = obj[_key];
+      if (typeof value !== "object") {
+        if (registered != null && registered[value] !== void 0) {
+          string += _key + "{" + registered[value] + "}";
+        } else if (isProcessableValue(value)) {
+          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
+        }
+      } else {
+        if (_key === "NO_COMPONENT_SELECTOR" && process.env.NODE_ENV !== "production") {
+          throw new Error(noComponentSelectorMessage);
+        }
+        if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+          switch (_key) {
+            case "animation":
+            case "animationName": {
+              string += processStyleName(_key) + ":" + interpolated + ";";
+              break;
+            }
+            default: {
+              if (process.env.NODE_ENV !== "production" && _key === "undefined") {
+                console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+              }
+              string += _key + "{" + interpolated + "}";
+            }
+          }
+        }
+      }
+    }
+  }
+  return string;
+}
+var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+var sourceMapPattern;
+if (process.env.NODE_ENV !== "production") {
+  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
+}
+var cursor;
+var serializeStyles = function serializeStyles2(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
+    return args[0];
+  }
+  var stringMode = true;
+  var styles = "";
+  cursor = void 0;
+  var strings = args[0];
+  if (strings == null || strings.raw === void 0) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    if (process.env.NODE_ENV !== "production" && strings[0] === void 0) {
+      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
+    }
+    styles += strings[0];
+  }
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i]);
+    if (stringMode) {
+      if (process.env.NODE_ENV !== "production" && strings[i] === void 0) {
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
+      }
+      styles += strings[i];
+    }
+  }
+  var sourceMap;
+  if (process.env.NODE_ENV !== "production") {
+    styles = styles.replace(sourceMapPattern, function(match3) {
+      sourceMap = match3;
+      return "";
+    });
+  }
+  labelPattern.lastIndex = 0;
+  var identifierName = "";
+  var match2;
+  while ((match2 = labelPattern.exec(styles)) !== null) {
+    identifierName += "-" + match2[1];
+  }
+  var name = murmur2(styles) + identifierName;
+  if (process.env.NODE_ENV !== "production") {
+    return {
+      name,
+      styles,
+      map: sourceMap,
+      next: cursor,
+      toString: function toString() {
+        return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+      }
+    };
+  }
+  return {
+    name,
+    styles,
+    next: cursor
+  };
+};
+var syncFallback = function syncFallback2(create) {
+  return create();
+};
+var useInsertionEffect = React$1["useInsertionEffect"] ? React$1["useInsertionEffect"] : false;
+var useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;
+var hasOwnProperty = {}.hasOwnProperty;
+var EmotionCacheContext = /* @__PURE__ */ React$1.createContext(
+  typeof HTMLElement !== "undefined" ? /* @__PURE__ */ createCache({
+    key: "css"
+  }) : null
+);
+if (process.env.NODE_ENV !== "production") {
+  EmotionCacheContext.displayName = "EmotionCacheContext";
+}
+EmotionCacheContext.Provider;
+var withEmotionCache = function withEmotionCache2(func) {
+  return /* @__PURE__ */ forwardRef(function(props, ref) {
+    var cache = useContext(EmotionCacheContext);
+    return func(props, cache, ref);
+  });
+};
+var ThemeContext = /* @__PURE__ */ React$1.createContext({});
+if (process.env.NODE_ENV !== "production") {
+  ThemeContext.displayName = "EmotionThemeContext";
+}
+var typePropName = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__";
+var labelPropName = "__EMOTION_LABEL_PLEASE_DO_NOT_USE__";
+var Insertion$1 = function Insertion(_ref) {
+  var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  useInsertionEffectAlwaysWithSyncFallback(function() {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+  return null;
+};
+var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
+  var cssProp = props.css;
+  if (typeof cssProp === "string" && cache.registered[cssProp] !== void 0) {
+    cssProp = cache.registered[cssProp];
+  }
+  var WrappedComponent = props[typePropName];
+  var registeredStyles = [cssProp];
+  var className = "";
+  if (typeof props.className === "string") {
+    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
+  } else if (props.className != null) {
+    className = props.className + " ";
+  }
+  var serialized = serializeStyles(registeredStyles, void 0, React$1.useContext(ThemeContext));
+  if (process.env.NODE_ENV !== "production" && serialized.name.indexOf("-") === -1) {
+    var labelFromStack = props[labelPropName];
+    if (labelFromStack) {
+      serialized = serializeStyles([serialized, "label:" + labelFromStack + ";"]);
+    }
+  }
+  className += cache.key + "-" + serialized.name;
+  var newProps = {};
+  for (var key in props) {
+    if (hasOwnProperty.call(props, key) && key !== "css" && key !== typePropName && (process.env.NODE_ENV === "production" || key !== labelPropName)) {
+      newProps[key] = props[key];
+    }
+  }
+  newProps.ref = ref;
+  newProps.className = className;
+  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Insertion$1, {
+    cache,
+    serialized,
+    isStringTag: typeof WrappedComponent === "string"
+  }), /* @__PURE__ */ React$1.createElement(WrappedComponent, newProps));
+});
+if (process.env.NODE_ENV !== "production") {
+  Emotion.displayName = "EmotionCssPropInternal";
+}
+var testOmitPropsOnStringTag = isPropValid;
+var testOmitPropsOnComponent = function testOmitPropsOnComponent2(key) {
+  return key !== "theme";
+};
+var getDefaultShouldForwardProp = function getDefaultShouldForwardProp2(tag) {
+  return typeof tag === "string" && tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+};
+var composeShouldForwardProps = function composeShouldForwardProps2(tag, options, isReal) {
+  var shouldForwardProp;
+  if (options) {
+    var optionsShouldForwardProp = options.shouldForwardProp;
+    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function(propName) {
+      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
+    } : optionsShouldForwardProp;
+  }
+  if (typeof shouldForwardProp !== "function" && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
+  }
+  return shouldForwardProp;
+};
+var ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
+Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
+You can read more about this here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`;
+var Insertion2 = function Insertion3(_ref) {
+  var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  useInsertionEffectAlwaysWithSyncFallback(function() {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+  return null;
+};
+var createStyled = function createStyled2(tag, options) {
+  if (process.env.NODE_ENV !== "production") {
+    if (tag === void 0) {
+      throw new Error("You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.");
+    }
+  }
+  var isReal = tag.__emotion_real === tag;
+  var baseTag = isReal && tag.__emotion_base || tag;
+  var identifierName;
+  var targetClassName;
+  if (options !== void 0) {
+    identifierName = options.label;
+    targetClassName = options.target;
+  }
+  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
+  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
+  var shouldUseAs = !defaultShouldForwardProp("as");
+  return function() {
+    var args = arguments;
+    var styles = isReal && tag.__emotion_styles !== void 0 ? tag.__emotion_styles.slice(0) : [];
+    if (identifierName !== void 0) {
+      styles.push("label:" + identifierName + ";");
+    }
+    if (args[0] == null || args[0].raw === void 0) {
+      styles.push.apply(styles, args);
+    } else {
+      if (process.env.NODE_ENV !== "production" && args[0][0] === void 0) {
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
+      }
+      styles.push(args[0][0]);
+      var len = args.length;
+      var i = 1;
+      for (; i < len; i++) {
+        if (process.env.NODE_ENV !== "production" && args[0][i] === void 0) {
+          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
+        }
+        styles.push(args[i], args[0][i]);
+      }
+    }
+    var Styled = withEmotionCache(function(props, cache, ref) {
+      var FinalTag = shouldUseAs && props.as || baseTag;
+      var className = "";
+      var classInterpolations = [];
+      var mergedProps = props;
+      if (props.theme == null) {
+        mergedProps = {};
+        for (var key in props) {
+          mergedProps[key] = props[key];
+        }
+        mergedProps.theme = React$1.useContext(ThemeContext);
+      }
+      if (typeof props.className === "string") {
+        className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
+      } else if (props.className != null) {
+        className = props.className + " ";
+      }
+      var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
+      className += cache.key + "-" + serialized.name;
+      if (targetClassName !== void 0) {
+        className += " " + targetClassName;
+      }
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === void 0 ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
+      var newProps = {};
+      for (var _key in props) {
+        if (shouldUseAs && _key === "as")
+          continue;
+        if (finalShouldForwardProp(_key)) {
+          newProps[_key] = props[_key];
+        }
+      }
+      newProps.className = className;
+      newProps.ref = ref;
+      return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Insertion2, {
+        cache,
+        serialized,
+        isStringTag: typeof FinalTag === "string"
+      }), /* @__PURE__ */ React$1.createElement(FinalTag, newProps));
+    });
+    Styled.displayName = identifierName !== void 0 ? identifierName : "Styled(" + (typeof baseTag === "string" ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")";
+    Styled.defaultProps = tag.defaultProps;
+    Styled.__emotion_real = Styled;
+    Styled.__emotion_base = baseTag;
+    Styled.__emotion_styles = styles;
+    Styled.__emotion_forwardProp = shouldForwardProp;
+    Object.defineProperty(Styled, "toString", {
+      value: function value() {
+        if (targetClassName === void 0 && process.env.NODE_ENV !== "production") {
+          return "NO_COMPONENT_SELECTOR";
+        }
+        return "." + targetClassName;
+      }
+    });
+    Styled.withComponent = function(nextTag, nextOptions) {
+      return createStyled2(nextTag, _extends({}, options, nextOptions, {
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+      })).apply(void 0, styles);
+    };
+    return Styled;
+  };
+};
+var tags = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "big",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "marquee",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  "circle",
+  "clipPath",
+  "defs",
+  "ellipse",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "mask",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "stop",
+  "svg",
+  "text",
+  "tspan"
+];
+var newStyled = createStyled.bind();
+tags.forEach(function(tagName) {
+  newStyled[tagName] = newStyled(tagName);
+});
+var has = Object.prototype.hasOwnProperty;
+function find(iter, tar, key) {
+  for (key of iter.keys()) {
+    if (dequal(key, tar))
+      return key;
+  }
+}
+function dequal(foo, bar) {
+  var ctor, len, tmp;
+  if (foo === bar)
+    return true;
+  if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
+    if (ctor === Date)
+      return foo.getTime() === bar.getTime();
+    if (ctor === RegExp)
+      return foo.toString() === bar.toString();
+    if (ctor === Array) {
+      if ((len = foo.length) === bar.length) {
+        while (len-- && dequal(foo[len], bar[len]))
+          ;
+      }
+      return len === -1;
+    }
+    if (ctor === Set) {
+      if (foo.size !== bar.size) {
+        return false;
+      }
+      for (len of foo) {
+        tmp = len;
+        if (tmp && typeof tmp === "object") {
+          tmp = find(bar, tmp);
+          if (!tmp)
+            return false;
+        }
+        if (!bar.has(tmp))
+          return false;
+      }
+      return true;
+    }
+    if (ctor === Map) {
+      if (foo.size !== bar.size) {
+        return false;
+      }
+      for (len of foo) {
+        tmp = len[0];
+        if (tmp && typeof tmp === "object") {
+          tmp = find(bar, tmp);
+          if (!tmp)
+            return false;
+        }
+        if (!dequal(len[1], bar.get(tmp))) {
+          return false;
+        }
+      }
+      return true;
+    }
+    if (ctor === ArrayBuffer) {
+      foo = new Uint8Array(foo);
+      bar = new Uint8Array(bar);
+    } else if (ctor === DataView) {
+      if ((len = foo.byteLength) === bar.byteLength) {
+        while (len-- && foo.getInt8(len) === bar.getInt8(len))
+          ;
+      }
+      return len === -1;
+    }
+    if (ArrayBuffer.isView(foo)) {
+      if ((len = foo.byteLength) === bar.byteLength) {
+        while (len-- && foo[len] === bar[len])
+          ;
+      }
+      return len === -1;
+    }
+    if (!ctor || typeof foo === "object") {
+      len = 0;
+      for (ctor in foo) {
+        if (has.call(foo, ctor) && ++len && !has.call(bar, ctor))
+          return false;
+        if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor]))
+          return false;
+      }
+      return Object.keys(bar).length === len;
+    }
+  }
+  return foo !== foo && bar !== bar;
+}
+function checkDeps(deps) {
+  if (!deps || !deps.length) {
+    throw new Error("useDeepCompareEffect should not be used with no dependencies. Use React.useEffect instead.");
+  }
+  if (deps.every(isPrimitive$1)) {
+    throw new Error("useDeepCompareEffect should not be used with dependencies that are all primitive values. Use React.useEffect instead.");
+  }
+}
+function isPrimitive$1(val) {
+  return val == null || /^[sbn]/.test(typeof val);
+}
+function useDeepCompareMemoize(value) {
+  var ref = React$1.useRef(value);
+  var signalRef = React$1.useRef(0);
+  if (!dequal(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+  return React$1.useMemo(function() {
+    return ref.current;
+  }, [signalRef.current]);
+}
+function useDeepCompareEffect(callback, dependencies) {
+  if (process.env.NODE_ENV !== "production") {
+    checkDeps(dependencies);
+  }
+  return React$1.useEffect(callback, useDeepCompareMemoize(dependencies));
+}
+var isCheckBoxInput = (element) => element.type === "checkbox";
+var isDateObject = (value) => value instanceof Date;
+var isNullOrUndefined = (value) => value == null;
+const isObjectType = (value) => typeof value === "object";
+var isObject = (value) => !isNullOrUndefined(value) && !Array.isArray(value) && isObjectType(value) && !isDateObject(value);
+var getEventValue = (event) => isObject(event) && event.target ? isCheckBoxInput(event.target) ? event.target.checked : event.target.value : event;
+var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
+var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+var isPlainObject = (tempObject) => {
+  const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+  return isObject(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
+};
+var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
+function cloneObject(data) {
+  let copy2;
+  const isArray = Array.isArray(data);
+  if (data instanceof Date) {
+    copy2 = new Date(data);
+  } else if (data instanceof Set) {
+    copy2 = new Set(data);
+  } else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (isArray || isObject(data))) {
+    copy2 = isArray ? [] : {};
+    if (!Array.isArray(data) && !isPlainObject(data)) {
+      copy2 = data;
+    } else {
+      for (const key in data) {
+        copy2[key] = cloneObject(data[key]);
+      }
+    }
+  } else {
+    return data;
+  }
+  return copy2;
+}
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var isUndefined = (val) => val === void 0;
+var get = (obj, path, defaultValue) => {
+  if (!path || !isObject(obj)) {
+    return defaultValue;
+  }
+  const result = compact(path.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], obj);
+  return isUndefined(result) || result === obj ? isUndefined(obj[path]) ? defaultValue : obj[path] : result;
+};
+const EVENTS = {
+  BLUR: "blur",
+  FOCUS_OUT: "focusout",
+  CHANGE: "change"
+};
+const VALIDATION_MODE = {
+  onBlur: "onBlur",
+  onChange: "onChange",
+  onSubmit: "onSubmit",
+  onTouched: "onTouched",
+  all: "all"
+};
+const INPUT_VALIDATION_RULES = {
+  max: "max",
+  min: "min",
+  maxLength: "maxLength",
+  minLength: "minLength",
+  pattern: "pattern",
+  required: "required",
+  validate: "validate"
+};
+const HookFormContext = React__default.createContext(null);
+const useFormContext = () => React__default.useContext(HookFormContext);
+var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
+  const result = {
+    defaultValues: control._defaultValues
+  };
+  for (const key in formState) {
+    Object.defineProperty(result, key, {
+      get: () => {
+        const _key = key;
+        if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
+          control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
+        }
+        localProxyFormState && (localProxyFormState[_key] = true);
+        return formState[_key];
+      }
+    });
+  }
+  return result;
+};
+var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
+var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
+  updateFormState(formStateData);
+  const { name, ...formState } = formStateData;
+  return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find((key) => _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all));
+};
+var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
+var shouldSubscribeByName = (name, signalName, exact) => exact && signalName ? name === signalName : !name || !signalName || name === signalName || convertToArrayPayload(name).some((currentName) => currentName && (currentName.startsWith(signalName) || signalName.startsWith(currentName)));
+function useSubscribe(props) {
+  const _props = React__default.useRef(props);
+  _props.current = props;
+  React__default.useEffect(() => {
+    const subscription = !props.disabled && _props.current.subject && _props.current.subject.subscribe({
+      next: _props.current.next
+    });
+    return () => {
+      subscription && subscription.unsubscribe();
+    };
+  }, [props.disabled]);
+}
+function useFormState(props) {
+  const methods = useFormContext();
+  const { control = methods.control, disabled, name, exact } = props || {};
+  const [formState, updateFormState] = React__default.useState(control._formState);
+  const _mounted = React__default.useRef(true);
+  const _localProxyFormState = React__default.useRef({
+    isDirty: false,
+    isLoading: false,
+    dirtyFields: false,
+    touchedFields: false,
+    isValidating: false,
+    isValid: false,
+    errors: false
+  });
+  const _name = React__default.useRef(name);
+  _name.current = name;
+  useSubscribe({
+    disabled,
+    next: (value) => _mounted.current && shouldSubscribeByName(_name.current, value.name, exact) && shouldRenderFormState(value, _localProxyFormState.current, control._updateFormState) && updateFormState({
+      ...control._formState,
+      ...value
+    }),
+    subject: control._subjects.state
+  });
+  React__default.useEffect(() => {
+    _mounted.current = true;
+    const isDirty = control._proxyFormState.isDirty && control._getDirty();
+    if (isDirty !== control._formState.isDirty) {
+      control._subjects.state.next({
+        isDirty
+      });
+    }
+    _localProxyFormState.current.isValid && control._updateValid(true);
+    return () => {
+      _mounted.current = false;
+    };
+  }, [control]);
+  return getProxyFormState(formState, control, _localProxyFormState.current, false);
+}
+var isString = (value) => typeof value === "string";
+var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
+  if (isString(names)) {
+    isGlobal && _names.watch.add(names);
+    return get(formValues, names, defaultValue);
+  }
+  if (Array.isArray(names)) {
+    return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
+  }
+  isGlobal && (_names.watchAll = true);
+  return formValues;
+};
+function useWatch(props) {
+  const methods = useFormContext();
+  const { control = methods.control, name, defaultValue, disabled, exact } = props || {};
+  const _name = React__default.useRef(name);
+  _name.current = name;
+  useSubscribe({
+    disabled,
+    subject: control._subjects.values,
+    next: (formState) => {
+      if (shouldSubscribeByName(_name.current, formState.name, exact)) {
+        updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
+      }
+    }
+  });
+  const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
+  React__default.useEffect(() => control._removeUnmounted());
+  return value;
+}
+var isKey = (value) => /^\w*$/.test(value);
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
+function set(object, path, value) {
+  let index = -1;
+  const tempPath = isKey(path) ? [path] : stringToPath(path);
+  const length2 = tempPath.length;
+  const lastIndex = length2 - 1;
+  while (++index < length2) {
+    const key = tempPath[index];
+    let newValue = value;
+    if (index !== lastIndex) {
+      const objValue = object[key];
+      newValue = isObject(objValue) || Array.isArray(objValue) ? objValue : !isNaN(+tempPath[index + 1]) ? [] : {};
+    }
+    object[key] = newValue;
+    object = object[key];
+  }
+  return object;
+}
+var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria ? {
+  ...errors[name],
+  types: {
+    ...errors[name] && errors[name].types ? errors[name].types : {},
+    [type]: message || true
+  }
+} : {};
+const focusFieldBy = (fields, callback, fieldsNames) => {
+  for (const key of fieldsNames || Object.keys(fields)) {
+    const field = get(fields, key);
+    if (field) {
+      const { _f, ...currentField } = field;
+      if (_f && callback(_f.name)) {
+        if (_f.ref.focus) {
+          _f.ref.focus();
+          break;
+        } else if (_f.refs && _f.refs[0].focus) {
+          _f.refs[0].focus();
+          break;
+        }
+      } else if (isObject(currentField)) {
+        focusFieldBy(currentField, callback);
+      }
+    }
+  }
+};
+var getValidationModes = (mode) => ({
+  isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
+  isOnBlur: mode === VALIDATION_MODE.onBlur,
+  isOnChange: mode === VALIDATION_MODE.onChange,
+  isOnAll: mode === VALIDATION_MODE.all,
+  isOnTouch: mode === VALIDATION_MODE.onTouched
+});
+var isWatched = (name, _names, isBlurEvent) => !isBlurEvent && (_names.watchAll || _names.watch.has(name) || [..._names.watch].some((watchName) => name.startsWith(watchName) && /^\.\w+/.test(name.slice(watchName.length))));
+var updateFieldArrayRootError = (errors, error, name) => {
+  const fieldArrayErrors = compact(get(errors, name));
+  set(fieldArrayErrors, "root", error[name]);
+  set(errors, name, fieldArrayErrors);
+  return errors;
+};
+var isBoolean = (value) => typeof value === "boolean";
+var isFileInput = (element) => element.type === "file";
+var isFunction = (value) => typeof value === "function";
+var isHTMLElement = (value) => {
+  if (!isWeb) {
+    return false;
+  }
+  const owner = value ? value.ownerDocument : 0;
+  return value instanceof (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement);
+};
+var isMessage = (value) => isString(value);
+var isRadioInput = (element) => element.type === "radio";
+var isRegex = (value) => value instanceof RegExp;
+const defaultResult = {
+  value: false,
+  isValid: false
+};
+const validResult = { value: true, isValid: true };
+var getCheckboxValue = (options) => {
+  if (Array.isArray(options)) {
+    if (options.length > 1) {
+      const values = options.filter((option) => option && option.checked && !option.disabled).map((option) => option.value);
+      return { value: values, isValid: !!values.length };
+    }
+    return options[0].checked && !options[0].disabled ? options[0].attributes && !isUndefined(options[0].attributes.value) ? isUndefined(options[0].value) || options[0].value === "" ? validResult : { value: options[0].value, isValid: true } : validResult : defaultResult;
+  }
+  return defaultResult;
+};
+const defaultReturn = {
+  isValid: false,
+  value: null
+};
+var getRadioValue = (options) => Array.isArray(options) ? options.reduce((previous, option) => option && option.checked && !option.disabled ? {
+  isValid: true,
+  value: option.value
+} : previous, defaultReturn) : defaultReturn;
+function getValidateError(result, ref, type = "validate") {
+  if (isMessage(result) || Array.isArray(result) && result.every(isMessage) || isBoolean(result) && !result) {
+    return {
+      type,
+      message: isMessage(result) ? result : "",
+      ref
+    };
+  }
+}
+var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData) ? validationData : {
+  value: validationData,
+  message: ""
+};
+var validateField = async (field, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+  const { ref, refs, required, maxLength, minLength, min, max, pattern, validate: validate2, name, valueAsNumber, mount, disabled } = field._f;
+  const inputValue = get(formValues, name);
+  if (!mount || disabled) {
+    return {};
+  }
+  const inputRef = refs ? refs[0] : ref;
+  const setCustomValidity = (message) => {
+    if (shouldUseNativeValidation && inputRef.reportValidity) {
+      inputRef.setCustomValidity(isBoolean(message) ? "" : message || "");
+      inputRef.reportValidity();
+    }
+  };
+  const error = {};
+  const isRadio = isRadioInput(ref);
+  const isCheckBox = isCheckBoxInput(ref);
+  const isRadioOrCheckbox2 = isRadio || isCheckBox;
+  const isEmpty = (valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue) || isHTMLElement(ref) && ref.value === "" || inputValue === "" || Array.isArray(inputValue) && !inputValue.length;
+  const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
+  const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
+    const message = exceedMax ? maxLengthMessage : minLengthMessage;
+    error[name] = {
+      type: exceedMax ? maxType : minType,
+      message,
+      ref,
+      ...appendErrorsCurry(exceedMax ? maxType : minType, message)
+    };
+  };
+  if (isFieldArray ? !Array.isArray(inputValue) || !inputValue.length : required && (!isRadioOrCheckbox2 && (isEmpty || isNullOrUndefined(inputValue)) || isBoolean(inputValue) && !inputValue || isCheckBox && !getCheckboxValue(refs).isValid || isRadio && !getRadioValue(refs).isValid)) {
+    const { value, message } = isMessage(required) ? { value: !!required, message: required } : getValueAndMessage(required);
+    if (value) {
+      error[name] = {
+        type: INPUT_VALIDATION_RULES.required,
+        message,
+        ref: inputRef,
+        ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message)
+      };
+      if (!validateAllFieldCriteria) {
+        setCustomValidity(message);
+        return error;
+      }
+    }
+  }
+  if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
+    let exceedMax;
+    let exceedMin;
+    const maxOutput = getValueAndMessage(max);
+    const minOutput = getValueAndMessage(min);
+    if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
+      const valueNumber = ref.valueAsNumber || (inputValue ? +inputValue : inputValue);
+      if (!isNullOrUndefined(maxOutput.value)) {
+        exceedMax = valueNumber > maxOutput.value;
+      }
+      if (!isNullOrUndefined(minOutput.value)) {
+        exceedMin = valueNumber < minOutput.value;
+      }
+    } else {
+      const valueDate = ref.valueAsDate || new Date(inputValue);
+      const convertTimeToDate = (time) => new Date(new Date().toDateString() + " " + time);
+      const isTime = ref.type == "time";
+      const isWeek = ref.type == "week";
+      if (isString(maxOutput.value) && inputValue) {
+        exceedMax = isTime ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value) : isWeek ? inputValue > maxOutput.value : valueDate > new Date(maxOutput.value);
+      }
+      if (isString(minOutput.value) && inputValue) {
+        exceedMin = isTime ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value) : isWeek ? inputValue < minOutput.value : valueDate < new Date(minOutput.value);
+      }
+    }
+    if (exceedMax || exceedMin) {
+      getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
+      if (!validateAllFieldCriteria) {
+        setCustomValidity(error[name].message);
+        return error;
+      }
+    }
+  }
+  if ((maxLength || minLength) && !isEmpty && (isString(inputValue) || isFieldArray && Array.isArray(inputValue))) {
+    const maxLengthOutput = getValueAndMessage(maxLength);
+    const minLengthOutput = getValueAndMessage(minLength);
+    const exceedMax = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > maxLengthOutput.value;
+    const exceedMin = !isNullOrUndefined(minLengthOutput.value) && inputValue.length < minLengthOutput.value;
+    if (exceedMax || exceedMin) {
+      getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
+      if (!validateAllFieldCriteria) {
+        setCustomValidity(error[name].message);
+        return error;
+      }
+    }
+  }
+  if (pattern && !isEmpty && isString(inputValue)) {
+    const { value: patternValue, message } = getValueAndMessage(pattern);
+    if (isRegex(patternValue) && !inputValue.match(patternValue)) {
+      error[name] = {
+        type: INPUT_VALIDATION_RULES.pattern,
+        message,
+        ref,
+        ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message)
+      };
+      if (!validateAllFieldCriteria) {
+        setCustomValidity(message);
+        return error;
+      }
+    }
+  }
+  if (validate2) {
+    if (isFunction(validate2)) {
+      const result = await validate2(inputValue, formValues);
+      const validateError = getValidateError(result, inputRef);
+      if (validateError) {
+        error[name] = {
+          ...validateError,
+          ...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message)
+        };
+        if (!validateAllFieldCriteria) {
+          setCustomValidity(validateError.message);
+          return error;
+        }
+      }
+    } else if (isObject(validate2)) {
+      let validationResult = {};
+      for (const key in validate2) {
+        if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+          break;
+        }
+        const validateError = getValidateError(await validate2[key](inputValue, formValues), inputRef, key);
+        if (validateError) {
+          validationResult = {
+            ...validateError,
+            ...appendErrorsCurry(key, validateError.message)
+          };
+          setCustomValidity(validateError.message);
+          if (validateAllFieldCriteria) {
+            error[name] = validationResult;
+          }
+        }
+      }
+      if (!isEmptyObject(validationResult)) {
+        error[name] = {
+          ref: inputRef,
+          ...validationResult
+        };
+        if (!validateAllFieldCriteria) {
+          return error;
+        }
+      }
+    }
+  }
+  setCustomValidity(true);
+  return error;
+};
+function baseGet(object, updatePath) {
+  const length2 = updatePath.slice(0, -1).length;
+  let index = 0;
+  while (index < length2) {
+    object = isUndefined(object) ? index++ : object[updatePath[index++]];
+  }
+  return object;
+}
+function isEmptyArray(obj) {
+  for (const key in obj) {
+    if (!isUndefined(obj[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+function unset(object, path) {
+  const paths = Array.isArray(path) ? path : isKey(path) ? [path] : stringToPath(path);
+  const childObject = paths.length === 1 ? object : baseGet(object, paths);
+  const index = paths.length - 1;
+  const key = paths[index];
+  if (childObject) {
+    delete childObject[key];
+  }
+  if (index !== 0 && (isObject(childObject) && isEmptyObject(childObject) || Array.isArray(childObject) && isEmptyArray(childObject))) {
+    unset(object, paths.slice(0, -1));
+  }
+  return object;
+}
+function createSubject() {
+  let _observers = [];
+  const next2 = (value) => {
+    for (const observer of _observers) {
+      observer.next && observer.next(value);
+    }
+  };
+  const subscribe = (observer) => {
+    _observers.push(observer);
+    return {
+      unsubscribe: () => {
+        _observers = _observers.filter((o2) => o2 !== observer);
+      }
+    };
+  };
+  const unsubscribe = () => {
+    _observers = [];
+  };
+  return {
+    get observers() {
+      return _observers;
+    },
+    next: next2,
+    subscribe,
+    unsubscribe
+  };
+}
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+function deepEqual(object1, object2) {
+  if (isPrimitive(object1) || isPrimitive(object2)) {
+    return object1 === object2;
+  }
+  if (isDateObject(object1) && isDateObject(object2)) {
+    return object1.getTime() === object2.getTime();
+  }
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    const val1 = object1[key];
+    if (!keys2.includes(key)) {
+      return false;
+    }
+    if (key !== "ref") {
+      const val2 = object2[key];
+      if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2) : val1 !== val2) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+var isMultipleSelect = (element) => element.type === `select-multiple`;
+var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
+var live = (ref) => isHTMLElement(ref) && ref.isConnected;
+var objectHasFunction = (data) => {
+  for (const key in data) {
+    if (isFunction(data[key])) {
+      return true;
+    }
+  }
+  return false;
+};
+function markFieldsDirty(data, fields = {}) {
+  const isParentNodeArray = Array.isArray(data);
+  if (isObject(data) || isParentNodeArray) {
+    for (const key in data) {
+      if (Array.isArray(data[key]) || isObject(data[key]) && !objectHasFunction(data[key])) {
+        fields[key] = Array.isArray(data[key]) ? [] : {};
+        markFieldsDirty(data[key], fields[key]);
+      } else if (!isNullOrUndefined(data[key])) {
+        fields[key] = true;
+      }
+    }
+  }
+  return fields;
+}
+function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues) {
+  const isParentNodeArray = Array.isArray(data);
+  if (isObject(data) || isParentNodeArray) {
+    for (const key in data) {
+      if (Array.isArray(data[key]) || isObject(data[key]) && !objectHasFunction(data[key])) {
+        if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
+          dirtyFieldsFromValues[key] = Array.isArray(data[key]) ? markFieldsDirty(data[key], []) : { ...markFieldsDirty(data[key]) };
+        } else {
+          getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+        }
+      } else {
+        dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+      }
+    }
+  }
+  return dirtyFieldsFromValues;
+}
+var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
+var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value) ? value : valueAsNumber ? value === "" ? NaN : value ? +value : value : valueAsDate && isString(value) ? new Date(value) : setValueAs ? setValueAs(value) : value;
+function getFieldValue(_f) {
+  const ref = _f.ref;
+  if (_f.refs ? _f.refs.every((ref2) => ref2.disabled) : ref.disabled) {
+    return;
+  }
+  if (isFileInput(ref)) {
+    return ref.files;
+  }
+  if (isRadioInput(ref)) {
+    return getRadioValue(_f.refs).value;
+  }
+  if (isMultipleSelect(ref)) {
+    return [...ref.selectedOptions].map(({ value }) => value);
+  }
+  if (isCheckBoxInput(ref)) {
+    return getCheckboxValue(_f.refs).value;
+  }
+  return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
+}
+var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
+  const fields = {};
+  for (const name of fieldsNames) {
+    const field = get(_fields, name);
+    field && set(fields, name, field._f);
+  }
+  return {
+    criteriaMode,
+    names: [...fieldsNames],
+    fields,
+    shouldUseNativeValidation
+  };
+};
+var getRuleValue = (rule) => isUndefined(rule) ? rule : isRegex(rule) ? rule.source : isObject(rule) ? isRegex(rule.value) ? rule.value.source : rule.value : rule;
+var hasValidation = (options) => options.mount && (options.required || options.min || options.max || options.maxLength || options.minLength || options.pattern || options.validate);
+function schemaErrorLookup(errors, _fields, name) {
+  const error = get(errors, name);
+  if (error || isKey(name)) {
+    return {
+      error,
+      name
+    };
+  }
+  const names = name.split(".");
+  while (names.length) {
+    const fieldName = names.join(".");
+    const field = get(_fields, fieldName);
+    const foundError = get(errors, fieldName);
+    if (field && !Array.isArray(field) && name !== fieldName) {
+      return { name };
+    }
+    if (foundError && foundError.type) {
+      return {
+        name: fieldName,
+        error: foundError
+      };
+    }
+    names.pop();
+  }
+  return {
+    name
+  };
+}
+var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
+  if (mode.isOnAll) {
+    return false;
+  } else if (!isSubmitted && mode.isOnTouch) {
+    return !(isTouched || isBlurEvent);
+  } else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
+    return !isBlurEvent;
+  } else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
+    return isBlurEvent;
+  }
+  return true;
+};
+var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
+const defaultOptions = {
+  mode: VALIDATION_MODE.onSubmit,
+  reValidateMode: VALIDATION_MODE.onChange,
+  shouldFocusError: true
+};
+function createFormControl(props = {}, flushRootRender) {
+  let _options = {
+    ...defaultOptions,
+    ...props
+  };
+  let _formState = {
+    submitCount: 0,
+    isDirty: false,
+    isLoading: true,
+    isValidating: false,
+    isSubmitted: false,
+    isSubmitting: false,
+    isSubmitSuccessful: false,
+    isValid: false,
+    touchedFields: {},
+    dirtyFields: {},
+    errors: {}
+  };
+  let _fields = {};
+  let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values) ? cloneObject(_options.defaultValues || _options.values) || {} : {};
+  let _formValues = _options.shouldUnregister ? {} : cloneObject(_defaultValues);
+  let _state = {
+    action: false,
+    mount: false,
+    watch: false
+  };
+  let _names = {
+    mount: /* @__PURE__ */ new Set(),
+    unMount: /* @__PURE__ */ new Set(),
+    array: /* @__PURE__ */ new Set(),
+    watch: /* @__PURE__ */ new Set()
+  };
+  let delayErrorCallback;
+  let timer = 0;
+  const _proxyFormState = {
+    isDirty: false,
+    dirtyFields: false,
+    touchedFields: false,
+    isValidating: false,
+    isValid: false,
+    errors: false
+  };
+  const _subjects = {
+    values: createSubject(),
+    array: createSubject(),
+    state: createSubject()
+  };
+  const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
+  const validationModeBeforeSubmit = getValidationModes(_options.mode);
+  const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
+  const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
+  const debounce = (callback) => (wait) => {
+    clearTimeout(timer);
+    timer = setTimeout(callback, wait);
+  };
+  const _updateValid = async (shouldUpdateValid) => {
+    if (_proxyFormState.isValid || shouldUpdateValid) {
+      const isValid = _options.resolver ? isEmptyObject((await _executeSchema()).errors) : await executeBuiltInValidation(_fields, true);
+      if (isValid !== _formState.isValid) {
+        _subjects.state.next({
+          isValid
+        });
+      }
+    }
+  };
+  const _updateIsValidating = (value) => _proxyFormState.isValidating && _subjects.state.next({
+    isValidating: value
+  });
+  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
+    if (args && method) {
+      _state.action = true;
+      if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
+        const fieldValues = method(get(_fields, name), args.argA, args.argB);
+        shouldSetValues && set(_fields, name, fieldValues);
+      }
+      if (shouldUpdateFieldsAndState && Array.isArray(get(_formState.errors, name))) {
+        const errors = method(get(_formState.errors, name), args.argA, args.argB);
+        shouldSetValues && set(_formState.errors, name, errors);
+        unsetEmptyArray(_formState.errors, name);
+      }
+      if (_proxyFormState.touchedFields && shouldUpdateFieldsAndState && Array.isArray(get(_formState.touchedFields, name))) {
+        const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
+        shouldSetValues && set(_formState.touchedFields, name, touchedFields);
+      }
+      if (_proxyFormState.dirtyFields) {
+        _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+      }
+      _subjects.state.next({
+        name,
+        isDirty: _getDirty(name, values),
+        dirtyFields: _formState.dirtyFields,
+        errors: _formState.errors,
+        isValid: _formState.isValid
+      });
+    } else {
+      set(_formValues, name, values);
+    }
+  };
+  const updateErrors = (name, error) => {
+    set(_formState.errors, name, error);
+    _subjects.state.next({
+      errors: _formState.errors
+    });
+  };
+  const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
+    const field = get(_fields, name);
+    if (field) {
+      const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
+      isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
+      _state.mount && _updateValid();
+    }
+  };
+  const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
+    let shouldUpdateField = false;
+    let isPreviousDirty = false;
+    const output = {
+      name
+    };
+    if (!isBlurEvent || shouldDirty) {
+      if (_proxyFormState.isDirty) {
+        isPreviousDirty = _formState.isDirty;
+        _formState.isDirty = output.isDirty = _getDirty();
+        shouldUpdateField = isPreviousDirty !== output.isDirty;
+      }
+      const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
+      isPreviousDirty = get(_formState.dirtyFields, name);
+      isCurrentFieldPristine ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
+      output.dirtyFields = _formState.dirtyFields;
+      shouldUpdateField = shouldUpdateField || _proxyFormState.dirtyFields && isPreviousDirty !== !isCurrentFieldPristine;
+    }
+    if (isBlurEvent) {
+      const isPreviousFieldTouched = get(_formState.touchedFields, name);
+      if (!isPreviousFieldTouched) {
+        set(_formState.touchedFields, name, isBlurEvent);
+        output.touchedFields = _formState.touchedFields;
+        shouldUpdateField = shouldUpdateField || _proxyFormState.touchedFields && isPreviousFieldTouched !== isBlurEvent;
+      }
+    }
+    shouldUpdateField && shouldRender && _subjects.state.next(output);
+    return shouldUpdateField ? output : {};
+  };
+  const shouldRenderByError = (name, isValid, error, fieldState) => {
+    const previousFieldError = get(_formState.errors, name);
+    const shouldUpdateValid = _proxyFormState.isValid && isBoolean(isValid) && _formState.isValid !== isValid;
+    if (props.delayError && error) {
+      delayErrorCallback = debounce(() => updateErrors(name, error));
+      delayErrorCallback(props.delayError);
+    } else {
+      clearTimeout(timer);
+      delayErrorCallback = null;
+      error ? set(_formState.errors, name, error) : unset(_formState.errors, name);
+    }
+    if ((error ? !deepEqual(previousFieldError, error) : previousFieldError) || !isEmptyObject(fieldState) || shouldUpdateValid) {
+      const updatedFormState = {
+        ...fieldState,
+        ...shouldUpdateValid && isBoolean(isValid) ? { isValid } : {},
+        errors: _formState.errors,
+        name
+      };
+      _formState = {
+        ..._formState,
+        ...updatedFormState
+      };
+      _subjects.state.next(updatedFormState);
+    }
+    _updateIsValidating(false);
+  };
+  const _executeSchema = async (name) => _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
+  const executeSchemaAndUpdateState = async (names) => {
+    const { errors } = await _executeSchema();
+    if (names) {
+      for (const name of names) {
+        const error = get(errors, name);
+        error ? set(_formState.errors, name, error) : unset(_formState.errors, name);
+      }
+    } else {
+      _formState.errors = errors;
+    }
+    return errors;
+  };
+  const executeBuiltInValidation = async (fields, shouldOnlyCheckValid, context = {
+    valid: true
+  }) => {
+    for (const name in fields) {
+      const field = fields[name];
+      if (field) {
+        const { _f, ...fieldValue } = field;
+        if (_f) {
+          const isFieldArrayRoot = _names.array.has(_f.name);
+          const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation, isFieldArrayRoot);
+          if (fieldError[_f.name]) {
+            context.valid = false;
+            if (shouldOnlyCheckValid) {
+              break;
+            }
+          }
+          !shouldOnlyCheckValid && (get(fieldError, _f.name) ? isFieldArrayRoot ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name) : set(_formState.errors, _f.name, fieldError[_f.name]) : unset(_formState.errors, _f.name));
+        }
+        fieldValue && await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context);
+      }
+    }
+    return context.valid;
+  };
+  const _removeUnmounted = () => {
+    for (const name of _names.unMount) {
+      const field = get(_fields, name);
+      field && (field._f.refs ? field._f.refs.every((ref) => !live(ref)) : !live(field._f.ref)) && unregister(name);
+    }
+    _names.unMount = /* @__PURE__ */ new Set();
+  };
+  const _getDirty = (name, data) => (name && data && set(_formValues, name, data), !deepEqual(getValues(), _defaultValues));
+  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
+    ..._state.mount ? _formValues : isUndefined(defaultValue) ? _defaultValues : isString(names) ? { [names]: defaultValue } : defaultValue
+  }, isGlobal, defaultValue);
+  const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
+  const setFieldValue = (name, value, options = {}) => {
+    const field = get(_fields, name);
+    let fieldValue = value;
+    if (field) {
+      const fieldReference = field._f;
+      if (fieldReference) {
+        !fieldReference.disabled && set(_formValues, name, getFieldValueAs(value, fieldReference));
+        fieldValue = isHTMLElement(fieldReference.ref) && isNullOrUndefined(value) ? "" : value;
+        if (isMultipleSelect(fieldReference.ref)) {
+          [...fieldReference.ref.options].forEach((optionRef) => optionRef.selected = fieldValue.includes(optionRef.value));
+        } else if (fieldReference.refs) {
+          if (isCheckBoxInput(fieldReference.ref)) {
+            fieldReference.refs.length > 1 ? fieldReference.refs.forEach((checkboxRef) => (!checkboxRef.defaultChecked || !checkboxRef.disabled) && (checkboxRef.checked = Array.isArray(fieldValue) ? !!fieldValue.find((data) => data === checkboxRef.value) : fieldValue === checkboxRef.value)) : fieldReference.refs[0] && (fieldReference.refs[0].checked = !!fieldValue);
+          } else {
+            fieldReference.refs.forEach((radioRef) => radioRef.checked = radioRef.value === fieldValue);
+          }
+        } else if (isFileInput(fieldReference.ref)) {
+          fieldReference.ref.value = "";
+        } else {
+          fieldReference.ref.value = fieldValue;
+          if (!fieldReference.ref.type) {
+            _subjects.values.next({
+              name,
+              values: { ..._formValues }
+            });
+          }
+        }
+      }
+    }
+    (options.shouldDirty || options.shouldTouch) && updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
+    options.shouldValidate && trigger(name);
+  };
+  const setValues = (name, value, options) => {
+    for (const fieldKey in value) {
+      const fieldValue = value[fieldKey];
+      const fieldName = `${name}.${fieldKey}`;
+      const field = get(_fields, fieldName);
+      (_names.array.has(name) || !isPrimitive(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options) : setFieldValue(fieldName, fieldValue, options);
+    }
+  };
+  const setValue = (name, value, options = {}) => {
+    const field = get(_fields, name);
+    const isFieldArray = _names.array.has(name);
+    const cloneValue = cloneObject(value);
+    set(_formValues, name, cloneValue);
+    if (isFieldArray) {
+      _subjects.array.next({
+        name,
+        values: { ..._formValues }
+      });
+      if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) && options.shouldDirty) {
+        _subjects.state.next({
+          name,
+          dirtyFields: getDirtyFields(_defaultValues, _formValues),
+          isDirty: _getDirty(name, cloneValue)
+        });
+      }
+    } else {
+      field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
+    }
+    isWatched(name, _names) && _subjects.state.next({ ..._formState });
+    _subjects.values.next({
+      name,
+      values: { ..._formValues }
+    });
+    !_state.mount && flushRootRender();
+  };
+  const onChange = async (event) => {
+    const target = event.target;
+    let name = target.name;
+    const field = get(_fields, name);
+    const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
+    if (field) {
+      let error;
+      let isValid;
+      const fieldValue = getCurrentFieldValue();
+      const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
+      const shouldSkipValidation = !hasValidation(field._f) && !_options.resolver && !get(_formState.errors, name) && !field._f.deps || skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
+      const watched = isWatched(name, _names, isBlurEvent);
+      set(_formValues, name, fieldValue);
+      if (isBlurEvent) {
+        field._f.onBlur && field._f.onBlur(event);
+        delayErrorCallback && delayErrorCallback(0);
+      } else if (field._f.onChange) {
+        field._f.onChange(event);
+      }
+      const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
+      const shouldRender = !isEmptyObject(fieldState) || watched;
+      !isBlurEvent && _subjects.values.next({
+        name,
+        type: event.type,
+        values: { ..._formValues }
+      });
+      if (shouldSkipValidation) {
+        _proxyFormState.isValid && _updateValid();
+        return shouldRender && _subjects.state.next({ name, ...watched ? {} : fieldState });
+      }
+      !isBlurEvent && watched && _subjects.state.next({ ..._formState });
+      _updateIsValidating(true);
+      if (_options.resolver) {
+        const { errors } = await _executeSchema([name]);
+        const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
+        const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
+        error = errorLookupResult.error;
+        name = errorLookupResult.name;
+        isValid = isEmptyObject(errors);
+      } else {
+        error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+        if (error) {
+          isValid = false;
+        } else if (_proxyFormState.isValid) {
+          isValid = await executeBuiltInValidation(_fields, true);
+        }
+      }
+      field._f.deps && trigger(field._f.deps);
+      shouldRenderByError(name, isValid, error, fieldState);
+    }
+  };
+  const trigger = async (name, options = {}) => {
+    let isValid;
+    let validationResult;
+    const fieldNames = convertToArrayPayload(name);
+    _updateIsValidating(true);
+    if (_options.resolver) {
+      const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
+      isValid = isEmptyObject(errors);
+      validationResult = name ? !fieldNames.some((name2) => get(errors, name2)) : isValid;
+    } else if (name) {
+      validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
+        const field = get(_fields, fieldName);
+        return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
+      }))).every(Boolean);
+      !(!validationResult && !_formState.isValid) && _updateValid();
+    } else {
+      validationResult = isValid = await executeBuiltInValidation(_fields);
+    }
+    _subjects.state.next({
+      ...!isString(name) || _proxyFormState.isValid && isValid !== _formState.isValid ? {} : { name },
+      ..._options.resolver || !name ? { isValid } : {},
+      errors: _formState.errors,
+      isValidating: false
+    });
+    options.shouldFocus && !validationResult && focusFieldBy(_fields, (key) => key && get(_formState.errors, key), name ? fieldNames : _names.mount);
+    return validationResult;
+  };
+  const getValues = (fieldNames) => {
+    const values = {
+      ..._defaultValues,
+      ..._state.mount ? _formValues : {}
+    };
+    return isUndefined(fieldNames) ? values : isString(fieldNames) ? get(values, fieldNames) : fieldNames.map((name) => get(values, name));
+  };
+  const getFieldState = (name, formState) => ({
+    invalid: !!get((formState || _formState).errors, name),
+    isDirty: !!get((formState || _formState).dirtyFields, name),
+    isTouched: !!get((formState || _formState).touchedFields, name),
+    error: get((formState || _formState).errors, name)
+  });
+  const clearErrors = (name) => {
+    name && convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
+    _subjects.state.next({
+      errors: name ? _formState.errors : {}
+    });
+  };
+  const setError = (name, error, options) => {
+    const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
+    set(_formState.errors, name, {
+      ...error,
+      ref
+    });
+    _subjects.state.next({
+      name,
+      errors: _formState.errors,
+      isValid: false
+    });
+    options && options.shouldFocus && ref && ref.focus && ref.focus();
+  };
+  const watch = (name, defaultValue) => isFunction(name) ? _subjects.values.subscribe({
+    next: (payload) => name(_getWatch(void 0, defaultValue), payload)
+  }) : _getWatch(name, defaultValue, true);
+  const unregister = (name, options = {}) => {
+    for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
+      _names.mount.delete(fieldName);
+      _names.array.delete(fieldName);
+      if (get(_fields, fieldName)) {
+        if (!options.keepValue) {
+          unset(_fields, fieldName);
+          unset(_formValues, fieldName);
+        }
+        !options.keepError && unset(_formState.errors, fieldName);
+        !options.keepDirty && unset(_formState.dirtyFields, fieldName);
+        !options.keepTouched && unset(_formState.touchedFields, fieldName);
+        !_options.shouldUnregister && !options.keepDefaultValue && unset(_defaultValues, fieldName);
+      }
+    }
+    _subjects.values.next({
+      values: { ..._formValues }
+    });
+    _subjects.state.next({
+      ..._formState,
+      ...!options.keepDirty ? {} : { isDirty: _getDirty() }
+    });
+    !options.keepIsValid && _updateValid();
+  };
+  const register = (name, options = {}) => {
+    let field = get(_fields, name);
+    const disabledIsDefined = isBoolean(options.disabled);
+    set(_fields, name, {
+      ...field || {},
+      _f: {
+        ...field && field._f ? field._f : { ref: { name } },
+        name,
+        mount: true,
+        ...options
+      }
+    });
+    _names.mount.add(name);
+    field ? disabledIsDefined && set(_formValues, name, options.disabled ? void 0 : get(_formValues, name, getFieldValue(field._f))) : updateValidAndValue(name, true, options.value);
+    return {
+      ...disabledIsDefined ? { disabled: options.disabled } : {},
+      ..._options.shouldUseNativeValidation ? {
+        required: !!options.required,
+        min: getRuleValue(options.min),
+        max: getRuleValue(options.max),
+        minLength: getRuleValue(options.minLength),
+        maxLength: getRuleValue(options.maxLength),
+        pattern: getRuleValue(options.pattern)
+      } : {},
+      name,
+      onChange,
+      onBlur: onChange,
+      ref: (ref) => {
+        if (ref) {
+          register(name, options);
+          field = get(_fields, name);
+          const fieldRef = isUndefined(ref.value) ? ref.querySelectorAll ? ref.querySelectorAll("input,select,textarea")[0] || ref : ref : ref;
+          const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
+          const refs = field._f.refs || [];
+          if (radioOrCheckbox ? refs.find((option) => option === fieldRef) : fieldRef === field._f.ref) {
+            return;
+          }
+          set(_fields, name, {
+            _f: {
+              ...field._f,
+              ...radioOrCheckbox ? {
+                refs: [
+                  ...refs.filter(live),
+                  fieldRef,
+                  ...Array.isArray(get(_defaultValues, name)) ? [{}] : []
+                ],
+                ref: { type: fieldRef.type, name }
+              } : { ref: fieldRef }
+            }
+          });
+          updateValidAndValue(name, false, void 0, fieldRef);
+        } else {
+          field = get(_fields, name, {});
+          if (field._f) {
+            field._f.mount = false;
+          }
+          (_options.shouldUnregister || options.shouldUnregister) && !(isNameInFieldArray(_names.array, name) && _state.action) && _names.unMount.add(name);
+        }
+      }
+    };
+  };
+  const _focusError = () => _options.shouldFocusError && focusFieldBy(_fields, (key) => key && get(_formState.errors, key), _names.mount);
+  const handleSubmit = (onValid, onInvalid) => async (e) => {
+    if (e) {
+      e.preventDefault && e.preventDefault();
+      e.persist && e.persist();
+    }
+    let fieldValues = cloneObject(_formValues);
+    _subjects.state.next({
+      isSubmitting: true
+    });
+    if (_options.resolver) {
+      const { errors, values } = await _executeSchema();
+      _formState.errors = errors;
+      fieldValues = values;
+    } else {
+      await executeBuiltInValidation(_fields);
+    }
+    unset(_formState.errors, "root");
+    if (isEmptyObject(_formState.errors)) {
+      _subjects.state.next({
+        errors: {}
+      });
+      await onValid(fieldValues, e);
+    } else {
+      if (onInvalid) {
+        await onInvalid({ ..._formState.errors }, e);
+      }
+      _focusError();
+      setTimeout(_focusError);
+    }
+    _subjects.state.next({
+      isSubmitted: true,
+      isSubmitting: false,
+      isSubmitSuccessful: isEmptyObject(_formState.errors),
+      submitCount: _formState.submitCount + 1,
+      errors: _formState.errors
+    });
+  };
+  const resetField = (name, options = {}) => {
+    if (get(_fields, name)) {
+      if (isUndefined(options.defaultValue)) {
+        setValue(name, get(_defaultValues, name));
+      } else {
+        setValue(name, options.defaultValue);
+        set(_defaultValues, name, options.defaultValue);
+      }
+      if (!options.keepTouched) {
+        unset(_formState.touchedFields, name);
+      }
+      if (!options.keepDirty) {
+        unset(_formState.dirtyFields, name);
+        _formState.isDirty = options.defaultValue ? _getDirty(name, get(_defaultValues, name)) : _getDirty();
+      }
+      if (!options.keepError) {
+        unset(_formState.errors, name);
+        _proxyFormState.isValid && _updateValid();
+      }
+      _subjects.state.next({ ..._formState });
+    }
+  };
+  const _reset = (formValues, keepStateOptions = {}) => {
+    const updatedValues = formValues || _defaultValues;
+    const cloneUpdatedValues = cloneObject(updatedValues);
+    const values = formValues && !isEmptyObject(formValues) ? cloneUpdatedValues : _defaultValues;
+    if (!keepStateOptions.keepDefaultValues) {
+      _defaultValues = updatedValues;
+    }
+    if (!keepStateOptions.keepValues) {
+      if (keepStateOptions.keepDirtyValues || shouldCaptureDirtyFields) {
+        for (const fieldName of _names.mount) {
+          get(_formState.dirtyFields, fieldName) ? set(values, fieldName, get(_formValues, fieldName)) : setValue(fieldName, get(values, fieldName));
+        }
+      } else {
+        if (isWeb && isUndefined(formValues)) {
+          for (const name of _names.mount) {
+            const field = get(_fields, name);
+            if (field && field._f) {
+              const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
+              if (isHTMLElement(fieldReference)) {
+                const form = fieldReference.closest("form");
+                if (form) {
+                  form.reset();
+                  break;
+                }
+              }
+            }
+          }
+        }
+        _fields = {};
+      }
+      _formValues = props.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneUpdatedValues;
+      _subjects.array.next({
+        values: { ...values }
+      });
+      _subjects.values.next({
+        values: { ...values }
+      });
+    }
+    _names = {
+      mount: /* @__PURE__ */ new Set(),
+      unMount: /* @__PURE__ */ new Set(),
+      array: /* @__PURE__ */ new Set(),
+      watch: /* @__PURE__ */ new Set(),
+      watchAll: false,
+      focus: ""
+    };
+    !_state.mount && flushRootRender();
+    _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
+    _state.watch = !!props.shouldUnregister;
+    _subjects.state.next({
+      submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
+      isDirty: keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
+      isSubmitted: keepStateOptions.keepIsSubmitted ? _formState.isSubmitted : false,
+      dirtyFields: keepStateOptions.keepDirtyValues ? _formState.dirtyFields : keepStateOptions.keepDefaultValues && formValues ? getDirtyFields(_defaultValues, formValues) : {},
+      touchedFields: keepStateOptions.keepTouched ? _formState.touchedFields : {},
+      errors: keepStateOptions.keepErrors ? _formState.errors : {},
+      isSubmitting: false,
+      isSubmitSuccessful: false
+    });
+  };
+  const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ? formValues(_formValues) : formValues, keepStateOptions);
+  const setFocus = (name, options = {}) => {
+    const field = get(_fields, name);
+    const fieldReference = field && field._f;
+    if (fieldReference) {
+      const fieldRef = fieldReference.refs ? fieldReference.refs[0] : fieldReference.ref;
+      if (fieldRef.focus) {
+        fieldRef.focus();
+        options.shouldSelect && fieldRef.select();
+      }
+    }
+  };
+  const _updateFormState = (updatedFormState) => {
+    _formState = {
+      ..._formState,
+      ...updatedFormState
+    };
+  };
+  if (isFunction(_options.defaultValues)) {
+    _options.defaultValues().then((values) => {
+      reset(values, _options.resetOptions);
+      _subjects.state.next({
+        isLoading: false
+      });
+    });
+  }
+  return {
+    control: {
+      register,
+      unregister,
+      getFieldState,
+      _executeSchema,
+      _getWatch,
+      _getDirty,
+      _updateValid,
+      _removeUnmounted,
+      _updateFieldArray,
+      _getFieldArray,
+      _reset,
+      _updateFormState,
+      _subjects,
+      _proxyFormState,
+      get _fields() {
+        return _fields;
+      },
+      get _formValues() {
+        return _formValues;
+      },
+      get _state() {
+        return _state;
+      },
+      set _state(value) {
+        _state = value;
+      },
+      get _defaultValues() {
+        return _defaultValues;
+      },
+      get _names() {
+        return _names;
+      },
+      set _names(value) {
+        _names = value;
+      },
+      get _formState() {
+        return _formState;
+      },
+      set _formState(value) {
+        _formState = value;
+      },
+      get _options() {
+        return _options;
+      },
+      set _options(value) {
+        _options = {
+          ..._options,
+          ...value
+        };
+      }
+    },
+    trigger,
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    getValues,
+    reset,
+    resetField,
+    clearErrors,
+    unregister,
+    setError,
+    setFocus,
+    getFieldState
+  };
+}
+function useForm(props = {}) {
+  const _formControl = React__default.useRef();
+  const [formState, updateFormState] = React__default.useState({
+    isDirty: false,
+    isValidating: false,
+    isLoading: true,
+    isSubmitted: false,
+    isSubmitting: false,
+    isSubmitSuccessful: false,
+    isValid: false,
+    submitCount: 0,
+    dirtyFields: {},
+    touchedFields: {},
+    errors: {},
+    defaultValues: isFunction(props.defaultValues) ? void 0 : props.defaultValues
+  });
+  if (!_formControl.current) {
+    _formControl.current = {
+      ...createFormControl(props, () => updateFormState((formState2) => ({ ...formState2 }))),
+      formState
+    };
+  }
+  const control = _formControl.current.control;
+  control._options = props;
+  useSubscribe({
+    subject: control._subjects.state,
+    next: (value) => {
+      if (shouldRenderFormState(value, control._proxyFormState, control._updateFormState, true)) {
+        updateFormState({ ...control._formState });
+      }
+    }
+  });
+  React__default.useEffect(() => {
+    if (props.values && !deepEqual(props.values, control._defaultValues)) {
+      control._reset(props.values, control._options.resetOptions);
+    }
+  }, [props.values, control]);
+  React__default.useEffect(() => {
+    if (!control._state.mount) {
+      control._updateValid();
+      control._state.mount = true;
+    }
+    if (control._state.watch) {
+      control._state.watch = false;
+      control._subjects.state.next({ ...control._formState });
+    }
+    control._removeUnmounted();
+  });
+  _formControl.current.formState = getProxyFormState(formState, control);
+  return _formControl.current;
+}
+var colors = {
+  primary: "#0e101c",
+  secondary: "#bf1650",
+  lightBlue: "#516391",
+  blue: "#1e2a4a",
+  lightPink: "#ec5990",
+  errorPink: "#fbecf2",
+  buttonBlue: "#191d3a",
+  link: "#ff7aa8",
+  green: "#1bda2b"
+};
+const paraGraphDefaultStyle = {
+  fontSize: 13,
+  lineHeight: "20px"
+};
+const Button = newStyled.button`
+  appearance: none;
+  margin: 0;
+  border: 0;
+  color: white;
+  padding: 5px !important;
+  border-radius: 0 !important;
+  background: ${(props) => props.hideBackground ? `` : `${colors.blue} !important`};
+  transition: 0.2s all;
+
+  &:hover {
+    background: ${colors.lightBlue};
+  }
+`;
+Button.defaultProps = { type: "button" };
+const CircleButton = newStyled(Button)`
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0 4px 0 auto;
+  background: none !important;
+  display: flex;
+  width: 25px;
+  height: 25px;
+  justify-content: center;
+  line-height: 14px !important;
+  border-radius: 50% !important;
+  padding: 0 !important;
+  transition: 0.2s all;
+
+  &:hover {
+    background: ${colors.lightBlue};
+  }
+
+  &:active {
+    background: black;
+  }
+`;
+const Input = newStyled.input`
+  &::placeholder {
+    color: #b3b3b3;
+  }
+
+  &:focus::placeholder {
+    color: white;
+  }
+`;
+const Table = newStyled.table`
+  transition: 0.3s all;
+
+  &:hover {
+    background: ${colors.primary};
+  }
+`;
+const Header = ({ setVisible: setVisible2, control }) => {
+  const { isValid } = useFormState({
+    control
+  });
+  return React$1.createElement(
+    "header",
+    { style: {
+      display: "flex",
+      alignItems: "center",
+      paddingLeft: 10,
+      backgroundColor: "transparent"
+    } },
+    React$1.createElement(
+      "p",
+      { style: Object.assign(Object.assign({}, paraGraphDefaultStyle), { margin: 0, padding: 0, fontWeight: 400, fontSize: 12 }) },
+      React$1.createElement("span", { style: {
+        transition: "0.5s all",
+        color: isValid ? colors.green : colors.lightPink
+      } }, "\u25A0"),
+      " ",
+      "React Hook Form"
+    ),
+    React$1.createElement(CircleButton, { title: "Close dev panel", onClick: () => setVisible2(false) }, "\u2715")
+  );
+};
+const PanelTable = ({ refObject, hasError, isDirty, fieldsValues, isNative, errorMessage, errorType, type, isTouched, name, collapseAll }) => {
+  const [collapse, setCollapse2] = React$1.useState(false);
+  React$1.useEffect(() => {
+    setCollapse2(!collapseAll);
+  }, [collapseAll]);
+  let value = fieldsValues ? get(fieldsValues, name) : "";
+  let isValueWrappedInPre = false;
+  if (!isUndefined$1$1(value)) {
+    if (isObject$1(value)) {
+      try {
+        value = React$1.createElement(
+          "pre",
+          { style: { margin: 0 } },
+          React$1.createElement("code", { style: { fontSize: 12 } }, JSON.stringify(value, null, 2))
+        );
+        isValueWrappedInPre = true;
+      } catch (_a) {
+        value = React$1.createElement("span", null, "[Nested Object]");
+      }
+    } else if (typeof value !== "string") {
+      value = String(value);
+    }
+  }
+  return React$1.createElement(
+    Table,
+    { style: {
+      padding: "5px 8px",
+      width: "100%",
+      transition: ".3s all",
+      borderLeft: `2px solid ${hasError ? colors.secondary : colors.buttonBlue}`,
+      background: "none"
+    } },
+    React$1.createElement(
+      "thead",
+      null,
+      React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement(
+          "td",
+          { valign: "top", style: { width: 85, lineHeight: "22px" } },
+          React$1.createElement(Button, { onClick: () => setCollapse2(!collapse), title: "Toggle field table", style: {
+            border: `1px solid ${colors.lightBlue}`,
+            borderRadius: 2,
+            padding: "3px 5px",
+            display: "inline-block",
+            fontSize: 9,
+            lineHeight: "13px",
+            width: 20,
+            textAlign: "center",
+            marginRight: 8
+          } }, collapse ? "+" : "-"),
+          React$1.createElement(Button, { onClick: () => {
+            if (refObject.scrollIntoView) {
+              refObject.scrollIntoView({ behavior: "smooth" });
+            }
+          }, title: "Scroll into view", style: Object.assign({ border: `1px solid ${colors.lightBlue}`, borderRadius: 2, padding: "3px 5px", display: "inline-block", fontSize: 9, lineHeight: "13px", textAlign: "center", width: "calc(100% - 30px)" }, isNative ? {} : { cursor: "not-allowed", background: colors.lightBlue }) }, isNative ? "Native" : "Custom")
+        ),
+        React$1.createElement(
+          "td",
+          { style: {
+            display: "block",
+            maxWidth: 140
+          } },
+          React$1.createElement("p", { style: Object.assign(Object.assign({ margin: 0, padding: 0, top: 0, position: "relative", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, paraGraphDefaultStyle), { lineHeight: "24px" }), title: name }, name)
+        )
+      )
+    ),
+    !collapse && React$1.createElement(
+      "tbody",
+      null,
+      type && React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({ paddingRight: 5, fontWeight: 500, verticalAlign: "top" }, paraGraphDefaultStyle) }, "Type:"),
+        React$1.createElement("td", { style: Object.assign({ display: "block", maxWidth: 100 }, paraGraphDefaultStyle) }, type)
+      ),
+      errorType && React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({ paddingRight: 5, fontWeight: 500, verticalAlign: "top" }, paraGraphDefaultStyle) }, "ERROR Type:"),
+        React$1.createElement("td", { style: Object.assign({ display: "block", maxWidth: 100 }, paraGraphDefaultStyle) }, errorType)
+      ),
+      errorMessage && React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({ paddingRight: 5, fontWeight: 500, verticalAlign: "top" }, paraGraphDefaultStyle) }, "MESSAGE:"),
+        React$1.createElement("td", { style: Object.assign({ display: "block", maxWidth: 100 }, paraGraphDefaultStyle) }, typeof errorMessage === "string" ? errorMessage.trim() : JSON.stringify(errorMessage))
+      ),
+      !isUndefined$1$1(value) && React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({ paddingRight: 5, fontWeight: 500, verticalAlign: "top" }, paraGraphDefaultStyle) }, "Value:"),
+        React$1.createElement(
+          "td",
+          { "data-testid": `${name}-field-value`, style: Object.assign({ display: "block", maxWidth: 100 }, paraGraphDefaultStyle) },
+          !isValueWrappedInPre && React$1.createElement("p", { title: value, style: Object.assign(Object.assign({}, paraGraphDefaultStyle), { margin: 0, padding: 0 }) }, value),
+          isValueWrappedInPre && React$1.createElement("div", { style: Object.assign(Object.assign({}, paraGraphDefaultStyle), { margin: 0, padding: 0 }) }, value)
+        )
+      ),
+      React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({ paddingRight: 5, fontWeight: 500, verticalAlign: "top" }, paraGraphDefaultStyle) }, "Touched:"),
+        React$1.createElement(
+          "td",
+          null,
+          React$1.createElement("code", { style: Object.assign(Object.assign({ color: isTouched ? colors.green : colors.lightPink }, paraGraphDefaultStyle), { fontSize: 12 }) }, isTouched ? "true" : "false")
+        )
+      ),
+      React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({ paddingRight: 5, fontWeight: 500, verticalAlign: "top" }, paraGraphDefaultStyle) }, "Dirty:"),
+        React$1.createElement(
+          "td",
+          null,
+          React$1.createElement("code", { style: Object.assign(Object.assign({ color: isDirty ? colors.green : colors.lightPink }, paraGraphDefaultStyle), { fontSize: 12 }) }, isDirty ? "true" : "false")
+        )
+      )
+    )
+  );
+};
+const FormStateTable = ({ formState, showFormState, setShowFormState }) => React$1.createElement(
+  "div",
+  { style: {
+    alignSelf: "end"
+  } },
+  React$1.createElement(Animate_1, { play: showFormState, start: { opacity: 0 }, end: { opacity: 1 }, render: ({ style }) => React$1.createElement(
+    "table",
+    { style: Object.assign({ padding: "5px 10px", display: "block", background: "black", borderTop: `1px solid ${colors.lightPink}`, pointerEvents: "none" }, style) },
+    React$1.createElement(
+      "tbody",
+      null,
+      React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({ width: 90 }, paraGraphDefaultStyle) }, "Valid:"),
+        React$1.createElement("td", { style: Object.assign({ color: formState.isValid ? colors.green : colors.lightPink }, paraGraphDefaultStyle) }, formState.isValid ? "true" : "false")
+      ),
+      React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({}, paraGraphDefaultStyle) }, "Dirty:"),
+        React$1.createElement("td", { style: Object.assign({ color: formState.isDirty ? colors.green : colors.lightPink }, paraGraphDefaultStyle) }, formState.isDirty ? "true" : "false")
+      ),
+      React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({}, paraGraphDefaultStyle) }, "Submitted:"),
+        React$1.createElement("td", { style: Object.assign({ color: formState.isSubmitted ? colors.green : colors.lightPink }, paraGraphDefaultStyle) }, formState.isSubmitted ? "true" : "false")
+      ),
+      React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({}, paraGraphDefaultStyle) }, "Count:"),
+        React$1.createElement("td", { style: Object.assign({ color: formState.submitCount ? colors.green : colors.lightPink }, paraGraphDefaultStyle) }, formState.submitCount)
+      ),
+      React$1.createElement(
+        "tr",
+        null,
+        React$1.createElement("td", { align: "right", style: Object.assign({}, paraGraphDefaultStyle) }, "Submitting:"),
+        React$1.createElement("td", { style: Object.assign({ color: formState.isSubmitting ? colors.green : colors.lightPink }, paraGraphDefaultStyle) }, formState.isSubmitting ? "true" : "false")
+      )
+    )
+  ) }),
+  React$1.createElement(
+    Button,
+    { style: {
+      margin: 0,
+      width: "100%",
+      padding: "8px 10px",
+      textTransform: "none",
+      fontSize: 12,
+      lineHeight: "14px",
+      cursor: "pointer"
+    }, title: "Toggle form state panel", onClick: () => {
+      setShowFormState(!showFormState);
+    } },
+    React$1.createElement("span", { style: {
+      transition: "0.5s all",
+      color: formState.isValid ? colors.green : colors.lightPink
+    } }, "\u25A0"),
+    " ",
+    "Form State: ",
+    showFormState ? "OFF" : "ON"
+  )
+);
+function setVisible(state, payload) {
+  return Object.assign(Object.assign({}, state), { visible: payload });
+}
+function setCollapse(state, payload) {
+  return Object.assign(Object.assign({}, state), { isCollapse: payload });
+}
+let childIndex = 0;
+function PanelChildren({ fields, searchTerm, touchedFields, errors, dirtyFields, state, fieldsValues }) {
+  return React$1.createElement(React$1.Fragment, null, fields && Object.entries(fields).filter(([name]) => (name && name.toLowerCase && name.toLowerCase().includes(searchTerm) || !name && !searchTerm || searchTerm === "") && name).map(([name, value], index) => {
+    childIndex++;
+    if (!(value === null || value === void 0 ? void 0 : value._f)) {
+      return React$1.createElement(PanelChildren, Object.assign({ key: name + childIndex }, {
+        fields: value,
+        searchTerm,
+        touchedFields,
+        errors,
+        dirtyFields,
+        state,
+        fieldsValues
+      }));
+    } else {
+      const error = get(errors, value._f.name);
+      const errorMessage = get(error, "message", void 0);
+      const errorType = get(error, "type", void 0);
+      const type = get(value, "ref.type", void 0);
+      const isTouched = !!get(touchedFields, value._f.name);
+      const isNative = !!(value && value._f.ref.type);
+      const isDirty = !!get(dirtyFields, value._f.name);
+      const hasError = !!error;
+      const ref = get(value, "_f.ref");
+      return React$1.createElement(
+        "section",
+        { key: (value === null || value === void 0 ? void 0 : value._f.name) + childIndex, style: {
+          borderBottom: `1px dashed ${colors.secondary}`,
+          margin: 0
+        } },
+        React$1.createElement(PanelTable, { refObject: ref, index, collapseAll: state.isCollapse, name: value === null || value === void 0 ? void 0 : value._f.name, isTouched, type, hasError, isNative, errorMessage, errorType, isDirty, fieldsValues })
+      );
+    }
+  }));
+}
+const Panel = ({ control, control: { _fields } }) => {
+  const formState = useFormState({
+    control
+  });
+  const { dirtyFields, touchedFields, errors } = formState;
+  formState.isDirty;
+  const { state, actions } = a({
+    setCollapse
+  });
+  const [, setData] = React$1.useState({});
+  const [showFormState, setShowFormState] = React$1.useState(false);
+  const fieldsValues = useWatch({
+    control
+  });
+  const { register, watch } = useForm();
+  const searchTerm = watch("search", "");
+  useEffect(() => {
+    setData({});
+  }, []);
+  return React$1.createElement(
+    "div",
+    { style: {
+      display: "grid",
+      gridTemplateRows: "56px auto",
+      height: process.env.NODE_ENV === "test" ? "100vh" : "calc(100vh - 40px)"
+    } },
+    React$1.createElement(
+      "div",
+      { style: {
+        display: "grid",
+        gridTemplateColumns: `1fr 1fr`,
+        gridTemplateRows: "28px 28px"
+      } },
+      React$1.createElement(Button, { style: {
+        borderRight: `1px solid ${colors.primary}`,
+        textTransform: "none",
+        fontSize: 11,
+        lineHeight: 1
+      }, title: "Update values and state the form", onClick: () => setData({}) }, "\u267A REFRESH"),
+      React$1.createElement(Button, { style: {
+        borderRight: `1px solid ${colors.primary}`,
+        textTransform: "none",
+        fontSize: 11,
+        lineHeight: 1
+      }, title: "Toggle entire fields", onClick: () => {
+        actions.setCollapse(!state.isCollapse);
+      } }, state.isCollapse ? "[-] COLLAPSE" : "[+] EXPAND"),
+      React$1.createElement(Input, Object.assign({ style: {
+        display: "inline-block",
+        borderRadius: 0,
+        width: "100%",
+        margin: 0,
+        padding: "5px 10px",
+        WebkitAppearance: "none",
+        appearance: "none",
+        fontSize: 14,
+        border: 0,
+        color: "white",
+        gridColumnStart: 1,
+        gridColumnEnd: 4,
+        background: "black"
+      } }, register("search"), { placeholder: "Filter name...", type: "search" }))
+    ),
+    React$1.createElement(
+      "div",
+      { style: {
+        overflow: "auto"
+      } },
+      React$1.createElement(PanelChildren, { fields: _fields, searchTerm, errors, touchedFields, dirtyFields, fieldsValues, state })
+    ),
+    React$1.createElement(FormStateTable, { formState, showFormState, setShowFormState })
+  );
+};
+const Logo = ({ style, actions }) => {
+  return React$1.createElement(
+    "svg",
+    { fill: "white", viewBox: "0 0 100 100", style: Object.assign({ height: 14, padding: 3, borderRadius: 2, background: colors.lightPink }, style), onClick: () => {
+      actions.setVisible(true);
+    }, "aria-label": "React Hook Form Logo" },
+    React$1.createElement("path", { d: "M73.56,13.32H58.14a8.54,8.54,0,0,0-16.27,0H26.44a11,11,0,0,0-11,11V81.63a11,11,0,0,0,11,11H73.56a11,11,0,0,0,11-11V24.32A11,11,0,0,0,73.56,13.32Zm-30.92,2a1,1,0,0,0,1-.79,6.54,6.54,0,0,1,12.78,0,1,1,0,0,0,1,.79h5.38v6.55a3,3,0,0,1-3,3H40.25a3,3,0,0,1-3-3V15.32ZM82.56,81.63a9,9,0,0,1-9,9H26.44a9,9,0,0,1-9-9V24.32a9,9,0,0,1,9-9h8.81v6.55a5,5,0,0,0,5,5h19.5a5,5,0,0,0,5-5V15.32h8.81a9,9,0,0,1,9,9Z" }),
+    React$1.createElement("path", { style: { transform: "translateX(-25px)" }, d: "M71.6,45.92H54a1,1,0,0,0,0,2H71.6a1,1,0,0,0,0-2Z" }),
+    React$1.createElement("path", { d: "M71.6,45.92H54a1,1,0,0,0,0,2H71.6a1,1,0,0,0,0-2Z" }),
+    React$1.createElement("path", { style: { transform: "translateX(-25px)" }, d: "M71.1,69.49H53.45a1,1,0,1,0,0,2H71.1a1,1,0,0,0,0-2Z" }),
+    React$1.createElement("path", { d: "M71.1,69.49H53.45a1,1,0,1,0,0,2H71.1a1,1,0,0,0,0-2Z" })
+  );
+};
+function getPositionByPlacement(placement, defaultX = 0, defaultY = 0) {
+  const [x2, y2] = placement.split("-");
+  return {
+    [x2]: defaultX,
+    [y2]: defaultY
+  };
+}
+const DevToolUI = ({ control, placement = "top-right", styles }) => {
+  const { state, actions } = a({
+    setVisible
+  });
+  const position2 = getPositionByPlacement(placement, 0, 0);
+  return React$1.createElement(
+    React$1.Fragment,
+    null,
+    React$1.createElement(
+      Animate_1,
+      { play: state.visible, duration: 0.2, start: Object.assign(Object.assign({}, position2), { position: "fixed", transform: placement.includes("right") ? "translateX(280px)" : "translateX(-280px)", zIndex: 99999 }), end: Object.assign(Object.assign({}, position2), { position: "fixed", transform: "translateX(0)", zIndex: 99999 }) },
+      React$1.createElement(
+        "div",
+        { style: Object.assign(Object.assign(Object.assign({}, position2), { position: "fixed", height: "100vh", width: 250, zIndex: 99999, background: colors.buttonBlue, display: "grid", textAlign: "left", color: "white", fontSize: 14, gridTemplateRows: "40px auto", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif" }), styles === null || styles === void 0 ? void 0 : styles.panel) },
+        React$1.createElement(Header, { setVisible: actions.setVisible, control }),
+        React$1.createElement(Panel, { control })
+      )
+    ),
+    !state.visible && React$1.createElement(
+      Button,
+      { title: "Show dev panel", hideBackground: true, style: Object.assign(Object.assign(Object.assign({ position: "fixed", zIndex: 99999 }, getPositionByPlacement(placement, 3, 3)), { padding: 3, margin: 0, background: "none" }), styles === null || styles === void 0 ? void 0 : styles.button) },
+      React$1.createElement(Logo, { actions })
+    )
+  );
+};
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest(s2, e) {
+  var t2 = {};
+  for (var p2 in s2)
+    if (Object.prototype.hasOwnProperty.call(s2, p2) && e.indexOf(p2) < 0)
+      t2[p2] = s2[p2];
+  if (s2 != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p2 = Object.getOwnPropertySymbols(s2); i < p2.length; i++) {
+      if (e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i]))
+        t2[p2[i]] = s2[p2[i]];
+    }
+  return t2;
+}
+function proxyToObject(proxy) {
+  return Reflect.ownKeys(proxy).reduce((prev2, key) => {
+    prev2[key] = proxy[key];
+    return prev2;
+  }, {});
+}
+function nestToFlat(flatKeys, obj, defaultValue) {
+  return flatKeys.reduce((prev2, name) => {
+    prev2[name] = get$1(obj, name) || defaultValue;
+    return prev2;
+  }, {});
+}
+function useExportControlToExtension({ id, control }) {
+  const nestedFormValues = useWatch({ control });
+  const formState = useFormState({ control });
+  const [isExtensionEnabled, setIsExtensionEnabled] = useState(false);
+  const handleInitMessage = (message) => {
+    if (message.data.source !== "react-hook-form-bridge" || message.data.type !== "INIT") {
+      return;
+    }
+    window.postMessage({
+      source: "react-hook-form-bridge",
+      type: "WELCOME"
+    });
+    setIsExtensionEnabled(true);
+  };
+  useEffect(() => {
+    window.addEventListener("message", handleInitMessage);
+    return () => window.removeEventListener("message", handleInitMessage);
+  }, []);
+  useDeepCompareEffect(() => {
+    if (!isExtensionEnabled) {
+      return;
+    }
+    const _a = proxyToObject(formState), { errors: nestedErrors, dirtyFields: nestedDirtyFields, touchedFields: nestedTouchedFields } = _a, formStatus = __rest(_a, ["errors", "dirtyFields", "touchedFields"]);
+    const flatFieldNames = [...control._names.mount];
+    const formValues = nestToFlat(flatFieldNames, nestedFormValues, "");
+    const dirtyFields = nestToFlat(flatFieldNames, nestedDirtyFields, false);
+    const touchedFields = nestToFlat(flatFieldNames, nestedTouchedFields, false);
+    const flatErrors = nestToFlat(flatFieldNames, nestedErrors);
+    const errors = Object.entries(flatErrors).reduce((prev2, [key, value]) => {
+      prev2[key] = {
+        type: value === null || value === void 0 ? void 0 : value.type,
+        message: value === null || value === void 0 ? void 0 : value.message
+      };
+      return prev2;
+    }, {});
+    const nativeFields = flatFieldNames.reduce((prev2, name) => {
+      var _a2, _b, _c;
+      prev2[name] = !!((_c = (_b = (_a2 = get$1(control._fields, name)) === null || _a2 === void 0 ? void 0 : _a2._f) === null || _b === void 0 ? void 0 : _b.ref) === null || _c === void 0 ? void 0 : _c.type);
+      return prev2;
+    }, {});
+    const updateMessagePayload = {
+      id,
+      data: {
+        formValues,
+        formState: Object.assign({
+          errors,
+          dirtyFields,
+          touchedFields,
+          nativeFields
+        }, formStatus)
+      }
+    };
+    window.postMessage({
+      source: "react-hook-form-bridge",
+      type: "UPDATE",
+      payload: updateMessagePayload
+    });
+  }, [isExtensionEnabled, nestedFormValues, proxyToObject(formState)]);
+  return { isExtensionEnabled };
+}
+if (typeof window !== "undefined") {
+  s({
+    visible: false,
+    isCollapse: false,
+    filterName: ""
+  }, {
+    name: "__REACT_HOOK_FORM_DEVTOOLS__",
+    middleWares: [],
+    storageType: window.localStorage
+  });
+}
+const DevTool = (props) => {
+  var _a, _b, _c;
+  const methods = useFormContext();
+  const uuid = React$1.useRef("");
+  React$1.useEffect(() => {
+    uuid.current = v4();
+  }, []);
+  const { isExtensionEnabled } = useExportControlToExtension({
+    id: (_a = props === null || props === void 0 ? void 0 : props.id) !== null && _a !== void 0 ? _a : uuid.current,
+    control: (_b = props === null || props === void 0 ? void 0 : props.control) !== null && _b !== void 0 ? _b : methods.control
+  });
+  if (isExtensionEnabled) {
+    return null;
+  }
+  return React$1.createElement(
+    o,
+    null,
+    React$1.createElement(DevToolUI, { control: (_c = props === null || props === void 0 ? void 0 : props.control) !== null && _c !== void 0 ? _c : methods.control, placement: props === null || props === void 0 ? void 0 : props.placement, styles: props === null || props === void 0 ? void 0 : props.styles })
+  );
+};
+export {
+  C,
+  DevTool as D,
+  Z$1 as Z
+};