chordia-ui 3.3.0 → 3.3.2

package/dist/components/onboarding.es.js

@@ -1,33 +1,33 @@
-import { a as P } from "../UploadInteraction.es.js";
-import { U as Ue } from "../UploadInteraction.es.js";
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useState as u, useRef as D, useEffect as M } from "react";
-import { SquareUser as N, ChevronDown as T, Trash as U, Briefcase as $, MessageSquare as G, Database as O, Users as V, BookOpen as _, SlidersHorizontal as q } from "lucide-react";
-import { I as K } from "../IntegrationCard.es.js";
-const W = "var(--font-sans)", Z = {
-  fontFamily: W
-}, J = {
+import { a as te } from "../UploadInteraction.es.js";
+import { U as ot } from "../UploadInteraction.es.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { useState as c, useRef as L, useEffect as O } from "react";
+import { Check as re, SquareUser as ne, ChevronDown as G, Trash as oe, Briefcase as ie, MessageSquare as le, Database as ae, Users as se, BookOpen as de, SlidersHorizontal as ce } from "lucide-react";
+import { I as pe } from "../IntegrationCard.es.js";
+const M = "var(--font-sans)", ge = {
+  fontFamily: M
+}, he = {
   fontSize: 20,
   fontWeight: 600,
   fontStyle: "normal",
-  fontFamily: W,
+  fontFamily: M,
   color: "var(--grey-strong)",
   margin: 0,
   lineHeight: "normal"
-}, Q = {
+}, fe = {
   fontSize: 13,
   fontWeight: 400,
   fontStyle: "normal",
   color: "var(--color-text-secondary)",
-  fontFamily: W,
+  fontFamily: M,
   margin: "4px 0 0",
   lineHeight: "140%"
-}, X = {
+}, ye = {
   display: "grid",
   gridTemplateColumns: "repeat(3, 1fr)",
   gap: 16,
   marginTop: 24
-}, Y = [
+}, ue = [
   {
     providerName: "Five9",
     description: "Cloud contact center platform for voice and digital channels",
@@ -46,58 +46,102 @@ const W = "var(--font-sans)", Z = {
     status: "coming-soon",
     railColor: "#6B7C93"
   }
-], ee = ({ integrations: s = Y, onConfigure: g }) => /* @__PURE__ */ r("div", { style: Z, children: [
-  /* @__PURE__ */ e("h2", { style: J, children: "Connect Data Source" }),
-  /* @__PURE__ */ e("p", { style: Q, children: "Choose your preferred platforms to synchronise data." }),
-  /* @__PURE__ */ e("div", { style: X, children: s.map((n) => /* @__PURE__ */ e(
-    K,
+], me = ({ integrations: a = ue, onConfigure: h }) => /* @__PURE__ */ n("div", { style: ge, children: [
+  /* @__PURE__ */ t("h2", { style: he, children: "Connect Data Source" }),
+  /* @__PURE__ */ t("p", { style: fe, children: "Choose your preferred platforms to synchronise data." }),
+  /* @__PURE__ */ t("div", { style: ye, children: a.map((l) => /* @__PURE__ */ t(
+    pe,
     {
-      providerName: n.providerName,
-      description: n.description,
-      status: n.status,
-      railColor: n.railColor,
-      logoUrl: n.logoUrl,
-      icon: n.icon,
-      onConfigure: () => g == null ? void 0 : g(n)
+      providerName: l.providerName,
+      description: l.description,
+      status: l.status,
+      railColor: l.railColor,
+      logoUrl: l.logoUrl,
+      icon: l.icon,
+      onConfigure: () => h == null ? void 0 : h(l)
     },
-    n.providerName
+    l.providerName
   )) })
-] }), w = "var(--font-sans)", te = ["Super Admin", "Admin", "Analyst", "Supervisor", "Agent"], re = ({
-  title: s = "Create User",
-  subtitle: g = "Create users and send invites to add them to the platform.",
-  projects: n = ["Andromeda Project"],
-  defaultRole: f = "Admin",
-  defaultProject: v,
-  roles: h = te,
-  onSendInvite: c,
+] }), u = "var(--font-sans)", ve = ["Super Admin", "Admin", "Analyst", "Supervisor", "Agent"], xe = ({
+  title: a = "Create User",
+  subtitle: h = "Create users and send invites to add them to the platform.",
+  projects: l = ["Andromeda Project"],
+  defaultRole: m = "Admin",
+  defaultProject: x,
+  roles: f = ve,
+  onSendInvite: g,
   onInvite: b
 }) => {
-  const [y, m] = u(""), [p, k] = u([]), [x, F] = u(null), [S, C] = u(null), z = D(null), E = D(null), l = v || n[0] || "";
-  M(() => {
-    if (x === null && S === null)
+  const [v, y] = c(""), [s, w] = c([]), [z, F] = c(null), [k, S] = c(""), [I, C] = c(""), [i, D] = c([]), [W, j] = c(null), [R, B] = c(null), K = L(null), H = L(null), A = L(null), q = x || l[0] || "", T = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
+  O(() => {
+    if (W === null && R === null)
       return;
-    const t = (o) => {
-      E.current && !E.current.contains(o.target) && (F(null), C(null));
+    const e = (r) => {
+      A.current && !A.current.contains(r.target) && (j(null), B(null));
     };
-    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
-  }, [x, S]);
-  const I = () => {
-    const t = y.split(",").map((a) => a.trim()).filter((a) => a.includes("@")), o = new Set(p.map((a) => a.email)), i = t.filter((a) => !o.has(a)).map((a) => ({ email: a, role: f, project: l }));
-    i.length && (k([...p, ...i]), m(""));
-  }, B = (t) => {
-    t.key === "Enter" && (t.preventDefault(), I());
-  }, A = (t) => {
-    k(p.filter((o, i) => i !== t)), F(null);
-  }, R = (t, o, i) => {
-    k(p.map((a, L) => L === t ? { ...a, [o]: i } : a));
-  }, H = () => {
-    p.length && (c == null || c(p), b == null || b(p.map((t) => t.email)));
-  };
-  return /* @__PURE__ */ r("div", { style: { fontFamily: w }, children: [
-    /* @__PURE__ */ e("h2", { style: { fontSize: 20, fontWeight: 600, color: "var(--grey-strong, #2E3236)", margin: 0, lineHeight: "normal" }, children: s }),
-    /* @__PURE__ */ e("p", { style: { fontSize: 13, fontWeight: 400, color: "var(--color-text-secondary, #808183)", margin: "4px 0 0", lineHeight: "140%" }, children: g }),
-    /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 12, marginTop: 24 }, children: [
-      /* @__PURE__ */ r(
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [W, R]), O(() => {
+    z !== null && H.current && H.current.focus();
+  }, [z]);
+  const Z = (e) => {
+    const r = e.target.value;
+    if (C(""), r.endsWith(",")) {
+      const o = r.slice(0, -1).trim();
+      if (!o) {
+        y("");
+        return;
+      }
+      if (!T(o)) {
+        C(`"${o}" is not a valid email address.`);
+        return;
+      }
+      s.includes(o) || w([...s, o]), y("");
+    } else
+      y(r);
+  }, N = (e) => {
+    F(e), S(s[e]);
+  }, P = (e) => {
+    const r = k.trim();
+    if (C(""), !r)
+      w(s.filter((o, d) => d !== e));
+    else if (T(r))
+      r !== s[e] && w(s.map((o, d) => d === e ? r : o));
+    else {
+      C(`"${r}" is not a valid email address.`);
+      return;
+    }
+    F(null), S("");
+  }, J = (e) => {
+    const r = e.target.value;
+    r.endsWith(",") ? (S(r.slice(0, -1)), P(z)) : S(r);
+  }, Q = (e, r) => {
+    e.key === "Enter" && (e.preventDefault(), P(r)), e.key === "Escape" && (F(null), S("")), e.key === "Backspace" && !k && (w(s.filter((o, d) => d !== r)), F(null), S(""));
+  }, $ = () => {
+    C("");
+    const e = v.trim();
+    if (e && !T(e)) {
+      C(`"${e}" is not a valid email address.`);
+      return;
+    }
+    const r = [...s];
+    if (e && T(e) && r.push(e), !r.length)
+      return;
+    const o = new Set(i.map((E) => E.email)), d = [...new Set(r)].filter((E) => !o.has(E)).map((E) => ({ email: E, role: m, project: q, invited: !1 }));
+    d.length && D([...i, ...d]), w([]), y("");
+  }, X = (e) => {
+    e.key === "Enter" && (e.preventDefault(), $()), e.key === "Backspace" && !v && s.length && N(s.length - 1);
+  }, Y = (e) => {
+    D(i.filter((r, o) => o !== e)), j(null);
+  }, U = (e, r, o) => {
+    D(i.map((d, E) => E === e ? { ...d, [r]: o } : d));
+  }, ee = () => {
+    i.length && (D(i.map((e) => ({ ...e, invited: !0 }))), g == null || g(i), b == null || b(i.map((e) => e.email)));
+  }, V = (e) => e.role && e.project;
+  return /* @__PURE__ */ n("div", { style: { fontFamily: u }, children: [
+    /* @__PURE__ */ t("h2", { style: { fontSize: 20, fontWeight: 600, color: "var(--grey-strong, #2E3236)", margin: 0, lineHeight: "normal" }, children: a }),
+    /* @__PURE__ */ t("p", { style: { fontSize: 13, fontWeight: 400, color: "var(--color-text-secondary, #808183)", margin: "4px 0 0", lineHeight: "140%" }, children: h }),
+    /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 12, marginTop: 24 }, children: [
+      /* @__PURE__ */ n(
         "div",
         {
           style: {
@@ -114,41 +158,80 @@ const W = "var(--font-sans)", Z = {
             flexWrap: "wrap"
           },
           children: [
-            y.split(",").filter((t) => t.trim()).length > 1 && y.split(",").map((t) => t.trim()).filter((t) => t.includes("@")).map((t, o) => /* @__PURE__ */ e(
+            s.map((e, r) => /* @__PURE__ */ n(
               "span",
               {
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  padding: "4px 10px",
-                  borderRadius: 6,
-                  background: "var(--hover-warm, #F5F0E8)",
-                  fontSize: 14,
-                  fontWeight: 500,
-                  color: "var(--grey-strong, #2E3236)",
-                  whiteSpace: "nowrap"
-                },
-                children: t
+                style: { display: "inline-flex", alignItems: "center", gap: 2 },
+                children: [
+                  z === r ? /* @__PURE__ */ t(
+                    "input",
+                    {
+                      ref: H,
+                      type: "text",
+                      autoComplete: "off",
+                      value: k,
+                      onChange: J,
+                      onKeyDown: (o) => Q(o, r),
+                      onBlur: () => P(r),
+                      style: {
+                        border: "none",
+                        outline: "none",
+                        fontSize: 14,
+                        fontWeight: 500,
+                        fontFamily: u,
+                        color: "var(--grey-strong, #2E3236)",
+                        background: "#F3F7F7",
+                        borderRadius: 6,
+                        padding: "4px 8px",
+                        width: `${Math.max(k.length, 1) * 8.5 + 16}px`
+                      }
+                    }
+                  ) : /* @__PURE__ */ t(
+                    "span",
+                    {
+                      onClick: (o) => {
+                        o.stopPropagation(), N(r);
+                      },
+                      style: {
+                        display: "flex",
+                        padding: "4px 8px",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        gap: 10,
+                        borderRadius: 6,
+                        background: "#F3F7F7",
+                        fontSize: 14,
+                        fontWeight: 500,
+                        color: "var(--grey-strong, #2E3236)",
+                        whiteSpace: "nowrap",
+                        cursor: "text"
+                      },
+                      children: e
+                    }
+                  ),
+                  /* @__PURE__ */ t("span", { style: { fontSize: 14, color: "var(--grey-strong, #2E3236)" }, children: "," })
+                ]
               },
-              o
+              r
             )),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t(
               "input",
               {
-                ref: z,
+                ref: K,
                 type: "text",
-                placeholder: "Enter email addresses separated by commas",
-                value: y,
-                onChange: (t) => m(t.target.value),
-                onKeyDown: B,
+                autoComplete: "off",
+                placeholder: s.length ? "" : "Enter email addresses separated by commas",
+                value: v,
+                onChange: Z,
+                onKeyDown: X,
                 style: {
                   flex: 1,
-                  minWidth: 200,
+                  minWidth: 80,
                   border: "none",
                   outline: "none",
                   fontSize: 14,
                   fontWeight: 400,
-                  fontFamily: w,
+                  fontFamily: u,
                   color: "var(--grey-strong, #2E3236)",
                   background: "transparent",
                   height: 32
@@ -158,10 +241,10 @@ const W = "var(--font-sans)", Z = {
           ]
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ t(
         "button",
         {
-          onClick: I,
+          onClick: $,
           style: {
             display: "flex",
             height: 44,
@@ -172,7 +255,7 @@ const W = "var(--font-sans)", Z = {
             background: "var(--grey-strong, #2E3236)",
             fontSize: 14,
             fontWeight: 600,
-            fontFamily: w,
+            fontFamily: u,
             color: "var(--grey-white, #FFF)",
             border: "none",
             cursor: "pointer",
@@ -182,17 +265,21 @@ const W = "var(--font-sans)", Z = {
         }
       )
     ] }),
-    p.length > 0 && /* @__PURE__ */ r("div", { style: { marginTop: 24 }, children: [
-      /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
-        /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 400, fontFamily: "Varta, var(--font-sans)", fontStyle: "normal", lineHeight: "normal", color: "var(--Content-Tertiary, #676767)" }, children: "Invited Members" }),
-        /* @__PURE__ */ e(
+    I && /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", padding: 8, gap: 6, width: "100%", boxSizing: "border-box", background: "var(--color-error-bg, #F5F0E8)", borderRadius: 5, fontSize: 15, fontWeight: 400, lineHeight: "22px", color: "var(--color-text, #2E3236)", fontFamily: u, marginTop: 8 }, children: [
+      /* @__PURE__ */ t("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "var(--color-text, #2E3236)", style: { flexShrink: 0 }, children: /* @__PURE__ */ t("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }),
+      I
+    ] }),
+    i.length > 0 && /* @__PURE__ */ n("div", { style: { marginTop: 24 }, children: [
+      /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
+        /* @__PURE__ */ t("span", { style: { fontSize: 14, fontWeight: 400, fontFamily: "Varta, var(--font-sans)", fontStyle: "normal", lineHeight: "normal", color: "var(--Content-Tertiary, #676767)" }, children: "Invited Members" }),
+        i.every((e) => e.invited) ? /* @__PURE__ */ n(
           "button",
           {
-            onClick: H,
             style: {
               display: "flex",
               height: 28,
-              padding: 10,
+              minWidth: 80,
+              padding: "16px 12px",
               justifyContent: "center",
               alignItems: "center",
               gap: 10,
@@ -200,8 +287,34 @@ const W = "var(--font-sans)", Z = {
               border: "1px solid var(--Base-absent, #D9D9D9)",
               background: "var(--Base-White, #FFF)",
               fontSize: 14,
-              fontWeight: 600,
-              fontFamily: w,
+              fontWeight: 500,
+              fontFamily: u,
+              color: "var(--Content-Primary, #2E3236)",
+              cursor: "default"
+            },
+            children: [
+              /* @__PURE__ */ t(re, { size: 16 }),
+              "Sent"
+            ]
+          }
+        ) : /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: ee,
+            style: {
+              display: "flex",
+              height: 28,
+              minWidth: 80,
+              padding: "16px 12px",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 10,
+              borderRadius: 10,
+              border: "1px solid var(--Base-absent, #D9D9D9)",
+              background: "var(--Base-White, #FFF)",
+              fontSize: 14,
+              fontWeight: 500,
+              fontFamily: u,
               color: "var(--Content-Primary, #2E3236)",
               cursor: "pointer"
             },
@@ -209,7 +322,7 @@ const W = "var(--font-sans)", Z = {
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { style: { border: "1px solid var(--border, #ECEEF2)", borderRadius: 10, overflow: "visible" }, children: p.map((t, o) => /* @__PURE__ */ r(
+      /* @__PURE__ */ t("div", { style: { border: "1px solid var(--border, #ECEEF2)", borderRadius: 10, overflow: "visible" }, children: i.map((e, r) => /* @__PURE__ */ n(
         "div",
         {
           style: {
@@ -217,12 +330,12 @@ const W = "var(--font-sans)", Z = {
             alignItems: "center",
             justifyContent: "space-between",
             padding: "12px 16px",
-            borderBottom: o < p.length - 1 ? "1px solid var(--border, #ECEEF2)" : "none",
+            borderBottom: r < i.length - 1 ? "1px solid var(--border, #ECEEF2)" : "none",
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-              /* @__PURE__ */ e(
+            /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+              /* @__PURE__ */ t(
                 "div",
                 {
                   style: {
@@ -235,240 +348,250 @@ const W = "var(--font-sans)", Z = {
                     justifyContent: "center",
                     flexShrink: 0
                   },
-                  children: /* @__PURE__ */ e(N, { size: 24, color: "var(--color-text-secondary, #808183)" })
+                  children: /* @__PURE__ */ t(ne, { size: 24, color: "var(--color-text-secondary, #808183)" })
                 }
               ),
-              /* @__PURE__ */ r("div", { children: [
-                /* @__PURE__ */ e("p", { style: { fontSize: 14, fontWeight: 500, color: "var(--grey-strong, #2E3236)", margin: 0, lineHeight: "120%" }, children: t.email }),
-                /* @__PURE__ */ e("p", { style: { fontSize: 13, fontWeight: 400, color: "var(--color-text-secondary, #808183)", margin: "2px 0 0", lineHeight: "140%" }, children: t.role && t.project ? `${t.role} · ${t.project}` : "Role & Project is not defined" })
+              /* @__PURE__ */ n("div", { children: [
+                /* @__PURE__ */ t("p", { style: { fontSize: 14, fontWeight: 500, color: "var(--grey-strong, #2E3236)", margin: 0, lineHeight: "120%" }, children: e.email }),
+                /* @__PURE__ */ t("p", { style: { fontSize: 13, fontWeight: 400, color: "var(--color-text-secondary, #808183)", margin: "2px 0 0", lineHeight: "140%" }, children: e.role && e.project ? `${e.role} · ${e.project}` : "Role & Project is not defined" })
               ] })
             ] }),
-            /* @__PURE__ */ r("div", { style: { position: "relative" }, ref: x === o ? E : null, children: [
-              /* @__PURE__ */ r(
-                "button",
-                {
-                  onClick: () => F(x === o ? null : o),
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    padding: "8px 12px",
-                    borderRadius: 10,
-                    border: "1px solid var(--Border-Subtle, #E6E6E6)",
-                    background: "var(--Base-White, #FFF)",
-                    fontSize: 14,
-                    fontWeight: 500,
-                    fontFamily: w,
-                    color: "var(--Content-Primary, #2E3236)",
-                    cursor: "pointer",
-                    whiteSpace: "nowrap"
-                  },
-                  children: [
-                    "Set Permissions",
-                    /* @__PURE__ */ e(T, { size: 16, color: "var(--Grey-Strong, #808183)" })
-                  ]
-                }
-              ),
-              x === o && /* @__PURE__ */ r(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "100%",
-                    right: 0,
-                    marginTop: 4,
-                    display: "flex",
-                    width: 217,
-                    padding: "4px 12px",
-                    flexDirection: "column",
-                    alignItems: "flex-start",
-                    gap: 4,
-                    borderRadius: 10,
-                    border: "1px solid var(--Border-Subtle, #E6E6E6)",
-                    background: "var(--Dropdown-Dropdown-Area-Fill, #FFF)",
-                    boxShadow: "0 8px 24px rgba(0,0,0,0.10)",
-                    zIndex: 100,
-                    boxSizing: "border-box"
-                  },
-                  children: [
-                    /* @__PURE__ */ e("div", { style: { padding: "8px 0 4px", fontSize: 14, fontWeight: 600, color: "var(--Content-Primary, #2E3236)", width: "100%" }, children: "Set User Role" }),
-                    h.map((i) => /* @__PURE__ */ r(
-                      "div",
-                      {
-                        onClick: () => R(o, "role", i),
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 8,
-                          padding: "6px 0",
-                          cursor: "pointer",
-                          fontSize: 14,
-                          fontWeight: 400,
-                          color: "var(--Content-Primary, #2E3236)",
-                          width: "100%"
-                        },
-                        children: [
-                          /* @__PURE__ */ r("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { flexShrink: 0 }, children: [
-                            /* @__PURE__ */ e("circle", { cx: "10", cy: "10", r: "7.33", stroke: t.role === i ? "#00A66E" : "#D9D9D9", strokeWidth: "2" }),
-                            t.role === i && /* @__PURE__ */ e("ellipse", { cx: "10", cy: "10", rx: "4.17", ry: "4.17", fill: "#00A66E" })
-                          ] }),
-                          i
-                        ]
-                      },
-                      i
-                    )),
-                    /* @__PURE__ */ e("div", { style: { height: 1, background: "var(--Border-Subtle, #E6E6E6)", width: "100%" } }),
-                    /* @__PURE__ */ e("div", { style: { padding: "4px 0", fontSize: 14, fontWeight: 600, color: "var(--Content-Primary, #2E3236)", width: "100%" }, children: "Project Assignment" }),
-                    /* @__PURE__ */ r("div", { style: { width: "100%", position: "relative" }, children: [
-                      /* @__PURE__ */ r(
+            /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+              e.invited && V(e) && /* @__PURE__ */ t("span", { style: { fontFamily: "Varta, var(--font-sans)", fontSize: 14, fontStyle: "normal", fontWeight: 400, lineHeight: "normal", color: "var(--Content-Tertiary, #676767)", whiteSpace: "nowrap" }, children: "Invite sent" }),
+              /* @__PURE__ */ n("div", { style: { position: "relative" }, ref: W === r ? A : null, children: [
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    onClick: () => j(W === r ? null : r),
+                    style: {
+                      display: "flex",
+                      width: 160,
+                      height: 32,
+                      minWidth: 96,
+                      padding: "16px 12px 16px 16px",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      gap: 10,
+                      borderRadius: 10,
+                      border: "1px solid var(--Base-absent, #D9D9D9)",
+                      background: "var(--Base-White, #FFF)",
+                      fontSize: 13,
+                      fontWeight: 500,
+                      fontFamily: u,
+                      color: "var(--Content-Primary, #2E3236)",
+                      cursor: "pointer",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      boxSizing: "border-box"
+                    },
+                    children: [
+                      /* @__PURE__ */ t("span", { style: { overflow: "hidden", textOverflow: "ellipsis", flex: 1, textAlign: "left" }, children: V(e) ? `${e.role}, ${e.project}` : "Set Permissions" }),
+                      /* @__PURE__ */ t(G, { size: 16, color: "var(--Grey-Strong, #808183)", style: { flexShrink: 0 } })
+                    ]
+                  }
+                ),
+                W === r && /* @__PURE__ */ n(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: "100%",
+                      right: 0,
+                      marginTop: 4,
+                      display: "flex",
+                      width: 217,
+                      padding: "4px 12px",
+                      flexDirection: "column",
+                      alignItems: "flex-start",
+                      gap: 4,
+                      borderRadius: 10,
+                      border: "1px solid var(--Border-Subtle, #E6E6E6)",
+                      background: "var(--Dropdown-Dropdown-Area-Fill, #FFF)",
+                      boxShadow: "0 8px 24px rgba(0,0,0,0.10)",
+                      zIndex: 100,
+                      boxSizing: "border-box"
+                    },
+                    children: [
+                      /* @__PURE__ */ t("div", { style: { padding: "8px 0 4px", fontSize: 14, fontWeight: 600, color: "var(--Content-Primary, #2E3236)", width: "100%" }, children: "Set User Role" }),
+                      f.map((o) => /* @__PURE__ */ n(
                         "div",
                         {
-                          onClick: () => C(S === o ? null : o),
+                          onClick: () => U(r, "role", o),
                           style: {
                             display: "flex",
                             alignItems: "center",
-                            justifyContent: "space-between",
-                            width: "100%",
-                            padding: "8px 10px",
-                            borderRadius: 10,
-                            border: "1px solid var(--Border-Subtle, #E6E6E6)",
-                            background: "var(--Base-White, #FFF)",
+                            gap: 8,
+                            padding: "6px 0",
+                            cursor: "pointer",
                             fontSize: 14,
                             fontWeight: 400,
-                            fontFamily: w,
                             color: "var(--Content-Primary, #2E3236)",
-                            cursor: "pointer",
-                            boxSizing: "border-box"
+                            width: "100%"
                           },
                           children: [
-                            t.project,
-                            /* @__PURE__ */ e(T, { size: 16, color: "var(--Grey-Strong, #808183)" })
+                            /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { flexShrink: 0 }, children: [
+                              /* @__PURE__ */ t("circle", { cx: "10", cy: "10", r: "7.33", stroke: e.role === o ? "#00A66E" : "#D9D9D9", strokeWidth: "2" }),
+                              e.role === o && /* @__PURE__ */ t("ellipse", { cx: "10", cy: "10", rx: "4.17", ry: "4.17", fill: "#00A66E" })
+                            ] }),
+                            o
                           ]
-                        }
-                      ),
-                      S === o && /* @__PURE__ */ e(
+                        },
+                        o
+                      )),
+                      /* @__PURE__ */ t("div", { style: { height: 1, background: "var(--Border-Subtle, #E6E6E6)", width: "100%" } }),
+                      /* @__PURE__ */ t("div", { style: { padding: "4px 0", fontSize: 14, fontWeight: 600, color: "var(--Content-Primary, #2E3236)", width: "100%" }, children: "Project Assignment" }),
+                      /* @__PURE__ */ n("div", { style: { width: "100%", position: "relative" }, children: [
+                        /* @__PURE__ */ n(
+                          "div",
+                          {
+                            onClick: () => B(R === r ? null : r),
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "space-between",
+                              width: "100%",
+                              padding: "8px 10px",
+                              borderRadius: 10,
+                              border: "1px solid var(--Border-Subtle, #E6E6E6)",
+                              background: "var(--Base-White, #FFF)",
+                              fontSize: 14,
+                              fontWeight: 400,
+                              fontFamily: u,
+                              color: "var(--Content-Primary, #2E3236)",
+                              cursor: "pointer",
+                              boxSizing: "border-box"
+                            },
+                            children: [
+                              e.project,
+                              /* @__PURE__ */ t(G, { size: 16, color: "var(--Grey-Strong, #808183)" })
+                            ]
+                          }
+                        ),
+                        R === r && /* @__PURE__ */ t(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              top: "100%",
+                              left: 0,
+                              right: 0,
+                              marginTop: 4,
+                              borderRadius: 10,
+                              border: "1px solid var(--Border-Subtle, #E6E6E6)",
+                              background: "var(--Dropdown-Dropdown-Area-Fill, #FFF)",
+                              boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+                              zIndex: 101,
+                              padding: 4
+                            },
+                            children: l.map((o) => /* @__PURE__ */ t(
+                              "div",
+                              {
+                                onClick: () => {
+                                  U(r, "project", o), B(null);
+                                },
+                                style: {
+                                  display: "flex",
+                                  height: 26,
+                                  padding: "12px 16px 12px 8px",
+                                  alignItems: "center",
+                                  gap: 6,
+                                  alignSelf: "stretch",
+                                  borderRadius: 8,
+                                  background: e.project === o ? "var(--Neutral-50, #F2F2F0)" : "transparent",
+                                  fontSize: 14,
+                                  fontWeight: 400,
+                                  fontFamily: u,
+                                  color: "var(--Content-Primary, #2E3236)",
+                                  cursor: "pointer"
+                                },
+                                onMouseEnter: (d) => {
+                                  e.project !== o && (d.currentTarget.style.background = "var(--Neutral-50, #F2F2F0)");
+                                },
+                                onMouseLeave: (d) => {
+                                  e.project !== o && (d.currentTarget.style.background = "transparent");
+                                },
+                                children: o
+                              },
+                              o
+                            ))
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ t("div", { style: { height: 1, background: "var(--Border-Subtle, #E6E6E6)", width: "100%" } }),
+                      /* @__PURE__ */ n(
                         "div",
                         {
+                          onClick: () => Y(r),
                           style: {
-                            position: "absolute",
-                            top: "100%",
-                            left: 0,
-                            right: 0,
-                            marginTop: 4,
-                            borderRadius: 10,
-                            border: "1px solid var(--Border-Subtle, #E6E6E6)",
-                            background: "var(--Dropdown-Dropdown-Area-Fill, #FFF)",
-                            boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
-                            zIndex: 101,
-                            padding: 4
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            padding: "6px 0",
+                            cursor: "pointer",
+                            fontSize: 14,
+                            fontWeight: 500,
+                            color: "var(--Content-Primary, #2E3236)",
+                            width: "100%"
                           },
-                          children: n.map((i) => /* @__PURE__ */ e(
-                            "div",
-                            {
-                              onClick: () => {
-                                R(o, "project", i), C(null);
-                              },
-                              style: {
-                                display: "flex",
-                                height: 26,
-                                padding: "12px 16px 12px 8px",
-                                alignItems: "center",
-                                gap: 6,
-                                alignSelf: "stretch",
-                                borderRadius: 8,
-                                background: t.project === i ? "var(--Neutral-50, #F2F2F0)" : "transparent",
-                                fontSize: 14,
-                                fontWeight: 400,
-                                fontFamily: w,
-                                color: "var(--Content-Primary, #2E3236)",
-                                cursor: "pointer"
-                              },
-                              onMouseEnter: (a) => {
-                                t.project !== i && (a.currentTarget.style.background = "var(--Neutral-50, #F2F2F0)");
-                              },
-                              onMouseLeave: (a) => {
-                                t.project !== i && (a.currentTarget.style.background = "transparent");
-                              },
-                              children: i
-                            },
-                            i
-                          ))
+                          children: [
+                            /* @__PURE__ */ t(oe, { size: 16 }),
+                            "Remove"
+                          ]
                         }
                       )
-                    ] }),
-                    /* @__PURE__ */ e("div", { style: { height: 1, background: "var(--Border-Subtle, #E6E6E6)", width: "100%" } }),
-                    /* @__PURE__ */ r(
-                      "div",
-                      {
-                        onClick: () => A(o),
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 8,
-                          padding: "6px 0",
-                          cursor: "pointer",
-                          fontSize: 14,
-                          fontWeight: 500,
-                          color: "var(--Content-Primary, #2E3236)",
-                          width: "100%"
-                        },
-                        children: [
-                          /* @__PURE__ */ e(U, { size: 16 }),
-                          "Remove"
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
+                    ]
+                  }
+                )
+              ] })
             ] })
           ]
         },
-        t.email
+        e.email
       )) })
     ] })
   ] });
-}, d = "var(--font-sans)", oe = [
-  { id: "workspace", label: "Workspace Name", description: "Give your project a title.", icon: $ },
-  { id: "interaction", label: "Add Interaction", description: "Connect data to see patterns.", icon: G },
-  { id: "connect", label: "Connect Data", description: "Link your platform for auto-evaluation.", icon: O },
-  { id: "invite", label: "Invite Team", description: "Add members to collaborate.", icon: V },
-  { id: "concepts", label: "Learn Concepts", description: "Explore conditions and evidence.", icon: _ },
-  { id: "scope", label: "Define Scope", description: "Customize evaluation signals.", icon: q }
-], ne = {
-  fontFamily: d,
+}, p = "var(--font-sans)", be = [
+  { id: "workspace", label: "Workspace Name", description: "Give your project a title.", icon: ie },
+  { id: "interaction", label: "Add Interaction", description: "Connect data to see patterns.", icon: le },
+  { id: "connect", label: "Connect Data", description: "Link your platform for auto-evaluation.", icon: ae },
+  { id: "invite", label: "Invite Team", description: "Add members to collaborate.", icon: se },
+  { id: "concepts", label: "Learn Concepts", description: "Explore conditions and evidence.", icon: de },
+  { id: "scope", label: "Define Scope", description: "Customize evaluation signals.", icon: ce }
+], Se = {
+  fontFamily: p,
   background: "var(--grey-white)",
   minHeight: "100vh",
   boxSizing: "border-box"
-}, ie = {
+}, we = {
   padding: "24px 48px",
   borderBottom: "1px solid var(--border)",
   background: "var(--grey-white)"
-}, le = {
+}, Fe = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   marginBottom: 8
-}, ae = {
+}, ke = {
   fontSize: 24,
   fontWeight: 600,
   fontStyle: "normal",
-  fontFamily: d,
+  fontFamily: p,
   color: "var(--grey-strong)",
   margin: 0,
   lineHeight: "normal"
-}, se = {
+}, Ce = {
   fontSize: 14,
   fontWeight: 400,
   lineHeight: "140%",
   color: "var(--text-muted)",
   margin: "4px 0 0",
-  fontFamily: d
-}, de = {
+  fontFamily: p
+}, Ee = {
   display: "flex",
   alignItems: "center",
   gap: 12
-}, ce = {
+}, ze = {
   display: "flex",
   height: 36,
   padding: "0 16px",
@@ -479,12 +602,12 @@ const W = "var(--font-sans)", Z = {
   border: "1px solid var(--border-strong)",
   fontSize: 14,
   fontWeight: 500,
-  fontFamily: d,
+  fontFamily: p,
   color: "var(--text-base)",
   cursor: "pointer",
   transition: "var(--transition-fast)",
   outline: "none"
-}, pe = {
+}, We = {
   display: "flex",
   height: 36,
   padding: "0 20px",
@@ -494,112 +617,112 @@ const W = "var(--font-sans)", Z = {
   background: "var(--grey-strong)",
   fontSize: 14,
   fontWeight: 600,
-  fontFamily: d,
+  fontFamily: p,
   color: "var(--grey-white)",
   border: "none",
   cursor: "pointer",
   transition: "var(--transition-fast)",
   outline: "none"
-}, ge = {
+}, Ie = {
   width: "100%",
   height: 6,
   borderRadius: 3,
   background: "var(--border)",
   overflow: "hidden",
   marginTop: 12
-}, he = (s) => ({
-  width: `${s}%`,
+}, De = (a) => ({
+  width: `${a}%`,
   height: "100%",
   borderRadius: 3,
   background: "var(--color-green)",
   transition: "width 0.4s ease-out"
-}), ye = {
+}), Re = {
   display: "flex",
   flex: 1,
   minHeight: "calc(100vh - 140px)"
-}, ue = {
+}, Te = {
   width: 312,
   minWidth: 312,
   borderRight: "1px solid var(--border)",
   padding: "24px 24px",
   background: "var(--grey-white)",
   boxSizing: "border-box"
-}, fe = {
+}, je = {
   fontSize: 13,
   fontWeight: 500,
   color: "var(--text-muted)",
-  fontFamily: d,
+  fontFamily: p,
   margin: "0 0 12px"
-}, me = {
+}, Be = {
   display: "flex",
   width: 264,
   flexDirection: "column",
   alignItems: "flex-start",
   gap: 8,
   alignSelf: "stretch"
-}, ve = (s) => ({
+}, He = (a) => ({
   display: "flex",
   alignItems: "center",
   gap: 4,
   padding: "8px 4px",
   cursor: "pointer",
   transition: "var(--transition-fast)",
-  background: s ? "var(--hover-warm)" : "var(--grey-white)",
+  background: a ? "var(--hover-warm)" : "var(--grey-white)",
   borderRadius: 8,
   alignSelf: "stretch"
-}), be = {
+}), Ae = {
   width: 40,
   height: 40,
   flexShrink: 0,
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
-}, xe = {
+}, Pe = {
   fontSize: 14,
   fontWeight: 600,
   fontStyle: "normal",
   color: "var(--grey-strong)",
-  fontFamily: d,
+  fontFamily: p,
   margin: 0,
   lineHeight: "120%"
-}, Se = {
+}, Le = {
   fontSize: 12,
   fontWeight: 400,
   color: "var(--text-muted)",
-  fontFamily: d,
+  fontFamily: p,
   margin: "2px 0 0",
   lineHeight: 1.3
-}, we = {
+}, Me = {
   flex: 1,
   padding: "40px 48px",
   background: "var(--grey-white)",
   boxSizing: "border-box"
-}, Fe = {
+}, Ne = {
   fontSize: 20,
   fontWeight: 600,
   fontStyle: "normal",
-  fontFamily: d,
+  fontFamily: p,
   color: "var(--grey-strong)",
   margin: 0,
   lineHeight: "normal"
-}, ke = {
+}, $e = {
   fontSize: 13,
   fontWeight: 400,
   fontStyle: "normal",
   color: "var(--color-text-secondary)",
-  fontFamily: d,
+  fontFamily: p,
   margin: "4px 0 0",
   lineHeight: "140%"
-}, j = {
+}, _ = {
   fontSize: 16,
   fontWeight: 600,
   fontStyle: "normal",
   color: "var(--grey-strong)",
-  fontFamily: d,
+  fontFamily: p,
   lineHeight: "normal",
   margin: 0,
   display: "block"
-}, Ce = {
+}, Ue = {
   width: "100%",
   height: 44,
   padding: "0 14px",
@@ -609,16 +732,16 @@ const W = "var(--font-sans)", Z = {
   fontWeight: 400,
   fontStyle: "normal",
   lineHeight: "normal",
-  fontFamily: d,
+  fontFamily: p,
   color: "var(--color-text-secondary)",
   background: "var(--grey-white)",
   boxSizing: "border-box",
   outline: "none",
   transition: "var(--transition-fast)"
-}, Ee = {
+}, Ve = {
   position: "relative",
   marginTop: 8
-}, ze = {
+}, Oe = {
   width: "100%",
   minHeight: 160,
   padding: "12px 14px 28px 14px",
@@ -628,7 +751,7 @@ const W = "var(--font-sans)", Z = {
   fontWeight: 400,
   fontStyle: "normal",
   lineHeight: "normal",
-  fontFamily: d,
+  fontFamily: p,
   color: "var(--color-text-secondary)",
   background: "var(--grey-white)",
   boxSizing: "border-box",
@@ -636,19 +759,19 @@ const W = "var(--font-sans)", Z = {
   resize: "vertical",
   lineHeight: "140%",
   transition: "var(--transition-fast)"
-}, We = {
+}, Ge = {
   position: "absolute",
   bottom: 10,
   right: 14,
   fontSize: 12,
   fontWeight: 400,
   color: "var(--text-faint)",
-  fontFamily: d,
+  fontFamily: p,
   margin: 0,
   pointerEvents: "none"
 };
-function Ie() {
-  return /* @__PURE__ */ e(
+function _e() {
+  return /* @__PURE__ */ t(
     "div",
     {
       style: {
@@ -661,12 +784,12 @@ function Ie() {
         justifyContent: "center",
         flexShrink: 0
       },
-      children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ e("path", { d: "M2.5 7.5L5.5 10.5L11.5 4", stroke: "var(--grey-white)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      children: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ t("path", { d: "M2.5 7.5L5.5 10.5L11.5 4", stroke: "var(--grey-white)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
     }
   );
 }
-function Re() {
-  return /* @__PURE__ */ r(
+function Ke() {
+  return /* @__PURE__ */ n(
     "div",
     {
       style: {
@@ -683,184 +806,184 @@ function Re() {
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ e("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } }),
-        /* @__PURE__ */ e("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } }),
-        /* @__PURE__ */ e("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } })
+        /* @__PURE__ */ t("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } }),
+        /* @__PURE__ */ t("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } }),
+        /* @__PURE__ */ t("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } })
       ]
     }
   );
 }
-function De({ step: s, isCompleted: g, isActive: n, onClick: f }) {
-  const [v, h] = u(!1);
-  return /* @__PURE__ */ r(
+function qe({ step: a, isCompleted: h, isActive: l, onClick: m }) {
+  const [x, f] = c(!1);
+  return /* @__PURE__ */ n(
     "div",
     {
       style: {
-        ...ve(n),
-        ...v && !n ? { background: "var(--hover-warm-subtle)" } : {}
+        ...He(l),
+        ...x && !l ? { background: "var(--hover-warm-subtle)" } : {}
       },
-      onClick: f,
-      onMouseEnter: () => h(!0),
-      onMouseLeave: () => h(!1),
+      onClick: m,
+      onMouseEnter: () => f(!0),
+      onMouseLeave: () => f(!1),
       children: [
-        /* @__PURE__ */ e("div", { style: be, children: g ? /* @__PURE__ */ e(Ie, {}) : /* @__PURE__ */ e(Re, {}) }),
-        /* @__PURE__ */ r("div", { children: [
-          /* @__PURE__ */ e("p", { style: xe, children: s.label }),
-          /* @__PURE__ */ e("p", { style: Se, children: s.description })
+        /* @__PURE__ */ t("div", { style: Ae, children: h ? /* @__PURE__ */ t(_e, {}) : /* @__PURE__ */ t(Ke, {}) }),
+        /* @__PURE__ */ n("div", { children: [
+          /* @__PURE__ */ t("p", { style: Pe, children: a.label }),
+          /* @__PURE__ */ t("p", { style: Le, children: a.description })
         ] })
       ]
     }
   );
 }
-function Te({ workspaceName: s, setWorkspaceName: g, description: n, setDescription: f, maxDescLength: v }) {
-  const [h, c] = u(!1), [b, y] = u(!1);
-  return /* @__PURE__ */ r("div", { children: [
-    /* @__PURE__ */ e("h2", { style: Fe, children: "Name of your workspace" }),
-    /* @__PURE__ */ e("p", { style: ke, children: "Tell us about the project or company you're organizing here." }),
-    /* @__PURE__ */ r("div", { style: { marginTop: 28 }, children: [
-      /* @__PURE__ */ e("label", { style: j, children: "Workspace Name" }),
-      /* @__PURE__ */ e(
+function Ze({ workspaceName: a, setWorkspaceName: h, description: l, setDescription: m, maxDescLength: x }) {
+  const [f, g] = c(!1), [b, v] = c(!1);
+  return /* @__PURE__ */ n("div", { children: [
+    /* @__PURE__ */ t("h2", { style: Ne, children: "Name of your workspace" }),
+    /* @__PURE__ */ t("p", { style: $e, children: "Tell us about the project or company you're organizing here." }),
+    /* @__PURE__ */ n("div", { style: { marginTop: 28 }, children: [
+      /* @__PURE__ */ t("label", { style: _, children: "Workspace Name" }),
+      /* @__PURE__ */ t(
         "input",
         {
           type: "text",
           placeholder: "e.g. Acme Marketing",
-          value: s,
-          onChange: (m) => g(m.target.value),
-          onFocus: () => c(!0),
-          onBlur: () => c(!1),
+          value: a,
+          onChange: (y) => h(y.target.value),
+          onFocus: () => g(!0),
+          onBlur: () => g(!1),
           style: {
-            ...Ce,
+            ...Ue,
             marginTop: 8,
-            borderColor: h ? "var(--color-green)" : "var(--color-input-border)",
-            boxShadow: h ? "0 0 0 3px var(--color-green-ring)" : "none"
+            borderColor: f ? "var(--color-green)" : "var(--color-input-border)",
+            boxShadow: f ? "0 0 0 3px var(--color-green-ring)" : "none"
           }
         }
       )
     ] }),
-    /* @__PURE__ */ r("div", { style: { marginTop: 24 }, children: [
-      /* @__PURE__ */ e("label", { style: j, children: "Description" }),
-      /* @__PURE__ */ r("div", { style: Ee, children: [
-        /* @__PURE__ */ e(
+    /* @__PURE__ */ n("div", { style: { marginTop: 24 }, children: [
+      /* @__PURE__ */ t("label", { style: _, children: "Description" }),
+      /* @__PURE__ */ n("div", { style: Ve, children: [
+        /* @__PURE__ */ t(
           "textarea",
           {
             placeholder: "what's the goal of this workspace?",
-            value: n,
-            onChange: (m) => {
-              m.target.value.length <= v && f(m.target.value);
+            value: l,
+            onChange: (y) => {
+              y.target.value.length <= x && m(y.target.value);
             },
-            onFocus: () => y(!0),
-            onBlur: () => y(!1),
+            onFocus: () => v(!0),
+            onBlur: () => v(!1),
             style: {
-              ...ze,
+              ...Oe,
               borderColor: b ? "var(--color-green)" : "var(--color-input-border)",
               boxShadow: b ? "0 0 0 3px var(--color-green-ring)" : "none"
             }
           }
         ),
-        /* @__PURE__ */ r("span", { style: We, children: [
-          n.length,
+        /* @__PURE__ */ n("span", { style: Ge, children: [
+          l.length,
           "/",
-          v
+          x
         ] })
       ] })
     ] })
   ] });
 }
-const Pe = ({
-  steps: s = oe,
-  completedSteps: g = ["workspace", "invite"],
-  initialActiveStep: n = "workspace",
-  onSaveNext: f,
-  onRemindLater: v,
-  onStepChange: h
+const tt = ({
+  steps: a = be,
+  completedSteps: h = ["workspace", "invite"],
+  initialActiveStep: l = "workspace",
+  onSaveNext: m,
+  onRemindLater: x,
+  onStepChange: f
 }) => {
-  const [c, b] = u(n), [y, m] = u(""), [p, k] = u(""), x = 1e3, F = g.length, S = s.length, C = F / S * 100, z = (l) => {
-    b(l), h == null || h(l);
+  const [g, b] = c(l), [v, y] = c(""), [s, w] = c(""), z = 1e3, F = h.length, k = a.length, S = F / k * 100, I = (i) => {
+    b(i), f == null || f(i);
   };
-  return /* @__PURE__ */ r("div", { style: ne, children: [
-    /* @__PURE__ */ r("div", { style: ie, children: [
-      /* @__PURE__ */ r("div", { style: le, children: [
-        /* @__PURE__ */ r("div", { children: [
-          /* @__PURE__ */ e("h1", { style: ae, children: "Getting started with Chordia" }),
-          /* @__PURE__ */ e("p", { style: se, children: "Complete these steps to get the most out of Chordia." })
+  return /* @__PURE__ */ n("div", { style: Se, children: [
+    /* @__PURE__ */ n("div", { style: we, children: [
+      /* @__PURE__ */ n("div", { style: Fe, children: [
+        /* @__PURE__ */ n("div", { children: [
+          /* @__PURE__ */ t("h1", { style: ke, children: "Getting started with Chordia" }),
+          /* @__PURE__ */ t("p", { style: Ce, children: "Complete these steps to get the most out of Chordia." })
         ] }),
-        /* @__PURE__ */ r("div", { style: de, children: [
-          /* @__PURE__ */ e(
+        /* @__PURE__ */ n("div", { style: Ee, children: [
+          /* @__PURE__ */ t(
             "button",
             {
-              style: ce,
-              onClick: v,
-              onMouseEnter: (l) => {
-                l.currentTarget.style.background = "var(--hover-warm-subtle)";
+              style: ze,
+              onClick: x,
+              onMouseEnter: (i) => {
+                i.currentTarget.style.background = "var(--hover-warm-subtle)";
               },
-              onMouseLeave: (l) => {
-                l.currentTarget.style.background = "transparent";
+              onMouseLeave: (i) => {
+                i.currentTarget.style.background = "transparent";
               },
               children: "Remind me Later"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "button",
             {
-              style: pe,
+              style: We,
               onClick: () => {
-                f == null || f({ stepId: c, workspaceName: y, description: p });
+                m == null || m({ stepId: g, workspaceName: v, description: s });
               },
-              onMouseEnter: (l) => {
-                l.currentTarget.style.opacity = "0.85";
+              onMouseEnter: (i) => {
+                i.currentTarget.style.opacity = "0.85";
               },
-              onMouseLeave: (l) => {
-                l.currentTarget.style.opacity = "1";
+              onMouseLeave: (i) => {
+                i.currentTarget.style.opacity = "1";
               },
               children: "Save & Next"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { style: ge, children: /* @__PURE__ */ e("div", { style: he(C) }) })
+      /* @__PURE__ */ t("div", { style: Ie, children: /* @__PURE__ */ t("div", { style: De(S) }) })
     ] }),
-    /* @__PURE__ */ r("div", { style: ye, children: [
-      /* @__PURE__ */ r("div", { style: ue, children: [
-        /* @__PURE__ */ r("p", { style: fe, children: [
+    /* @__PURE__ */ n("div", { style: Re, children: [
+      /* @__PURE__ */ n("div", { style: Te, children: [
+        /* @__PURE__ */ n("p", { style: je, children: [
           F,
           " of ",
-          S,
+          k,
           " steps completed"
         ] }),
-        /* @__PURE__ */ e("div", { style: me, children: s.map((l) => /* @__PURE__ */ e(
-          De,
+        /* @__PURE__ */ t("div", { style: Be, children: a.map((i) => /* @__PURE__ */ t(
+          qe,
           {
-            step: l,
-            isCompleted: g.includes(l.id),
-            isActive: c === l.id,
-            onClick: () => z(l.id)
+            step: i,
+            isCompleted: h.includes(i.id),
+            isActive: g === i.id,
+            onClick: () => I(i.id)
           },
-          l.id
+          i.id
         )) })
       ] }),
-      /* @__PURE__ */ r("div", { style: we, children: [
-        c === "workspace" && /* @__PURE__ */ e(
-          Te,
+      /* @__PURE__ */ n("div", { style: Me, children: [
+        g === "workspace" && /* @__PURE__ */ t(
+          Ze,
           {
-            workspaceName: y,
-            setWorkspaceName: m,
-            description: p,
-            setDescription: k,
-            maxDescLength: x
+            workspaceName: v,
+            setWorkspaceName: y,
+            description: s,
+            setDescription: w,
+            maxDescLength: z
           }
         ),
-        c === "interaction" && /* @__PURE__ */ e(P, {}),
-        c === "connect" && /* @__PURE__ */ e(ee, {}),
-        c === "invite" && /* @__PURE__ */ e(re, {})
+        g === "interaction" && /* @__PURE__ */ t(te, {}),
+        g === "connect" && /* @__PURE__ */ t(me, {}),
+        g === "invite" && /* @__PURE__ */ t(xe, {})
       ] })
     ] })
   ] });
 };
 export {
-  re as AddTeammates,
-  ee as ConnectData,
-  Pe as GettingStarted,
-  Ue as UploadEvaluate,
-  P as UploadInteraction
+  xe as AddTeammates,
+  me as ConnectData,
+  tt as GettingStarted,
+  ot as UploadEvaluate,
+  te as UploadInteraction
 };
 //# sourceMappingURL=onboarding.es.js.map