@getpinax/widget 0.0.0-stage → 1.0.0-beta.2

package/dist/chunks/widget-BpTBdX2R.mjs

@@ -0,0 +1,1272 @@
+import { a as e, i as t, n, t as r } from "./text-D9SaDBT0.mjs";
+import { o as i } from "./privacy-B_b1_Y1n.mjs";
+// src/report.ts
+var a = [
+	"see",
+	"keyboard",
+	"screen-reader",
+	"media",
+	"other"
+], o = {
+	message: 5e3,
+	email: 320,
+	entries: 50,
+	annotations: 200,
+	screenshotChars: 6e6,
+	screenshotBytes: 4718592,
+	breadcrumbs: 20,
+	followUpQuestion: 300,
+	followUpAnswer: 2e3,
+	replayChars: 45e5,
+	fields: 10,
+	fieldId: 40,
+	fieldText: 200,
+	bodyBytes: 11534336
+}, s = 65536, c = /^[A-Za-z0-9+/=]+$/, l = /^(?!\.)(?!.*\.\.)([A-Za-z0-9_'+\-.]*)[A-Za-z0-9_+-]@([A-Za-z0-9][A-Za-z0-9-]*\.)+[A-Za-z]{2,}$/, u = /^data:image\/(png|jpeg|webp);base64,[A-Za-z0-9+/=]+$/;
+function d(e) {
+	return e.length <= o.email && l.test(e);
+}
+function f(e) {
+	let t = e.slice(e.indexOf(",") + 1), n = t.endsWith("==") ? 2 : +!!t.endsWith("=");
+	return Math.floor(t.length * 3 / 4) - n;
+}
+function p(e) {
+	return e.length <= o.screenshotChars && u.test(e) && f(e) <= o.screenshotBytes;
+}
+function m(e) {
+	return e.message.trim().length > 0 || e.type === "GENERAL" && e.rating !== void 0 || e.type === "ACCESSIBILITY" && e.barrier !== void 0 || e.screenshot !== void 0;
+}
+var h = (e, t) => Number.isFinite(e) ? Math.round(Math.min(1, Math.max(t, e)) * 1e4) / 1e4 : 0;
+function g(i) {
+	let a = t(e(i), r);
+	return a.length <= 2e3 ? a : n(a.split("?")[0], 2e3);
+}
+function _(e) {
+	if (!e) return;
+	let t = {};
+	return e.id != null && String(e.id) && (t.id = n(String(e.id), 200)), e.name && (t.name = n(String(e.name), 200)), Object.keys(t).length ? t : void 0;
+}
+function v(e, t) {
+	let r = {
+		type: e.type,
+		message: n(e.message.trim(), o.message),
+		page: {
+			url: g(t.page.url),
+			title: t.page.title ? n(t.page.title, 500) : void 0
+		},
+		environment: t.environment
+	};
+	e.type === "GENERAL" && e.rating !== void 0 && Number.isInteger(e.rating) && e.rating >= 1 && e.rating <= 5 && (r.rating = e.rating);
+	let s = e.email?.trim().toLowerCase();
+	s && d(s) && (r.email = s);
+	let c = _(e.user);
+	c && (r.user = c), t.console.length && (r.console = t.console.slice(-o.entries).map((e) => {
+		let t = {
+			...e,
+			message: i(e.message)
+		};
+		return e.stack && (t.stack = i(e.stack)), t;
+	})), t.network.length && (r.network = t.network.slice(-o.entries)), t.breadcrumbs?.length && (r.breadcrumbs = t.breadcrumbs.slice(-o.breadcrumbs).map((e) => {
+		let t = {
+			kind: e.kind,
+			at: n(e.at, 40),
+			path: n(e.path, 500)
+		};
+		return e.target && (t.target = n(i(e.target), 200)), t;
+	}));
+	let l = e.followUp?.question.trim(), u = e.followUp?.answer.trim();
+	l && u && (r.followUp = {
+		question: n(l, o.followUpQuestion),
+		answer: n(u, o.followUpAnswer)
+	});
+	let f = (e.fields ?? []).filter((e) => typeof e.id == "string" && e.id.length <= o.fieldId && (typeof e.value == "boolean" || typeof e.value == "string" && e.value.trim())).slice(0, o.fields).map((e) => ({
+		id: e.id,
+		value: typeof e.value == "boolean" ? e.value : n(e.value.trim(), o.fieldText)
+	}));
+	return f.length && (r.fields = f), e.type === "ACCESSIBILITY" && (e.barrier && a.includes(e.barrier) && (r.barrier = e.barrier), e.a11yScan && (r.a11yScan = e.a11yScan)), e.consent && (r.consent = {
+		diagnostics: e.consent.diagnostics === !0,
+		replay: e.consent.replay === !0
+	}), e.includeLogs === !0 && (r.includeLogs = !0), e.hp && (r.hp = n(e.hp, 500)), e.elapsedMs !== void 0 && Number.isFinite(e.elapsedMs) && e.elapsedMs >= 0 && (r.elapsedMs = Math.min(Math.round(e.elapsedMs), 864e5)), e.screenshot && p(e.screenshot) && (r.screenshot = e.screenshot, e.annotations?.length && (r.annotations = e.annotations.slice(0, o.annotations).map((e) => {
+		let t = e.type === "arrow" ? -1 : 0, r = {
+			type: e.type,
+			x: h(e.x, 0),
+			y: h(e.y, 0),
+			w: h(e.w, t),
+			h: h(e.h, t)
+		};
+		return e.type === "text" && e.text && (r.text = n(e.text, 500)), r;
+	}))), r;
+}
+function y(e) {
+	return new TextEncoder().encode(JSON.stringify(e)).length;
+}
+function b(e, t) {
+	return !t || t.length > o.replayChars || !c.test(t) || y(e) + t.length + 12 > o.bodyBytes - s ? !1 : (e.replay = t, !0);
+}
+// src/settings.ts
+var x = {
+	color: "#B8F35C",
+	text: "Feedback",
+	position: "bottom-right",
+	types: {
+		problem: !0,
+		idea: !0,
+		general: !0,
+		accessibility: !1
+	},
+	rating: !0,
+	hidePaths: [],
+	smallOnMobile: !1,
+	hideButton: !1,
+	segment: !1,
+	wording: {
+		chooserTitle: "",
+		problemTitle: "",
+		ideaTitle: "",
+		generalTitle: "",
+		accessibilityTitle: "",
+		messagePlaceholder: "",
+		confirmation: ""
+	},
+	fields: [],
+	capture: {
+		console: !0,
+		network: !0
+	},
+	knownIssues: {
+		enabled: !0,
+		notify: !0
+	},
+	consent: { required: !1 },
+	privacyUrl: "",
+	identifyPrefill: !0
+}, S = {
+	fields: 10,
+	label: 80,
+	options: 20,
+	option: 80,
+	text: 200
+}, C = [
+	"bottom-right",
+	"bottom-left",
+	"right-edge"
+], w = Object.keys(x.wording), T = (e, t) => typeof e == "string" ? e.trim().slice(0, t) : "", E = (e, t) => typeof e == "boolean" ? e : t, D = [
+	"select",
+	"text",
+	"checkbox"
+];
+function O(e) {
+	if (!Array.isArray(e)) return [];
+	let t = [], n = /* @__PURE__ */ new Set();
+	for (let r of e) {
+		if (!r || typeof r != "object") continue;
+		let e = r, i = typeof e.id == "string" ? e.id.slice(0, 40) : "", a = e.type, o = T(e.label, S.label);
+		if (!i || n.has(i) || !D.includes(a) || !o) continue;
+		let s = a === "select" && Array.isArray(e.options) ? [...new Set(e.options.map((e) => T(e, S.option)).filter(Boolean))].slice(0, S.options) : [];
+		if (a === "select" && !s.length) continue;
+		let c = e.types ?? {};
+		if (n.add(i), t.push({
+			id: i,
+			type: a,
+			label: o,
+			required: e.required === !0,
+			options: s,
+			types: {
+				problem: E(c.problem, !0),
+				idea: E(c.idea, !0),
+				general: E(c.general, !0)
+			}
+		}), t.length >= S.fields) break;
+	}
+	return t;
+}
+function k(e) {
+	let t = e ?? {}, n = x, r = t.types ?? {}, i = {
+		problem: E(r.problem, !0),
+		idea: E(r.idea, !0),
+		general: E(r.general, !0),
+		accessibility: E(r.accessibility, !1)
+	}, a = i.problem || i.idea || i.general || i.accessibility, o = t.wording ?? {}, s = { ...n.wording };
+	for (let e of w) s[e] = T(o[e], 120);
+	return {
+		color: typeof t.color == "string" ? t.color : n.color,
+		text: T(t.text, 40) || n.text,
+		position: C.includes(t.position) ? t.position : n.position,
+		types: a ? i : { ...n.types },
+		rating: E(t.rating, n.rating),
+		hidePaths: Array.isArray(t.hidePaths) ? t.hidePaths.filter((e) => typeof e == "string") : [],
+		smallOnMobile: E(t.smallOnMobile, n.smallOnMobile),
+		hideButton: E(t.hideButton, n.hideButton),
+		segment: E(t.segment, n.segment),
+		wording: s,
+		fields: O(t.fields),
+		capture: {
+			console: E(t.capture?.console, !0),
+			network: E(t.capture?.network, !0)
+		},
+		knownIssues: {
+			enabled: E(t.knownIssues?.enabled, !0),
+			notify: E(t.knownIssues?.notify, !0)
+		},
+		consent: { required: t.consent?.required === !0 },
+		privacyUrl: A(t.privacyUrl),
+		identifyPrefill: E(t.identifyPrefill, !0)
+	};
+}
+function A(e) {
+	let t = typeof e == "string" ? e.trim() : "";
+	try {
+		return t.length <= 500 && new URL(t).protocol === "https:" ? t : "";
+	} catch {
+		return "";
+	}
+}
+var j = /^#[0-9a-fA-F]{6}$/, M = (e) => typeof e == "string" && j.test(e) ? e : null;
+function N(e) {
+	let t = e && typeof e == "object" ? e : {}, n = typeof t.logoUrl == "string" && /^https?:\/\//i.test(t.logoUrl) ? t.logoUrl.slice(0, 2e3) : null;
+	return {
+		poweredBy: t.poweredBy === !0,
+		logoUrl: n,
+		primary: M(t.primary),
+		accent: M(t.accent)
+	};
+}
+var P = (e) => typeof e == "number" && Number.isFinite(e) ? Math.min(1, Math.max(0, e)) : 0;
+function F(e, t) {
+	let n = e && typeof e == "object" ? e : {}, r = typeof t == "number" ? P(t) : 1, i = Array.isArray(n.fixChecks) ? n.fixChecks : [];
+	return {
+		followUp: n.followUp === !0,
+		autoBlur: n.autoBlur === !0,
+		replay: n.replay === !0,
+		replaySampleRate: Math.min(n.replaySampleRate === void 0 ? 1 : P(n.replaySampleRate), r),
+		replayMask: n.replayMask === "inputs" ? "inputs" : "all",
+		fixChecks: i.filter((e) => !!e && typeof e.id == "string" && typeof e.path == "string" && typeof e.signature == "string"),
+		watches: I(n.watches),
+		fixCheckSampleRate: Math.min(P(n.fixCheckSampleRate), r)
+	};
+}
+function I(e) {
+	return (Array.isArray(e) ? e : []).filter((e) => !!e && typeof e.id == "string" && typeof e.signature == "string").slice(0, 50);
+}
+function L(e, t) {
+	if (!Array.isArray(e) || t?.enabled === !1) return [];
+	let n = [];
+	for (let t of e) {
+		if (!t || typeof t != "object") continue;
+		let e = t, r = typeof e.id == "string" ? e.id.slice(0, 64) : "", i = T(e.title, 120);
+		if (r && i && (n.push({
+			id: r,
+			title: i,
+			paths: (Array.isArray(e.paths) ? e.paths : []).filter((e) => typeof e == "string" && e[0] === "/").slice(0, 10),
+			signature: typeof e.signature == "string" && e.signature ? e.signature : null
+		}), n.length >= 20)) break;
+	}
+	return n;
+}
+// src/ui/color.ts
+function R(e) {
+	let t = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
+	if (!t) return null;
+	let n = t[1];
+	n.length === 3 && (n = [...n].map((e) => e + e).join(""));
+	let [r, i, a] = [
+		0,
+		2,
+		4
+	].map((e) => {
+		let t = Number.parseInt(n.slice(e, e + 2), 16) / 255;
+		return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * i + .0722 * a;
+}
+function z(e, t) {
+	let [n, r] = e > t ? [e, t] : [t, e];
+	return (n + .05) / (r + .05);
+}
+function B(e) {
+	let t = R(e);
+	return t === null ? "#FFFFFF" : z(t, R("#0B1300")) >= z(t, 1) ? "#0B1300" : "#FFFFFF";
+}
+function V(e, t = "#B8F35C") {
+	return typeof e == "string" && R(e) !== null ? e.trim() : t;
+}
+// src/ui/dom.ts
+function H(e, t = {}, ...n) {
+	let r = document.createElement(e);
+	for (let [e, n] of Object.entries(t)) n != null && n !== !1 && r.setAttribute(e, n === !0 ? "" : String(n));
+	for (let e of n) e != null && e !== !1 && r.append(e);
+	return r;
+}
+var U = "http://www.w3.org/2000/svg";
+function W(e, t = 16) {
+	let n = document.createElementNS(U, "svg");
+	n.setAttribute("width", String(t)), n.setAttribute("height", String(t)), n.setAttribute("viewBox", "0 0 24 24"), n.setAttribute("fill", "none"), n.setAttribute("stroke", "currentColor"), n.setAttribute("stroke-width", "2.2"), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round"), n.setAttribute("aria-hidden", "true");
+	let r = document.createElementNS(U, "path");
+	return r.setAttribute("d", e), n.append(r), n;
+}
+var G = {
+	close: "M18 6L6 18M6 6l12 12",
+	back: "M15 18l-6-6 6-6",
+	pen: "M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z",
+	camera: "M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2zM12 17a4 4 0 100-8 4 4 0 000 8z",
+	trash: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"
+}, K = "\n  $ .panel, $.pos-bottom-right .panel, $.pos-bottom-left .panel, $.pos-right-edge .panel { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 88vh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }\n  $.open .launcher { display: none; }\n  $ .field textarea, $ .field input, $ .field select { font-size: 16px; }\n  $ .launcher { padding: 11px 16px; font-size: 14px; }\n  $.pos-bottom-right .launcher { right: 16px; bottom: 16px; }\n  $.pos-bottom-left .launcher { left: 16px; bottom: 16px; }\n  $.small .launcher { padding: 8px 12px; font-size: 13px; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.35); }\n  $.small.pos-bottom-right .launcher { right: 12px; bottom: 12px; }\n  $.small.pos-bottom-left .launcher { left: 12px; bottom: 12px; }\n  $.small.pos-right-edge .launcher { padding: 8px 10px; }\n";
+function q(e, t) {
+	let n = K.replace(/\$/g, t);
+	return e ? `${e}${n}}` : n;
+}
+var J = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.pnx { font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #111827; font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
+button { font: inherit; color: inherit; cursor: pointer; }
+button:disabled { cursor: default; }
+:focus-visible { outline: 3px solid #2E46BF; outline-offset: 2px; }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+.launcher { position: fixed; z-index: 2; border: 0; padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.2; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.35); background: var(--pnx-brand); color: var(--pnx-ink); transition: transform .15s ease; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.launcher:hover { transform: translateY(-1px); }
+.pos-bottom-right .launcher { right: 24px; bottom: 24px; }
+.pos-bottom-left .launcher { left: 24px; bottom: 24px; }
+.pos-right-edge .launcher { right: 0; top: 45%; border-radius: 10px 0 0 10px; }
+.pos-right-edge .launcher:hover { transform: translateX(-2px); }
+.pos-right-edge.open .launcher { visibility: hidden; }
+.launcher[hidden] { display: none; }
+
+.panel { position: fixed; z-index: 3; bottom: 84px; width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 108px); overflow: auto; padding: 18px; border-radius: 16px; background: #FFFFFF; color: #111827; box-shadow: 0 30px 60px -18px rgba(0,0,0,0.45), 0 0 0 1px rgba(17,24,39,0.06); display: flex; flex-direction: column; gap: 12px; }
+.panel[hidden] { display: none; }
+.pos-bottom-right .panel { right: 24px; }
+.pos-bottom-left .panel { left: 24px; }
+.pos-right-edge .panel { right: 24px; bottom: 24px; max-height: calc(100vh - 48px); }
+.no-button .panel { bottom: 24px; max-height: calc(100vh - 48px); }
+
+.head { display: flex; align-items: center; gap: 8px; }
+.title { margin: 0; flex: 1; font-size: 15px; font-weight: 700; }
+.icon-btn { flex: none; width: 32px; height: 32px; margin: -6px; border: 0; border-radius: 8px; background: transparent; color: #5B6474; display: inline-flex; align-items: center; justify-content: center; }
+.icon-btn:hover { background: #F2F4F8; color: #111827; }
+.head .icon-btn:first-child { margin-right: 0; }
+
+.choices { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
+.choice { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 10px; background: #F2F4F8; font-size: 14px; font-weight: 600; text-align: left; }
+.choice:hover { background: #FFF1EC; box-shadow: inset 0 0 0 2px var(--dot); }
+.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
+.choice small { display: block; font-size: 12px; font-weight: 500; color: #5B6474; }
+
+.shot { position: relative; border-radius: 10px; background: #F4EDE2; overflow: hidden; min-height: 72px; display: flex; align-items: center; justify-content: center; }
+.shot img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; background: #F2F4F8; }
+.shot .tag { position: absolute; right: 8px; top: 8px; padding: 3px 7px; border-radius: 6px; background: #111827; color: #FFFFFF; font-size: 11px; font-weight: 700; }
+.shot .wait { font-size: 13px; color: #5B6474; padding: 20px; }
+.shot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 7px 11px; border: 0; border-radius: 8px; background: #F2F4F8; color: #111827; font-size: 13px; font-weight: 700; }
+.chip:hover { background: #E3E8F0; }
+.chip.primary { background: #111827; color: #FFFFFF; }
+.chip.primary:hover { background: #1F2937; }
+
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field label, .legend { font-size: 12px; font-weight: 600; color: #5B6474; }
+.field textarea, .field input { width: 100%; border: 0; border-radius: 10px; padding: 11px 12px; background: #F2F4F8; color: #111827; font: inherit; font-size: 14px; line-height: 1.5; box-shadow: inset 0 0 0 1px transparent; }
+.field textarea { min-height: 84px; resize: vertical; }
+.field textarea::placeholder, .field input::placeholder { color: #5B6474; opacity: 1; }
+.field textarea:focus, .field input:focus { outline: none; box-shadow: inset 0 0 0 2px #2E46BF; background: #FFFFFF; }
+.field .hint { font-size: 12px; color: #5B6474; }
+.field select { width: 100%; border: 0; border-radius: 10px; padding: 11px 12px; background: #F2F4F8; color: #111827; font: inherit; font-size: 14px; line-height: 1.5; }
+.field select:focus { outline: none; box-shadow: inset 0 0 0 2px #2E46BF; background: #FFFFFF; }
+.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B42318; }
+.field .optional { font-weight: 500; }
+.field.check { flex-direction: row; align-items: flex-start; gap: 10px; }
+.field.check input { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: #2E46BF; box-shadow: none; }
+.field.check label { font-size: 13px; color: #111827; font-weight: 600; line-height: 1.45; }
+.field.check input[aria-invalid="true"] { outline: 2px solid #B42318; outline-offset: 2px; }
+.a11y-note { margin: 0; font-size: 13px; line-height: 1.45; color: #374151; }
+fieldset.barriers { border: 0; margin: 0; padding: 0; min-width: 0; gap: 2px; }
+fieldset.barriers legend { padding: 0; margin-bottom: 4px; }
+.radio { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: 8px; }
+.radio:hover { background: #F2F4F8; }
+.field .radio input, .field .radio input:focus { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 50%; background: none; accent-color: #0F766E; box-shadow: none; }
+.radio input:focus-visible { outline: 2px solid #2E46BF; outline-offset: 2px; }
+.radio label { flex: 1; font-size: 14px; color: #111827; font-weight: 500; line-height: 1.35; padding: 8px 0; cursor: pointer; }
+.brand { display: flex; align-items: center; min-height: 28px; }
+.brand .logo { display: block; max-height: 32px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
+.accented .panel { border-top: 4px solid var(--pnx-accent); }
+.accented .choice:hover { box-shadow: inset 0 0 0 2px var(--pnx-accent); }
+.accented .tick { background: var(--pnx-accent); color: var(--pnx-accent-ink); }
+
+.stars { display: flex; gap: 4px; border: 0; margin: 0; padding: 0; }
+.star { width: 40px; height: 40px; border: 0; border-radius: 10px; font-size: 24px; line-height: 1; background: #F2F4F8; color: #6B7280; }
+.star.on { background: #FFF6DF; color: #B9800F; }
+
+.error { margin: 0; font-size: 13px; color: #B42318; font-weight: 600; }
+.error:empty { display: none; }
+.send { width: 100%; padding: 12px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 800; background: var(--type); color: var(--type-ink); }
+.send:disabled { opacity: .7; }
+.powered { font-size: 11px; color: #5B6474; text-align: center; }
+.powered a { color: inherit; text-decoration: none; }
+.powered a:hover { text-decoration: underline; }
+
+.done { text-align: center; padding: 18px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
+.tick { width: 46px; height: 46px; border-radius: 50%; background: #B8F35C; color: #0B1300; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
+.done p { margin: 0; font-size: 13px; color: #5B6474; }
+.link { border: 0; background: transparent; color: #5B6474; font-size: 13px; font-weight: 700; padding: 6px 8px; border-radius: 6px; }
+.link:hover { color: #111827; }
+
+.note { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #F2F4F8; color: #5B6474; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
+.note .dot { transform: translateY(-1px); }
+.field label.question { font-size: 14px; font-weight: 700; color: #111827; line-height: 1.4; }
+.field textarea.answer { min-height: 64px; }
+.skip { width: 100%; padding: 8px; text-align: center; }
+.skip:disabled, .send:disabled + .skip { opacity: .7; }
+
+.known { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.known > li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 10px; background: #F2F4F8; }
+.known-title { margin: 0; font-size: 14px; font-weight: 700; color: #111827; overflow-wrap: anywhere; }
+.known-thanks { margin: 0; font-size: 13px; font-weight: 600; color: #374151; }
+.known .field { align-self: stretch; }
+.known .field input { background: #FFFFFF; box-shadow: inset 0 0 0 1px #6B7280; }
+.known .field input:focus { box-shadow: inset 0 0 0 2px #2E46BF; }
+.known .field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B42318; }
+.subtitle { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #5B6474; }
+.privacy { display: flex; flex-direction: column; gap: 10px; }
+.notice { margin: 0; font-size: 12px; line-height: 1.45; color: #5B6474; overflow-wrap: anywhere; }
+.notice a { color: #2E46BF; font-weight: 700; text-decoration: underline; }
+.notice a:hover { color: #111827; }
+.hint.auto-blur { display: flex; align-items: center; gap: 6px; }
+.hint.auto-blur i { flex: none; width: 16px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #D8DEE9 0 4px, #C7CFDC 4px 8px); box-shadow: 0 0 0 1px #C7CFDC; }
+
+${q("@media (max-width: 520px) {", ".pnx")}
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
+@media (forced-colors: active) { .launcher, .choice, .send, .chip, .star { border: 1px solid ButtonText; } .known > li { border: 1px solid CanvasText; } }
+`, Y = [
+	{
+		type: "PROBLEM",
+		key: "problem",
+		label: "Report a problem",
+		desc: "Point at what is broken",
+		dot: "#FF5C35",
+		send: "#CC3F1B",
+		ink: "#FFFFFF"
+	},
+	{
+		type: "IDEA",
+		key: "idea",
+		label: "Share an idea",
+		desc: "Suggest something better",
+		dot: "#7C9CFF",
+		send: "#7C9CFF",
+		ink: "#0B1122"
+	},
+	{
+		type: "GENERAL",
+		key: "general",
+		label: "General feedback",
+		desc: "A rating and a few words",
+		dot: "#3DBF6E",
+		send: "#3DBF6E",
+		ink: "#0B1300"
+	},
+	{
+		type: "ACCESSIBILITY",
+		key: "accessibility",
+		label: "Report an accessibility barrier",
+		desc: "Something you can't see, reach or use",
+		dot: "#2FB8AC",
+		send: "#0F766E",
+		ink: "#FFFFFF"
+	}
+], X = [
+	["see", "Hard to see or read"],
+	["keyboard", "Can't use it with a keyboard"],
+	["screen-reader", "Doesn't work with my screen reader"],
+	["media", "Video or audio"],
+	["other", "Something else"]
+], Z = 4e3, Q = "What would you like to do?", $ = "Thanks! We've got it.", ee = {
+	problem: "problemTitle",
+	idea: "ideaTitle",
+	general: "generalTitle",
+	accessibility: "accessibilityTitle"
+}, te = class {
+	constructor(e, t, n, r = {}) {
+		this.root = e, this.config = t, this.handlers = n, this.kind = null, this.shot = { kind: "none" }, this.message = "", this.email = "", this.emailEdited = !1, this.answers = {}, this.sendColour = null, this.sending = !1, this.openedAt = 0, this.hp = "", this.uid = Math.random().toString(36).slice(2, 8), this.pathHidden = !1, this.returnFocus = null, this.known = [], this.knownHidden = /* @__PURE__ */ new Set(), this.meToo = {}, this.includeLogs = !1, this.privacy = null, this.noticeText = null, this.shown = {
+			logs: !0,
+			askLogs: !1,
+			replay: !1
+		}, this.view = "choose", this.queued = !1, this.asked = null, this.answer = "";
+		let i = t.settings, a = t.branding?.primary ? V(t.branding.primary, "") : "", o = t.branding?.accent ? V(t.branding.accent, "") : "", s = a || V(i.color);
+		this.sendColour = a || null;
+		let c = (e) => e.key === "accessibility" ? i.types?.accessibility === !0 : i.types?.[e.key] !== !1;
+		this.kinds = Y.filter(c), this.kinds.length || (this.kinds = Y.slice(0, 3));
+		let l = H("style");
+		l.textContent = r.css ? J + r.css : J, this.launcher = H("button", {
+			type: "button",
+			class: "launcher",
+			"aria-haspopup": "dialog",
+			"aria-expanded": "false",
+			"aria-controls": `pnx-panel-${this.uid}`
+		}, (i.text || "Feedback").slice(0, 40)), this.launcher.addEventListener("click", () => this.isOpen() ? this.close() : this.open()), this.panel = H("div", {
+			class: "panel",
+			id: `pnx-panel-${this.uid}`,
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-labelledby": `pnx-title-${this.uid}`,
+			hidden: !0
+		}), this.panel.addEventListener("keydown", (e) => {
+			e.key === "Escape" && (e.stopPropagation(), this.close());
+		}), this.panel.addEventListener("pointerdown", () => this.holdOpen()), this.panel.addEventListener("focusin", () => this.holdOpen()), this.live = H("div", {
+			class: "sr",
+			role: "status",
+			"aria-live": "polite"
+		});
+		let u = [
+			"bottom-right",
+			"bottom-left",
+			"right-edge"
+		].includes(i.position) ? i.position : "bottom-right";
+		this.wrap = H("div", { class: `pnx pos-${u}${r.className ? ` ${r.className}` : ""}` }), i.smallOnMobile && this.wrap.classList.add("small"), this.updateButton(), this.wrap.style.setProperty("--pnx-brand", s), this.wrap.style.setProperty("--pnx-ink", B(s)), o && (this.wrap.classList.add("accented"), this.wrap.style.setProperty("--pnx-accent", o), this.wrap.style.setProperty("--pnx-accent-ink", B(o))), this.wrap.append(this.launcher, this.panel, this.live), e.append(l, this.wrap);
+	}
+	isOpen() {
+		return !this.panel.hidden;
+	}
+	hasButton() {
+		return !this.launcher.hidden;
+	}
+	setPathHidden(e) {
+		this.pathHidden = e, this.updateButton();
+	}
+	updateButton() {
+		let e = this.config.settings.hideButton || this.pathHidden;
+		this.launcher.hidden = e, this.wrap.classList.toggle("no-button", e);
+	}
+	open(e = !0) {
+		if (this.isOpen()) {
+			e && this.focusFirst();
+			return;
+		}
+		let t = document.activeElement;
+		this.returnFocus = t instanceof HTMLElement && t !== this.root.host ? t : null, this.openedAt || (this.openedAt = Date.now()), (this.view === "choose" || this.kinds.length === 1 && this.view === "form" && !this.message.trim()) && this.offerKnown(), this.panel.hidden = !1, this.wrap.classList.add("open"), this.launcher.setAttribute("aria-expanded", "true"), !this.kind && this.kinds.length === 1 && !this.knownShown().length && this.pick(this.kinds[0], !1), this.render(), e && this.focusFirst();
+		try {
+			this.handlers.opened?.();
+		} catch {}
+	}
+	close(e = !0) {
+		clearTimeout(this.closeTimer), this.isOpen() && (this.panel.hidden = !0, this.wrap.classList.remove("open"), this.launcher.setAttribute("aria-expanded", "false"), this.view === "done" && this.reset(), e && (this.hasButton() ? this.launcher.focus() : this.returnFocus?.isConnected && this.returnFocus.focus(), this.returnFocus = null));
+	}
+	currentView() {
+		return this.isOpen() ? this.view === "done" ? "done" : (this.view === "form" || this.view === "question") && this.kind ? this.kind.key : "choose" : "button";
+	}
+	showView(e) {
+		if (clearTimeout(this.closeTimer), e === "button") this.close(!1);
+		else {
+			if (this.reset(), this.knownHidden.clear(), this.meToo = {}, e === "choose" && this.offerKnown(), e === "done") this.view = "done";
+			else if (e !== "choose") {
+				let t = this.kinds.find((t) => t.key === e);
+				t && this.pick(t, !1);
+			}
+			this.isOpen() ? this.render() : this.open(!1);
+		}
+	}
+	word(e, t) {
+		return this.config.settings.wording?.[e]?.trim() || t;
+	}
+	kindTitle(e, t = e.label) {
+		return this.word(ee[e.key], t);
+	}
+	setSuspended(e) {
+		this.wrap.style.display = e ? "none" : "";
+	}
+	destroy() {
+		clearTimeout(this.closeTimer), this.wrap.remove();
+	}
+	reset() {
+		this.view = "choose", this.kind = null, this.shot = { kind: "none" }, this.message = "", this.rating = void 0, this.barrier = void 0, this.answers = {}, this.includeLogs = !1, this.queued = !1, this.asked = null, this.answer = "", this.openedAt = this.isOpen() ? Date.now() : 0, this.hp = "", this.kinds.length === 1 && this.pick(this.kinds[0], !1);
+	}
+	holdOpen() {
+		clearTimeout(this.closeTimer);
+	}
+	focusFirst() {
+		for (let e of [
+			"[data-autofocus]",
+			".choice",
+			"textarea",
+			"button"
+		]) {
+			let t = this.panel.querySelector(e);
+			if (t) {
+				t.focus();
+				return;
+			}
+		}
+	}
+	announce(e) {
+		this.live.textContent = "", setTimeout(() => {
+			this.live.textContent = e;
+		}, 30);
+	}
+	pick(e, t = !0) {
+		this.kind = e, this.view = "form", this.rating = void 0, !this.email && !this.emailEdited && this.config.settings.identifyPrefill !== !1 && (this.email = this.handlers.user()?.email || ""), e.type === "PROBLEM" && this.shot.kind === "none" && this.capture(), e.type !== "PROBLEM" && this.shot.kind === "busy" && (this.shot = { kind: "none" }), t && (this.render(), this.focusFirst());
+	}
+	async capture() {
+		this.shot = { kind: "busy" }, this.render();
+		try {
+			let e = await this.handlers.takeScreenshot();
+			if (this.shot.kind !== "busy") return;
+			this.shot = {
+				kind: "ready",
+				shot: e
+			}, this.announce("Screenshot added.");
+		} catch {
+			if (this.shot.kind !== "busy") return;
+			this.shot = { kind: "failed" }, this.announce("Couldn't take a screenshot.");
+		}
+		this.renderKeepingFocus();
+	}
+	async markUp() {
+		if (this.shot.kind === "ready") {
+			this.setSuspended(!0);
+			try {
+				let e = await this.handlers.markUp(this.shot.shot);
+				e && (this.shot = {
+					kind: "ready",
+					shot: e
+				}, this.announce(e.annotations.length ? `Screenshot marked up with ${e.annotations.length} ${e.annotations.length === 1 ? "mark" : "marks"}.` : "Screenshot updated."));
+			} catch {} finally {
+				this.setSuspended(!1), this.render(), this.panel.querySelector("[data-markup]")?.focus();
+			}
+		}
+	}
+	renderKeepingFocus() {
+		let e = this.root.activeElement, t = e?.dataset?.key, n = e?.tagName === "TEXTAREA" ? [e.selectionStart, e.selectionEnd] : null;
+		if (this.render(), t) {
+			let e = this.panel.querySelector(`[data-key="${t}"]`);
+			e?.focus(), n && e instanceof HTMLTextAreaElement && e.setSelectionRange(n[0], n[1]);
+		}
+	}
+	header(e, t, n) {
+		let r = H("div", { class: "head" });
+		if (t) {
+			let e = H("button", {
+				type: "button",
+				class: "icon-btn",
+				"aria-label": "Back",
+				"data-key": "back"
+			});
+			e.append(W(G.back)), e.addEventListener("click", () => {
+				n ? n() : (this.view = "choose", this.kind = null, this.render(), this.focusFirst());
+			}), r.append(e);
+		}
+		r.append(H("h2", {
+			class: "title",
+			id: `pnx-title-${this.uid}`
+		}, e));
+		let i = H("button", {
+			type: "button",
+			class: "icon-btn",
+			"aria-label": "Close feedback",
+			"data-key": "close"
+		});
+		return i.append(W(G.close)), i.addEventListener("click", () => this.close()), r.append(i), r;
+	}
+	powered() {
+		return this.config.branding?.poweredBy ? H("div", { class: "powered" }, H("a", {
+			href: "https://getpinax.com",
+			target: "_blank",
+			rel: "noopener"
+		}, "Powered by Pinax")) : null;
+	}
+	logo() {
+		let e = this.config.branding?.logoUrl;
+		if (!e || !/^https?:\/\//i.test(e)) return null;
+		let t = H("img", {
+			src: e,
+			alt: "",
+			class: "logo",
+			referrerpolicy: "no-referrer"
+		});
+		return t.addEventListener("error", () => t.remove()), H("div", { class: "brand" }, t);
+	}
+	render() {
+		let e = [], t = this.logo();
+		t && e.push(t), this.view === "done" ? e.push(...this.renderDone()) : this.view === "question" && this.kind && this.asked?.question ? e.push(...this.renderQuestion(this.kind, this.asked.question)) : this.view === "form" && this.kind ? e.push(...this.renderForm(this.kind)) : e.push(...this.renderChoose());
+		let n = this.powered();
+		n && e.push(n), this.panel.replaceChildren(...e);
+	}
+	renderChoose() {
+		let e = this.knownShown(), t = this.word("chooserTitle", Q), n = H("ul", { class: "choices" });
+		for (let e of this.kinds) {
+			let t = H("button", {
+				type: "button",
+				class: "choice"
+			}, H("span", {
+				class: "dot",
+				"aria-hidden": "true"
+			}), H("span", {}, this.kindTitle(e), H("small", {}, e.desc)));
+			t.style.setProperty("--dot", e.dot), t.addEventListener("click", () => this.pick(e)), n.append(H("li", {}, t));
+		}
+		return e.length ? [
+			this.header("We know about this", !1),
+			...this.renderKnown(e),
+			H("h3", { class: "subtitle" }, t),
+			n
+		] : [this.header(t, !1), n];
+	}
+	knownShown() {
+		return this.config.settings.knownIssues?.enabled === !1 ? [] : this.known.filter((e) => !this.knownHidden.has(e.id));
+	}
+	offerKnown() {
+		try {
+			this.known = this.handlers.knownIssues?.().slice(0, 3) ?? [];
+		} catch {
+			this.known = [];
+		}
+		this.knownShown().length && (this.view = "choose", this.kind = null);
+	}
+	renderKnown(e) {
+		let t = this.config.settings.knownIssues?.notify !== !1, n = H("ul", { class: "known" }), r = !0;
+		e.forEach((e, i) => {
+			let a = this.meToo[e.id], o = `pnx-k${i}-${this.uid}`, s = H("p", {
+				class: "error",
+				role: "alert",
+				id: `pnx-k${i}-err-${this.uid}`
+			}), c = H("li", {}, H("p", {
+				class: "known-title",
+				id: o
+			}, e.title));
+			if (!a || a === "busy") {
+				let t = H("button", {
+					type: "button",
+					class: "chip primary",
+					"aria-describedby": o,
+					"data-key": `metoo-${i}`,
+					"data-autofocus": r || void 0,
+					disabled: a === "busy"
+				}, "Me too");
+				r = !1, t.addEventListener("click", () => this.sendMeToo(e, i, s)), c.append(t, s);
+			} else if (a === "emailed" || !t) c.append(H("p", { class: "known-thanks" }, a === "emailed" ? "Thanks. We'll email you when it's fixed." : "Thanks, we've added you."));
+			else {
+				let t = `pnx-k${i}-email-${this.uid}`, n = `${t}-hint`, r = H("input", {
+					id: t,
+					type: "email",
+					inputmode: "email",
+					autocomplete: "email",
+					maxlength: 254,
+					"aria-describedby": n,
+					"data-key": `known-email-${i}`,
+					placeholder: "you@example.com"
+				});
+				r.value = this.email, r.addEventListener("input", () => {
+					this.email = r.value, this.emailEdited = !0;
+				});
+				let o = H("button", {
+					type: "button",
+					class: "chip primary",
+					"data-key": `known-send-${i}`,
+					disabled: a === "sending"
+				}, a === "sending" ? "Sending…" : "Send");
+				o.addEventListener("click", () => this.sendMeToo(e, i, s, r)), c.append(H("p", { class: "known-thanks" }, "Thanks, we've added you."), H("div", { class: "field" }, H("label", { for: t }, "Email me when it's fixed"), r, H("span", {
+					class: "hint",
+					id: n
+				}, "Only used to tell you when it's fixed.")), s, o);
+			}
+			n.append(c);
+		});
+		let i = H("button", {
+			type: "button",
+			class: "link",
+			"data-key": "known-else"
+		}, "Report something else");
+		return i.addEventListener("click", () => {
+			for (let t of e) this.knownHidden.add(t.id);
+			this.kinds.length === 1 ? this.pick(this.kinds[0]) : (this.render(), this.panel.querySelector(".choice")?.focus());
+		}), [n, i];
+	}
+	async sendMeToo(e, t, n, r) {
+		let i = this.meToo[e.id];
+		if (i === "busy" || i === "sending") return;
+		n.textContent = "";
+		let a = r ? this.email.trim() : void 0;
+		if (r && (!a || !d(a))) {
+			n.textContent = "Please check your email address.", r.setAttribute("aria-invalid", "true"), r.setAttribute("aria-errormessage", n.id), r.focus();
+			return;
+		}
+		this.meToo[e.id] = r ? "sending" : "busy", this.renderKeepingFocus();
+		let o = !1;
+		try {
+			o = await this.handlers.meToo?.(e.id, a) ?? !1;
+		} catch {
+			o = !1;
+		}
+		if (o || r ? this.meToo[e.id] = o && r ? "emailed" : "done" : delete this.meToo[e.id], !this.isOpen() || this.view !== "choose") return;
+		this.render();
+		let s = (e) => this.panel.querySelector(`[data-key="${e}"]`);
+		if (o) (s(`known-email-${t}`) ?? s("known-else"))?.focus(), this.announce(r ? "Thanks. We'll email you when it's fixed." : "Thanks, we've added you.");
+		else {
+			let e = this.panel.querySelector(`#pnx-k${t}-err-${this.uid}`);
+			e && (e.textContent = "Something went wrong. Please try again."), s(r ? `known-send-${t}` : `metoo-${t}`)?.focus();
+		}
+	}
+	renderShot(e) {
+		let t = this.shot;
+		if (t.kind === "none") {
+			if (e.type === "GENERAL") return null;
+			let t = H("button", {
+				type: "button",
+				class: "chip",
+				"data-key": "add-shot"
+			}, W(G.camera), "Add a screenshot");
+			return t.addEventListener("click", () => this.capture()), H("div", { class: "shot-actions" }, t);
+		}
+		if (t.kind === "busy") return H("div", {
+			class: "shot",
+			"aria-busy": "true"
+		}, H("span", { class: "wait" }, "Taking a screenshot…"));
+		if (t.kind === "failed") {
+			let e = H("button", {
+				type: "button",
+				class: "chip",
+				"data-key": "retry-shot"
+			}, "Try again");
+			return e.addEventListener("click", () => this.capture()), H("div", { class: "field" }, H("span", { class: "hint" }, "Couldn't take a screenshot of this page."), H("div", { class: "shot-actions" }, e));
+		}
+		let n = t.shot.annotations.length, r = t.shot.autoBlurred ?? 0, i = H("img", {
+			src: t.shot.dataUrl,
+			alt: `Screenshot of this page${n ? ` with ${n} ${n === 1 ? "mark" : "marks"}` : ""}${r ? `, ${r} private ${r === 1 ? "detail" : "details"} blurred` : ""}`
+		}), a = H("button", {
+			type: "button",
+			class: "chip primary",
+			"data-markup": !0,
+			"data-key": "markup"
+		}, W(G.pen), n ? "Edit marks" : "Mark up");
+		a.addEventListener("click", () => this.markUp());
+		let o = H("button", {
+			type: "button",
+			class: "chip",
+			"data-key": "remove-shot"
+		}, W(G.trash), "Remove", H("span", { class: "sr" }, " screenshot"));
+		return o.addEventListener("click", () => {
+			this.shot = { kind: "none" }, this.announce("Screenshot removed."), this.render(), this.panel.querySelector("[data-key=\"add-shot\"]")?.focus();
+		}), H("div", { class: "field" }, H("div", { class: "shot" }, i, H("span", {
+			class: "tag",
+			"aria-hidden": "true"
+		}, "Screenshot")), H("div", { class: "shot-actions" }, a, o), r ? H("span", { class: "hint auto-blur" }, H("i", { "aria-hidden": "true" }), `We blurred ${r === 1 ? "1 private detail" : `${r} private details`} for you.`) : null);
+	}
+	renderStars() {
+		let e = H("div", {
+			class: "stars",
+			role: "radiogroup",
+			"aria-labelledby": `pnx-rate-${this.uid}`
+		}), t = [], n = (this.rating ?? 1) - 1;
+		for (let e = 1; e <= 5; e++) {
+			let r = H("button", {
+				type: "button",
+				class: this.rating !== void 0 && e <= this.rating ? "star on" : "star",
+				role: "radio",
+				"aria-checked": this.rating === e ? "true" : "false",
+				"aria-label": `${e} ${e === 1 ? "star" : "stars"}`,
+				tabindex: e - 1 === n ? 0 : -1,
+				"data-key": `star-${e}`
+			}, "★");
+			r.addEventListener("click", () => {
+				this.rating = this.rating === e ? void 0 : e, this.renderKeepingFocus();
+			}), r.addEventListener("keydown", (e) => {
+				let t = e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : 0;
+				if (!t) return;
+				e.preventDefault();
+				let n = Math.min(5, Math.max(1, (this.rating ?? 0) + t || 1));
+				this.rating = n, this.render(), this.panel.querySelector(`[data-key="star-${n}"]`)?.focus();
+			}), t.push(r);
+		}
+		return e.append(...t), H("div", { class: "field" }, H("span", {
+			class: "legend",
+			id: `pnx-rate-${this.uid}`
+		}, "How's your visit so far? (optional)"), e);
+	}
+	renderForm(e) {
+		if (e.type === "ACCESSIBILITY") return this.renderAccessibility(e);
+		let t = e.type === "GENERAL" && this.config.settings.rating !== !1, n = this.kindTitle(e, t ? "How was your visit?" : e.label), r = [this.header(n, this.kinds.length > 1)], i = this.renderShot(e);
+		i && r.push(i), t && r.push(this.renderStars());
+		let a = `pnx-msg-${this.uid}`, o = H("textarea", {
+			id: a,
+			maxlength: 5e3,
+			"data-key": "message",
+			"data-autofocus": e.type !== "PROBLEM" && !t || void 0,
+			placeholder: this.word("messagePlaceholder", e.type === "PROBLEM" ? "What happened?" : e.type === "IDEA" ? "What would make this better?" : "Tell us what you think")
+		});
+		return o.value = this.message, o.addEventListener("input", () => {
+			this.message = o.value;
+		}), r.push(H("div", { class: "field" }, H("label", { for: a }, e.type === "PROBLEM" ? "What went wrong?" : e.type === "IDEA" ? "Your idea" : "Anything to add?"), o)), r.push(...this.renderFields(e)), r.push(...this.renderEmailAndSend(e, o, e.type === "PROBLEM" ? "Only used to tell you about this report." : "Only used to reply to you about this.")), r;
+	}
+	renderEmailAndSend(e, t, n) {
+		let r = [], i = `pnx-email-${this.uid}`, a = `pnx-email-hint-${this.uid}`, o = H("input", {
+			id: i,
+			type: "email",
+			inputmode: "email",
+			autocomplete: "email",
+			maxlength: 320,
+			"aria-describedby": a,
+			"data-key": "email",
+			placeholder: "you@example.com"
+		});
+		o.value = this.email, o.addEventListener("input", () => {
+			this.email = o.value, this.emailEdited = !0;
+		}), r.push(H("div", { class: "field" }, H("label", { for: i }, "Your email (optional)"), o, H("span", {
+			class: "hint",
+			id: a
+		}, n)));
+		let s = H("p", {
+			class: "error",
+			role: "alert",
+			id: `pnx-err-${this.uid}`
+		}), c = H("button", {
+			type: "button",
+			class: "send",
+			"data-key": "send",
+			"aria-describedby": `pnx-notice-${this.uid}`,
+			disabled: this.sending
+		}, this.sending ? "Sending…" : "Send");
+		return this.colourSend(c, e), c.addEventListener("click", () => this.send(e, s, o, t)), r.push(this.renderPrivacy(), this.honeypot(), s, c), r;
+	}
+	attachments() {
+		try {
+			return this.handlers.attachments?.() ?? {
+				logs: !0,
+				askLogs: !1,
+				replay: !1
+			};
+		} catch {
+			return {
+				logs: !1,
+				askLogs: !1,
+				replay: !1
+			};
+		}
+	}
+	renderPrivacy() {
+		let e = this.attachments();
+		this.shown = e;
+		let t = H("div", { class: "privacy" });
+		if (e.askLogs) {
+			let e = `pnx-logs-${this.uid}`, n = H("input", {
+				id: e,
+				type: "checkbox",
+				"data-key": "include-logs"
+			});
+			n.checked = this.includeLogs, n.addEventListener("change", () => {
+				this.includeLogs = n.checked, this.updateNotice();
+			}), t.append(H("div", { class: "field check" }, n, H("label", { for: e }, "Include technical details (console messages and failed requests) to help fix this")));
+		}
+		this.noticeText = H("span", {});
+		let n = H("p", {
+			class: "notice",
+			id: `pnx-notice-${this.uid}`
+		}, this.noticeText), r = this.config.settings.privacyUrl;
+		return r && /^https:\/\//i.test(r) && n.append(" ", H("a", {
+			href: r,
+			target: "_blank",
+			rel: "noopener noreferrer"
+		}, "Privacy policy", H("span", { class: "sr" }, " (opens in a new tab)"))), t.append(n), this.privacy = t, this.updateNotice(), t;
+	}
+	updateNotice() {
+		if (!this.noticeText) return;
+		let e = this.shown, t = ["the page address", "your browser details"];
+		this.shot.kind === "ready" && t.push("the screenshot"), (e.logs || e.askLogs && this.includeLogs) && t.push("technical logs"), e.replay && t.push("a recording of the last 30 seconds");
+		let n = "";
+		try {
+			n = this.handlers.site?.() ?? "";
+		} catch {}
+		n = n || location.hostname.replace(/^www\./, "") || "this website", this.noticeText.textContent = `Sent to ${n} with your note: ${t.join(", ")}.`;
+	}
+	refresh() {
+		let e = this.privacy;
+		if (!e?.isConnected) return;
+		let t = this.attachments();
+		if (t.askLogs === this.shown.askLogs) {
+			this.shown = t, this.updateNotice();
+			return;
+		}
+		let n = e.contains(this.root.activeElement), r = this.renderPrivacy();
+		e.replaceWith(r), n && (r.querySelector("input") ?? this.panel.querySelector("[data-key=\"send\"]"))?.focus();
+	}
+	renderAccessibility(e) {
+		let t = [this.header(this.kindTitle(e), this.kinds.length > 1)], n = `pnx-a11y-note-${this.uid}`;
+		t.push(H("p", {
+			class: "a11y-note",
+			id: n
+		}, "We'll pass this to the team that runs this website. We also check this page for common accessibility problems and send the results with it."));
+		let r = `pnx-barrier-${this.uid}`, i = H("fieldset", {
+			class: "field barriers",
+			"aria-labelledby": r,
+			"aria-describedby": n
+		}, H("legend", {
+			class: "legend",
+			id: r
+		}, "What's getting in the way? ", H("span", { class: "optional" }, "(optional)")));
+		X.forEach(([e, t], n) => {
+			let r = `pnx-b${n}-${this.uid}`, a = H("input", {
+				id: r,
+				type: "radio",
+				name: `pnx-barrier-${this.uid}`,
+				value: e,
+				"data-key": `barrier-${e}`,
+				"data-autofocus": (this.barrier ? this.barrier === e : n === 0) || void 0
+			});
+			a.checked = this.barrier === e, a.addEventListener("change", () => {
+				a.checked && (this.barrier = e);
+			}), i.append(H("div", { class: "radio" }, a, H("label", { for: r }, t)));
+		}), t.push(i);
+		let a = `pnx-msg-${this.uid}`, o = H("textarea", {
+			id: a,
+			maxlength: 5e3,
+			"data-key": "message",
+			"aria-describedby": n,
+			placeholder: this.word("messagePlaceholder", "For example: I couldn't reach the Pay button with the Tab key")
+		});
+		o.value = this.message, o.addEventListener("input", () => {
+			this.message = o.value;
+		}), t.push(H("div", { class: "field" }, H("label", { for: a }, "What were you trying to do, and what stopped you?"), o));
+		let s = this.renderShot(e);
+		return s && t.push(s), t.push(...this.renderEmailAndSend(e, o, "Only used to reply to you about this.")), t;
+	}
+	honeypot() {
+		let e = H("input", {
+			type: "text",
+			name: "website",
+			tabindex: -1,
+			autocomplete: "off",
+			"aria-label": "Leave this empty"
+		});
+		e.value = this.hp, e.addEventListener("input", () => {
+			this.hp = e.value;
+		});
+		let t = H("div", { "aria-hidden": "true" }, e);
+		return t.style.cssText = "position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden", t;
+	}
+	async send(e, t, n, r) {
+		if (this.sending) return;
+		t.textContent = "", n.removeAttribute("aria-invalid");
+		let i = this.email.trim();
+		if (i && !d(i)) {
+			t.textContent = "Please check your email address, or leave it empty.", n.setAttribute("aria-invalid", "true"), n.setAttribute("aria-errormessage", t.id), n.focus();
+			return;
+		}
+		if (this.shot.kind === "busy") {
+			t.textContent = "One moment, the screenshot is still being taken.";
+			return;
+		}
+		for (let n of this.fieldsFor(e)) {
+			let e = this.answers[n.id];
+			if (!n.required || (n.type === "checkbox" ? e === !0 : e)) continue;
+			let r = this.panel.querySelector(`[data-key="field-${n.id}"]`);
+			t.textContent = n.type === "checkbox" ? `Please tick “${n.label}”.` : n.type === "select" ? `Please choose an answer for “${n.label}”.` : `Please fill in “${n.label}”.`, r?.setAttribute("aria-invalid", "true"), r?.setAttribute("aria-errormessage", t.id), r?.focus();
+			return;
+		}
+		let a = this.shot.kind === "ready" ? this.shot.shot : void 0, o = e.type === "GENERAL" ? this.rating : void 0;
+		if (!m({
+			type: e.type,
+			message: this.message,
+			rating: o,
+			screenshot: a?.dataUrl,
+			barrier: e.type === "ACCESSIBILITY" ? this.barrier : void 0
+		})) {
+			t.textContent = e.type === "GENERAL" && this.config.settings.rating !== !1 ? "Add a few words or a star rating." : e.type === "ACCESSIBILITY" ? "Choose what's in the way, or add a few words." : "Add a few words so we know what you mean.", r.focus();
+			return;
+		}
+		this.sending = !0, this.renderKeepingFocus(), this.announce("Sending…");
+		let s = await this.askFollowUp(e);
+		this.view !== "form" || this.kind !== e || !this.isOpen() ? (this.sending = !1, this.isOpen() && this.renderKeepingFocus()) : s ? (this.sending = !1, this.view = "question", this.render(), this.focusFirst()) : await this.submitNow(e, i, o, a);
+	}
+	async askFollowUp(e) {
+		let t = this.handlers.followUp, n = this.message.trim();
+		if (!t || e.type === "GENERAL" || e.type === "ACCESSIBILITY" || !n || n.length > 140) return null;
+		if (this.asked?.message === n) return this.asked.question;
+		let r = null;
+		try {
+			r = (await t({
+				type: e.type,
+				message: n
+			}))?.trim() || null;
+		} catch {
+			r = null;
+		}
+		return this.asked = {
+			message: n,
+			question: r?.slice(0, 300) || null
+		}, this.asked.question;
+	}
+	async submitNow(e, t, n, r, i) {
+		this.sending = !0, this.renderKeepingFocus();
+		let a;
+		try {
+			a = await this.handlers.submit({
+				type: e.type,
+				message: this.message,
+				rating: n,
+				email: t || void 0,
+				shot: r,
+				followUp: i,
+				fields: this.fieldAnswers(e),
+				barrier: e.type === "ACCESSIBILITY" ? this.barrier : void 0,
+				includeLogs: this.shown.askLogs && this.includeLogs ? !0 : void 0,
+				listed: {
+					logs: this.shown.logs || this.shown.askLogs && this.includeLogs,
+					replay: this.shown.replay
+				},
+				hp: this.hp || void 0,
+				elapsedMs: this.openedAt ? Math.max(0, Date.now() - this.openedAt) : void 0
+			});
+		} catch {
+			a = {
+				status: "error",
+				message: "Something went wrong. Please try again."
+			};
+		}
+		if (this.sending = !1, a.status === "error") {
+			this.view = "form", this.render();
+			let e = this.panel.querySelector(".error");
+			e && (e.textContent = a.message), this.panel.querySelector("[data-key=\"send\"]")?.focus();
+		} else this.queued = a.status === "queued", this.view = "done", this.render(), this.focusFirst(), this.announce(this.queued ? "Saved. We'll send it when you're back online." : this.word("confirmation", $)), this.closeTimer = setTimeout(() => this.close(this.panel.contains(this.root.activeElement)), Z);
+	}
+	renderQuestion(e, t) {
+		let n = [this.header("One quick question", !0, () => {
+			this.view = "form", this.render(), this.panel.querySelector("[data-key=\"message\"]")?.focus();
+		})], r = H("div", { class: "note" }, H("span", {
+			class: "dot",
+			"aria-hidden": "true"
+		}), H("span", {}, H("span", { class: "sr" }, "Your note: "), `“${this.message.trim()}”`));
+		r.style.setProperty("--dot", e.dot), n.push(r);
+		let i = `pnx-answer-${this.uid}`, a = `pnx-answer-hint-${this.uid}`, o = H("textarea", {
+			id: i,
+			class: "answer",
+			maxlength: 2e3,
+			"data-key": "answer",
+			"data-autofocus": !0,
+			"aria-describedby": a,
+			placeholder: "Your answer"
+		});
+		o.value = this.answer, o.addEventListener("input", () => {
+			this.answer = o.value;
+		}), n.push(H("div", { class: "field" }, H("label", {
+			for: i,
+			class: "question"
+		}, t), o, H("span", {
+			class: "hint",
+			id: a
+		}, "Optional. It helps us fix it faster.")));
+		let s = H("p", {
+			class: "error",
+			role: "alert"
+		}), c = this.email.trim(), l = e.type === "GENERAL" ? this.rating : void 0, u = this.shot.kind === "ready" ? this.shot.shot : void 0, d = H("button", {
+			type: "button",
+			class: "send",
+			"data-key": "send",
+			disabled: this.sending
+		}, this.sending ? "Sending…" : "Send");
+		this.colourSend(d, e), d.addEventListener("click", () => {
+			if (this.sending) return;
+			let n = this.answer.trim();
+			this.announce("Sending…"), this.submitNow(e, c, l, u, n ? {
+				question: t,
+				answer: n.slice(0, 2e3)
+			} : void 0);
+		});
+		let f = H("button", {
+			type: "button",
+			class: "link skip",
+			"data-key": "skip",
+			disabled: this.sending
+		}, "Skip and send");
+		return f.addEventListener("click", () => {
+			this.sending || (this.announce("Sending…"), this.submitNow(e, c, l, u));
+		}), n.push(s, d, f), n;
+	}
+	colourSend(e, t) {
+		let n = this.sendColour ?? t.send;
+		e.style.setProperty("--type", n), e.style.setProperty("--type-ink", this.sendColour ? B(n) : t.ink);
+	}
+	fieldsFor(e) {
+		if (e.key === "accessibility") return [];
+		let t = e.key;
+		return (this.config.settings.fields ?? []).filter((e) => e.types?.[t] !== !1);
+	}
+	fieldAnswers(e) {
+		let t = [];
+		for (let n of this.fieldsFor(e)) {
+			let e = this.answers[n.id];
+			n.type === "checkbox" ? t.push({
+				id: n.id,
+				value: e === !0
+			}) : typeof e == "string" && e.trim() && t.push({
+				id: n.id,
+				value: e.trim()
+			});
+		}
+		return t.length ? t : void 0;
+	}
+	renderFields(e) {
+		return this.fieldsFor(e).map((e, t) => {
+			let n = `pnx-f${t}-${this.uid}`, r = `field-${e.id}`, i = (e) => {
+				e.removeAttribute("aria-invalid"), e.removeAttribute("aria-errormessage");
+			}, a = (t) => H("label", {
+				for: n,
+				class: t
+			}, e.label, e.required ? null : H("span", { class: "optional" }, " (optional)"));
+			if (e.type === "checkbox") {
+				let t = H("input", {
+					id: n,
+					type: "checkbox",
+					"data-key": r,
+					"aria-required": e.required ? "true" : void 0
+				});
+				return t.checked = this.answers[e.id] === !0, t.addEventListener("change", () => {
+					this.answers[e.id] = t.checked, i(t);
+				}), H("div", { class: "field check" }, t, a());
+			}
+			if (e.type === "select") {
+				let t = H("select", {
+					id: n,
+					"data-key": r,
+					"aria-required": e.required ? "true" : void 0
+				}, H("option", { value: "" }, "Choose…"), ...e.options.map((e) => H("option", { value: e }, e)));
+				return t.value = String(this.answers[e.id] ?? ""), t.addEventListener("change", () => {
+					this.answers[e.id] = t.value, i(t);
+				}), H("div", { class: "field" }, a(), t);
+			}
+			let o = H("input", {
+				id: n,
+				type: "text",
+				maxlength: 200,
+				"data-key": r,
+				"aria-required": e.required ? "true" : void 0
+			});
+			return o.value = String(this.answers[e.id] ?? ""), o.addEventListener("input", () => {
+				this.answers[e.id] = o.value, i(o);
+			}), H("div", { class: "field" }, a(), o);
+		});
+	}
+	renderDone() {
+		let e = H("button", {
+			type: "button",
+			class: "link",
+			"data-key": "again"
+		}, "Send another");
+		e.addEventListener("click", () => {
+			this.reset(), this.render(), this.focusFirst();
+		});
+		let t = H("div", { class: "head" });
+		t.append(H("span", { class: "title" }));
+		let n = H("button", {
+			type: "button",
+			class: "icon-btn",
+			"aria-label": "Close feedback"
+		});
+		return n.append(W(G.close)), n.addEventListener("click", () => this.close()), t.append(n), [t, H("div", { class: "done" }, H("span", {
+			class: "tick",
+			"aria-hidden": "true"
+		}, "✓"), H("h2", {
+			class: "title",
+			id: `pnx-title-${this.uid}`,
+			tabindex: -1,
+			"data-autofocus": !0
+		}, this.queued ? "Saved for later" : this.word("confirmation", $)), this.queued ? H("p", {}, "You're offline. We'll send it as soon as you're back.", this.email.trim() ? " If you leave this page first, it goes without your email address." : "") : null, e)];
+	}
+};
+export { N as a, o as c, g as d, F as i, b as l, q as n, L as o, H as r, k as s, te as t, v as u };
+
+//# sourceMappingURL=widget-BpTBdX2R.mjs.map