@pcoi/components 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1048 @@
+import { jsxs as n, jsx as e, Fragment as E } from "react/jsx-runtime";
+import _, { useState as $, useEffect as y, useRef as w, useCallback as R } from "react";
+import { createPortal as F } from "react-dom";
+const I = _.forwardRef(
+  ({ href: i = "#", className: a = "", ...c }, l) => /* @__PURE__ */ n("a", { ref: l, href: i, className: `pcoi-logo ${a}`, ...c, children: [
+    /* @__PURE__ */ e("span", { className: "pcoi-logo__mark", children: "P" }),
+    "COI"
+  ] })
+);
+I.displayName = "LogoMark";
+const k = _.forwardRef(
+  ({ variant: i = "primary", size: a = "default", children: c, className: l = "", ...o }, s) => {
+    const r = [
+      "pcoi-btn",
+      `pcoi-btn--${i}`,
+      a !== "default" ? `pcoi-btn--${a}` : "",
+      l
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e("button", { ref: s, className: r, ...o, children: c });
+  }
+);
+k.displayName = "Button";
+const g = _.forwardRef(
+  ({
+    label: i,
+    name: a,
+    multiline: c = !1,
+    rows: l = 3,
+    error: o,
+    required: s = !1,
+    disabled: r = !1,
+    className: t = "",
+    ...p
+  }, d) => {
+    const h = `pcoi-field-${a}`, m = o ? `${h}-error` : void 0, u = [
+      "pcoi-field",
+      o ? "pcoi-field--error" : "",
+      r ? "pcoi-field--disabled" : "",
+      t
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { className: u, children: [
+      /* @__PURE__ */ n("label", { htmlFor: h, className: "pcoi-field__label", children: [
+        i,
+        s && /* @__PURE__ */ e("span", { className: "pcoi-field__required", "aria-hidden": "true", children: "*" })
+      ] }),
+      c ? /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: d,
+          id: h,
+          name: a,
+          rows: l,
+          required: s,
+          disabled: r,
+          "aria-invalid": !!o,
+          "aria-describedby": m,
+          className: "pcoi-field__textarea",
+          ...p
+        }
+      ) : /* @__PURE__ */ e(
+        "input",
+        {
+          ref: d,
+          id: h,
+          name: a,
+          required: s,
+          disabled: r,
+          "aria-invalid": !!o,
+          "aria-describedby": m,
+          className: "pcoi-field__input",
+          ...p
+        }
+      ),
+      o && /* @__PURE__ */ e("span", { id: m, className: "pcoi-field__error", role: "alert", children: o })
+    ] });
+  }
+);
+g.displayName = "FormField";
+const Y = _.forwardRef(
+  ({ variant: i = "problem", title: a, description: c, icon: l, number: o, headingLevel: s = "h3", className: r = "", ...t }, p) => {
+    const d = s, h = [
+      "pcoi-card",
+      `pcoi-card--${i}`,
+      r
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { ref: p, className: h, ...t, children: [
+      i === "problem" && l && /* @__PURE__ */ e("div", { className: "pcoi-card__icon", children: l }),
+      i === "principle" && o && /* @__PURE__ */ e("div", { className: "pcoi-card__number", children: o }),
+      /* @__PURE__ */ e(d, { className: "pcoi-card__title", children: a }),
+      /* @__PURE__ */ e("p", { className: "pcoi-card__description", children: c })
+    ] });
+  }
+);
+Y.displayName = "Card";
+const K = _.forwardRef(
+  ({
+    links: i = [
+      { label: "Problem", href: "#problem" },
+      { label: "How It Works", href: "#how-it-works" },
+      { label: "Difference", href: "#difference" },
+      { label: "Who It's For", href: "#who" }
+    ],
+    ctaLabel: a = "Start a Conversation",
+    ctaHref: c = "#contact",
+    onCtaClick: l,
+    className: o = "",
+    ...s
+  }, r) => {
+    const [t, p] = $(!1), [d, h] = $(!1);
+    return y(() => {
+      const m = () => p(window.scrollY > 40);
+      return window.addEventListener("scroll", m, { passive: !0 }), m(), () => window.removeEventListener("scroll", m);
+    }, []), y(() => {
+      if (!d) return;
+      const m = (u) => {
+        u.key === "Escape" && h(!1);
+      };
+      return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
+    }, [d]), /* @__PURE__ */ n(
+      "nav",
+      {
+        ref: r,
+        className: `pcoi-nav ${t ? "pcoi-nav--scrolled" : ""} ${d ? "pcoi-nav--menu-open" : ""} ${o}`,
+        "aria-label": "Main",
+        ...s,
+        children: [
+          /* @__PURE__ */ n("div", { className: "pcoi-nav__inner", children: [
+            /* @__PURE__ */ e(I, {}),
+            /* @__PURE__ */ n("div", { className: "pcoi-nav__links", children: [
+              i.map((m) => /* @__PURE__ */ e("a", { href: m.href, "data-track-id": m.trackingId, children: m.label }, m.href)),
+              /* @__PURE__ */ e("a", { href: c, children: /* @__PURE__ */ e(k, { variant: "nav-cta", onClick: l, children: a }) })
+            ] }),
+            /* @__PURE__ */ n(
+              "button",
+              {
+                className: `pcoi-nav__hamburger ${d ? "pcoi-nav__hamburger--active" : ""}`,
+                onClick: () => h(!d),
+                "aria-label": "Toggle menu",
+                "aria-expanded": d,
+                "aria-controls": "pcoi-mobile-menu",
+                children: [
+                  /* @__PURE__ */ e("span", {}),
+                  /* @__PURE__ */ e("span", {}),
+                  /* @__PURE__ */ e("span", {})
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("div", { className: "pcoi-nav__mobile-menu", id: "pcoi-mobile-menu", children: [
+            i.map((m) => /* @__PURE__ */ e("a", { href: m.href, "data-track-id": m.trackingId, onClick: () => h(!1), children: m.label }, m.href)),
+            /* @__PURE__ */ e("a", { href: c, children: /* @__PURE__ */ e(k, { variant: "nav-cta", onClick: () => {
+              l == null || l(), h(!1);
+            }, children: a }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "Nav";
+const z = _.forwardRef(
+  ({ label: i, title: a, titleEmphasis: c, description: l, headingLevel: o = "h2", className: s = "", ...r }, t) => {
+    const p = o;
+    return /* @__PURE__ */ n("div", { ref: t, className: `pcoi-section-header ${s}`, ...r, children: [
+      /* @__PURE__ */ e("span", { className: "pcoi-section-header__label", children: i }),
+      /* @__PURE__ */ e(p, { className: "pcoi-section-header__title", children: c ? /* @__PURE__ */ n(E, { children: [
+        a.replace(c, ""),
+        /* @__PURE__ */ e("em", { children: c })
+      ] }) : a }),
+      l && /* @__PURE__ */ e("p", { className: "pcoi-section-header__desc", children: l })
+    ] });
+  }
+);
+z.displayName = "SectionHeader";
+const V = _.forwardRef(
+  ({ number: i, title: a, description: c, isLast: l = !1, headingLevel: o = "h3", className: s = "", ...r }, t) => {
+    const p = o;
+    return /* @__PURE__ */ n("div", { ref: t, className: `pcoi-how-step ${l ? "pcoi-how-step--last" : ""} ${s}`, ...r, children: [
+      /* @__PURE__ */ e("div", { className: "pcoi-how-step__number", children: i }),
+      /* @__PURE__ */ n("div", { className: "pcoi-how-step__content", children: [
+        /* @__PURE__ */ e(p, { className: "pcoi-how-step__title", children: a }),
+        /* @__PURE__ */ e("p", { className: "pcoi-how-step__desc", children: c })
+      ] })
+    ] });
+  }
+);
+V.displayName = "HowStep";
+const G = _.forwardRef(
+  ({ competitorName: i = "Typical SaaS AI", pcoiName: a = "PCOI", rows: c, className: l = "", ...o }, s) => /* @__PURE__ */ e("div", { ref: s, className: `pcoi-comparison ${l}`, ...o, children: /* @__PURE__ */ n("table", { className: "pcoi-comparison__table", children: [
+    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ n("tr", { className: "pcoi-comparison__header", children: [
+      /* @__PURE__ */ e("th", { className: "pcoi-comparison__col", scope: "col", children: /* @__PURE__ */ e("span", { className: "pcoi-sr-only", children: "Feature" }) }),
+      /* @__PURE__ */ e("th", { className: "pcoi-comparison__col", scope: "col", children: i }),
+      /* @__PURE__ */ e("th", { className: "pcoi-comparison__col pcoi-comparison__col--highlight", scope: "col", children: a })
+    ] }) }),
+    /* @__PURE__ */ e("tbody", { children: c.map((r, t) => /* @__PURE__ */ n("tr", { className: "pcoi-comparison__row", children: [
+      /* @__PURE__ */ e("th", { className: "pcoi-comparison__col pcoi-comparison__col--label", scope: "row", children: r.label }),
+      /* @__PURE__ */ e("td", { className: "pcoi-comparison__col", children: r.competitor }),
+      /* @__PURE__ */ e("td", { className: "pcoi-comparison__col pcoi-comparison__col--highlight", children: r.pcoi })
+    ] }, t)) })
+  ] }) })
+);
+G.displayName = "ComparisonTable";
+const J = _.forwardRef(
+  ({ onSubmit: i, className: a = "", ...c }, l) => {
+    const [o, s] = $(!1), r = (t) => {
+      t.preventDefault();
+      const p = t.currentTarget, d = new FormData(p), h = Object.fromEntries(d.entries());
+      i == null || i(h), s(!0), p.reset(), setTimeout(() => s(!1), 3e3);
+    };
+    return /* @__PURE__ */ n("form", { ref: l, className: `pcoi-form ${a}`, onSubmit: r, "aria-label": "Contact form", ...c, children: [
+      /* @__PURE__ */ n("div", { className: "pcoi-form__row", children: [
+        /* @__PURE__ */ e(g, { label: "Name", name: "name", placeholder: "Your name", required: !0 }),
+        /* @__PURE__ */ e(g, { label: "Company", name: "company", placeholder: "Company name", required: !0 })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "pcoi-form__row", children: [
+        /* @__PURE__ */ e(g, { label: "Email", name: "email", type: "email", placeholder: "you@company.com", required: !0 }),
+        /* @__PURE__ */ e(g, { label: "Your Role", name: "role", placeholder: "CEO, COO, VP Ops, etc." })
+      ] }),
+      /* @__PURE__ */ e(
+        g,
+        {
+          label: "What problem are you trying to solve?",
+          name: "context",
+          multiline: !0,
+          rows: 3,
+          placeholder: "Tell us about the knowledge challenges in your organization...",
+          className: "pcoi-form__full"
+        }
+      ),
+      /* @__PURE__ */ e(k, { type: "submit", variant: "primary", size: "large", disabled: o, children: o ? "Message Received" : "Start the Conversation" }),
+      /* @__PURE__ */ e("p", { className: "pcoi-form__note", children: "No sales automation. A real person reads this and responds personally." })
+    ] });
+  }
+);
+J.displayName = "ContactForm";
+const Q = _.forwardRef(
+  ({ quote: i, attribution: a, attributionTitle: c, sourceUrl: l, sourceLabel: o, className: s = "", ...r }, t) => /* @__PURE__ */ n("div", { ref: t, className: `pcoi-callout ${s}`, ...r, children: [
+    /* @__PURE__ */ e("div", { className: "pcoi-callout__line" }),
+    /* @__PURE__ */ e("p", { className: "pcoi-callout__quote", children: i }),
+    (a || l) && /* @__PURE__ */ n("p", { className: "pcoi-callout__attribution", children: [
+      c && /* @__PURE__ */ n("span", { children: [
+        c,
+        "  ~  "
+      ] }),
+      a,
+      l && /* @__PURE__ */ n(E, { children: [
+        "  |  ",
+        /* @__PURE__ */ e("a", { href: l, target: "_blank", rel: "noopener noreferrer", children: o || "Source" })
+      ] })
+    ] })
+  ] })
+);
+Q.displayName = "Callout";
+const X = _.forwardRef(
+  ({ title: i = "You'll know this is for you if:", signals: a, headingLevel: c = "h3", className: l = "", ...o }, s) => {
+    const r = c;
+    return /* @__PURE__ */ n("div", { ref: s, className: `pcoi-signals ${l}`, ...o, children: [
+      /* @__PURE__ */ e(r, { className: "pcoi-signals__title", children: i }),
+      /* @__PURE__ */ e("ul", { className: "pcoi-signals__list", children: a.map((t, p) => /* @__PURE__ */ e("li", { className: "pcoi-signals__item", children: t }, p)) })
+    ] });
+  }
+);
+X.displayName = "SignalsPanel";
+const Z = _.forwardRef(
+  ({
+    links: i = [
+      { label: "Problem", href: "#problem" },
+      { label: "How It Works", href: "#how-it-works" },
+      { label: "Difference", href: "#difference" },
+      { label: "Principles", href: "#principles" },
+      { label: "Who It's For", href: "#who" },
+      { label: "Contact", href: "#contact" }
+    ],
+    tagline: a = `Portable, Company-Owned
+Operational Intelligence`,
+    copyright: c = `© ${(/* @__PURE__ */ new Date()).getFullYear()} PCOI. Operational intelligence you own.`,
+    className: l = "",
+    ...o
+  }, s) => /* @__PURE__ */ n("footer", { ref: s, className: `pcoi-footer ${l}`, ...o, children: [
+    /* @__PURE__ */ n("div", { className: "pcoi-footer__inner", children: [
+      /* @__PURE__ */ n("div", { className: "pcoi-footer__brand", children: [
+        /* @__PURE__ */ e(I, { className: "pcoi-footer__logo" }),
+        /* @__PURE__ */ e("p", { className: "pcoi-footer__tagline", children: a })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "pcoi-footer__links", children: i.map((r) => /* @__PURE__ */ e("a", { href: r.href, "data-track-id": r.trackingId, children: r.label }, r.href)) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "pcoi-footer__bottom", children: /* @__PURE__ */ e("p", { children: c }) })
+  ] })
+);
+Z.displayName = "Footer";
+const T = ({
+  size: i = 24,
+  title: a,
+  ...c
+}) => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    role: a ? "img" : "presentation",
+    "aria-hidden": !a,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...c,
+    children: [
+      a && /* @__PURE__ */ e("title", { children: a }),
+      /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" })
+    ]
+  }
+);
+T.displayName = "ChevronDownIcon";
+const U = _.forwardRef(
+  ({
+    label: i,
+    name: a,
+    options: c,
+    placeholder: l,
+    error: o,
+    required: s = !1,
+    disabled: r = !1,
+    className: t = "",
+    ...p
+  }, d) => {
+    const h = `pcoi-field-${a}`, m = o ? `${h}-error` : void 0, u = [
+      "pcoi-select",
+      o ? "pcoi-select--error" : "",
+      r ? "pcoi-select--disabled" : "",
+      t
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { className: u, children: [
+      /* @__PURE__ */ n("label", { htmlFor: h, className: "pcoi-select__label", children: [
+        i,
+        s && /* @__PURE__ */ e("span", { className: "pcoi-select__required", "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "pcoi-select__wrapper", children: [
+        /* @__PURE__ */ n(
+          "select",
+          {
+            ref: d,
+            id: h,
+            name: a,
+            required: s,
+            disabled: r,
+            "aria-invalid": !!o,
+            "aria-describedby": m,
+            className: "pcoi-select__native",
+            defaultValue: l ? "" : void 0,
+            ...p,
+            children: [
+              l && /* @__PURE__ */ e("option", { value: "", disabled: !0, hidden: !0, children: l }),
+              c.map((f) => /* @__PURE__ */ e("option", { value: f.value, disabled: f.disabled, children: f.label }, f.value))
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "pcoi-select__chevron", "aria-hidden": "true", children: /* @__PURE__ */ e(T, { size: 16 }) })
+      ] }),
+      o && /* @__PURE__ */ e("span", { id: m, className: "pcoi-select__error", role: "alert", children: o })
+    ] });
+  }
+);
+U.displayName = "Select";
+const ee = _.forwardRef(
+  ({
+    label: i,
+    name: a,
+    error: c,
+    disabled: l = !1,
+    className: o = "",
+    ...s
+  }, r) => {
+    const t = `pcoi-field-${a}`, p = c ? `${t}-error` : void 0, d = [
+      "pcoi-checkbox",
+      c ? "pcoi-checkbox--error" : "",
+      l ? "pcoi-checkbox--disabled" : "",
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { className: d, children: [
+      /* @__PURE__ */ n("label", { htmlFor: t, className: "pcoi-checkbox__control", children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: r,
+            type: "checkbox",
+            id: t,
+            name: a,
+            disabled: l,
+            "aria-invalid": !!c,
+            "aria-describedby": p,
+            className: "pcoi-checkbox__input",
+            ...s
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "pcoi-checkbox__box", "aria-hidden": "true" }),
+        /* @__PURE__ */ e("span", { className: "pcoi-checkbox__label", children: i })
+      ] }),
+      c && /* @__PURE__ */ e("span", { id: p, className: "pcoi-checkbox__error", role: "alert", children: c })
+    ] });
+  }
+);
+ee.displayName = "Checkbox";
+const ae = _.forwardRef(
+  ({
+    label: i,
+    name: a,
+    error: c,
+    disabled: l = !1,
+    className: o = "",
+    ...s
+  }, r) => {
+    const t = `pcoi-field-${a}`, p = c ? `${t}-error` : void 0, d = [
+      "pcoi-toggle",
+      c ? "pcoi-toggle--error" : "",
+      l ? "pcoi-toggle--disabled" : "",
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { className: d, children: [
+      /* @__PURE__ */ n("label", { htmlFor: t, className: "pcoi-toggle__control", children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: r,
+            type: "checkbox",
+            id: t,
+            name: a,
+            disabled: l,
+            "aria-invalid": !!c,
+            "aria-describedby": p,
+            className: "pcoi-toggle__input",
+            role: "switch",
+            ...s
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "pcoi-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ e("span", { className: "pcoi-toggle__thumb" }) }),
+        /* @__PURE__ */ e("span", { className: "pcoi-toggle__label", children: i })
+      ] }),
+      c && /* @__PURE__ */ e("span", { id: p, className: "pcoi-toggle__error", role: "alert", children: c })
+    ] });
+  }
+);
+ae.displayName = "Toggle";
+const ie = _.forwardRef(
+  ({
+    label: i,
+    name: a,
+    options: c,
+    defaultValue: l,
+    error: o,
+    required: s = !1,
+    disabled: r = !1,
+    onChange: t,
+    className: p = "",
+    ...d
+  }, h) => {
+    const m = o ? `pcoi-field-${a}-error` : void 0, u = [
+      "pcoi-radio-group",
+      o ? "pcoi-radio-group--error" : "",
+      r ? "pcoi-radio-group--disabled" : "",
+      p
+    ].filter(Boolean).join(" "), f = (N) => {
+      t == null || t(N.target.value);
+    };
+    return /* @__PURE__ */ n(
+      "fieldset",
+      {
+        ref: h,
+        className: u,
+        "aria-invalid": !!o,
+        "aria-describedby": m,
+        ...d,
+        children: [
+          /* @__PURE__ */ n("legend", { className: "pcoi-radio-group__legend", children: [
+            i,
+            s && /* @__PURE__ */ e("span", { className: "pcoi-radio-group__required", "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "pcoi-radio-group__options", children: c.map((N) => {
+            const x = `pcoi-field-${a}-${N.value}`;
+            return /* @__PURE__ */ n(
+              "label",
+              {
+                htmlFor: x,
+                className: "pcoi-radio-group__option",
+                children: [
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "radio",
+                      id: x,
+                      name: a,
+                      value: N.value,
+                      defaultChecked: l === N.value,
+                      required: s,
+                      disabled: r || N.disabled,
+                      onChange: f,
+                      className: "pcoi-radio-group__input"
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "pcoi-radio-group__circle", "aria-hidden": "true" }),
+                  /* @__PURE__ */ e("span", { className: "pcoi-radio-group__label", children: N.label })
+                ]
+              },
+              N.value
+            );
+          }) }),
+          o && /* @__PURE__ */ e("span", { id: m, className: "pcoi-radio-group__error", role: "alert", children: o })
+        ]
+      }
+    );
+  }
+);
+ie.displayName = "RadioGroup";
+const ce = _.forwardRef(
+  ({
+    title: i,
+    headingLevel: a = "h3",
+    action: c,
+    children: l,
+    flush: o = !1,
+    className: s = "",
+    ...r
+  }, t) => {
+    const p = a, d = [
+      "pcoi-panel",
+      o ? "pcoi-panel--flush" : "",
+      s
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { ref: t, className: d, ...r, children: [
+      (i || c) && /* @__PURE__ */ n("div", { className: "pcoi-panel__header", children: [
+        i && /* @__PURE__ */ e(p, { className: "pcoi-panel__title", children: i }),
+        c && /* @__PURE__ */ e("div", { className: "pcoi-panel__action", children: c })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "pcoi-panel__body", children: l })
+    ] });
+  }
+);
+ce.displayName = "Panel";
+const oe = _.forwardRef(
+  ({
+    columns: i,
+    rows: a,
+    rowKey: c,
+    emptyText: l = "No data available",
+    ariaLabel: o,
+    className: s = "",
+    ...r
+  }, t) => {
+    const p = (d, h) => c ? typeof c == "function" ? c(d, h) : String(d[c]) : String(h);
+    return /* @__PURE__ */ e("div", { ref: t, className: `pcoi-data-table ${s}`, ...r, children: /* @__PURE__ */ n("table", { className: "pcoi-data-table__table", "aria-label": o, children: [
+      /* @__PURE__ */ e("thead", { className: "pcoi-data-table__head", children: /* @__PURE__ */ e("tr", { className: "pcoi-data-table__head-row", children: i.map((d) => /* @__PURE__ */ e(
+        "th",
+        {
+          className: `pcoi-data-table__th${d.align ? ` pcoi-data-table__th--${d.align}` : ""}`,
+          children: d.header
+        },
+        d.key
+      )) }) }),
+      /* @__PURE__ */ e("tbody", { className: "pcoi-data-table__body", children: a.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+        "td",
+        {
+          colSpan: i.length,
+          className: "pcoi-data-table__empty",
+          children: l
+        }
+      ) }) : a.map((d, h) => /* @__PURE__ */ e(
+        "tr",
+        {
+          className: "pcoi-data-table__row",
+          children: i.map((m) => {
+            const u = d[m.key];
+            return /* @__PURE__ */ e(
+              "td",
+              {
+                className: `pcoi-data-table__td${m.align ? ` pcoi-data-table__td--${m.align}` : ""}`,
+                children: m.render ? m.render(u, d) : String(u ?? "")
+              },
+              m.key
+            );
+          })
+        },
+        p(d, h)
+      )) })
+    ] }) });
+  }
+);
+oe.displayName = "DataTable";
+const C = _.forwardRef(
+  ({ children: i, variant: a = "default", className: c = "", ...l }, o) => {
+    const s = [
+      "pcoi-badge",
+      `pcoi-badge--${a}`,
+      c
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e("span", { ref: o, className: s, ...l, children: i });
+  }
+);
+C.displayName = "Badge";
+const B = ({
+  size: i = 24,
+  title: a,
+  ...c
+}) => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    role: a ? "img" : "presentation",
+    "aria-hidden": !a,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...c,
+    children: [
+      a && /* @__PURE__ */ e("title", { children: a }),
+      /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+);
+B.displayName = "CloseIcon";
+const D = ({
+  open: i,
+  onClose: a,
+  title: c,
+  headingLevel: l = "h2",
+  size: o = "default",
+  children: s,
+  footer: r,
+  className: t = "",
+  ...p
+}) => {
+  const d = w(null), h = w(null), m = l, u = c ? "pcoi-modal-title" : void 0, f = R(
+    (b) => {
+      if (b.key === "Escape") {
+        a();
+        return;
+      }
+      if (b.key === "Tab" && d.current) {
+        const v = d.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (v.length === 0) return;
+        const S = v[0], j = v[v.length - 1];
+        b.shiftKey && document.activeElement === S ? (b.preventDefault(), j.focus()) : !b.shiftKey && document.activeElement === j && (b.preventDefault(), S.focus());
+      }
+    },
+    [a]
+  );
+  y(() => (i && (h.current = document.activeElement, document.addEventListener("keydown", f), document.body.style.overflow = "hidden", requestAnimationFrame(() => {
+    var v;
+    const b = (v = d.current) == null ? void 0 : v.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    b == null || b.focus();
+  })), () => {
+    var b;
+    document.removeEventListener("keydown", f), document.body.style.overflow = "", (b = h.current) == null || b.focus();
+  }), [i, f]);
+  const N = (b) => {
+    b.target === b.currentTarget && a();
+  };
+  if (!i) return null;
+  const x = ["pcoi-modal", t].filter(Boolean).join(" ");
+  return F(
+    /* @__PURE__ */ e("div", { className: x, onClick: N, children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: d,
+        className: `pcoi-modal__dialog${o === "wide" ? " pcoi-modal__dialog--wide" : ""}`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": u,
+        ...p,
+        children: [
+          /* @__PURE__ */ n("div", { className: "pcoi-modal__header", children: [
+            c && /* @__PURE__ */ e(m, { id: u, className: "pcoi-modal__title", children: c }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "pcoi-modal__close",
+                onClick: a,
+                "aria-label": "Close modal",
+                children: /* @__PURE__ */ e(B, { size: 20 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "pcoi-modal__body", children: s }),
+          r && /* @__PURE__ */ e("div", { className: "pcoi-modal__footer", children: r })
+        ]
+      }
+    ) }),
+    document.body
+  );
+};
+D.displayName = "Modal";
+const le = ({
+  message: i,
+  variant: a = "info",
+  open: c,
+  onClose: l,
+  duration: o = 5e3,
+  className: s = "",
+  ...r
+}) => {
+  const t = R(() => {
+    l == null || l();
+  }, [l]);
+  if (y(() => {
+    if (!c || o === 0) return;
+    const d = setTimeout(t, o);
+    return () => clearTimeout(d);
+  }, [c, o, t]), !c) return null;
+  const p = [
+    "pcoi-toast",
+    `pcoi-toast--${a}`,
+    s
+  ].filter(Boolean).join(" ");
+  return F(
+    /* @__PURE__ */ e("div", { className: p, role: "alert", ...r, children: /* @__PURE__ */ n("div", { className: "pcoi-toast__content", children: [
+      /* @__PURE__ */ e("span", { className: "pcoi-toast__message", children: i }),
+      l && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "pcoi-toast__close",
+          onClick: t,
+          "aria-label": "Dismiss notification",
+          children: /* @__PURE__ */ e(B, { size: 16 })
+        }
+      )
+    ] }) }),
+    document.body
+  );
+};
+le.displayName = "Toast";
+const O = _.forwardRef(({ label: i, icon: a, className: c = "", ...l }, o) => {
+  const s = ["pcoi-suggestion-card", c].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("button", { ref: o, type: "button", className: s, ...l, children: [
+    a && /* @__PURE__ */ e("span", { className: "pcoi-suggestion-card__icon", children: a }),
+    /* @__PURE__ */ e("span", { className: "pcoi-suggestion-card__label", children: i })
+  ] });
+});
+O.displayName = "SuggestionCard";
+const P = _.forwardRef(
+  ({ index: i, excerpt: a, sourceTitle: c, onSourceClick: l, className: o = "", ...s }, r) => {
+    const t = ["pcoi-cited-excerpt", o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { ref: r, className: t, ...s, children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "pcoi-cited-excerpt__source",
+          onClick: l,
+          children: c
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "pcoi-cited-excerpt__body", children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: "pcoi-cited-excerpt__index",
+            onClick: l,
+            children: [
+              "[",
+              i,
+              "]"
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("p", { className: "pcoi-cited-excerpt__text", children: a })
+      ] })
+    ] });
+  }
+);
+P.displayName = "CitedExcerpt";
+const L = ({
+  size: i = 24,
+  title: a,
+  ...c
+}) => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    role: a ? "img" : "presentation",
+    "aria-hidden": !a,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...c,
+    children: [
+      a && /* @__PURE__ */ e("title", { children: a }),
+      /* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+      /* @__PURE__ */ e("polyline", { points: "12 5 19 12 12 19" })
+    ]
+  }
+);
+L.displayName = "ArrowRightIcon";
+const H = _.forwardRef(
+  ({
+    value: i,
+    onChange: a,
+    onSubmit: c,
+    placeholder: l = "Ask a question…",
+    disabled: o = !1,
+    loading: s = !1,
+    className: r = "",
+    ...t
+  }, p) => {
+    const d = w(null), h = R(
+      (f) => {
+        f.key === "Enter" && !f.shiftKey && (f.preventDefault(), i.trim() && !o && !s && c(i.trim()));
+      },
+      [i, o, s, c]
+    ), m = R(() => {
+      i.trim() && !o && !s && c(i.trim());
+    }, [i, o, s, c]), u = ["pcoi-prompt-bar", r].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { ref: p, className: u, ...t, children: [
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: d,
+          className: "pcoi-prompt-bar__input",
+          value: i,
+          onChange: (f) => a(f.target.value),
+          onKeyDown: h,
+          placeholder: l,
+          disabled: o,
+          rows: 1,
+          "aria-label": l
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "pcoi-prompt-bar__actions", children: /* @__PURE__ */ e(
+        k,
+        {
+          variant: "primary",
+          className: "pcoi-prompt-bar__send",
+          onClick: m,
+          disabled: o || s || !i.trim(),
+          "aria-label": "Send message",
+          children: /* @__PURE__ */ e("span", { className: "pcoi-prompt-bar__send-icon", children: /* @__PURE__ */ e(L, { size: 16 }) })
+        }
+      ) })
+    ] });
+  }
+);
+H.displayName = "PromptBar";
+const M = _.forwardRef(
+  ({ role: i, children: a, citations: c, timestamp: l, onCitationClick: o, className: s = "", ...r }, t) => {
+    const p = [
+      "pcoi-chat-message",
+      `pcoi-chat-message--${i}`,
+      s
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { ref: t, className: p, ...r, children: [
+      /* @__PURE__ */ e("div", { className: "pcoi-chat-message__header", children: /* @__PURE__ */ e(C, { variant: i === "assistant" ? "default" : "info", children: i === "assistant" ? "PCOI" : "You" }) }),
+      /* @__PURE__ */ e("div", { className: "pcoi-chat-message__body", children: a }),
+      c && c.length > 0 && /* @__PURE__ */ e("div", { className: "pcoi-chat-message__citations", children: c.map((d) => /* @__PURE__ */ e(
+        P,
+        {
+          index: d.index,
+          excerpt: d.excerpt,
+          sourceTitle: d.sourceTitle,
+          onSourceClick: () => o == null ? void 0 : o(d)
+        },
+        d.index
+      )) }),
+      l && /* @__PURE__ */ e("time", { className: "pcoi-chat-message__timestamp", children: l })
+    ] });
+  }
+);
+M.displayName = "ChatMessage";
+const q = _.forwardRef(({ suggestions: i, onSelect: a, className: c = "", ...l }, o) => {
+  const s = ["pcoi-suggestion-cards", c].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { ref: o, className: s, ...l, children: i.map((r) => /* @__PURE__ */ e(
+    O,
+    {
+      label: r.label,
+      icon: r.icon,
+      onClick: () => a(r)
+    },
+    r.id
+  )) });
+});
+q.displayName = "SuggestionCards";
+const A = _.forwardRef(({ children: i, className: a = "", ...c }, l) => {
+  const o = w(null);
+  y(() => {
+    const r = o.current;
+    if (!r) return;
+    const t = () => {
+      requestAnimationFrame(() => {
+        r.scrollTop = r.scrollHeight;
+      });
+    }, p = new MutationObserver(t);
+    return p.observe(r, { childList: !0, subtree: !0 }), t(), () => p.disconnect();
+  }, []);
+  const s = ["pcoi-chat-message-list", a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { ref: l, className: s, ...c, children: /* @__PURE__ */ e("div", { ref: o, className: "pcoi-chat-message-list__inner", children: i }) });
+});
+A.displayName = "ChatMessageList";
+const re = _.forwardRef(
+  ({ open: i, onClose: a, title: c, sourceLabel: l, children: o, highlightId: s, highlightIndex: r, className: t = "", ...p }, d) => {
+    const h = w(null);
+    y(() => {
+      i && s && h.current && requestAnimationFrame(() => {
+        var N;
+        const f = (N = h.current) == null ? void 0 : N.querySelector(`#${CSS.escape(s)}`);
+        f && (f.scrollIntoView({ behavior: "smooth", block: "center" }), f.classList.add("pcoi-doc-overlay__highlight"), r !== void 0 && f.setAttribute("data-highlight-index", `[${r}]`));
+      });
+    }, [i, s, r]);
+    const m = ["pcoi-doc-overlay", t].filter(Boolean).join(" "), u = l ? _.createElement(
+      "div",
+      { className: "pcoi-doc-overlay__source" },
+      _.createElement(C, null, l)
+    ) : void 0;
+    return _.createElement(
+      D,
+      {
+        open: i,
+        onClose: a,
+        title: c,
+        size: "wide",
+        footer: u,
+        className: m,
+        ...p
+      },
+      _.createElement(
+        "div",
+        { ref: h, className: "pcoi-doc-overlay__content" },
+        o
+      )
+    );
+  }
+);
+re.displayName = "DocumentOverlay";
+const W = _.forwardRef(({ label: i = "PCOI", className: a = "", ...c }, l) => {
+  const o = ["pcoi-typing-indicator", a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { ref: l, className: o, ...c, children: [
+    /* @__PURE__ */ e("div", { className: "pcoi-typing-indicator__header", children: /* @__PURE__ */ e(C, { children: i }) }),
+    /* @__PURE__ */ n("div", { className: "pcoi-typing-indicator__dots", "aria-label": "Typing", children: [
+      /* @__PURE__ */ e("span", { className: "pcoi-typing-indicator__dot" }),
+      /* @__PURE__ */ e("span", { className: "pcoi-typing-indicator__dot" }),
+      /* @__PURE__ */ e("span", { className: "pcoi-typing-indicator__dot" })
+    ] })
+  ] });
+});
+W.displayName = "TypingIndicator";
+const se = _.forwardRef(
+  ({
+    messages: i,
+    suggestions: a,
+    promptValue: c,
+    onPromptChange: l,
+    onPromptSubmit: o,
+    onSuggestionSelect: s,
+    onCitationClick: r,
+    placeholder: t,
+    loading: p = !1,
+    className: d = "",
+    ...h
+  }, m) => {
+    const u = i.length === 0, f = [
+      "pcoi-chat",
+      u ? "pcoi-chat--empty" : "",
+      d
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { ref: m, className: f, ...h, children: [
+      u ? /* @__PURE__ */ e("div", { className: "pcoi-chat__empty-state", children: a && a.length > 0 && s && /* @__PURE__ */ e("div", { className: "pcoi-chat__suggestions", children: /* @__PURE__ */ e(
+        q,
+        {
+          suggestions: a,
+          onSelect: s
+        }
+      ) }) }) : /* @__PURE__ */ n(A, { className: "pcoi-chat__messages", children: [
+        i.map((N) => /* @__PURE__ */ e(
+          M,
+          {
+            role: N.role,
+            citations: N.citations,
+            timestamp: N.timestamp,
+            onCitationClick: r,
+            children: N.content
+          },
+          N.id
+        )),
+        p && /* @__PURE__ */ e(W, {})
+      ] }),
+      /* @__PURE__ */ e("div", { className: "pcoi-chat__prompt", children: /* @__PURE__ */ e(
+        H,
+        {
+          value: c,
+          onChange: l,
+          onSubmit: o,
+          placeholder: t,
+          loading: p,
+          disabled: p
+        }
+      ) })
+    ] });
+  }
+);
+se.displayName = "ChatInterface";
+export {
+  C as Badge,
+  k as Button,
+  Q as Callout,
+  Y as Card,
+  se as ChatInterface,
+  M as ChatMessage,
+  A as ChatMessageList,
+  ee as Checkbox,
+  P as CitedExcerpt,
+  G as ComparisonTable,
+  J as ContactForm,
+  oe as DataTable,
+  re as DocumentOverlay,
+  Z as Footer,
+  g as FormField,
+  V as HowStep,
+  I as LogoMark,
+  D as Modal,
+  K as Nav,
+  ce as Panel,
+  H as PromptBar,
+  ie as RadioGroup,
+  z as SectionHeader,
+  U as Select,
+  X as SignalsPanel,
+  O as SuggestionCard,
+  q as SuggestionCards,
+  le as Toast,
+  ae as Toggle,
+  W as TypingIndicator
+};