react-scribble-pad/dist/react-scribble-pad.es.js

React Sketches just made easy.

import { jsx as _, jsxs as H, Fragment as sr } from "react/jsx-runtime";
import ae, { useRef as q, useEffect as se, useCallback as ke, useState as J, Fragment as lr, useMemo as cr, useReducer as sn, useDebugValue as ln, useContext as cn, createContext as un } from "react";
function I() {
  return I = Object.assign ? Object.assign.bind() : function(e) {
    for (var r = 1; r < arguments.length; r++) {
      var n = arguments[r];
      for (var t in n) ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
    }
    return e;
  }, I.apply(null, arguments);
}
var $e = 255, me = 100, Ie = (e) => {
  var {
    r,
    g: n,
    b: t,
    a: o
  } = e, i = Math.max(r, n, t), a = i - Math.min(r, n, t), s = a ? i === r ? (n - t) / a : i === n ? 2 + (t - r) / a : 4 + (r - n) / a : 0;
  return {
    h: 60 * (s < 0 ? s + 6 : s),
    s: i ? a / i * me : 0,
    v: i / $e * me,
    a: o
  };
}, ur = (e) => {
  var {
    h: r,
    s: n,
    l: t,
    a: o
  } = dr(e);
  return "hsla(" + r + ", " + n + "%, " + t + "%, " + o + ")";
}, dr = (e) => {
  var {
    h: r,
    s: n,
    v: t,
    a: o
  } = e, i = (200 - n) * t / me;
  return {
    h: r,
    s: i > 0 && i < 200 ? n * t / me / (i <= me ? i : 200 - i) * me : 0,
    l: i / 2,
    a: o
  };
}, hr = (e) => {
  var {
    r,
    g: n,
    b: t
  } = e, o = r << 16 | n << 8 | t;
  return "#" + ((i) => new Array(7 - i.length).join("0") + i)(o.toString(16));
}, dn = (e) => {
  var {
    r,
    g: n,
    b: t,
    a: o
  } = e, i = typeof o == "number" && (o * 255 | 256).toString(16).slice(1);
  return "" + hr({
    r,
    g: n,
    b: t
  }) + (i || "");
}, We = (e) => Ie(hn(e)), hn = (e) => {
  var r = e.replace("#", "");
  /^#?/.test(e) && r.length === 3 && (e = "#" + r.charAt(0) + r.charAt(0) + r.charAt(1) + r.charAt(1) + r.charAt(2) + r.charAt(2));
  var n = new RegExp("[A-Za-z0-9]{2}", "g"), [t, o, i = 0, a] = e.match(n).map((s) => parseInt(s, 16));
  return {
    r: t,
    g: o,
    b: i,
    a: (a ?? 255) / $e
  };
}, Je = (e) => {
  var {
    h: r,
    s: n,
    v: t,
    a: o
  } = e, i = r / 60, a = n / me, s = t / me, f = Math.floor(i) % 6, d = i - Math.floor(i), h = $e * s * (1 - a), c = $e * s * (1 - a * d), p = $e * s * (1 - a * (1 - d));
  s *= $e;
  var v = {};
  switch (f) {
    case 0:
      v.r = s, v.g = p, v.b = h;
      break;
    case 1:
      v.r = c, v.g = s, v.b = h;
      break;
    case 2:
      v.r = h, v.g = s, v.b = p;
      break;
    case 3:
      v.r = h, v.g = c, v.b = s;
      break;
    case 4:
      v.r = p, v.g = h, v.b = s;
      break;
    case 5:
      v.r = s, v.g = h, v.b = c;
      break;
  }
  return v.r = Math.round(v.r), v.g = Math.round(v.g), v.b = Math.round(v.b), I({}, v, {
    a: o
  });
}, fn = (e) => {
  var {
    r,
    g: n,
    b: t,
    a: o
  } = Je(e);
  return "rgba(" + r + ", " + n + ", " + t + ", " + o + ")";
}, vn = (e) => {
  var {
    r,
    g: n,
    b: t
  } = e;
  return {
    r,
    g: n,
    b: t
  };
}, gn = (e) => {
  var {
    h: r,
    s: n,
    l: t
  } = e;
  return {
    h: r,
    s: n,
    l: t
  };
}, ut = (e) => hr(Je(e)), pn = (e) => {
  var {
    h: r,
    s: n,
    v: t
  } = e;
  return {
    h: r,
    s: n,
    v: t
  };
}, bn = (e) => {
  var {
    r,
    g: n,
    b: t
  } = e, o = function(h) {
    return h <= 0.04045 ? h / 12.92 : Math.pow((h + 0.055) / 1.055, 2.4);
  }, i = o(r / 255), a = o(n / 255), s = o(t / 255), f = {};
  return f.x = i * 0.4124 + a * 0.3576 + s * 0.1805, f.y = i * 0.2126 + a * 0.7152 + s * 0.0722, f.bri = i * 0.0193 + a * 0.1192 + s * 0.9505, f;
}, ze = (e) => {
  var r, n, t, o, i, a, s, f, d;
  return typeof e == "string" && dt(e) ? (a = We(e), f = e) : typeof e != "string" && (a = e), a && (t = pn(a), i = dr(a), o = Je(a), d = dn(o), f = ut(a), n = gn(i), r = vn(o), s = bn(r)), {
    rgb: r,
    hsl: n,
    hsv: t,
    rgba: o,
    hsla: i,
    hsva: a,
    hex: f,
    hexa: d,
    xy: s
  };
}, dt = (e) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(e);
function ge(e, r) {
  if (e == null) return {};
  var n = {};
  for (var t in e) if ({}.hasOwnProperty.call(e, t)) {
    if (r.indexOf(t) !== -1) continue;
    n[t] = e[t];
  }
  return n;
}
function Wt(e) {
  var r = q(e);
  return se(() => {
    r.current = e;
  }), ke((n, t) => r.current && r.current(n, t), []);
}
var He = (e) => "touches" in e, Ft = (e) => {
  !He(e) && e.preventDefault && e.preventDefault();
}, Xt = function(r, n, t) {
  return n === void 0 && (n = 0), t === void 0 && (t = 1), r > t ? t : r < n ? n : r;
}, Yt = (e, r) => {
  var n = e.getBoundingClientRect(), t = He(r) ? r.touches[0] : r;
  return {
    left: Xt((t.pageX - (n.left + window.pageXOffset)) / n.width),
    top: Xt((t.pageY - (n.top + window.pageYOffset)) / n.height),
    width: n.width,
    height: n.height,
    x: t.pageX - (n.left + window.pageXOffset),
    y: t.pageY - (n.top + window.pageYOffset)
  };
}, mn = ["prefixCls", "className", "onMove", "onDown"], mt = /* @__PURE__ */ ae.forwardRef((e, r) => {
  var {
    prefixCls: n = "w-color-interactive",
    className: t,
    onMove: o,
    onDown: i
  } = e, a = ge(e, mn), s = q(null), f = q(!1), [d, h] = J(!1), c = Wt(o), p = Wt(i), v = (b) => f.current && !He(b) ? !1 : (f.current = He(b), !0), y = ke((b) => {
    if (Ft(b), !!s.current) {
      var z = He(b) ? b.touches.length > 0 : b.buttons > 0;
      if (!z) {
        h(!1);
        return;
      }
      c?.(Yt(s.current, b), b);
    }
  }, [c]), u = ke(() => h(!1), []), w = ke((b) => {
    b ? (window.addEventListener(f.current ? "touchmove" : "mousemove", y), window.addEventListener(f.current ? "touchend" : "mouseup", u)) : (window.removeEventListener("mousemove", y), window.removeEventListener("mouseup", u), window.removeEventListener("touchmove", y), window.removeEventListener("touchend", u));
  }, [y, u]);
  se(() => (w(d), () => {
    w(!1);
  }), [d, y, u, w]);
  var S = ke((b) => {
    var z = document.activeElement;
    z?.blur(), Ft(b.nativeEvent), v(b.nativeEvent) && s.current && (p?.(Yt(s.current, b.nativeEvent), b.nativeEvent), h(!0));
  }, [p]);
  return /* @__PURE__ */ _("div", I({}, a, {
    className: [n, t || ""].filter(Boolean).join(" "),
    style: I({}, a.style, {
      touchAction: "none"
    }),
    ref: s,
    tabIndex: 0,
    onMouseDown: S,
    onTouchStart: S
  }));
});
mt.displayName = "Interactive";
var yn = ["className", "prefixCls", "left", "top", "style", "fillProps"], xn = (e) => {
  var {
    className: r,
    prefixCls: n,
    left: t,
    top: o,
    style: i,
    fillProps: a
  } = e, s = ge(e, yn), f = I({}, i, {
    position: "absolute",
    left: t,
    top: o
  }), d = I({
    width: 18,
    height: 18,
    boxShadow: "var(--alpha-pointer-box-shadow)",
    borderRadius: "50%",
    backgroundColor: "var(--alpha-pointer-background-color)"
  }, a?.style, {
    transform: t ? "translate(-9px, -1px)" : "translate(-1px, -9px)"
  });
  return /* @__PURE__ */ _("div", I({
    className: n + "-pointer " + (r || ""),
    style: f
  }, s, {
    children: /* @__PURE__ */ _("div", I({
      className: n + "-fill"
    }, a, {
      style: d
    }))
  }));
}, wn = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"], Sn = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==", Ye = /* @__PURE__ */ ae.forwardRef((e, r) => {
  var {
    prefixCls: n = "w-color-alpha",
    className: t,
    hsva: o,
    background: i,
    bgProps: a = {},
    innerProps: s = {},
    pointerProps: f = {},
    radius: d = 0,
    width: h,
    height: c = 16,
    direction: p = "horizontal",
    style: v,
    onChange: y,
    pointer: u
  } = e, w = ge(e, wn), S = (x) => {
    y && y(I({}, o, {
      a: p === "horizontal" ? x.left : x.top
    }), x);
  }, b = ur(Object.assign({}, o, {
    a: 1
  })), z = "linear-gradient(to " + (p === "horizontal" ? "right" : "bottom") + ", rgba(244, 67, 54, 0) 0%, " + b + " 100%)", M = {};
  p === "horizontal" ? M.left = o.a * 100 + "%" : M.top = o.a * 100 + "%";
  var K = I({
    "--alpha-background-color": "#fff",
    "--alpha-pointer-background-color": "rgb(248, 248, 248)",
    "--alpha-pointer-box-shadow": "rgb(0 0 0 / 37%) 0px 1px 4px 0px",
    borderRadius: d,
    background: "url(" + Sn + ") left center",
    backgroundColor: "var(--alpha-background-color)"
  }, {
    width: h,
    height: c
  }, v, {
    position: "relative"
  }), L = u && typeof u == "function" ? u(I({
    prefixCls: n
  }, f, M)) : /* @__PURE__ */ _(xn, I({}, f, {
    prefixCls: n
  }, M));
  return /* @__PURE__ */ H("div", I({}, w, {
    className: [n, n + "-" + p, t || ""].filter(Boolean).join(" "),
    style: K,
    ref: r,
    children: [/* @__PURE__ */ _("div", I({}, a, {
      style: I({
        inset: 0,
        position: "absolute",
        background: i || z,
        borderRadius: d
      }, a.style)
    })), /* @__PURE__ */ _(mt, I({}, s, {
      style: I({}, s.style, {
        inset: 0,
        zIndex: 1,
        position: "absolute"
      }),
      onMove: S,
      onDown: S,
      children: L
    }))]
  }));
});
Ye.displayName = "Alpha";
var _n = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"], kn = (e) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(e), Cn = (e) => Number(String(e).replace(/%/g, "")), Le = /* @__PURE__ */ ae.forwardRef((e, r) => {
  var {
    prefixCls: n = "w-color-editable-input",
    placement: t = "bottom",
    label: o,
    value: i,
    className: a,
    style: s,
    labelStyle: f,
    inputStyle: d,
    onChange: h,
    onBlur: c,
    renderInput: p
  } = e, v = ge(e, _n), [y, u] = J(i), w = q(!1);
  se(() => {
    e.value !== y && (w.current || u(e.value));
  }, [e.value]);
  function S(x, P) {
    var C = (P || x.target.value).trim().replace(/^#/, "");
    kn(C) && h && h(x, C);
    var A = Cn(C);
    isNaN(A) || h && h(x, A), u(C);
  }
  function b(x) {
    w.current = !1, u(e.value), c && c(x);
  }
  var z = {};
  t === "bottom" && (z.flexDirection = "column"), t === "top" && (z.flexDirection = "column-reverse"), t === "left" && (z.flexDirection = "row-reverse");
  var M = I({
    "--editable-input-label-color": "rgb(153, 153, 153)",
    "--editable-input-box-shadow": "rgb(204 204 204) 0px 0px 0px 1px inset",
    "--editable-input-color": "#666",
    position: "relative",
    alignItems: "center",
    display: "flex",
    fontSize: 11
  }, z, s), K = I({
    width: "100%",
    paddingTop: 2,
    paddingBottom: 2,
    paddingLeft: 3,
    paddingRight: 3,
    fontSize: 11,
    background: "transparent",
    boxSizing: "border-box",
    border: "none",
    color: "var(--editable-input-color)",
    boxShadow: "var(--editable-input-box-shadow)"
  }, d), L = I({
    value: y,
    onChange: S,
    onBlur: b,
    autoComplete: "off",
    onFocus: () => w.current = !0
  }, v, {
    style: K
  });
  return /* @__PURE__ */ H("div", {
    className: [n, a || ""].filter(Boolean).join(" "),
    style: M,
    children: [p ? p(L, r) : /* @__PURE__ */ _("input", I({
      ref: r
    }, L)), o && /* @__PURE__ */ _("span", {
      style: I({
        color: "var(--editable-input-label-color)",
        textTransform: "capitalize"
      }, f),
      children: o
    })]
  });
});
Le.displayName = "EditableInput";
var En = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"], fr = /* @__PURE__ */ ae.forwardRef((e, r) => {
  var {
    prefixCls: n = "w-color-swatch",
    className: t,
    color: o,
    colors: i = [],
    style: a,
    rectProps: s = {},
    onChange: f,
    addonAfter: d,
    addonBefore: h,
    rectRender: c
  } = e, p = ge(e, En), v = I({
    "--swatch-background-color": "rgb(144, 19, 254)",
    background: "var(--swatch-background-color)",
    height: 15,
    width: 15,
    marginRight: 5,
    marginBottom: 5,
    cursor: "pointer",
    position: "relative",
    outline: "none",
    borderRadius: 2
  }, s.style), y = (u, w) => {
    f && f(We(u), ze(We(u)), w);
  };
  return /* @__PURE__ */ H("div", I({
    ref: r
  }, p, {
    className: [n, t || ""].filter(Boolean).join(" "),
    style: I({
      display: "flex",
      flexWrap: "wrap",
      position: "relative"
    }, a),
    children: [h && /* @__PURE__ */ ae.isValidElement(h) && h, i && Array.isArray(i) && i.map((u, w) => {
      var S = "", b = "";
      typeof u == "string" && (S = u, b = u), typeof u == "object" && u.color && (S = u.title || u.color, b = u.color);
      var z = o && o.toLocaleLowerCase() === b.toLocaleLowerCase(), M = c && c({
        title: S,
        color: b,
        checked: !!z,
        style: I({}, v, {
          background: b
        }),
        onClick: (L) => y(b, L)
      });
      if (M)
        return /* @__PURE__ */ _(lr, {
          children: M
        }, w);
      var K = s.children && /* @__PURE__ */ ae.isValidElement(s.children) ? /* @__PURE__ */ ae.cloneElement(s.children, {
        color: b,
        checked: z
      }) : null;
      return /* @__PURE__ */ _("div", I({
        tabIndex: 0,
        title: S,
        onClick: (L) => y(b, L)
      }, s, {
        children: K,
        style: I({}, v, {
          background: b
        })
      }), w);
    }), d && /* @__PURE__ */ ae.isValidElement(d) && d]
  }));
});
fr.displayName = "Swatch";
var Tn = (e) => {
  var {
    className: r,
    color: n,
    left: t,
    top: o,
    prefixCls: i
  } = e, a = {
    position: "absolute",
    top: o,
    left: t
  }, s = {
    "--saturation-pointer-box-shadow": "rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px",
    width: 6,
    height: 6,
    transform: "translate(-3px, -3px)",
    boxShadow: "var(--saturation-pointer-box-shadow)",
    borderRadius: "50%",
    backgroundColor: n
  };
  return cr(() => /* @__PURE__ */ _("div", {
    className: i + "-pointer " + (r || ""),
    style: a,
    children: /* @__PURE__ */ _("div", {
      className: i + "-fill",
      style: s
    })
  }), [o, t, n, r, i]);
}, Pn = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"], vr = /* @__PURE__ */ ae.forwardRef((e, r) => {
  var n, {
    prefixCls: t = "w-color-saturation",
    radius: o = 0,
    pointer: i,
    className: a,
    hue: s = 0,
    style: f,
    hsva: d,
    onChange: h
  } = e, c = ge(e, Pn), p = I({
    width: 200,
    height: 200,
    borderRadius: o
  }, f, {
    position: "relative"
  }), v = (u, w) => {
    h && d && h({
      h: d.h,
      s: u.left * 100,
      v: (1 - u.top) * 100,
      a: d.a
      // source: 'hsv',
    });
  }, y = cr(() => {
    if (!d) return null;
    var u = {
      top: 100 - d.v + "%",
      left: d.s + "%",
      color: ur(d)
    };
    return i && typeof i == "function" ? i(I({
      prefixCls: t
    }, u)) : /* @__PURE__ */ _(Tn, I({
      prefixCls: t
    }, u));
  }, [d, i, t]);
  return /* @__PURE__ */ _(mt, I({
    className: [t, a || ""].filter(Boolean).join(" ")
  }, c, {
    style: I({
      position: "absolute",
      inset: 0,
      cursor: "crosshair",
      backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((n = d?.h) != null ? n : s) + ", 100%, 50%))"
    }, p),
    ref: r,
    onMove: v,
    onDown: v,
    children: y
  }));
});
vr.displayName = "Saturation";
var Nn = ["prefixCls", "className", "hue", "onChange", "direction"], gr = /* @__PURE__ */ ae.forwardRef((e, r) => {
  var {
    prefixCls: n = "w-color-hue",
    className: t,
    hue: o = 0,
    onChange: i,
    direction: a = "horizontal"
  } = e, s = ge(e, Nn);
  return /* @__PURE__ */ _(Ye, I({
    ref: r,
    className: n + " " + (t || "")
  }, s, {
    direction: a,
    background: "linear-gradient(to " + (a === "horizontal" ? "right" : "bottom") + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
    hsva: {
      h: o,
      s: 100,
      v: 100,
      a: o / 360
    },
    onChange: (f, d) => {
      i && i({
        h: a === "horizontal" ? 360 * d.left : 360 * d.top
      });
    }
  }));
});
gr.displayName = "Hue";
var Rn = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"], pr = /* @__PURE__ */ ae.forwardRef((e, r) => {
  var {
    prefixCls: n = "w-color-editable-input-rgba",
    hsva: t,
    placement: o = "bottom",
    rProps: i = {},
    gProps: a = {},
    bProps: s = {},
    aProps: f = {},
    className: d,
    style: h,
    onChange: c
  } = e, p = ge(e, Rn), v = t ? Je(t) : {};
  function y(w) {
    var S = Number(w.target.value);
    S && S > 255 && (w.target.value = "255"), S && S < 0 && (w.target.value = "0");
  }
  var u = (w, S, b) => {
    typeof w == "number" && (S === "a" && (w < 0 && (w = 0), w > 100 && (w = 100), c && c(ze(Ie(I({}, v, {
      a: w / 100
    }))))), w > 255 && (w = 255, b.target.value = "255"), w < 0 && (w = 0, b.target.value = "0"), S === "r" && c && c(ze(Ie(I({}, v, {
      r: w
    })))), S === "g" && c && c(ze(Ie(I({}, v, {
      g: w
    })))), S === "b" && c && c(ze(Ie(I({}, v, {
      b: w
    })))));
  };
  return /* @__PURE__ */ H("div", I({
    ref: r,
    className: [n, d || ""].filter(Boolean).join(" ")
  }, p, {
    style: I({
      fontSize: 11,
      display: "flex"
    }, h),
    children: [/* @__PURE__ */ _(Le, I({
      label: "R",
      value: v.r || 0,
      onBlur: y,
      placement: o,
      onChange: (w, S) => u(S, "r", w)
    }, i, {
      style: I({}, i.style)
    })), /* @__PURE__ */ _(Le, I({
      label: "G",
      value: v.g || 0,
      onBlur: y,
      placement: o,
      onChange: (w, S) => u(S, "g", w)
    }, a, {
      style: I({
        marginLeft: 5
      }, i.style)
    })), /* @__PURE__ */ _(Le, I({
      label: "B",
      value: v.b || 0,
      onBlur: y,
      placement: o,
      onChange: (w, S) => u(S, "b", w)
    }, s, {
      style: I({
        marginLeft: 5
      }, s.style)
    })), f && /* @__PURE__ */ _(Le, I({
      label: "A",
      value: v.a ? parseInt(String(v.a * 100), 10) : 0,
      onBlur: y,
      placement: o,
      onChange: (w, S) => u(S, "a", w)
    }, f, {
      style: I({
        marginLeft: 5
      }, f.style)
    }))]
  }));
});
pr.displayName = "EditableInputRGBA";
var An = ["prefixCls", "className", "onChange", "width", "presetColors", "color", "editableDisable", "disableAlpha", "style"], $n = ["#D0021B", "#F5A623", "#f8e61b", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"], Ut = (e) => /* @__PURE__ */ _("div", {
  style: {
    boxShadow: "rgb(0 0 0 / 60%) 0px 0px 2px",
    width: 4,
    top: 1,
    bottom: 1,
    left: e.left,
    borderRadius: 1,
    position: "absolute",
    backgroundColor: "#fff"
  }
}), br = /* @__PURE__ */ ae.forwardRef((e, r) => {
  var {
    prefixCls: n = "w-color-sketch",
    className: t,
    onChange: o,
    width: i = 218,
    presetColors: a = $n,
    color: s,
    editableDisable: f = !0,
    disableAlpha: d = !1,
    style: h
  } = e, c = ge(e, An), [p, v] = J({
    h: 209,
    s: 36,
    v: 90,
    a: 1
  });
  se(() => {
    typeof s == "string" && dt(s) && v(We(s)), typeof s == "object" && v(s);
  }, [s]);
  var y = (L) => {
    v(L), o && o(ze(L));
  }, u = (L, x) => {
    typeof L == "string" && dt(L) && /(3|6)/.test(String(L.length)) && y(We(L));
  }, w = (L) => y(I({}, p, {
    a: L.a
  })), S = (L) => y(I({}, p, L, {
    a: p.a
  })), b = I({
    "--sketch-background": "rgb(255, 255, 255)",
    "--sketch-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px",
    "--sketch-swatch-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px inset",
    "--sketch-alpha-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset",
    "--sketch-swatch-border-top": "1px solid rgb(238, 238, 238)",
    background: "var(--sketch-background)",
    borderRadius: 4,
    boxShadow: "var(--sketch-box-shadow)",
    width: i
  }, h), z = {
    borderRadius: 2,
    background: fn(p),
    boxShadow: "var(--sketch-alpha-box-shadow)"
  }, M = {
    borderTop: "var(--sketch-swatch-border-top)",
    paddingTop: 10,
    paddingLeft: 10
  }, K = {
    marginRight: 10,
    marginBottom: 10,
    borderRadius: 3,
    boxShadow: "var(--sketch-swatch-box-shadow)"
  };
  return /* @__PURE__ */ H("div", I({}, c, {
    className: n + " " + (t || ""),
    ref: r,
    style: b,
    children: [/* @__PURE__ */ H("div", {
      style: {
        padding: "10px 10px 8px"
      },
      children: [/* @__PURE__ */ _(vr, {
        hsva: p,
        style: {
          width: "auto",
          height: 150
        },
        onChange: S
      }), /* @__PURE__ */ H("div", {
        style: {
          display: "flex",
          marginTop: 4
        },
        children: [/* @__PURE__ */ H("div", {
          style: {
            flex: 1
          },
          children: [/* @__PURE__ */ _(gr, {
            width: "auto",
            height: 10,
            hue: p.h,
            pointer: Ut,
            innerProps: {
              style: {
                marginLeft: 1,
                marginRight: 5
              }
            },
            onChange: (L) => y(I({}, p, L))
          }), !d && /* @__PURE__ */ _(Ye, {
            width: "auto",
            height: 10,
            hsva: p,
            pointer: Ut,
            style: {
              marginTop: 4
            },
            innerProps: {
              style: {
                marginLeft: 1,
                marginRight: 5
              }
            },
            onChange: w
          })]
        }), !d && /* @__PURE__ */ _(Ye, {
          width: 24,
          height: 24,
          hsva: p,
          radius: 2,
          style: {
            marginLeft: 4
          },
          bgProps: {
            style: {
              background: "transparent"
            }
          },
          innerProps: {
            style: z
          },
          pointer: () => /* @__PURE__ */ _(lr, {})
        })]
      })]
    }), f && /* @__PURE__ */ H("div", {
      style: {
        display: "flex",
        margin: "0 10px 3px 10px"
      },
      children: [/* @__PURE__ */ _(Le, {
        label: "Hex",
        value: ut(p).replace(/^#/, "").toLocaleUpperCase(),
        onChange: (L, x) => u(x),
        style: {
          minWidth: 58
        }
      }), /* @__PURE__ */ _(pr, {
        hsva: p,
        style: {
          marginLeft: 6
        },
        aProps: d ? !1 : {},
        onChange: (L) => y(L.hsva)
      })]
    }), a && a.length > 0 && /* @__PURE__ */ _(fr, {
      style: M,
      colors: a,
      color: ut(p),
      onChange: (L) => y(L),
      rectProps: {
        style: K
      }
    })]
  }));
});
br.displayName = "Sketch";
function Gt({
  pick: e,
  position: r,
  colorState: n,
  disableAplha: t
}) {
  const i = Ie(n);
  return /* @__PURE__ */ _(
    br,
    {
      color: i,
      disableAlpha: t,
      style: {
        position: "absolute",
        bottom: 50,
        left: r
      },
      onChange: (a) => {
        e({ ...a.rgba });
      }
    }
  );
}
const je = {}, Vt = (e, r) => e.unstable_is ? e.unstable_is(r) : r === e, Kt = (e) => "init" in e, it = (e) => !!e.write, qt = (e) => "v" in e || "e" in e, Fe = (e) => {
  if ("e" in e)
    throw e.e;
  if ((je ? "production" : void 0) !== "production" && !("v" in e))
    throw new Error("[Bug] atom state is not initialized");
  return e.v;
}, Ue = /* @__PURE__ */ new WeakMap(), Jt = (e) => {
  var r;
  return Ge(e) && !!((r = Ue.get(e)) != null && r[0]);
}, In = (e) => {
  const r = Ue.get(e);
  r?.[0] && (r[0] = !1, r[1].forEach((n) => n()));
}, mr = (e, r) => {
  let n = Ue.get(e);
  if (!n) {
    n = [!0, /* @__PURE__ */ new Set()], Ue.set(e, n);
    const t = () => {
      n[0] = !1;
    };
    e.then(t, t);
  }
  n[1].add(r);
}, Ge = (e) => typeof e?.then == "function", yr = (e, r, n) => {
  n.p.has(e) || (n.p.add(e), r.then(
    () => {
      n.p.delete(e);
    },
    () => {
      n.p.delete(e);
    }
  ));
}, at = (e, r, n) => {
  const t = n(e), o = "v" in t, i = t.v;
  if (Ge(r))
    for (const a of t.d.keys())
      yr(e, r, n(a));
  t.v = r, delete t.e, (!o || !Object.is(i, t.v)) && (++t.n, Ge(i) && In(i));
}, Zt = (e, r, n) => {
  var t;
  const o = /* @__PURE__ */ new Set();
  for (const i of ((t = n.get(e)) == null ? void 0 : t.t) || [])
    n.has(i) && o.add(i);
  for (const i of r.p)
    o.add(i);
  return o;
}, zn = Symbol(), Ln = (e = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), t = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = {}, s = (p, ...v) => p.read(...v), f = (p, ...v) => p.write(...v), d = (p, v) => {
  var y;
  return (y = p.unstable_onInit) == null ? void 0 : y.call(p, v);
}, h = (p, v) => {
  var y;
  return (y = p.onMount) == null ? void 0 : y.call(p, v);
}, ...c) => {
  const p = c[0] || ((x) => {
    if ((je ? "production" : void 0) !== "production" && !x)
      throw new Error("Atom is undefined or null");
    let P = e.get(x);
    return P || (P = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, e.set(x, P), d?.(x, L)), P;
  }), v = c[1] || (() => {
    const x = [], P = (C) => {
      try {
        C();
      } catch (A) {
        x.push(A);
      }
    };
    do {
      a.f && P(a.f);
      const C = /* @__PURE__ */ new Set(), A = C.add.bind(C);
      t.forEach((N) => {
        var $;
        return ($ = r.get(N)) == null ? void 0 : $.l.forEach(A);
      }), t.clear(), i.forEach(A), i.clear(), o.forEach(A), o.clear(), C.forEach(P), t.size && y();
    } while (t.size || i.size || o.size);
    if (x.length)
      throw new AggregateError(x);
  }), y = c[2] || (() => {
    const x = [], P = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), A = Array.from(t);
    for (; A.length; ) {
      const N = A[A.length - 1], $ = p(N);
      if (C.has(N)) {
        A.pop();
        continue;
      }
      if (P.has(N)) {
        if (n.get(N) === $.n)
          x.push([N, $]);
        else if ((je ? "production" : void 0) !== "production" && n.has(N))
          throw new Error("[Bug] invalidated atom exists");
        C.add(N), A.pop();
        continue;
      }
      P.add(N);
      for (const G of Zt(N, $, r))
        P.has(G) || A.push(G);
    }
    for (let N = x.length - 1; N >= 0; --N) {
      const [$, G] = x[N];
      let V = !1;
      for (const Y of G.d.keys())
        if (Y !== $ && t.has(Y)) {
          V = !0;
          break;
        }
      V && (u($), b($)), n.delete($);
    }
  }), u = c[3] || ((x) => {
    var P;
    const C = p(x);
    if (qt(C) && (r.has(x) && n.get(x) !== C.n || Array.from(C.d).every(
      ([j, ee]) => (
        // Recursively, read the atom state of the dependency, and
        // check if the atom epoch number is unchanged
        u(j).n === ee
      )
    )))
      return C;
    C.d.clear();
    let A = !0;
    const N = () => {
      r.has(x) && (b(x), y(), v());
    }, $ = (j) => {
      var ee;
      if (Vt(x, j)) {
        const le = p(j);
        if (!qt(le))
          if (Kt(j))
            at(j, j.init, p);
          else
            throw new Error("no atom init");
        return Fe(le);
      }
      const re = u(j);
      try {
        return Fe(re);
      } finally {
        C.d.set(j, re.n), Jt(C.v) && yr(x, C.v, re), (ee = r.get(j)) == null || ee.t.add(x), A || N();
      }
    };
    let G, V;
    const Y = {
      get signal() {
        return G || (G = new AbortController()), G.signal;
      },
      get setSelf() {
        return (je ? "production" : void 0) !== "production" && !it(x) && console.warn("setSelf function cannot be used with read-only atom"), !V && it(x) && (V = (...j) => {
          if ((je ? "production" : void 0) !== "production" && A && console.warn("setSelf function cannot be called in sync"), !A)
            try {
              return S(x, ...j);
            } finally {
              y(), v();
            }
        }), V;
      }
    }, Z = C.n;
    try {
      const j = s(x, $, Y);
      return at(x, j, p), Ge(j) && (mr(j, () => G?.abort()), j.then(
        N,
        N
      )), C;
    } catch (j) {
      return delete C.v, C.e = j, ++C.n, C;
    } finally {
      A = !1, Z !== C.n && n.get(x) === Z && (n.set(x, C.n), t.add(x), (P = a.c) == null || P.call(a, x));
    }
  }), w = c[4] || ((x) => {
    const P = [x];
    for (; P.length; ) {
      const C = P.pop(), A = p(C);
      for (const N of Zt(C, A, r)) {
        const $ = p(N);
        n.set(N, $.n), P.push(N);
      }
    }
  }), S = c[5] || ((x, ...P) => {
    let C = !0;
    const A = ($) => Fe(u($)), N = ($, ...G) => {
      var V;
      const Y = p($);
      try {
        if (Vt(x, $)) {
          if (!Kt($))
            throw new Error("atom not writable");
          const Z = Y.n, j = G[0];
          at($, j, p), b($), Z !== Y.n && (t.add($), (V = a.c) == null || V.call(a, $), w($));
          return;
        } else
          return S($, ...G);
      } finally {
        C || (y(), v());
      }
    };
    try {
      return f(x, A, N, ...P);
    } finally {
      C = !1;
    }
  }), b = c[6] || ((x) => {
    var P;
    const C = p(x), A = r.get(x);
    if (A && !Jt(C.v)) {
      for (const [N, $] of C.d)
        if (!A.d.has(N)) {
          const G = p(N);
          z(N).t.add(x), A.d.add(N), $ !== G.n && (t.add(N), (P = a.c) == null || P.call(a, N), w(N));
        }
      for (const N of A.d || [])
        if (!C.d.has(N)) {
          A.d.delete(N);
          const $ = M(N);
          $?.t.delete(x);
        }
    }
  }), z = c[7] || ((x) => {
    var P;
    const C = p(x);
    let A = r.get(x);
    if (!A) {
      u(x);
      for (const N of C.d.keys())
        z(N).t.add(x);
      if (A = {
        l: /* @__PURE__ */ new Set(),
        d: new Set(C.d.keys()),
        t: /* @__PURE__ */ new Set()
      }, r.set(x, A), (P = a.m) == null || P.call(a, x), it(x)) {
        const N = () => {
          let $ = !0;
          const G = (...V) => {
            try {
              return S(x, ...V);
            } finally {
              $ || (y(), v());
            }
          };
          try {
            const V = h(x, G);
            V && (A.u = () => {
              $ = !0;
              try {
                V();
              } finally {
                $ = !1;
              }
            });
          } finally {
            $ = !1;
          }
        };
        o.add(N);
      }
    }
    return A;
  }), M = c[8] || ((x) => {
    var P;
    const C = p(x);
    let A = r.get(x);
    if (A && !A.l.size && !Array.from(A.t).some((N) => {
      var $;
      return ($ = r.get(N)) == null ? void 0 : $.d.has(x);
    })) {
      A.u && i.add(A.u), A = void 0, r.delete(x), (P = a.u) == null || P.call(a, x);
      for (const N of C.d.keys()) {
        const $ = M(N);
        $?.t.delete(x);
      }
      return;
    }
    return A;
  }), K = [
    // store state
    e,
    r,
    n,
    t,
    o,
    i,
    a,
    // atom interceptors
    s,
    f,
    d,
    h,
    // building-block functions
    p,
    v,
    y,
    u,
    w,
    S,
    b,
    z,
    M
  ], L = {
    get: (x) => Fe(u(x)),
    set: (x, ...P) => {
      try {
        return S(x, ...P);
      } finally {
        y(), v();
      }
    },
    sub: (x, P) => {
      const A = z(x).l;
      return A.add(P), v(), () => {
        A.delete(P), M(x), v();
      };
    }
  };
  return Object.defineProperty(L, zn, { value: K }), L;
}, Dn = Ln, Qt = mr, xr = {};
let Mn = 0;
function Ze(e, r) {
  const n = `atom${++Mn}`, t = {
    toString() {
      return (xr ? "production" : void 0) !== "production" && this.debugLabel ? n + ":" + this.debugLabel : n;
    }
  };
  return typeof e == "function" ? t.read = e : (t.init = e, t.read = Bn, t.write = On), t;
}
function Bn(e) {
  return e(this);
}
function On(e, r, n) {
  return r(
    this,
    typeof n == "function" ? n(e(this)) : n
  );
}
function jn() {
  return Dn();
}
let Be;
function Hn() {
  return Be || (Be = jn(), (xr ? "production" : void 0) !== "production" && (globalThis.__JOTAI_DEFAULT_STORE__ || (globalThis.__JOTAI_DEFAULT_STORE__ = Be), globalThis.__JOTAI_DEFAULT_STORE__ !== Be && console.warn(
    "Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044"
  ))), Be;
}
const Wn = {}, Fn = un(
  void 0
);
function wr(e) {
  return cn(Fn) || Hn();
}
const ht = (e) => typeof e?.then == "function", ft = (e) => {
  e.status || (e.status = "pending", e.then(
    (r) => {
      e.status = "fulfilled", e.value = r;
    },
    (r) => {
      e.status = "rejected", e.reason = r;
    }
  ));
}, Xn = ae.use || // A shim for older React versions
((e) => {
  if (e.status === "pending")
    throw e;
  if (e.status === "fulfilled")
    return e.value;
  throw e.status === "rejected" ? e.reason : (ft(e), e);
}), st = /* @__PURE__ */ new WeakMap(), er = (e, r) => {
  let n = st.get(e);
  return n || (n = new Promise((t, o) => {
    let i = e;
    const a = (d) => (h) => {
      i === d && t(h);
    }, s = (d) => (h) => {
      i === d && o(h);
    }, f = () => {
      try {
        const d = r();
        ht(d) ? (st.set(d, n), i = d, d.then(a(d), s(d)), Qt(d, f)) : t(d);
      } catch (d) {
        o(d);
      }
    };
    e.then(a(e), s(e)), Qt(e, f);
  }), st.set(e, n)), n;
};
function Yn(e, r) {
  const { delay: n, unstable_promiseStatus: t = !ae.use } = {}, o = wr(), [[i, a, s], f] = sn(
    (h) => {
      const c = o.get(e);
      return Object.is(h[0], c) && h[1] === o && h[2] === e ? h : [c, o, e];
    },
    void 0,
    () => [o.get(e), o, e]
  );
  let d = i;
  if ((a !== o || s !== e) && (f(), d = o.get(e)), se(() => {
    const h = o.sub(e, () => {
      if (t)
        try {
          const c = o.get(e);
          ht(c) && ft(
            er(c, () => o.get(e))
          );
        } catch {
        }
      if (typeof n == "number") {
        setTimeout(f, n);
        return;
      }
      f();
    });
    return f(), h;
  }, [o, e, n, t]), ln(d), ht(d)) {
    const h = er(d, () => o.get(e));
    return t && ft(h), Xn(h);
  }
  return d;
}
function Un(e, r) {
  const n = wr();
  return ke(
    (...o) => {
      if ((Wn ? "production" : void 0) !== "production" && !("write" in e))
        throw new Error("not writable atom");
      return n.set(e, ...o);
    },
    [n, e]
  );
}
function he(e, r) {
  return [
    Yn(e),
    // We do wrong type assertion here, which results in throwing an error.
    Un(e)
  ];
}
/*!
 * iro.js v5.5.2
 * 2016-2021 James Daniel
 * Licensed under MPL 2.0
 * github.com/jaames/iro.js
 */
var U, Ve, Sr, vt, _r, xe = {}, yt = [], Gn = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;
function ye(e, r) {
  for (var n in r)
    e[n] = r[n];
  return e;
}
function kr(e) {
  var r = e.parentNode;
  r && r.removeChild(e);
}
function X(e, r, n) {
  var t, o, i, a, s = arguments;
  if (r = ye({}, r), arguments.length > 3)
    for (n = [n], t = 3; t < arguments.length; t++)
      n.push(s[t]);
  if (n != null && (r.children = n), e != null && e.defaultProps != null)
    for (o in e.defaultProps)
      r[o] === void 0 && (r[o] = e.defaultProps[o]);
  return a = r.key, (i = r.ref) != null && delete r.ref, a != null && delete r.key, gt(e, r, a, i);
}
function gt(e, r, n, t) {
  var o = { type: e, props: r, key: n, ref: t, __k: null, __p: null, __b: 0, __e: null, l: null, __c: null, constructor: void 0 };
  return U.vnode && U.vnode(o), o;
}
function Qe(e) {
  return e.children;
}
function Vn(e) {
  if (e == null || typeof e == "boolean")
    return null;
  if (typeof e == "string" || typeof e == "number")
    return gt(null, e, null, null);
  if (e.__e != null || e.__c != null) {
    var r = gt(e.type, e.props, e.key, null);
    return r.__e = e.__e, r;
  }
  return e;
}
function Me(e, r) {
  this.props = e, this.context = r;
}
function Ke(e, r) {
  if (r == null)
    return e.__p ? Ke(e.__p, e.__p.__k.indexOf(e) + 1) : null;
  for (var n; r < e.__k.length; r++)
    if ((n = e.__k[r]) != null && n.__e != null)
      return n.__e;
  return typeof e.type == "function" ? Ke(e) : null;
}
function Cr(e) {
  var r, n;
  if ((e = e.__p) != null && e.__c != null) {
    for (e.__e = e.__c.base = null, r = 0; r < e.__k.length; r++)
      if ((n = e.__k[r]) != null && n.__e != null) {
        e.__e = e.__c.base = n.__e;
        break;
      }
    return Cr(e);
  }
}
function lt(e) {
  (!e.__d && (e.__d = !0) && Ve.push(e) === 1 || vt !== U.debounceRendering) && (vt = U.debounceRendering, (U.debounceRendering || Sr)(Kn));
}
function Kn() {
  var e, r, n, t, o, i, a, s;
  for (Ve.sort(function(f, d) {
    return d.__v.__b - f.__v.__b;
  }); e = Ve.pop(); )
    e.__d && (n = void 0, t = void 0, i = (o = (r = e).__v).__e, a = r.__P, s = r.u, r.u = !1, a && (n = [], t = wt(a, o, ye({}, o), r.__n, a.ownerSVGElement !== void 0, null, n, s, i ?? Ke(o)), Tr(n, o), t != i && Cr(o)));
}
function Er(e, r, n, t, o, i, a, s, f) {
  var d, h, c, p, v, y, u, w = n && n.__k || yt, S = w.length;
  if (s == xe && (s = i != null ? i[0] : S ? Ke(n, 0) : null), d = 0, r.__k = xt(r.__k, function(b) {
    if (b != null) {
      if (b.__p = r, b.__b = r.__b + 1, (c = w[d]) === null || c && b.key == c.key && b.type === c.type)
        w[d] = void 0;
      else
        for (h = 0; h < S; h++) {
          if ((c = w[h]) && b.key == c.key && b.type === c.type) {
            w[h] = void 0;
            break;
          }
          c = null;
        }
      if (p = wt(e, b, c = c || xe, t, o, i, a, null, s, f), (h = b.ref) && c.ref != h && (u || (u = [])).push(h, b.__c || p, b), p != null) {
        if (y == null && (y = p), b.l != null)
          p = b.l, b.l = null;
        else if (i == c || p != s || p.parentNode == null) {
          e: if (s == null || s.parentNode !== e)
            e.appendChild(p);
          else {
            for (v = s, h = 0; (v = v.nextSibling) && h < S; h += 2)
              if (v == p)
                break e;
            e.insertBefore(p, s);
          }
          r.type == "option" && (e.value = "");
        }
        s = p.nextSibling, typeof r.type == "function" && (r.l = p);
      }
    }
    return d++, b;
  }), r.__e = y, i != null && typeof r.type != "function")
    for (d = i.length; d--; )
      i[d] != null && kr(i[d]);
  for (d = S; d--; )
    w[d] != null && Nr(w[d], w[d]);
  if (u)
    for (d = 0; d < u.length; d++)
      Pr(u[d], u[++d], u[++d]);
}
function xt(e, r, n) {
  if (n == null && (n = []), e == null || typeof e == "boolean")
    r && n.push(r(null));
  else if (Array.isArray(e))
    for (var t = 0; t < e.length; t++)
      xt(e[t], r, n);
  else
    n.push(r ? r(Vn(e)) : e);
  return n;
}
function qn(e, r, n, t, o) {
  var i;
  for (i in n)
    i in r || rr(e, i, null, n[i], t);
  for (i in r)
    o && typeof r[i] != "function" || i === "value" || i === "checked" || n[i] === r[i] || rr(e, i, r[i], n[i], t);
}
function tr(e, r, n) {
  r[0] === "-" ? e.setProperty(r, n) : e[r] = typeof n == "number" && Gn.test(r) === !1 ? n + "px" : n ?? "";
}
function rr(e, r, n, t, o) {
  var i, a, s, f, d;
  if (!((r = o ? r === "className" ? "class" : r : r === "class" ? "className" : r) === "key" || r === "children")) if (r === "style")
    if (i = e.style, typeof n == "string")
      i.cssText = n;
    else {
      if (typeof t == "string" && (i.cssText = "", t = null), t)
        for (a in t)
          n && a in n || tr(i, a, "");
      if (n)
        for (s in n)
          t && n[s] === t[s] || tr(i, s, n[s]);
    }
  else
    r[0] === "o" && r[1] === "n" ? (f = r !== (r = r.replace(/Capture$/, "")), d = r.toLowerCase(), r = (d in e ? d : r).slice(2), n ? (t || e.addEventListener(r, nr, f), (e.t || (e.t = {}))[r] = n) : e.removeEventListener(r, nr, f)) : r !== "list" && r !== "tagName" && r !== "form" && !o && r in e ? e[r] = n ?? "" : typeof n != "function" && r !== "dangerouslySetInnerHTML" && (r !== (r = r.replace(/^xlink:?/, "")) ? n == null || n === !1 ? e.removeAttributeNS("http://www.w3.org/1999/xlink", r.toLowerCase()) : e.setAttributeNS("http://www.w3.org/1999/xlink", r.toLowerCase(), n) : n == null || n === !1 ? e.removeAttribute(r) : e.setAttribute(r, n));
}
function nr(e) {
  return this.t[e.type](U.event ? U.event(e) : e);
}
function wt(e, r, n, t, o, i, a, s, f, d) {
  var h, c, p, v, y, u, w, S, b, z, M = r.type;
  if (r.constructor !== void 0)
    return null;
  (h = U.__b) && h(r);
  try {
    e: if (typeof M == "function") {
      if (S = r.props, b = (h = M.contextType) && t[h.__c], z = h ? b ? b.props.value : h.__p : t, n.__c ? w = (c = r.__c = n.__c).__p = c.__E : ("prototype" in M && M.prototype.render ? r.__c = c = new M(S, z) : (r.__c = c = new Me(S, z), c.constructor = M, c.render = Zn), b && b.sub(c), c.props = S, c.state || (c.state = {}), c.context = z, c.__n = t, p = c.__d = !0, c.__h = []), c.__s == null && (c.__s = c.state), M.getDerivedStateFromProps != null && ye(c.__s == c.state ? c.__s = ye({}, c.__s) : c.__s, M.getDerivedStateFromProps(S, c.__s)), p)
        M.getDerivedStateFromProps == null && c.componentWillMount != null && c.componentWillMount(), c.componentDidMount != null && a.push(c);
      else {
        if (M.getDerivedStateFromProps == null && s == null && c.componentWillReceiveProps != null && c.componentWillReceiveProps(S, z), !s && c.shouldComponentUpdate != null && c.shouldComponentUpdate(S, c.__s, z) === !1) {
          for (c.props = S, c.state = c.__s, c.__d = !1, c.__v = r, r.__e = f != null ? f !== n.__e ? f : n.__e : null, r.__k = n.__k, h = 0; h < r.__k.length; h++)
            r.__k[h] && (r.__k[h].__p = r);
          break e;
        }
        c.componentWillUpdate != null && c.componentWillUpdate(S, c.__s, z);
      }
      for (v = c.props, y = c.state, c.context = z, c.props = S, c.state = c.__s, (h = U.__r) && h(r), c.__d = !1, c.__v = r, c.__P = e, h = c.render(c.props, c.state, c.context), r.__k = xt(h != null && h.type == Qe && h.key == null ? h.props.children : h), c.getChildContext != null && (t = ye(ye({}, t), c.getChildContext())), p || c.getSnapshotBeforeUpdate == null || (u = c.getSnapshotBeforeUpdate(v, y)), Er(e, r, n, t, o, i, a, f, d), c.base = r.__e; h = c.__h.pop(); )
        c.__s && (c.state = c.__s), h.call(c);
      p || v == null || c.componentDidUpdate == null || c.componentDidUpdate(v, y, u), w && (c.__E = c.__p = null);
    } else
      r.__e = Jn(n.__e, r, n, t, o, i, a, d);
    (h = U.diffed) && h(r);
  } catch (K) {
    U.__e(K, r, n);
  }
  return r.__e;
}
function Tr(e, r) {
  for (var n; n = e.pop(); )
    try {
      n.componentDidMount();
    } catch (t) {
      U.__e(t, n.__v);
    }
  U.__c && U.__c(r);
}
function Jn(e, r, n, t, o, i, a, s) {
  var f, d, h, c, p = n.props, v = r.props;
  if (o = r.type === "svg" || o, e == null && i != null) {
    for (f = 0; f < i.length; f++)
      if ((d = i[f]) != null && (r.type === null ? d.nodeType === 3 : d.localName === r.type)) {
        e = d, i[f] = null;
        break;
      }
  }
  if (e == null) {
    if (r.type === null)
      return document.createTextNode(v);
    e = o ? document.createElementNS("http://www.w3.org/2000/svg", r.type) : document.createElement(r.type), i = null;
  }
  return r.type === null ? p !== v && (i != null && (i[i.indexOf(e)] = null), e.data = v) : r !== n && (i != null && (i = yt.slice.call(e.childNodes)), h = (p = n.props || xe).dangerouslySetInnerHTML, c = v.dangerouslySetInnerHTML, s || (c || h) && (c && h && c.__html == h.__html || (e.innerHTML = c && c.__html || "")), qn(e, v, p, o, s), r.__k = r.props.children, c || Er(e, r, n, t, r.type !== "foreignObject" && o, i, a, xe, s), s || ("value" in v && v.value !== void 0 && v.value !== e.value && (e.value = v.value == null ? "" : v.value), "checked" in v && v.checked !== void 0 && v.checked !== e.checked && (e.checked = v.checked))), e;
}
function Pr(e, r, n) {
  try {
    typeof e == "function" ? e(r) : e.current = r;
  } catch (t) {
    U.__e(t, n);
  }
}
function Nr(e, r, n) {
  var t, o, i;
  if (U.unmount && U.unmount(e), (t = e.ref) && Pr(t, null, r), n || typeof e.type == "function" || (n = (o = e.__e) != null), e.__e = e.l = null, (t = e.__c) != null) {
    if (t.componentWillUnmount)
      try {
        t.componentWillUnmount();
      } catch (a) {
        U.__e(a, r);
      }
    t.base = t.__P = null;
  }
  if (t = e.__k)
    for (i = 0; i < t.length; i++)
      t[i] && Nr(t[i], r, n);
  o != null && kr(o);
}
function Zn(e, r, n) {
  return this.constructor(e, n);
}
function Qn(e, r, n) {
  var t, o, i;
  U.__p && U.__p(e, r), o = (t = n === _r) ? null : r.__k, e = X(Qe, null, [e]), i = [], wt(r, r.__k = e, o || xe, xe, r.ownerSVGElement !== void 0, o ? null : yt.slice.call(r.childNodes), i, !1, xe, t), Tr(i, e);
}
U = {}, Me.prototype.setState = function(e, r) {
  var n = this.__s !== this.state && this.__s || (this.__s = ye({}, this.state));
  (typeof e != "function" || (e = e(n, this.props))) && ye(n, e), e != null && this.__v && (this.u = !1, r && this.__h.push(r), lt(this));
}, Me.prototype.forceUpdate = function(e) {
  this.__v && (e && this.__h.push(e), this.u = !0, lt(this));
}, Me.prototype.render = Qe, Ve = [], Sr = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, vt = U.debounceRendering, U.__e = function(e, r, n) {
  for (var t; r = r.__p; )
    if ((t = r.__c) && !t.__p)
      try {
        if (t.constructor && t.constructor.getDerivedStateFromError != null)
          t.setState(t.constructor.getDerivedStateFromError(e));
        else {
          if (t.componentDidCatch == null)
            continue;
          t.componentDidCatch(e);
        }
        return lt(t.__E = t);
      } catch (o) {
        e = o;
      }
  throw e;
}, _r = xe;
function eo(e, r) {
  for (var n = 0; n < r.length; n++) {
    var t = r[n];
    t.enumerable = t.enumerable || !1, t.configurable = !0, "value" in t && (t.writable = !0), Object.defineProperty(e, t.key, t);
  }
}
function to(e, r, n) {
  return r && eo(e.prototype, r), e;
}
function ie() {
  return ie = Object.assign || function(e) {
    for (var r = arguments, n = 1; n < arguments.length; n++) {
      var t = r[n];
      for (var o in t)
        Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
    }
    return e;
  }, ie.apply(this, arguments);
}
var ro = "[-\\+]?\\d+%?", no = "[-\\+]?\\d*\\.\\d+%?", Ce = "(?:" + no + ")|(?:" + ro + ")", Rr = "[\\s|\\(]+(" + Ce + ")[,|\\s]+(" + Ce + ")[,|\\s]+(" + Ce + ")\\s*\\)?", Ar = "[\\s|\\(]+(" + Ce + ")[,|\\s]+(" + Ce + ")[,|\\s]+(" + Ce + ")[,|\\s]+(" + Ce + ")\\s*\\)?", oo = new RegExp("rgb" + Rr), io = new RegExp("rgba" + Ar), ao = new RegExp("hsl" + Rr), so = new RegExp("hsla" + Ar), et = "^(?:#?|0x?)", Ee = "([0-9a-fA-F]{1})", Te = "([0-9a-fA-F]{2})", lo = new RegExp(et + Ee + Ee + Ee + "$"), co = new RegExp(et + Ee + Ee + Ee + Ee + "$"), uo = new RegExp(et + Te + Te + Te + "$"), ho = new RegExp(et + Te + Te + Te + Te + "$"), fo = 2e3, vo = 4e4, Xe = Math.log, Ae = Math.round, Oe = Math.floor;
function ue(e, r, n) {
  return Math.min(Math.max(e, r), n);
}
function ne(e, r) {
  var n = e.indexOf("%") > -1, t = parseFloat(e);
  return n ? r / 100 * t : t;
}
function oe(e) {
  return parseInt(e, 16);
}
function _e(e) {
  return e.toString(16).padStart(2, "0");
}
var De = /* @__PURE__ */ (function() {
  function e(n, t) {
    this.$ = {
      h: 0,
      s: 0,
      v: 0,
      a: 1
    }, n && this.set(n), this.onChange = t, this.initialValue = ie({}, this.$);
  }
  var r = e.prototype;
  return r.set = function(t) {
    if (typeof t == "string")
      /^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(t) ? this.hexString = t : /^rgba?/.test(t) ? this.rgbString = t : /^hsla?/.test(t) && (this.hslString = t);
    else if (typeof t == "object")
      t instanceof e ? this.hsva = t.hsva : "r" in t && "g" in t && "b" in t ? this.rgb = t : "h" in t && "s" in t && "v" in t ? this.hsv = t : "h" in t && "s" in t && "l" in t ? this.hsl = t : "kelvin" in t && (this.kelvin = t.kelvin);
    else
      throw new Error("Invalid color value");
  }, r.setChannel = function(t, o, i) {
    var a;
    this[t] = ie({}, this[t], (a = {}, a[o] = i, a));
  }, r.reset = function() {
    this.hsva = this.initialValue;
  }, r.clone = function() {
    return new e(this);
  }, r.unbind = function() {
    this.onChange = void 0;
  }, e.hsvToRgb = function(t) {
    var o = t.h / 60, i = t.s / 100, a = t.v / 100, s = Oe(o), f = o - s, d = a * (1 - i), h = a * (1 - f * i), c = a * (1 - (1 - f) * i), p = s % 6, v = [a, h, d, d, c, a][p], y = [c, a, a, h, d, d][p], u = [d, d, c, a, a, h][p];
    return {
      r: ue(v * 255, 0, 255),
      g: ue(y * 255, 0, 255),
      b: ue(u * 255, 0, 255)
    };
  }, e.rgbToHsv = function(t) {
    var o = t.r / 255, i = t.g / 255, a = t.b / 255, s = Math.max(o, i, a), f = Math.min(o, i, a), d = s - f, h = 0, c = s, p = s === 0 ? 0 : d / s;
    switch (s) {
      case f:
        h = 0;
        break;
      case o:
        h = (i - a) / d + (i < a ? 6 : 0);
        break;
      case i:
        h = (a - o) / d + 2;
        break;
      case a:
        h = (o - i) / d + 4;
        break;
    }
    return {
      h: h * 60 % 360,
      s: ue(p * 100, 0, 100),
      v: ue(c * 100, 0, 100)
    };
  }, e.hsvToHsl = function(t) {
    var o = t.s / 100, i = t.v / 100, a = (2 - o) * i, s = a <= 1 ? a : 2 - a, f = s < 1e-9 ? 0 : o * i / s;
    return {
      h: t.h,
      s: ue(f * 100, 0, 100),
      l: ue(a * 50, 0, 100)
    };
  }, e.hslToHsv = function(t) {
    var o = t.l * 2, i = t.s * (o <= 100 ? o : 200 - o) / 100, a = o + i < 1e-9 ? 0 : 2 * i / (o + i);