chordia-ui 3.3.8 → 3.3.9

package/dist/components/onboarding.es.js

@@ -1,10 +1,988 @@
-import { U as e, a as o } from "../UploadInteraction.es.js";
-import { A as s, C as d, G as n } from "../GettingStarted.es.js";
+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: M,
+  color: "var(--grey-strong)",
+  margin: 0,
+  lineHeight: "normal"
+}, fe = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontStyle: "normal",
+  color: "var(--color-text-secondary)",
+  fontFamily: M,
+  margin: "4px 0 0",
+  lineHeight: "140%"
+}, ye = {
+  display: "grid",
+  gridTemplateColumns: "repeat(3, 1fr)",
+  gap: 16,
+  marginTop: 24
+}, ue = [
+  {
+    providerName: "Five9",
+    description: "Cloud contact center platform for voice and digital channels",
+    status: "connected",
+    railColor: "#5E88B0"
+  },
+  {
+    providerName: "Twilio Flex",
+    description: "Programmable contact center with custom workflows",
+    status: "available",
+    railColor: "#9B7AA8"
+  },
+  {
+    providerName: "Zoom Phone",
+    description: "Cloud phone system with recording capabilities",
+    status: "coming-soon",
+    railColor: "#6B7C93"
+  }
+], ve = ({ 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: l.providerName,
+      description: l.description,
+      status: l.status,
+      railColor: l.railColor,
+      logoUrl: l.logoUrl,
+      icon: l.icon,
+      onConfigure: () => h == null ? void 0 : h(l)
+    },
+    l.providerName
+  )) })
+] }), u = "var(--font-sans)", me = ["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: v = "Admin",
+  defaultProject: x,
+  roles: f = me,
+  onSendInvite: g,
+  onInvite: b
+}) => {
+  const [m, 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), A = L(null), H = L(null), q = x || l[0] || "", T = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
+  O(() => {
+    if (W === null && R === null)
+      return;
+    const e = (r) => {
+      H.current && !H.current.contains(r.target) && (j(null), B(null));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [W, R]), O(() => {
+    z !== null && A.current && A.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 = m.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: v, project: q, invited: !1 }));
+    d.length && D([...i, ...d]), w([]), y("");
+  }, X = (e) => {
+    e.key === "Enter" && (e.preventDefault(), $()), e.key === "Backspace" && !m && 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: {
+            display: "flex",
+            alignItems: "center",
+            flex: 1,
+            minHeight: 44,
+            padding: "6px 14px",
+            borderRadius: 10,
+            border: "1px solid var(--color-input-border, #D9D9D9)",
+            background: "var(--grey-white, #FFF)",
+            boxSizing: "border-box",
+            gap: 4,
+            flexWrap: "wrap"
+          },
+          children: [
+            s.map((e, r) => /* @__PURE__ */ n(
+              "span",
+              {
+                style: { display: "inline-flex", alignItems: "center", gap: 2 },
+                children: [
+                  z === r ? /* @__PURE__ */ t(
+                    "input",
+                    {
+                      ref: A,
+                      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: "," })
+                ]
+              },
+              r
+            )),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: K,
+                type: "text",
+                autoComplete: "off",
+                placeholder: s.length ? "" : "Enter email addresses separated by commas",
+                value: m,
+                onChange: Z,
+                onKeyDown: X,
+                style: {
+                  flex: 1,
+                  minWidth: 80,
+                  border: "none",
+                  outline: "none",
+                  fontSize: 14,
+                  fontWeight: 400,
+                  fontFamily: u,
+                  color: "var(--grey-strong, #2E3236)",
+                  background: "transparent",
+                  height: 32
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: $,
+          style: {
+            display: "flex",
+            height: 44,
+            padding: "0 24px",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: 10,
+            background: "var(--grey-strong, #2E3236)",
+            fontSize: 14,
+            fontWeight: 600,
+            fontFamily: u,
+            color: "var(--grey-white, #FFF)",
+            border: "none",
+            cursor: "pointer",
+            flexShrink: 0
+          },
+          children: "Add"
+        }
+      )
+    ] }),
+    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",
+          {
+            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: "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"
+            },
+            children: "Send Invite"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { style: { border: "1px solid var(--border, #ECEEF2)", borderRadius: 10, overflow: "visible" }, children: i.map((e, r) => /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "12px 16px",
+            borderBottom: r < i.length - 1 ? "1px solid var(--border, #ECEEF2)" : "none",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 9999,
+                    background: "var(--hover-warm, #F5F0E8)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ t(ne, { size: 24, color: "var(--color-text-secondary, #808183)" })
+                }
+              ),
+              /* @__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__ */ 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 ? H : 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: () => U(r, "role", o),
+                          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__ */ 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
+                          ]
+                        },
+                        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: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            padding: "6px 0",
+                            cursor: "pointer",
+                            fontSize: 14,
+                            fontWeight: 500,
+                            color: "var(--Content-Primary, #2E3236)",
+                            width: "100%"
+                          },
+                          children: [
+                            /* @__PURE__ */ t(oe, { size: 16 }),
+                            "Remove"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        e.email
+      )) })
+    ] })
+  ] });
+}, 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"
+}, we = {
+  padding: "24px 48px",
+  borderBottom: "1px solid var(--border)",
+  background: "var(--grey-white)"
+}, Fe = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 8
+}, ke = {
+  fontSize: 24,
+  fontWeight: 600,
+  fontStyle: "normal",
+  fontFamily: p,
+  color: "var(--grey-strong)",
+  margin: 0,
+  lineHeight: "normal"
+}, Ce = {
+  fontSize: 14,
+  fontWeight: 400,
+  lineHeight: "140%",
+  color: "var(--text-muted)",
+  margin: "4px 0 0",
+  fontFamily: p
+}, Ee = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12
+}, ze = {
+  display: "flex",
+  height: 36,
+  padding: "0 16px",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: 10,
+  background: "transparent",
+  border: "1px solid var(--border-strong)",
+  fontSize: 14,
+  fontWeight: 500,
+  fontFamily: p,
+  color: "var(--text-base)",
+  cursor: "pointer",
+  transition: "var(--transition-fast)",
+  outline: "none"
+}, We = {
+  display: "flex",
+  height: 36,
+  padding: "0 20px",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: 10,
+  background: "var(--grey-strong)",
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: p,
+  color: "var(--grey-white)",
+  border: "none",
+  cursor: "pointer",
+  transition: "var(--transition-fast)",
+  outline: "none"
+}, Ie = {
+  width: "100%",
+  height: 6,
+  borderRadius: 3,
+  background: "var(--border)",
+  overflow: "hidden",
+  marginTop: 12
+}, De = (a) => ({
+  width: `${a}%`,
+  height: "100%",
+  borderRadius: 3,
+  background: "var(--color-green)",
+  transition: "width 0.4s ease-out"
+}), Re = {
+  display: "flex",
+  flex: 1,
+  minHeight: "calc(100vh - 140px)"
+}, Te = {
+  width: 312,
+  minWidth: 312,
+  borderRight: "1px solid var(--border)",
+  padding: "24px 24px",
+  background: "var(--grey-white)",
+  boxSizing: "border-box"
+}, je = {
+  fontSize: 13,
+  fontWeight: 500,
+  color: "var(--text-muted)",
+  fontFamily: p,
+  margin: "0 0 12px"
+}, Be = {
+  display: "flex",
+  width: 264,
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: 8,
+  alignSelf: "stretch"
+}, Ae = (a) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "8px 4px",
+  cursor: "pointer",
+  transition: "var(--transition-fast)",
+  background: a ? "var(--hover-warm)" : "var(--grey-white)",
+  borderRadius: 8,
+  alignSelf: "stretch"
+}), He = {
+  width: 40,
+  height: 40,
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}, Pe = {
+  fontSize: 14,
+  fontWeight: 600,
+  fontStyle: "normal",
+  color: "var(--grey-strong)",
+  fontFamily: p,
+  margin: 0,
+  lineHeight: "120%"
+}, Le = {
+  fontSize: 12,
+  fontWeight: 400,
+  color: "var(--text-muted)",
+  fontFamily: p,
+  margin: "2px 0 0",
+  lineHeight: 1.3
+}, Me = {
+  flex: 1,
+  padding: "40px 48px",
+  background: "var(--grey-white)",
+  boxSizing: "border-box"
+}, Ne = {
+  fontSize: 20,
+  fontWeight: 600,
+  fontStyle: "normal",
+  fontFamily: p,
+  color: "var(--grey-strong)",
+  margin: 0,
+  lineHeight: "normal"
+}, $e = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontStyle: "normal",
+  color: "var(--color-text-secondary)",
+  fontFamily: p,
+  margin: "4px 0 0",
+  lineHeight: "140%"
+}, _ = {
+  fontSize: 16,
+  fontWeight: 600,
+  fontStyle: "normal",
+  color: "var(--grey-strong)",
+  fontFamily: p,
+  lineHeight: "normal",
+  margin: 0,
+  display: "block"
+}, Ue = {
+  width: "100%",
+  height: 44,
+  padding: "0 14px",
+  borderRadius: 6,
+  border: "1px solid var(--color-input-border)",
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: "normal",
+  lineHeight: "normal",
+  fontFamily: p,
+  color: "var(--color-text-secondary)",
+  background: "var(--grey-white)",
+  boxSizing: "border-box",
+  outline: "none",
+  transition: "var(--transition-fast)"
+}, Ve = {
+  position: "relative",
+  marginTop: 8
+}, Oe = {
+  width: "100%",
+  minHeight: 160,
+  padding: "12px 14px 28px 14px",
+  borderRadius: 6,
+  border: "1px solid var(--color-input-border)",
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: "normal",
+  lineHeight: "140%",
+  fontFamily: p,
+  color: "var(--color-text-secondary)",
+  background: "var(--grey-white)",
+  boxSizing: "border-box",
+  outline: "none",
+  resize: "vertical",
+  transition: "var(--transition-fast)"
+}, Ge = {
+  position: "absolute",
+  bottom: 10,
+  right: 14,
+  fontSize: 12,
+  fontWeight: 400,
+  color: "var(--text-faint)",
+  fontFamily: p,
+  margin: 0,
+  pointerEvents: "none"
+};
+function _e() {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        width: 24,
+        height: 24,
+        borderRadius: 6,
+        background: "var(--grey-strong)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      },
+      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 Ke() {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        width: 24,
+        height: 24,
+        borderRadius: "50%",
+        border: "2px solid var(--grey-muted)",
+        background: "transparent",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        gap: 2,
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__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 qe({ step: a, isCompleted: h, isActive: l, onClick: v }) {
+  const [x, f] = c(!1);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        ...Ae(l),
+        ...x && !l ? { background: "var(--hover-warm-subtle)" } : {}
+      },
+      onClick: v,
+      onMouseEnter: () => f(!0),
+      onMouseLeave: () => f(!1),
+      children: [
+        /* @__PURE__ */ t("div", { style: He, 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 Ze({ workspaceName: a, setWorkspaceName: h, description: l, setDescription: v, maxDescLength: x }) {
+  const [f, g] = c(!1), [b, m] = 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: a,
+          onChange: (y) => h(y.target.value),
+          onFocus: () => g(!0),
+          onBlur: () => g(!1),
+          style: {
+            ...Ue,
+            marginTop: 8,
+            borderColor: f ? "var(--color-green)" : "var(--color-input-border)",
+            boxShadow: f ? "0 0 0 3px var(--color-green-ring)" : "none"
+          }
+        }
+      )
+    ] }),
+    /* @__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: l,
+            onChange: (y) => {
+              y.target.value.length <= x && v(y.target.value);
+            },
+            onFocus: () => m(!0),
+            onBlur: () => m(!1),
+            style: {
+              ...Oe,
+              borderColor: b ? "var(--color-green)" : "var(--color-input-border)",
+              boxShadow: b ? "0 0 0 3px var(--color-green-ring)" : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ n("span", { style: Ge, children: [
+          l.length,
+          "/",
+          x
+        ] })
+      ] })
+    ] })
+  ] });
+}
+const tt = ({
+  steps: a = be,
+  completedSteps: h = ["workspace", "invite"],
+  initialActiveStep: l = "workspace",
+  onSaveNext: v,
+  onRemindLater: x,
+  onStepChange: f
+}) => {
+  const [g, b] = c(l), [m, 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__ */ 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__ */ n("div", { style: Ee, children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              style: ze,
+              onClick: x,
+              onMouseEnter: (i) => {
+                i.currentTarget.style.background = "var(--hover-warm-subtle)";
+              },
+              onMouseLeave: (i) => {
+                i.currentTarget.style.background = "transparent";
+              },
+              children: "Remind me Later"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              style: We,
+              onClick: () => {
+                v == null || v({ stepId: g, workspaceName: m, description: s });
+              },
+              onMouseEnter: (i) => {
+                i.currentTarget.style.opacity = "0.85";
+              },
+              onMouseLeave: (i) => {
+                i.currentTarget.style.opacity = "1";
+              },
+              children: "Save & Next"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { style: Ie, children: /* @__PURE__ */ t("div", { style: De(S) }) })
+    ] }),
+    /* @__PURE__ */ n("div", { style: Re, children: [
+      /* @__PURE__ */ n("div", { style: Te, children: [
+        /* @__PURE__ */ n("p", { style: je, children: [
+          F,
+          " of ",
+          k,
+          " steps completed"
+        ] }),
+        /* @__PURE__ */ t("div", { style: Be, children: a.map((i) => /* @__PURE__ */ t(
+          qe,
+          {
+            step: i,
+            isCompleted: h.includes(i.id),
+            isActive: g === i.id,
+            onClick: () => I(i.id)
+          },
+          i.id
+        )) })
+      ] }),
+      /* @__PURE__ */ n("div", { style: Me, children: [
+        g === "workspace" && /* @__PURE__ */ t(
+          Ze,
+          {
+            workspaceName: m,
+            setWorkspaceName: y,
+            description: s,
+            setDescription: w,
+            maxDescLength: z
+          }
+        ),
+        g === "interaction" && /* @__PURE__ */ t(te, {}),
+        g === "connect" && /* @__PURE__ */ t(ve, {}),
+        g === "invite" && /* @__PURE__ */ t(xe, {})
+      ] })
+    ] })
+  ] });
+};
 export {
-  s as AddTeammates,
-  d as ConnectData,
-  n as GettingStarted,
-  e as UploadEvaluate,
-  o as UploadInteraction
+  xe as AddTeammates,
+  ve as ConnectData,
+  tt as GettingStarted,
+  ot as UploadEvaluate,
+  te as UploadInteraction
 };
 //# sourceMappingURL=onboarding.es.js.map