@burdenoff/microfe-channel 2026.624.2 → 2026.625.1

package/dist/channel/modules/channels/pages/WebhookEventsPage.js

@@ -1,335 +1,334 @@
 import { useChannel as e } from "../../../providers/ChannelProvider.js";
 import { emitShellEvent as t } from "../../../utils/shellBridge.js";
 import { WEBHOOK_RECEIVED_SUBSCRIPTION as n, useChannelSubscription as r } from "../../../hooks/useChannelSubscription.js";
-import { useChannel as i } from "../../../hooks/useChannels.js";
-import { PermissionGuard as a } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as o } from "../../../constants/permissions.js";
-import { useExportWebhookEvents as s } from "../hooks/useExport.js";
-import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
-import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as p, ArrowLeft as m, CheckCircle2 as h, ChevronLeft as g, ChevronRight as ee, Clock as _, Download as v, Eye as y, EyeOff as b, Loader2 as x, RefreshCw as S, XCircle as C } from "lucide-react";
-import { useNavigate as te, useParams as ne } from "react-router-dom";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useChannel as ee } from "../../../hooks/useChannels.js";
+import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
+import { useExportWebhookEvents as o } from "../hooks/useExport.js";
+import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
+import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as d, ArrowLeft as ne, CheckCircle2 as f, ChevronLeft as p, ChevronRight as m, Clock as h, Download as re, Eye as g, EyeOff as _, Loader2 as v, RefreshCw as y, XCircle as b } from "lucide-react";
+import { useNavigate as x, useParams as ie } from "react-router-dom";
+import { usePermissions as ae } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { CTAOverflowMenu as oe, GlassCard as T } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/WebhookEventsPage.tsx
-var D = {
+var E = {
 	PENDING: {
 		label: "Pending",
 		color: "text-text-secondary bg-bg-sunken",
-		icon: _
+		icon: h
 	},
 	PROCESSING: {
 		label: "Processing",
 		color: "text-accent-primary bg-accent-primary/10",
-		icon: S
+		icon: y
 	},
 	COMPLETED: {
 		label: "Completed",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: h
+		icon: f
 	},
 	FAILED: {
 		label: "Failed",
 		color: "text-status-error-text bg-status-error-bg-subtle",
-		icon: C
+		icon: b
 	},
 	IGNORED: {
 		label: "Ignored",
 		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: b
+		icon: _
 	}
 };
-function O() {
-	let { channelId: h } = ne(), _ = te(), { t: C } = f(), O = (e, t) => {
-		let n = C(e);
+function D() {
+	let { channelId: f } = ie(), h = x(), { hasPermission: b } = ae(), D = b(a.CHANNEL_WEBHOOK_EXPORT), { t: O } = te(), k = (e, t) => {
+		let n = O(e);
 		return n === e ? t : n;
-	}, { organizationId: k } = e(), { triggerExport: A, isExporting: j, exportError: M } = s(k ?? void 0, h), [N, P] = d(!0), [F, I] = d([]), [re, ie] = d(null), [L, R] = d(25), [z, B] = d(0), [V, H] = d([void 0]), [U, W] = d(0), { channel: G, isLoading: K, error: q, fetchWebhookEvents: J } = i(h), Y = c(async (e) => {
-		if (h) {
-			P(!0);
+	}, { organizationId: se } = e(), { triggerExport: ce, isExporting: A, exportError: j } = o(se ?? void 0, f), [M, N] = u(!0), [P, F] = u([]), [I, L] = u(null), [R, z] = u(25), [B, V] = u(0), [H, U] = u([void 0]), [W, G] = u(0), { channel: K, isLoading: le, error: q, fetchWebhookEvents: J } = ee(f), Y = s(async (e) => {
+		if (f) {
+			N(!0);
 			try {
-				let t = await J(L, e);
-				return I(t.items), B(t.total), t.nextCursor;
+				let t = await J(R, e);
+				return F(t.items), V(t.total), t.nextCursor;
 			} finally {
-				P(!1);
+				N(!1);
 			}
 		}
 	}, [
-		h,
+		f,
 		J,
-		L
-	]), X = u(Y), Z = u(V), Q = u(U);
-	l(() => {
-		X.current = Y, Z.current = V, Q.current = U;
+		R
+	]), X = l(Y), Z = l(H), Q = l(W);
+	c(() => {
+		X.current = Y, Z.current = H, Q.current = W;
 	});
-	let $ = u(!0);
-	l(() => {
+	let $ = l(!0);
+	c(() => {
 		Promise.resolve().then(() => {
-			H([void 0]), W(0), X.current(void 0);
+			U([void 0]), G(0), X.current(void 0);
 		});
-	}, [L]), l(() => {
+	}, [R]), c(() => {
 		if ($.current) {
 			$.current = !1;
 			return;
 		}
-		Promise.resolve().then(() => X.current(Z.current[U]));
-	}, [U]);
-	let ae = c(async () => {
-		let e = await Y(V[U]);
-		e && H((t) => {
+		Promise.resolve().then(() => X.current(Z.current[W]));
+	}, [W]);
+	let ue = s(async () => {
+		let e = await Y(H[W]);
+		e && U((t) => {
 			let n = [...t];
-			return n[U + 1] || (n[U + 1] = e), n;
-		}), W((e) => e + 1);
+			return n[W + 1] || (n[W + 1] = e), n;
+		}), G((e) => e + 1);
 	}, [
-		V,
-		U,
+		H,
+		W,
 		Y
-	]), oe = c(() => {
-		let e = U - 1;
-		W(e), Y(V[e]);
+	]), de = s(() => {
+		let e = W - 1;
+		G(e), Y(H[e]);
 	}, [
-		V,
-		U,
+		H,
+		W,
 		Y
-	]), se = F.length === L, ce = U > 0;
+	]), fe = P.length === R, pe = W > 0;
 	r({
 		query: n,
-		variables: { channelId: h },
+		variables: { channelId: f },
 		operationName: "WebhookReceived",
-		enabled: !!h,
-		onData: c(() => {
-			t("webhook.received", { channelId: h }), X.current(Z.current[Q.current]);
-		}, [h]),
-		pollFn: c(() => {
+		enabled: !!f,
+		onData: s(() => {
+			t("webhook.received", { channelId: f }), X.current(Z.current[Q.current]);
+		}, [f]),
+		pollFn: s(() => {
 			X.current(Z.current[Q.current]);
 		}, []),
 		pollIntervalMs: 6e4
 	});
-	let le = (e) => D[e] || D.PENDING;
-	return K ? /* @__PURE__ */ T("div", {
+	let me = (e) => E[e] || E.PENDING;
+	return le ? /* @__PURE__ */ C("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ T(x, {
+		children: /* @__PURE__ */ C(v, {
 			size: 32,
 			className: "animate-spin text-accent-primary"
 		})
-	}) : q || !G ? /* @__PURE__ */ T("div", {
+	}) : q || !K ? /* @__PURE__ */ C("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ E("div", {
+		children: /* @__PURE__ */ w("div", {
 			className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 			children: [
-				/* @__PURE__ */ T(p, {
+				/* @__PURE__ */ C(d, {
 					size: 20,
 					className: "text-status-error-text"
 				}),
-				/* @__PURE__ */ T("div", { children: /* @__PURE__ */ T("p", {
+				/* @__PURE__ */ C("div", { children: /* @__PURE__ */ C("p", {
 					className: "text-sm font-medium text-status-error-text",
 					children: q || "Channel not found"
 				}) }),
-				/* @__PURE__ */ T("button", {
+				/* @__PURE__ */ C("button", {
 					type: "button",
-					onClick: () => _(`/channels/${h}`),
+					onClick: () => h(`/channels/${f}`),
 					className: "ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
 					children: "Go Back"
 				})
 			]
 		})
-	}) : /* @__PURE__ */ T(a, {
-		permission: o.CHANNEL_WEBHOOK_READ,
-		children: /* @__PURE__ */ E("div", {
+	}) : /* @__PURE__ */ C(i, {
+		permission: a.CHANNEL_WEBHOOK_READ,
+		children: /* @__PURE__ */ w("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ w("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ E("div", {
+					children: [/* @__PURE__ */ w("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ T("button", {
+						children: [/* @__PURE__ */ C("button", {
 							type: "button",
-							onClick: () => _(`/channels/${h}`),
-							"aria-label": O("channel.backToChannel", "Back to channel"),
+							onClick: () => h(`/channels/${f}`),
+							"aria-label": k("channel.backToChannel", "Back to channel"),
 							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors",
-							children: /* @__PURE__ */ T(m, {
+							children: /* @__PURE__ */ C(ne, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h1", {
+						}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("h1", {
 							className: "text-xl sm:text-2xl font-bold text-text-primary",
-							children: O("channel.webhookEvents", "Webhook Events")
-						}), /* @__PURE__ */ E("p", {
+							children: k("channel.webhookEvents", "Webhook Events")
+						}), /* @__PURE__ */ w("p", {
 							className: "text-sm text-text-secondary mt-1",
-							children: [G.name, " - Event history"]
+							children: [K.name, " - Event history"]
 						})] })]
-					}), /* @__PURE__ */ E("div", {
+					}), /* @__PURE__ */ w("div", {
 						className: "flex items-center gap-3",
-						children: [
-							/* @__PURE__ */ E("select", {
-								value: L,
-								onChange: (e) => R(Number(e.target.value)),
-								className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary",
-								children: [
-									/* @__PURE__ */ T("option", {
-										value: 10,
-										children: "10 results"
-									}),
-									/* @__PURE__ */ T("option", {
-										value: 25,
-										children: "25 results"
-									}),
-									/* @__PURE__ */ T("option", {
-										value: 50,
-										children: "50 results"
-									}),
-									/* @__PURE__ */ T("option", {
-										value: 100,
-										children: "100 results"
-									})
-								]
+						children: [/* @__PURE__ */ w("select", {
+							value: R,
+							onChange: (e) => z(Number(e.target.value)),
+							className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary",
+							children: [
+								/* @__PURE__ */ C("option", {
+									value: 10,
+									children: "10 results"
+								}),
+								/* @__PURE__ */ C("option", {
+									value: 25,
+									children: "25 results"
+								}),
+								/* @__PURE__ */ C("option", {
+									value: 50,
+									children: "50 results"
+								}),
+								/* @__PURE__ */ C("option", {
+									value: 100,
+									children: "100 results"
+								})
+							]
+						}), /* @__PURE__ */ C(oe, { actions: [{
+							label: k("channel.refresh", "Refresh"),
+							icon: /* @__PURE__ */ C(y, {
+								size: 16,
+								className: M ? "animate-spin" : "",
+								"aria-hidden": "true"
 							}),
-							/* @__PURE__ */ E("button", {
-								type: "button",
-								onClick: () => void Y(V[U]),
-								disabled: N,
-								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50",
-								children: [/* @__PURE__ */ T(S, {
-									size: 16,
-									className: N ? "animate-spin" : ""
-								}), O("channel.refresh", "Refresh")]
+							disabled: M,
+							onSelect: () => void Y(H[W])
+						}, ...D ? [{
+							label: k("channel.export", "Export"),
+							icon: A ? /* @__PURE__ */ C(v, {
+								size: 16,
+								className: "animate-spin",
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ C(re, {
+								size: 16,
+								"aria-hidden": "true"
 							}),
-							/* @__PURE__ */ T(a, {
-								permission: o.CHANNEL_WEBHOOK_EXPORT,
-								children: /* @__PURE__ */ E("button", {
-									type: "button",
-									onClick: () => void A(),
-									disabled: j,
-									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border-subtle hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-									title: O("channel.exportCSV", "Export to CSV"),
-									children: [j ? /* @__PURE__ */ T(x, {
-										size: 16,
-										className: "animate-spin"
-									}) : /* @__PURE__ */ T(v, { size: 16 }), O("channel.export", "Export")]
-								})
-							})
-						]
+							disabled: A,
+							onSelect: () => void ce()
+						}] : []] })]
 					})]
 				}),
-				M && /* @__PURE__ */ E("div", {
+				j && /* @__PURE__ */ w("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
-					children: [/* @__PURE__ */ T(p, {
+					children: [/* @__PURE__ */ C(d, {
 						size: 20,
 						className: "text-status-error-text"
-					}), /* @__PURE__ */ T("p", {
+					}), /* @__PURE__ */ C("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: M
+						children: j
 					})]
 				}),
-				/* @__PURE__ */ T("div", {
-					className: "p-4 bg-surface border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ T("p", {
+				/* @__PURE__ */ C(T, {
+					treatment: "insight",
+					className: "p-4 border-border-seam",
+					children: /* @__PURE__ */ C("p", {
 						className: "text-sm text-text-secondary",
 						children: "Webhook events show all incoming webhooks received by this channel. Data is retained for 7 days."
 					})
 				}),
-				/* @__PURE__ */ T("div", {
-					className: "bg-surface border border-border-subtle rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ T("div", {
+				/* @__PURE__ */ C(T, {
+					treatment: "plain",
+					className: "border-border-seam rounded-lg overflow-hidden p-0",
+					children: /* @__PURE__ */ C("div", {
 						className: "overflow-x-auto min-w-full",
-						children: /* @__PURE__ */ E("table", {
+						children: /* @__PURE__ */ w("table", {
 							className: "w-full min-w-[600px]",
-							children: [/* @__PURE__ */ T("thead", {
+							children: [/* @__PURE__ */ C("thead", {
 								className: "bg-bg-sunken/50 border-b border-border-subtle",
-								children: /* @__PURE__ */ E("tr", { children: [
-									/* @__PURE__ */ T("th", {
+								children: /* @__PURE__ */ w("tr", { children: [
+									/* @__PURE__ */ C("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.status", "Status")
+										children: k("channel.status", "Status")
 									}),
-									/* @__PURE__ */ T("th", {
+									/* @__PURE__ */ C("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.eventType", "Event Type")
+										children: k("channel.eventType", "Event Type")
 									}),
-									/* @__PURE__ */ T("th", {
+									/* @__PURE__ */ C("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.duplicate", "Duplicate")
+										children: k("channel.duplicate", "Duplicate")
 									}),
-									/* @__PURE__ */ T("th", {
+									/* @__PURE__ */ C("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.processedAt", "Processed At")
+										children: k("channel.processedAt", "Processed At")
 									}),
-									/* @__PURE__ */ T("th", {
+									/* @__PURE__ */ C("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.error", "Error")
+										children: k("channel.error", "Error")
 									}),
-									/* @__PURE__ */ T("th", {
+									/* @__PURE__ */ C("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.actions", "Actions")
+										children: k("channel.actions", "Actions")
 									})
 								] })
-							}), /* @__PURE__ */ T("tbody", {
+							}), /* @__PURE__ */ C("tbody", {
 								className: "divide-y divide-border",
-								children: F.length === 0 ? /* @__PURE__ */ T("tr", { children: /* @__PURE__ */ T("td", {
+								children: P.length === 0 ? /* @__PURE__ */ C("tr", { children: /* @__PURE__ */ C("td", {
 									colSpan: 6,
 									className: "px-4 py-8 text-center text-text-secondary",
-									children: O("channel.noWebhookEventsFound", "No webhook events found")
-								}) }) : F.map((e) => {
-									let t = le(e.status), n = t.icon, r = re === e.id;
-									return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E("tr", {
+									children: k("channel.noWebhookEventsFound", "No webhook events found")
+								}) }) : P.map((e) => {
+									let t = me(e.status), n = t.icon, r = I === e.id;
+									return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("tr", {
 										className: "hover:bg-bg-sunken/30 transition-colors",
 										children: [
-											/* @__PURE__ */ T("td", {
+											/* @__PURE__ */ C("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ E("div", {
+												children: /* @__PURE__ */ w("div", {
 													className: "flex items-center gap-2",
-													children: [/* @__PURE__ */ T(n, {
+													children: [/* @__PURE__ */ C(n, {
 														size: 14,
 														className: t.color.split(" ")[0]
-													}), /* @__PURE__ */ T("span", {
+													}), /* @__PURE__ */ C("span", {
 														className: `text-sm font-medium ${t.color}`,
 														children: t.label
 													})]
 												})
 											}),
-											/* @__PURE__ */ T("td", {
+											/* @__PURE__ */ C("td", {
 												className: "px-4 py-3 text-sm font-mono text-text-primary",
 												children: e.eventType
 											}),
-											/* @__PURE__ */ T("td", {
+											/* @__PURE__ */ C("td", {
 												className: "px-4 py-3",
-												children: e.isDuplicate ? /* @__PURE__ */ T("span", {
+												children: e.isDuplicate ? /* @__PURE__ */ C("span", {
 													className: "text-xs text-status-warning-text bg-status-warning-bg-subtle px-2 py-1 rounded",
 													children: "Duplicate"
-												}) : /* @__PURE__ */ T("span", {
+												}) : /* @__PURE__ */ C("span", {
 													className: "text-xs text-text-secondary",
 													children: "No"
 												})
 											}),
-											/* @__PURE__ */ T("td", {
+											/* @__PURE__ */ C("td", {
 												className: "px-4 py-3 text-sm text-text-secondary",
 												children: e.processedAt ? new Date(e.processedAt).toLocaleString() : "-"
 											}),
-											/* @__PURE__ */ T("td", {
+											/* @__PURE__ */ C("td", {
 												className: "px-4 py-3 text-sm text-status-error-text max-w-xs truncate",
 												children: e.errorMessage || "-"
 											}),
-											/* @__PURE__ */ T("td", {
+											/* @__PURE__ */ C("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ T("button", {
+												children: /* @__PURE__ */ C("button", {
 													type: "button",
-													onClick: () => ie(r ? null : e.id),
-													"aria-label": r ? O("channel.hidePayload", "Hide payload") : O("channel.viewPayload", "View payload"),
+													onClick: () => L(r ? null : e.id),
+													"aria-label": r ? k("channel.hidePayload", "Hide payload") : k("channel.viewPayload", "View payload"),
 													"aria-expanded": r,
 													className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded transition-colors",
-													children: T(r ? b : y, {
+													children: C(r ? _ : g, {
 														size: 16,
 														"aria-hidden": "true"
 													})
 												})
 											})
 										]
-									}, e.id), r && /* @__PURE__ */ T("tr", { children: /* @__PURE__ */ T("td", {
+									}, e.id), r && /* @__PURE__ */ C("tr", { children: /* @__PURE__ */ C("td", {
 										colSpan: 6,
 										className: "px-4 py-3 bg-bg-sunken/30",
-										children: /* @__PURE__ */ E("div", {
+										children: /* @__PURE__ */ w("div", {
 											className: "text-xs",
-											children: [/* @__PURE__ */ E("p", {
+											children: [/* @__PURE__ */ w("p", {
 												className: "text-text-secondary mb-1",
-												children: [O("channel.payload", "Payload"), ":"]
-											}), /* @__PURE__ */ T("pre", {
+												children: [k("channel.payload", "Payload"), ":"]
+											}), /* @__PURE__ */ C("pre", {
 												className: "bg-surface p-2 rounded border border-border-subtle overflow-auto",
 												children: JSON.stringify(e.payload, null, 2)
 											})]
@@ -340,39 +339,39 @@ function O() {
 						})
 					})
 				}),
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ w("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ T("p", {
+					children: [/* @__PURE__ */ C("p", {
 						className: "text-sm text-text-secondary",
-						children: z > 0 && /* @__PURE__ */ E(w, { children: [
-							O("channel.page", "Page"),
+						children: B > 0 && /* @__PURE__ */ w(S, { children: [
+							k("channel.page", "Page"),
 							" ",
-							/* @__PURE__ */ T("span", {
+							/* @__PURE__ */ C("span", {
 								className: "font-medium",
-								children: U + 1
+								children: W + 1
 							}),
 							" · ",
-							O("channel.totalRecords", "Total"),
+							k("channel.totalRecords", "Total"),
 							": ",
-							/* @__PURE__ */ T("span", {
+							/* @__PURE__ */ C("span", {
 								className: "font-medium",
-								children: z
+								children: B
 							})
 						] })
-					}), /* @__PURE__ */ E("div", {
+					}), /* @__PURE__ */ w("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ E("button", {
+						children: [/* @__PURE__ */ w("button", {
 							type: "button",
-							onClick: oe,
-							disabled: !ce || N,
+							onClick: de,
+							disabled: !pe || M,
 							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-							children: [/* @__PURE__ */ T(g, { size: 16 }), O("channel.previous", "Previous")]
-						}), /* @__PURE__ */ E("button", {
+							children: [/* @__PURE__ */ C(p, { size: 16 }), k("channel.previous", "Previous")]
+						}), /* @__PURE__ */ w("button", {
 							type: "button",
-							onClick: () => void ae(),
-							disabled: !se || N,
+							onClick: () => void ue(),
+							disabled: !fe || M,
 							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-							children: [O("channel.next", "Next"), /* @__PURE__ */ T(ee, { size: 16 })]
+							children: [k("channel.next", "Next"), /* @__PURE__ */ C(m, { size: 16 })]
 						})]
 					})]
 				})
@@ -381,6 +380,6 @@ function O() {
 	});
 }
 //#endregion
-export { O as WebhookEventsPage };
+export { D as WebhookEventsPage };
 
 //# sourceMappingURL=WebhookEventsPage.js.map