chordia-ui 3.3.8 → 3.3.9

package/dist/GettingStarted.es.js

@@ -1,983 +0,0 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useState as c, useRef as L, useEffect as G } from "react";
-import { Check as te, SquareUser as ne, ChevronDown as O, Trash as re, Briefcase as oe, MessageSquare as ie, Database as le, Users as ae, BookOpen as se, SlidersHorizontal as de } from "lucide-react";
-import { a as ce } from "./UploadInteraction.es.js";
-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__ */ r("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);
-  G(() => {
-    if (W === null && R === null) return;
-    const e = (n) => {
-      H.current && !H.current.contains(n.target) && (j(null), B(null));
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [W, R]), G(() => {
-    z !== null && A.current && A.current.focus();
-  }, [z]);
-  const Z = (e) => {
-    const n = e.target.value;
-    if (C(""), n.endsWith(",")) {
-      const o = n.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(n);
-  }, N = (e) => {
-    F(e), S(s[e]);
-  }, P = (e) => {
-    const n = k.trim();
-    if (C(""), !n)
-      w(s.filter((o, d) => d !== e));
-    else if (T(n))
-      n !== s[e] && w(s.map((o, d) => d === e ? n : o));
-    else {
-      C(`"${n}" is not a valid email address.`);
-      return;
-    }
-    F(null), S("");
-  }, J = (e) => {
-    const n = e.target.value;
-    n.endsWith(",") ? (S(n.slice(0, -1)), P(z)) : S(n);
-  }, Q = (e, n) => {
-    e.key === "Enter" && (e.preventDefault(), P(n)), e.key === "Escape" && (F(null), S("")), e.key === "Backspace" && !k && (w(s.filter((o, d) => d !== n)), F(null), S(""));
-  }, $ = () => {
-    C("");
-    const e = m.trim();
-    if (e && !T(e)) {
-      C(`"${e}" is not a valid email address.`);
-      return;
-    }
-    const n = [...s];
-    if (e && T(e) && n.push(e), !n.length) return;
-    const o = new Set(i.map((E) => E.email)), d = [...new Set(n)].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((n, o) => o !== e)), j(null);
-  }, U = (e, n, o) => {
-    D(i.map((d, E) => E === e ? { ...d, [n]: 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__ */ r("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__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 12, marginTop: 24 }, children: [
-      /* @__PURE__ */ r(
-        "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, n) => /* @__PURE__ */ r(
-              "span",
-              {
-                style: { display: "inline-flex", alignItems: "center", gap: 2 },
-                children: [
-                  z === n ? /* @__PURE__ */ t(
-                    "input",
-                    {
-                      ref: A,
-                      type: "text",
-                      autoComplete: "off",
-                      value: k,
-                      onChange: J,
-                      onKeyDown: (o) => Q(o, n),
-                      onBlur: () => P(n),
-                      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(n);
-                      },
-                      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: "," })
-                ]
-              },
-              n
-            )),
-            /* @__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__ */ r("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__ */ r("div", { style: { marginTop: 24 }, children: [
-      /* @__PURE__ */ r("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__ */ r(
-          "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(te, { 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, n) => /* @__PURE__ */ r(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "12px 16px",
-            borderBottom: n < i.length - 1 ? "1px solid var(--border, #ECEEF2)" : "none",
-            position: "relative"
-          },
-          children: [
-            /* @__PURE__ */ r("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__ */ r("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: { 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__ */ r("div", { style: { position: "relative" }, ref: W === n ? H : null, children: [
-                /* @__PURE__ */ r(
-                  "button",
-                  {
-                    onClick: () => j(W === n ? null : n),
-                    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(O, { size: 16, color: "var(--Grey-Strong, #808183)", style: { flexShrink: 0 } })
-                    ]
-                  }
-                ),
-                W === n && /* @__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__ */ 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__ */ r(
-                        "div",
-                        {
-                          onClick: () => U(n, "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__ */ 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__ */ 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__ */ r("div", { style: { width: "100%", position: "relative" }, children: [
-                        /* @__PURE__ */ r(
-                          "div",
-                          {
-                            onClick: () => B(R === n ? null : n),
-                            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(O, { size: 16, color: "var(--Grey-Strong, #808183)" })
-                            ]
-                          }
-                        ),
-                        R === n && /* @__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(n, "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__ */ r(
-                        "div",
-                        {
-                          onClick: () => Y(n),
-                          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(re, { size: 16 }),
-                            "Remove"
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          ]
-        },
-        e.email
-      )) })
-    ] })
-  ] });
-}, p = "var(--font-sans)", be = [
-  { id: "workspace", label: "Workspace Name", description: "Give your project a title.", icon: oe },
-  { id: "interaction", label: "Add Interaction", description: "Connect data to see patterns.", icon: ie },
-  { id: "connect", label: "Connect Data", description: "Link your platform for auto-evaluation.", icon: le },
-  { id: "invite", label: "Invite Team", description: "Add members to collaborate.", icon: ae },
-  { id: "concepts", label: "Learn Concepts", description: "Explore conditions and evidence.", icon: se },
-  { id: "scope", label: "Define Scope", description: "Customize evaluation signals.", icon: de }
-], 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
-}, Ge = {
-  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)"
-}, Oe = {
-  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__ */ r(
-    "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__ */ r(
-    "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__ */ r("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__ */ r("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__ */ r("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__ */ r("div", { style: { marginTop: 24 }, children: [
-      /* @__PURE__ */ t("label", { style: _, children: "Description" }),
-      /* @__PURE__ */ r("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: {
-              ...Ge,
-              borderColor: b ? "var(--color-green)" : "var(--color-input-border)",
-              boxShadow: b ? "0 0 0 3px var(--color-green-ring)" : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ r("span", { style: Oe, 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__ */ r("div", { style: Se, children: [
-    /* @__PURE__ */ r("div", { style: we, children: [
-      /* @__PURE__ */ r("div", { style: Fe, children: [
-        /* @__PURE__ */ r("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: 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__ */ r("div", { style: Re, children: [
-      /* @__PURE__ */ r("div", { style: Te, children: [
-        /* @__PURE__ */ r("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__ */ r("div", { style: Me, children: [
-        g === "workspace" && /* @__PURE__ */ t(
-          Ze,
-          {
-            workspaceName: m,
-            setWorkspaceName: y,
-            description: s,
-            setDescription: w,
-            maxDescLength: z
-          }
-        ),
-        g === "interaction" && /* @__PURE__ */ t(ce, {}),
-        g === "connect" && /* @__PURE__ */ t(ve, {}),
-        g === "invite" && /* @__PURE__ */ t(xe, {})
-      ] })
-    ] })
-  ] });
-};
-export {
-  xe as A,
-  ve as C,
-  tt as G
-};
-//# sourceMappingURL=GettingStarted.es.js.map