import { jsxs as z, jsx as B } from "react/jsx-runtime";
import { useEffect as Me } from "react";
import { a as we } from "./index.CfQlFjZU.js";
import { B as Ce } from "./Button.CpTwUWVr.js";
import { P as Pe } from "./ProfilePreview.Dh7SMM-9.js";
import "./index.C1ZfizMq.js";
import "./SocialIcon.B0ronCv9.js";
import { O as Ie } from "./Onboarding.BDRBUM0D.js";
var j = {};
(function E(v, M, I, P) {
  var T = !!(v.Worker && v.Blob && v.Promise && v.OffscreenCanvas && v.OffscreenCanvasRenderingContext2D && v.HTMLCanvasElement && v.HTMLCanvasElement.prototype.transferControlToOffscreen && v.URL && v.URL.createObjectURL), F = typeof Path2D == "function" && typeof DOMMatrix == "function", S = function() {
    if (!v.OffscreenCanvas)
      return !1;
    var r = new OffscreenCanvas(1, 1), e = r.getContext("2d");
    e.fillRect(0, 0, 1, 1);
    var a = r.transferToImageBitmap();
    try {
      e.createPattern(a, "no-repeat");
    } catch {
      return !1;
    }
    return !0;
  }();
  function L() {
  }
  function O(r) {
    var e = M.exports.Promise, a = e !== void 0 ? e : v.Promise;
    return typeof a == "function" ? new a(r) : (r(L, L), null);
  }
  var R = /* @__PURE__ */ function(r, e) {
    return {
      transform: function(a) {
        if (r)
          return a;
        if (e.has(a))
          return e.get(a);
        var t = new OffscreenCanvas(a.width, a.height), o = t.getContext("2d");
        return o.drawImage(a, 0, 0), e.set(a, t), t;
      },
      clear: function() {
        e.clear();
      }
    };
  }(S, /* @__PURE__ */ new Map()), k = function() {
    var r = Math.floor(16.666666666666668), e, a, t = {}, o = 0;
    return typeof requestAnimationFrame == "function" && typeof cancelAnimationFrame == "function" ? (e = function(i) {
      var l = Math.random();
      return t[l] = requestAnimationFrame(function n(s) {
        o === s || o + r - 1 < s ? (o = s, delete t[l], i()) : t[l] = requestAnimationFrame(n);
      }), l;
    }, a = function(i) {
      t[i] && cancelAnimationFrame(t[i]);
    }) : (e = function(i) {
      return setTimeout(i, r);
    }, a = function(i) {
      return clearTimeout(i);
    }), { frame: e, cancel: a };
  }(), G = /* @__PURE__ */ function() {
    var r, e, a = {};
    function t(o) {
      function i(l, n) {
        o.postMessage({ options: l || {}, callback: n });
      }
      o.init = function(n) {
        var s = n.transferControlToOffscreen();
        o.postMessage({ canvas: s }, [s]);
      }, o.fire = function(n, s, h) {
        if (e)
          return i(n, null), e;
        var d = Math.random().toString(36).slice(2);
        return e = O(function(u) {
          function f(g) {
            g.data.callback === d && (delete a[d], o.removeEventListener("message", f), e = null, R.clear(), h(), u());
          }
          o.addEventListener("message", f), i(n, d), a[d] = f.bind(null, { data: { callback: d } });
        }), e;
      }, o.reset = function() {
        o.postMessage({ reset: !0 });
        for (var n in a)
          a[n](), delete a[n];
      };
    }
    return function() {
      if (r)
        return r;
      if (!I && T) {
        var o = [
          "var CONFETTI, SIZE = {}, module = {};",
          "(" + E.toString() + ")(this, module, true, SIZE);",
          "onmessage = function(msg) {",
          "  if (msg.data.options) {",
          "    CONFETTI(msg.data.options).then(function () {",
          "      if (msg.data.callback) {",
          "        postMessage({ callback: msg.data.callback });",
          "      }",
          "    });",
          "  } else if (msg.data.reset) {",
          "    CONFETTI && CONFETTI.reset();",
          "  } else if (msg.data.resize) {",
          "    SIZE.width = msg.data.resize.width;",
          "    SIZE.height = msg.data.resize.height;",
          "  } else if (msg.data.canvas) {",
          "    SIZE.width = msg.data.canvas.width;",
          "    SIZE.height = msg.data.canvas.height;",
          "    CONFETTI = module.exports.create(msg.data.canvas);",
          "  }",
          "}"
        ].join(`
`);
        try {
          r = new Worker(URL.createObjectURL(new Blob([o])));
        } catch (i) {
          return typeof console !== void 0 && typeof console.warn == "function" && console.warn("🎊 Could not load worker", i), null;
        }
        t(r);
      }
      return r;
    };
  }(), J = {
    particleCount: 50,
    angle: 90,
    spread: 45,
    startVelocity: 45,
    decay: 0.9,
    gravity: 1,
    drift: 0,
    ticks: 200,
    x: 0.5,
    y: 0.5,
    shapes: ["square", "circle"],
    zIndex: 100,
    colors: [
      "#26ccff",
      "#a25afd",
      "#ff5e7e",
      "#88ff5a",
      "#fcff42",
      "#ffa62d",
      "#ff36ff"
    ],
    // probably should be true, but back-compat
    disableForReducedMotion: !1,
    scalar: 1
  };
  function Y(r, e) {
    return e ? e(r) : r;
  }
  function K(r) {
    return r != null;
  }
  function m(r, e, a) {
    return Y(
      r && K(r[e]) ? r[e] : J[e],
      a
    );
  }
  function Q(r) {
    return r < 0 ? 0 : Math.floor(r);
  }
  function $(r, e) {
    return Math.floor(Math.random() * (e - r)) + r;
  }
  function N(r) {
    return parseInt(r, 16);
  }
  function X(r) {
    return r.map(ee);
  }
  function ee(r) {
    var e = String(r).replace(/[^0-9a-f]/gi, "");
    return e.length < 6 && (e = e[0] + e[0] + e[1] + e[1] + e[2] + e[2]), {
      r: N(e.substring(0, 2)),
      g: N(e.substring(2, 4)),
      b: N(e.substring(4, 6))
    };
  }
  function re(r) {
    var e = m(r, "origin", Object);
    return e.x = m(e, "x", Number), e.y = m(e, "y", Number), e;
  }
  function ae(r) {
    r.width = document.documentElement.clientWidth, r.height = document.documentElement.clientHeight;
  }
  function ne(r) {
    var e = r.getBoundingClientRect();
    r.width = e.width, r.height = e.height;
  }
  function te(r) {
    var e = document.createElement("canvas");
    return e.style.position = "fixed", e.style.top = "0px", e.style.left = "0px", e.style.pointerEvents = "none", e.style.zIndex = r, e;
  }
  function oe(r, e, a, t, o, i, l, n, s) {
    r.save(), r.translate(e, a), r.rotate(i), r.scale(t, o), r.arc(0, 0, 1, l, n, s), r.restore();
  }
  function ie(r) {
    var e = r.angle * (Math.PI / 180), a = r.spread * (Math.PI / 180);
    return {
      x: r.x,
      y: r.y,
      wobble: Math.random() * 10,
      wobbleSpeed: Math.min(0.11, Math.random() * 0.1 + 0.05),
      velocity: r.startVelocity * 0.5 + Math.random() * r.startVelocity,
      angle2D: -e + (0.5 * a - Math.random() * a),
      tiltAngle: (Math.random() * (0.75 - 0.25) + 0.25) * Math.PI,
      color: r.color,
      shape: r.shape,
      tick: 0,
      totalTicks: r.ticks,
      decay: r.decay,
      drift: r.drift,
      random: Math.random() + 2,
      tiltSin: 0,
      tiltCos: 0,
      wobbleX: 0,
      wobbleY: 0,
      gravity: r.gravity * 3,
      ovalScalar: 0.6,
      scalar: r.scalar,
      flat: r.flat
    };
  }
  function le(r, e) {
    e.x += Math.cos(e.angle2D) * e.velocity + e.drift, e.y += Math.sin(e.angle2D) * e.velocity + e.gravity, e.velocity *= e.decay, e.flat ? (e.wobble = 0, e.wobbleX = e.x + 10 * e.scalar, e.wobbleY = e.y + 10 * e.scalar, e.tiltSin = 0, e.tiltCos = 0, e.random = 1) : (e.wobble += e.wobbleSpeed, e.wobbleX = e.x + 10 * e.scalar * Math.cos(e.wobble), e.wobbleY = e.y + 10 * e.scalar * Math.sin(e.wobble), e.tiltAngle += 0.1, e.tiltSin = Math.sin(e.tiltAngle), e.tiltCos = Math.cos(e.tiltAngle), e.random = Math.random() + 2);
    var a = e.tick++ / e.totalTicks, t = e.x + e.random * e.tiltCos, o = e.y + e.random * e.tiltSin, i = e.wobbleX + e.random * e.tiltCos, l = e.wobbleY + e.random * e.tiltSin;
    if (r.fillStyle = "rgba(" + e.color.r + ", " + e.color.g + ", " + e.color.b + ", " + (1 - a) + ")", r.beginPath(), F && e.shape.type === "path" && typeof e.shape.path == "string" && Array.isArray(e.shape.matrix))
      r.fill(ce(
        e.shape.path,
        e.shape.matrix,
        e.x,
        e.y,
        Math.abs(i - t) * 0.1,
        Math.abs(l - o) * 0.1,
        Math.PI / 10 * e.wobble
      ));
    else if (e.shape.type === "bitmap") {
      var n = Math.PI / 10 * e.wobble, s = Math.abs(i - t) * 0.1, h = Math.abs(l - o) * 0.1, d = e.shape.bitmap.width * e.scalar, u = e.shape.bitmap.height * e.scalar, f = new DOMMatrix([
        Math.cos(n) * s,
        Math.sin(n) * s,
        -Math.sin(n) * h,
        Math.cos(n) * h,
        e.x,
        e.y
      ]);
      f.multiplySelf(new DOMMatrix(e.shape.matrix));
      var g = r.createPattern(R.transform(e.shape.bitmap), "no-repeat");
      g.setTransform(f), r.globalAlpha = 1 - a, r.fillStyle = g, r.fillRect(
        e.x - d / 2,
        e.y - u / 2,
        d,
        u
      ), r.globalAlpha = 1;
    } else if (e.shape === "circle")
      r.ellipse ? r.ellipse(e.x, e.y, Math.abs(i - t) * e.ovalScalar, Math.abs(l - o) * e.ovalScalar, Math.PI / 10 * e.wobble, 0, 2 * Math.PI) : oe(r, e.x, e.y, Math.abs(i - t) * e.ovalScalar, Math.abs(l - o) * e.ovalScalar, Math.PI / 10 * e.wobble, 0, 2 * Math.PI);
    else if (e.shape === "star")
      for (var c = Math.PI / 2 * 3, p = 4 * e.scalar, b = 8 * e.scalar, y = e.x, C = e.y, x = 5, w = Math.PI / x; x--; )
        y = e.x + Math.cos(c) * b, C = e.y + Math.sin(c) * b, r.lineTo(y, C), c += w, y = e.x + Math.cos(c) * p, C = e.y + Math.sin(c) * p, r.lineTo(y, C), c += w;
    else
      r.moveTo(Math.floor(e.x), Math.floor(e.y)), r.lineTo(Math.floor(e.wobbleX), Math.floor(o)), r.lineTo(Math.floor(i), Math.floor(l)), r.lineTo(Math.floor(t), Math.floor(e.wobbleY));
    return r.closePath(), r.fill(), e.tick < e.totalTicks;
  }
  function se(r, e, a, t, o) {
    var i = e.slice(), l = r.getContext("2d"), n, s, h = O(function(d) {
      function u() {
        n = s = null, l.clearRect(0, 0, t.width, t.height), R.clear(), o(), d();
      }
      function f() {
        I && !(t.width === P.width && t.height === P.height) && (t.width = r.width = P.width, t.height = r.height = P.height), !t.width && !t.height && (a(r), t.width = r.width, t.height = r.height), l.clearRect(0, 0, t.width, t.height), i = i.filter(function(g) {
          return le(l, g);
        }), i.length ? n = k.frame(f) : u();
      }
      n = k.frame(f), s = u;
    });
    return {
      addFettis: function(d) {
        return i = i.concat(d), h;
      },
      canvas: r,
      promise: h,
      reset: function() {
        n && k.cancel(n), s && s();
      }
    };
  }
  function D(r, e) {
    var a = !r, t = !!m(e || {}, "resize"), o = !1, i = m(e, "disableForReducedMotion", Boolean), l = T && !!m(e || {}, "useWorker"), n = l ? G() : null, s = a ? ae : ne, h = r && n ? !!r.__confetti_initialized : !1, d = typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion)").matches, u;
    function f(c, p, b) {
      for (var y = m(c, "particleCount", Q), C = m(c, "angle", Number), x = m(c, "spread", Number), w = m(c, "startVelocity", Number), de = m(c, "decay", Number), fe = m(c, "gravity", Number), me = m(c, "drift", Number), V = m(c, "colors", X), ve = m(c, "ticks", Number), Z = m(c, "shapes"), ge = m(c, "scalar"), pe = !!m(c, "flat"), q = re(c), H = y, _ = [], be = r.width * q.x, ye = r.height * q.y; H--; )
        _.push(
          ie({
            x: be,
            y: ye,
            angle: C,
            spread: x,
            startVelocity: w,
            color: V[H % V.length],
            shape: Z[$(0, Z.length)],
            ticks: ve,
            decay: de,
            gravity: fe,
            drift: me,
            scalar: ge,
            flat: pe
          })
        );
      return u ? u.addFettis(_) : (u = se(r, _, s, p, b), u.promise);
    }
    function g(c) {
      var p = i || m(c, "disableForReducedMotion", Boolean), b = m(c, "zIndex", Number);
      if (p && d)
        return O(function(w) {
          w();
        });
      a && u ? r = u.canvas : a && !r && (r = te(b), document.body.appendChild(r)), t && !h && s(r);
      var y = {
        width: r.width,
        height: r.height
      };
      n && !h && n.init(r), h = !0, n && (r.__confetti_initialized = !0);
      function C() {
        if (n) {
          var w = {
            getBoundingClientRect: function() {
              if (!a)
                return r.getBoundingClientRect();
            }
          };
          s(w), n.postMessage({
            resize: {
              width: w.width,
              height: w.height
            }
          });
          return;
        }
        y.width = y.height = null;
      }
      function x() {
        u = null, t && (o = !1, v.removeEventListener("resize", C)), a && r && (document.body.contains(r) && document.body.removeChild(r), r = null, h = !1);
      }
      return t && !o && (o = !0, v.addEventListener("resize", C, !1)), n ? n.fire(c, y, x) : f(c, y, x);
    }
    return g.reset = function() {
      n && n.reset(), u && u.reset();
    }, g;
  }
  var A;
  function U() {
    return A || (A = D(null, { useWorker: !0, resize: !0 })), A;
  }
  function ce(r, e, a, t, o, i, l) {
    var n = new Path2D(r), s = new Path2D();
    s.addPath(n, new DOMMatrix(e));
    var h = new Path2D();
    return h.addPath(s, new DOMMatrix([
      Math.cos(l) * o,
      Math.sin(l) * o,
      -Math.sin(l) * i,
      Math.cos(l) * i,
      a,
      t
    ])), h;
  }
  function he(r) {
    if (!F)
      throw new Error("path confetti are not supported in this browser");
    var e, a;
    typeof r == "string" ? e = r : (e = r.path, a = r.matrix);
    var t = new Path2D(e), o = document.createElement("canvas"), i = o.getContext("2d");
    if (!a) {
      for (var l = 1e3, n = l, s = l, h = 0, d = 0, u, f, g = 0; g < l; g += 2)
        for (var c = 0; c < l; c += 2)
          i.isPointInPath(t, g, c, "nonzero") && (n = Math.min(n, g), s = Math.min(s, c), h = Math.max(h, g), d = Math.max(d, c));
      u = h - n, f = d - s;
      var p = 10, b = Math.min(p / u, p / f);
      a = [
        b,
        0,
        0,
        b,
        -Math.round(u / 2 + n) * b,
        -Math.round(f / 2 + s) * b
      ];
    }
    return {
      type: "path",
      path: e,
      matrix: a
    };
  }
  function ue(r) {
    var e, a = 1, t = "#000000", o = '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "Twemoji Mozilla", "system emoji", sans-serif';
    typeof r == "string" ? e = r : (e = r.text, a = "scalar" in r ? r.scalar : a, o = "fontFamily" in r ? r.fontFamily : o, t = "color" in r ? r.color : t);
    var i = 10 * a, l = "" + i + "px " + o, n = new OffscreenCanvas(i, i), s = n.getContext("2d");
    s.font = l;
    var h = s.measureText(e), d = Math.ceil(h.actualBoundingBoxRight + h.actualBoundingBoxLeft), u = Math.ceil(h.actualBoundingBoxAscent + h.actualBoundingBoxDescent), f = 2, g = h.actualBoundingBoxLeft + f, c = h.actualBoundingBoxAscent + f;
    d += f + f, u += f + f, n = new OffscreenCanvas(d, u), s = n.getContext("2d"), s.font = l, s.fillStyle = t, s.fillText(e, g, c);
    var p = 1 / a;
    return {
      type: "bitmap",
      // TODO these probably need to be transfered for workers
      bitmap: n.transferToImageBitmap(),
      matrix: [p, 0, 0, p, -d * p / 2, -u * p / 2]
    };
  }
  M.exports = function() {
    return U().apply(this, arguments);
  }, M.exports.reset = function() {
    U().reset();
  }, M.exports.create = D, M.exports.shapeFromPath = he, M.exports.shapeFromText = ue;
})(/* @__PURE__ */ function() {
  return typeof window < "u" ? window : typeof self < "u" ? self : this || {};
}(), j, !1);
const xe = j.exports;
j.exports.create;
const Te = "creator_contentContainerStretch_PyLzV", Fe = "creator_mainContentContainer_5FtzT", Ee = "creator_formContainer_PIqZ7", Se = "creator_sectionFormContainer_g34W-", Oe = "creator_header_JPW4s", Re = "creator_body_35LrH", W = { contentContainerStretch: Te, mainContentContainer: Fe, formContainer: Ee, sectionFormContainer: Se, header: Oe, body: Re };
function ke({
  displayName: E,
  previewIcons: v,
  headerImageSrc: M,
  isNotSupported: I,
  onButtonClick: P,
  loading: T,
  showEmailSent: F
}) {
  Me(() => {
    xe({
      particleCount: 250,
      spread: 70,
      origin: { y: 0.4 }
    });
  }, []);
  const S = I ? {
    header: "Your page is nearly finished",
    body: "Switch to a bigger screen to add more content and customization at komi.io/login.",
    buttonLabel: "Get Login Link"
  } : {
    header: "Your page is nearly finished",
    body: "Continue customizing your page and share it on your social media.",
    buttonLabel: "Next"
  };
  return {
    displayName: E,
    mainContentContainerClassName: W.mainContentContainer,
    headerClassName: W.header,
    bodyClassName: W.body,
    steps: [{ label: "Links" }, { label: "Image" }, { label: "Content" }],
    activeStepIndex: 1,
    previewIcons: v,
    onButtonClick: P,
    headerImageSrc: M,
    loading: T,
    ...S,
    ...F && I ? { buttonLabel: "Email Sent", disabled: !0 } : {}
  };
}
function Be({
  mainContentContainerClassName: E,
  headerClassName: v,
  bodyClassName: M,
  previewIcons: I,
  displayName: P,
  onButtonClick: T,
  headerImageSrc: F,
  header: S,
  body: L,
  buttonLabel: O,
  loading: R,
  disabled: k
}) {
  return /* @__PURE__ */ z(Ie, { layout: "plain", children: [
    /* @__PURE__ */ B("div", { children: /* @__PURE__ */ B(
      Pe,
      {
        icons: I,
        displayName: P,
        imageSrc: F
      }
    ) }),
    /* @__PURE__ */ z("div", { className: E, children: [
      /* @__PURE__ */ z("div", { children: [
        /* @__PURE__ */ B("h1", { className: v, children: S }),
        /* @__PURE__ */ B("p", { className: M, children: L })
      ] }),
      /* @__PURE__ */ B(
        Ce,
        {
          label: O,
          disabled: k,
          loading: R,
          size: "full",
          onClick: T
        }
      )
    ] })
  ] });
}
const Ue = we(Be, ke);
export {
  Ue as C
};
