zudoku 0.0.0-fdfe742 → 0.0.0-fe92c9e1

package/lib/zudoku.plugin-api-keys.js

@@ -1,50 +1,56 @@
-import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import { CheckIcon as _, XIcon as se, PencilLineIcon as ne, RotateCwIcon as ie, EyeOffIcon as re, EyeIcon as ae, CopyIcon as oe, TrashIcon as le, KeyRoundIcon as de } from "lucide-react";
-import { D as ce, S as F, R as ue } from "./Slot-xguyqKKU.js";
-import { i as P } from "./invariant-DAFpPywt.js";
-import { O as he, L as Q } from "./chunk-DQRVZFIR-BblmKnHy.js";
-import { i as fe, k as pe, e as xe, d as me } from "./hook-k7PfUIsj.js";
-import { Button as j } from "./ui/Button.js";
-import { u as z } from "./useMutation-CZSmsIGW.js";
-import * as S from "react";
-import ye, { createContext as q, useRef as D, useLayoutEffect as ge, useEffect as B, useId as L, useContext as O, useInsertionEffect as je, useMemo as M, useCallback as Ce, Children as ve, isValidElement as we, useState as E } from "react";
-import { C as ke, a as be } from "./Card-DPhGbYUM.js";
-import { D as U, e as W, a as X, b as Y, c as G, d as J, f as V, g as K } from "./Dialog-B53OMCvW.js";
-import { Input as Ee } from "./ui/Input.js";
-import { c as R } from "./cn-wvCW-ho6.js";
-const De = () => {
-  const t = fe();
-  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(he, {}) : t.isAuthEnabled ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
+import { j as e } from "./jsx-runtime-BzflLqGi.js";
+import { CircleSlashIcon as z, CheckIcon as ue, XIcon as he, PencilLineIcon as fe, RefreshCwIcon as pe, TrashIcon as me, KeyRoundIcon as xe } from "lucide-react";
+import { R as ye } from "./RouterError-BsnUU8eo.js";
+import { i as I } from "./invariant-Bm-FVUQE.js";
+import { O as ge, u as je } from "./chunk-PVWAREVJ-BMhpCH5D.js";
+import { u as Ce } from "./hook-CMeoxziF.js";
+import { D as ve, a as Y } from "./ErrorAlert-B4eXGBQj.js";
+import { Button as w } from "./ui/Button.js";
+import { a as se, g as ne, b as we } from "./ZudokuContext-BUZ5hkWB.js";
+import { u as O, A as M, a as q, b as ke, S as be, c as Ne, d as Ke, e as Ee, f as De, g as Z, h as Ae } from "./Select-C1DeCqKv.js";
+import * as L from "react";
+import Pe, { createContext as Q, useRef as E, useLayoutEffect as Ie, useEffect as re, useId as _, useContext as B, useInsertionEffect as Re, useMemo as F, useCallback as Se, Children as Te, isValidElement as Oe, useState as K, forwardRef as Me } from "react";
+import { C as qe, a as $e } from "./Card-KFniaZn5.js";
+import { e as H, f as D, D as V, g as G, a as J, b as U, c as W, d as ie } from "./Dialog-BQciPiHN.js";
+import { Input as ae } from "./ui/Input.js";
+import { c as A } from "./cn-dYga0KKN.js";
+import { a as ze } from "./index.esm-BYObtETB.js";
+import { B as Fe } from "./Button-B3ucvvQw.js";
+import { S as Le } from "./Spinner-CI6bRyZw.js";
+import { useAuth as Qe } from "./zudoku.hooks.js";
+const _e = () => {
+  const t = Ce();
+  return t.isAuthEnabled && t.isPending ? null : t.isAuthEnabled ? t.isAuthenticated ? /* @__PURE__ */ e.jsx(ge, {}) : /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
     "Please login first to view this page",
-    /* @__PURE__ */ e.jsx(j, { onClick: () => t.login(), children: "Login" })
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: /* @__PURE__ */ e.jsxs(ce, { className: "max-w-[600px]", children: [
+    /* @__PURE__ */ e.jsx(w, { onClick: () => t.login(), children: "Login" })
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: /* @__PURE__ */ e.jsxs(ve, { className: "max-w-[600px]", children: [
     "Authentication needs to be enabled for API keys to work. Enable it in your Zudoku configuration under ",
     /* @__PURE__ */ e.jsx("code", { children: "authentication" }),
     "."
   ] }) });
-}, Pe = q({});
-function Z(t) {
-  const i = D(null);
-  return i.current === null && (i.current = t()), i.current;
+}, Be = Q({});
+function oe(t) {
+  const r = E(null);
+  return r.current === null && (r.current = t()), r.current;
 }
-const Ie = typeof window < "u", Ne = Ie ? ge : B, ee = /* @__PURE__ */ q(null);
-function Ke(t) {
+const He = typeof window < "u", Ve = He ? Ie : re, le = /* @__PURE__ */ Q(null);
+function Ge(t) {
   return typeof t == "object" && t !== null;
 }
-function Re(t) {
-  return Ke(t) && "offsetHeight" in t;
+function Je(t) {
+  return Ge(t) && "offsetHeight" in t;
 }
-const Ae = q({
+const Ue = Q({
   transformPagePoint: (t) => t,
   isStatic: !1,
   reducedMotion: "never"
 });
-class Te extends S.Component {
-  getSnapshotBeforeUpdate(i) {
+class We extends L.Component {
+  getSnapshotBeforeUpdate(r) {
     const s = this.props.childRef.current;
-    if (s && i.isPresent && !this.props.isPresent) {
-      const n = s.offsetParent, o = Re(n) && n.offsetWidth || 0, r = this.props.sizeRef.current;
-      r.height = s.offsetHeight || 0, r.width = s.offsetWidth || 0, r.top = s.offsetTop, r.left = s.offsetLeft, r.right = o - r.width - r.left;
+    if (s && r.isPresent && !this.props.isPresent) {
+      const n = s.offsetParent, i = Je(n) && n.offsetWidth || 0, a = this.props.sizeRef.current;
+      a.height = s.offsetHeight || 0, a.width = s.offsetWidth || 0, a.top = s.offsetTop, a.left = s.offsetLeft, a.right = i - a.width - a.left;
     }
     return null;
   }
@@ -57,223 +63,355 @@ class Te extends S.Component {
     return this.props.children;
   }
 }
-function ze({ children: t, isPresent: i, anchorX: s }) {
-  const n = L(), o = D(null), r = D({
+function Xe({ children: t, isPresent: r, anchorX: s, root: n }) {
+  const i = _(), a = E(null), l = E({
     width: 0,
     height: 0,
     top: 0,
     left: 0,
     right: 0
-  }), { nonce: u } = O(Ae);
-  return je(() => {
-    const { width: m, height: h, top: x, left: d, right: c } = r.current;
-    if (i || !o.current || !m || !h)
+  }), { nonce: u } = B(Ue);
+  return Re(() => {
+    const { width: h, height: d, top: g, left: f, right: m } = l.current;
+    if (r || !a.current || !h || !d)
       return;
-    const y = s === "left" ? `left: ${d}` : `right: ${c}`;
-    o.current.dataset.motionPopId = n;
-    const f = document.createElement("style");
-    return u && (f.nonce = u), document.head.appendChild(f), f.sheet && f.sheet.insertRule(`
-          [data-motion-pop-id="${n}"] {
+    const p = s === "left" ? `left: ${f}` : `right: ${m}`;
+    a.current.dataset.motionPopId = i;
+    const x = document.createElement("style");
+    u && (x.nonce = u);
+    const j = n ?? document.head;
+    return j.appendChild(x), x.sheet && x.sheet.insertRule(`
+          [data-motion-pop-id="${i}"] {
             position: absolute !important;
-            width: ${m}px !important;
-            height: ${h}px !important;
-            ${y}px !important;
-            top: ${x}px !important;
+            width: ${h}px !important;
+            height: ${d}px !important;
+            ${p}px !important;
+            top: ${g}px !important;
           }
         `), () => {
-      document.head.contains(f) && document.head.removeChild(f);
+      j.contains(x) && j.removeChild(x);
     };
-  }, [i]), e.jsx(Te, { isPresent: i, childRef: o, sizeRef: r, children: S.cloneElement(t, { ref: o }) });
+  }, [r]), e.jsx(We, { isPresent: r, childRef: a, sizeRef: l, children: L.cloneElement(t, { ref: a }) });
 }
-const Me = ({ children: t, initial: i, isPresent: s, onExitComplete: n, custom: o, presenceAffectsLayout: r, mode: u, anchorX: m }) => {
-  const h = Z(Se), x = L();
-  let d = !0, c = M(() => (d = !1, {
-    id: x,
-    initial: i,
+const Ye = ({ children: t, initial: r, isPresent: s, onExitComplete: n, custom: i, presenceAffectsLayout: a, mode: l, anchorX: u, root: h }) => {
+  const d = oe(Ze), g = _();
+  let f = !0, m = F(() => (f = !1, {
+    id: g,
+    initial: r,
     isPresent: s,
-    custom: o,
-    onExitComplete: (y) => {
-      h.set(y, !0);
-      for (const f of h.values())
-        if (!f)
+    custom: i,
+    onExitComplete: (p) => {
+      d.set(p, !0);
+      for (const x of d.values())
+        if (!x)
           return;
       n && n();
     },
-    register: (y) => (h.set(y, !1), () => h.delete(y))
-  }), [s, h, n]);
-  return r && d && (c = { ...c }), M(() => {
-    h.forEach((y, f) => h.set(f, !1));
-  }, [s]), S.useEffect(() => {
-    !s && !h.size && n && n();
-  }, [s]), u === "popLayout" && (t = e.jsx(ze, { isPresent: s, anchorX: m, children: t })), e.jsx(ee.Provider, { value: c, children: t });
+    register: (p) => (d.set(p, !1), () => d.delete(p))
+  }), [s, d, n]);
+  return a && f && (m = { ...m }), F(() => {
+    d.forEach((p, x) => d.set(x, !1));
+  }, [s]), L.useEffect(() => {
+    !s && !d.size && n && n();
+  }, [s]), l === "popLayout" && (t = e.jsx(Xe, { isPresent: s, anchorX: u, root: h, children: t })), e.jsx(le.Provider, { value: m, children: t });
 };
-function Se() {
+function Ze() {
   return /* @__PURE__ */ new Map();
 }
-function qe(t = !0) {
-  const i = O(ee);
-  if (i === null)
+function et(t = !0) {
+  const r = B(le);
+  if (r === null)
     return [!0, null];
-  const { isPresent: s, onExitComplete: n, register: o } = i, r = L();
-  B(() => {
+  const { isPresent: s, onExitComplete: n, register: i } = r, a = _();
+  re(() => {
     if (t)
-      return o(r);
+      return i(a);
   }, [t]);
-  const u = Ce(() => t && n && n(r), [r, n, t]);
-  return !s && n ? [!1, u] : [!0];
+  const l = Se(() => t && n && n(a), [a, n, t]);
+  return !s && n ? [!1, l] : [!0];
 }
-const I = (t) => t.key || "";
-function H(t) {
-  const i = [];
-  return ve.forEach(t, (s) => {
-    we(s) && i.push(s);
-  }), i;
+const R = (t) => t.key || "";
+function ee(t) {
+  const r = [];
+  return Te.forEach(t, (s) => {
+    Oe(s) && r.push(s);
+  }), r;
 }
-const Le = ({ children: t, custom: i, initial: s = !0, onExitComplete: n, presenceAffectsLayout: o = !0, mode: r = "sync", propagate: u = !1, anchorX: m = "left" }) => {
-  const [h, x] = qe(u), d = M(() => H(t), [t]), c = u && !h ? [] : d.map(I), y = D(!0), f = D(d), k = Z(() => /* @__PURE__ */ new Map()), [a, l] = E(d), [p, v] = E(d);
-  Ne(() => {
-    y.current = !1, f.current = d;
-    for (let w = 0; w < p.length; w++) {
-      const g = I(p[w]);
-      c.includes(g) ? k.delete(g) : k.get(g) !== !0 && k.set(g, !1);
+const tt = ({ children: t, custom: r, initial: s = !0, onExitComplete: n, presenceAffectsLayout: i = !0, mode: a = "sync", propagate: l = !1, anchorX: u = "left", root: h }) => {
+  const [d, g] = et(l), f = F(() => ee(t), [t]), m = l && !d ? [] : f.map(R), p = E(!0), x = E(f), j = oe(() => /* @__PURE__ */ new Map()), [P, o] = K(f), [c, C] = K(f);
+  Ve(() => {
+    p.current = !1, x.current = f;
+    for (let v = 0; v < c.length; v++) {
+      const y = R(c[v]);
+      m.includes(y) ? j.delete(y) : j.get(y) !== !0 && j.set(y, !1);
     }
-  }, [p, c.length, c.join("-")]);
-  const C = [];
-  if (d !== a) {
-    let w = [...d];
-    for (let g = 0; g < p.length; g++) {
-      const b = p[g], T = I(b);
-      c.includes(T) || (w.splice(g, 0, b), C.push(b));
+  }, [c, m.length, m.join("-")]);
+  const k = [];
+  if (f !== P) {
+    let v = [...f];
+    for (let y = 0; y < c.length; y++) {
+      const N = c[y], $ = R(N);
+      m.includes($) || (v.splice(y, 0, N), k.push(N));
     }
-    return r === "wait" && C.length && (w = C), v(H(w)), l(d), null;
+    return a === "wait" && k.length && (v = k), C(ee(v)), o(f), null;
   }
-  process.env.NODE_ENV !== "production" && r === "wait" && p.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
-  const { forceRender: A } = O(Pe);
-  return e.jsx(e.Fragment, { children: p.map((w) => {
-    const g = I(w), b = u && !h ? !1 : d === p || c.includes(g), T = () => {
-      if (k.has(g))
-        k.set(g, !0);
+  process.env.NODE_ENV !== "production" && a === "wait" && c.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+  const { forceRender: b } = B(Be);
+  return e.jsx(e.Fragment, { children: c.map((v) => {
+    const y = R(v), N = l && !d ? !1 : f === c || m.includes(y), $ = () => {
+      if (j.has(y))
+        j.set(y, !0);
       else
         return;
-      let $ = !0;
-      k.forEach((te) => {
-        te || ($ = !1);
-      }), $ && (A?.(), v(f.current), u && x?.(), n && n());
+      let X = !0;
+      j.forEach((de) => {
+        de || (X = !1);
+      }), X && (b?.(), C(x.current), l && g?.(), n && n());
     };
-    return e.jsx(Me, { isPresent: b, initial: !y.current || s ? void 0 : !1, custom: i, presenceAffectsLayout: o, mode: r, onExitComplete: b ? void 0 : T, anchorX: m, children: w }, g);
+    return e.jsx(Ye, { isPresent: N, initial: !p.current || s ? void 0 : !1, custom: r, presenceAffectsLayout: i, mode: a, root: h, onExitComplete: N ? void 0 : $, anchorX: u, children: v }, y);
   }) });
-}, Oe = ({ service: t }) => {
-  const i = pe(), s = xe(), [n, o] = E(
+}, ce = Me(
+  ({ isPending: t, children: r, className: s, ...n }, i) => /* @__PURE__ */ e.jsxs(
+    Fe,
+    {
+      ref: i,
+      disabled: t,
+      ...n,
+      className: A("relative", s),
+      children: [
+        t && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ e.jsx(Le, {}) }),
+        /* @__PURE__ */ e.jsx("span", { className: A("block", t && "invisible"), children: r })
+      ]
+    }
+  )
+);
+ce.displayName = "ActionButton";
+const st = ({
+  service: t,
+  onOpenChange: r
+}) => {
+  const s = se(), n = ne(), i = je(), a = ze({
+    defaultValues: {
+      expiresOn: "30"
+    }
+  }), l = Qe(), u = O({
+    mutationFn: ({ description: h, expiresOn: d }) => {
+      if (!t.createKey)
+        throw new Error("createKey not implemented");
+      const g = d !== "never" ? nt(Number(d)) : void 0;
+      return t.createKey({
+        apiKey: {
+          description: h || "Secret Key",
+          expiresOn: g
+        },
+        context: s,
+        auth: l
+      });
+    },
+    onSuccess: async () => {
+      await n.invalidateQueries({ queryKey: ["api-keys"] }), await i("/settings/api-keys/");
+    }
+  });
+  return t.createKey ? /* @__PURE__ */ e.jsxs(
+    "form",
+    {
+      onSubmit: a.handleSubmit(
+        (h) => u.mutate(
+          { ...h },
+          {
+            onSuccess: () => r(!1)
+          }
+        )
+      ),
+      children: [
+        u.error && /* @__PURE__ */ e.jsxs(M, { variant: "destructive", className: "mb-4", children: [
+          /* @__PURE__ */ e.jsx(q, { children: "Error" }),
+          /* @__PURE__ */ e.jsx(ke, { children: u.error.message })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col text-sm font-medium", children: [
+          "Name",
+          /* @__PURE__ */ e.jsx(ae, { ...a.register("description") }),
+          "Expiration",
+          /* @__PURE__ */ e.jsxs(
+            be,
+            {
+              onValueChange: (h) => a.setValue("expiresOn", h),
+              defaultValue: a.getValues("expiresOn"),
+              children: [
+                /* @__PURE__ */ e.jsx(Ne, { children: /* @__PURE__ */ e.jsx(Ke, {}) }),
+                /* @__PURE__ */ e.jsx(Ee, { children: /* @__PURE__ */ e.jsxs(De, { children: [
+                  [7, 30, 60, 90].map((h) => /* @__PURE__ */ e.jsxs(Z, { value: String(h), children: [
+                    h,
+                    " days"
+                  ] }, h)),
+                  /* @__PURE__ */ e.jsx(Z, { value: "never", children: "Never" })
+                ] }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e.jsxs(H, { children: [
+            /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(w, { variant: "outline", children: "Cancel" }) }),
+            /* @__PURE__ */ e.jsx(ce, { isPending: u.isPending, children: "Generate Key" })
+          ] })
+        ] })
+      ]
+    }
+  ) : null;
+}, nt = (t) => {
+  const r = /* @__PURE__ */ new Date();
+  return r.setDate(r.getDate() + t), r.toISOString();
+}, te = ({
+  service: t,
+  isOpen: r,
+  onOpenChange: s,
+  trigger: n,
+  buttonVariant: i = "outline"
+}) => {
+  const a = /* @__PURE__ */ e.jsx(w, { variant: i, children: "Create API Key" });
+  return /* @__PURE__ */ e.jsxs(V, { open: r, onOpenChange: s, children: [
+    /* @__PURE__ */ e.jsx(G, { asChild: !0, children: n ?? a }),
+    /* @__PURE__ */ e.jsxs(J, { children: [
+      /* @__PURE__ */ e.jsx(U, { children: /* @__PURE__ */ e.jsx(W, { children: "Create API Key" }) }),
+      /* @__PURE__ */ e.jsx(st, { service: t, onOpenChange: s })
+    ] })
+  ] });
+}, rt = ({ service: t }) => {
+  const r = se(), s = ne(), [n, i] = K(
     null
-  ), [r, u] = E(""), { data: m, isFetching: h } = me({
-    queryFn: () => t.getConsumers(i),
+  ), [a, l] = K(""), { data: u, isFetching: h } = we({
+    queryFn: () => t.getConsumers(r),
     queryKey: ["api-keys"],
     retry: !1
-  }), x = z({
+  }), [d, g] = K(!1), f = O({
     mutationFn: ({
-      consumerId: a,
-      keyId: l
+      consumerId: o,
+      keyId: c
     }) => {
       if (!t.deleteKey)
         throw new Error("deleteKey not implemented");
-      return t.deleteKey(a, l, i);
+      return t.deleteKey(o, c, r);
     },
-    onMutate: async ({ consumerId: a, keyId: l }) => {
+    onMutate: async ({ consumerId: o, keyId: c }) => {
       await s.cancelQueries({ queryKey: ["api-keys"] });
-      const p = s.getQueryData([
+      const C = s.getQueryData([
         "api-keys"
       ]);
-      return s.setQueryData(["api-keys"], (v) => v && v.map((C) => C.id === a ? {
-        ...C,
-        apiKeys: C.apiKeys.filter((A) => A.id !== l)
-      } : C)), { previousData: p };
+      return s.setQueryData(["api-keys"], (k) => k && k.map((b) => b.id === o ? {
+        ...b,
+        apiKeys: b.apiKeys.filter((v) => v.id !== c)
+      } : b)), { previousData: C };
     },
-    onError: (a, l, p) => {
-      p?.previousData && s.setQueryData(["api-keys"], p.previousData);
+    onError: (o, c, C) => {
+      C?.previousData && s.setQueryData(["api-keys"], C.previousData);
     },
     onSuccess: () => {
       s.invalidateQueries({ queryKey: ["api-keys"] });
     }
-  }), d = z({
+  }), m = O({
     mutationFn: ({
-      consumerId: a,
-      label: l
+      consumerId: o,
+      label: c
     }) => {
       if (!t.updateConsumer)
         throw new Error("updateConsumer not implemented");
-      return t.updateConsumer({ id: a, label: l }, i);
+      return t.updateConsumer({ id: o, label: c }, r);
     },
-    onMutate: async ({ consumerId: a, label: l }) => {
+    onMutate: async ({ consumerId: o, label: c }) => {
       await s.cancelQueries({ queryKey: ["api-keys"] });
-      const p = s.getQueryData(["api-keys"]);
-      return s.setQueryData(["api-keys"], (v) => v && v.map((C) => C.id === a ? {
-        ...C,
-        label: l
-      } : C)), { previousData: p };
+      const C = s.getQueryData(["api-keys"]);
+      return s.setQueryData(["api-keys"], (k) => k && k.map((b) => b.id === o ? {
+        ...b,
+        label: c
+      } : b)), { previousData: C };
     },
-    onError: (a, l, p) => {
-      p?.previousData && s.setQueryData(["api-keys"], p.previousData);
+    onError: (o, c, C) => {
+      C?.previousData && s.setQueryData(["api-keys"], C.previousData);
     },
     onSuccess: () => {
       s.invalidateQueries({ queryKey: ["api-keys"] });
     }
-  }), c = z({
-    mutationFn: (a) => {
+  }), p = O({
+    mutationFn: (o) => {
       if (!t.rollKey)
         throw new Error("rollKey not implemented");
-      return t.rollKey(a, i);
+      return t.rollKey(o, r);
     },
     onSuccess: () => s.invalidateQueries({ queryKey: ["api-keys"] })
-  }), y = (a, l) => {
-    o(a), u(l);
-  }, f = (a) => {
-    r.trim() && d.mutate({
-      consumerId: a,
-      label: r.trim()
-    }), o(null), u("");
-  }, k = () => {
-    o(null), u("");
+  }), x = (o, c) => {
+    i(o), l(c);
+  }, j = (o) => {
+    a.trim() && m.mutate({
+      consumerId: o,
+      label: a.trim()
+    }), i(null), l("");
+  }, P = () => {
+    i(null), l("");
   };
-  return /* @__PURE__ */ e.jsxs("div", { className: "max-w-screen-lg h-full pt-(--padding-content-top) pb-(--padding-content-bottom)", children: [
-    /* @__PURE__ */ e.jsx(F.Target, { name: "api-keys-list-page" }),
+  return /* @__PURE__ */ e.jsxs("div", { className: "max-w-screen-md h-full pt-(--padding-content-top) pb-(--padding-content-bottom)", children: [
+    /* @__PURE__ */ e.jsx(Y.Target, { name: "api-keys-list-page" }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between pb-3", children: [
       /* @__PURE__ */ e.jsx("h1", { className: "font-medium text-2xl", children: "API Keys" }),
-      t.createKey && /* @__PURE__ */ e.jsx(j, { asChild: !0, children: /* @__PURE__ */ e.jsx(Q, { to: "/settings/api-keys/new", children: "Create API Key" }) })
+      t.createKey && /* @__PURE__ */ e.jsx(
+        te,
+        {
+          service: t,
+          isOpen: d,
+          onOpenChange: g
+        }
+      )
     ] }),
     /* @__PURE__ */ e.jsx("p", { children: "Create, manage, and monitor your API keys" }),
-    /* @__PURE__ */ e.jsx(F.Target, { name: "api-keys-list-page-before-keys" }),
+    /* @__PURE__ */ e.jsx(Y.Target, { name: "api-keys-list-page-before-keys" }),
     /* @__PURE__ */ e.jsx("div", { className: "h-8" }),
-    /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-8", children: m.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground", children: [
+    p.isError && /* @__PURE__ */ e.jsxs(M, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx(z, { size: 16 }),
+      /* @__PURE__ */ e.jsx(q, { children: p.error.message })
+    ] }),
+    m.isError && /* @__PURE__ */ e.jsxs(M, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx(z, { size: 16 }),
+      /* @__PURE__ */ e.jsx(q, { children: m.error.message })
+    ] }),
+    f.isError && /* @__PURE__ */ e.jsxs(M, { variant: "destructive", className: "mb-4", children: [
+      /* @__PURE__ */ e.jsx(z, { size: 16 }),
+      /* @__PURE__ */ e.jsx(q, { children: f.error.message })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "", children: u.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground", children: [
       /* @__PURE__ */ e.jsxs("p", { className: "text-center", children: [
         "You have no API keys yet.",
         /* @__PURE__ */ e.jsx("br", {}),
         t.createKey && "Get started and create your first key."
       ] }),
-      t.createKey && /* @__PURE__ */ e.jsx(j, { asChild: !0, variant: "outline", children: /* @__PURE__ */ e.jsx(Q, { to: "/settings/api-keys/new", children: "Create API Key" }) })
+      t.createKey && /* @__PURE__ */ e.jsx(
+        te,
+        {
+          service: t,
+          isOpen: d,
+          onOpenChange: g
+        }
+      )
     ] }) : /* @__PURE__ */ e.jsx(
       "ul",
       {
-        className: R(
-          "grid grid-cols-1 divide-y divide-border col-span-6",
-          "lg:grid-cols-[1fr_min-content]"
+        className: A(
+          "grid grid-cols-[1fr_min-content] divide-y divide-border col-span-6"
         ),
-        children: m.map((a) => /* @__PURE__ */ e.jsxs(
-          ke,
+        children: u.map((o) => /* @__PURE__ */ e.jsxs(
+          qe,
           {
             className: "grid grid-cols-subgrid col-span-full items-center mb-4 group",
             children: [
-              /* @__PURE__ */ e.jsxs(be, { className: "border-b col-span-full grid-cols-subgrid grid", children: [
+              /* @__PURE__ */ e.jsxs($e, { className: "border-b col-span-full grid-cols-subgrid grid", children: [
                 /* @__PURE__ */ e.jsxs("div", { className: "h-10 flex flex-col text-sm justify-center", children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "font-medium text-lg flex items-center gap-2", children: [
-                    n === a.id ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                    n === o.id ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
                       /* @__PURE__ */ e.jsx(
-                        Ee,
+                        ae,
                         {
                           maxLength: 32,
-                          value: r,
-                          onChange: (l) => u(l.target.value),
-                          onKeyDown: (l) => {
-                            l.key === "Enter" ? f(a.id) : l.key === "Escape" && k();
+                          value: a,
+                          onChange: (c) => l(c.target.value),
+                          onKeyDown: (c) => {
+                            c.key === "Enter" ? j(o.id) : c.key === "Escape" && P();
                           },
                           className: "text-lg font-medium",
                           autoFocus: !0
@@ -281,79 +419,90 @@ const Le = ({ children: t, custom: i, initial: s = !0, onExitComplete: n, presen
                       ),
                       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
                         /* @__PURE__ */ e.jsx(
-                          j,
+                          w,
                           {
                             size: "icon",
                             variant: "ghost",
-                            onClick: () => f(a.id),
-                            disabled: !r.trim(),
-                            children: /* @__PURE__ */ e.jsx(_, { size: 16 })
+                            onClick: () => j(o.id),
+                            disabled: !a.trim(),
+                            children: /* @__PURE__ */ e.jsx(ue, { size: 16 })
                           }
                         ),
                         /* @__PURE__ */ e.jsx(
-                          j,
+                          w,
                           {
                             size: "icon",
                             variant: "ghost",
-                            onClick: k,
-                            children: /* @__PURE__ */ e.jsx(se, { size: 16 })
+                            onClick: P,
+                            children: /* @__PURE__ */ e.jsx(he, { size: 16 })
                           }
                         )
                       ] })
-                    ] }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: a.label }),
-                    /* @__PURE__ */ e.jsx("div", { className: "text-muted-foreground text-xs", children: a.createdOn })
+                    ] }) : o.label,
+                    /* @__PURE__ */ e.jsx("div", { className: "text-muted-foreground text-xs", children: o.createdOn })
                   ] }),
                   /* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground text-xs", children: [
-                    a.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                    o.createdOn && /* @__PURE__ */ e.jsxs("div", { children: [
                       "Created on",
                       " ",
-                      new Date(a.createdOn).toLocaleDateString()
+                      new Date(o.createdOn).toLocaleDateString()
                     ] }),
-                    a.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
+                    o.expiresOn && /* @__PURE__ */ e.jsxs("div", { children: [
                       "Expires on",
                       " ",
-                      new Date(a.expiresOn).toLocaleDateString()
+                      new Date(o.expiresOn).toLocaleDateString()
                     ] })
                   ] })
                 ] }),
                 /* @__PURE__ */ e.jsxs("div", { className: "flex justify-end", children: [
-                  t.updateConsumer && /* @__PURE__ */ e.jsx(
-                    j,
+                  t.updateConsumer && /* @__PURE__ */ e.jsxs(
+                    w,
                     {
-                      size: "icon",
                       variant: "ghost",
-                      onClick: () => y(a.id, a.label),
-                      className: R(
-                        n === a.id && "opacity-0! pointer-events-none"
+                      onClick: () => x(o.id, o.label),
+                      className: A(
+                        "flex gap-2",
+                        n === o.id && "opacity-0! pointer-events-none"
                       ),
-                      disabled: n === a.id,
-                      children: /* @__PURE__ */ e.jsx(ne, { size: 16 })
+                      disabled: n === o.id,
+                      children: [
+                        /* @__PURE__ */ e.jsx(fe, { size: 16 }),
+                        /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Edit label" })
+                      ]
                     }
                   ),
-                  t.rollKey && /* @__PURE__ */ e.jsxs(U, { children: [
-                    /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-                      j,
+                  t.rollKey && /* @__PURE__ */ e.jsxs(V, { children: [
+                    /* @__PURE__ */ e.jsx(G, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+                      w,
                       {
-                        size: "icon",
                         title: "Roll this key",
                         variant: "ghost",
-                        disabled: c.isPending,
-                        className: c.isPending ? "animate-spin" : void 0,
-                        children: /* @__PURE__ */ e.jsx(ie, { size: 16 })
+                        disabled: p.isPending,
+                        className: "flex items-center gap-2",
+                        children: [
+                          /* @__PURE__ */ e.jsx(
+                            pe,
+                            {
+                              size: 16,
+                              className: p.isPending ? "animate-spin" : void 0
+                            }
+                          ),
+                          /* @__PURE__ */ e.jsx("span", { className: "hidden md:block", children: "Roll key" })
+                        ]
                       }
                     ) }),
-                    /* @__PURE__ */ e.jsxs(X, { children: [
-                      /* @__PURE__ */ e.jsxs(Y, { children: [
-                        /* @__PURE__ */ e.jsx(G, { children: "Roll API Key" }),
-                        /* @__PURE__ */ e.jsx(J, { children: "Are you sure you want to roll this API key?" })
+                    /* @__PURE__ */ e.jsxs(J, { children: [
+                      /* @__PURE__ */ e.jsxs(U, { children: [
+                        /* @__PURE__ */ e.jsx(W, { children: "Roll API Key" }),
+                        /* @__PURE__ */ e.jsx(ie, { children: "Are you sure you want to roll this API key?" })
                       ] }),
-                      /* @__PURE__ */ e.jsxs(V, { children: [
-                        /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(j, { variant: "outline", children: "Cancel" }) }),
-                        /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-                          j,
+                      /* @__PURE__ */ e.jsxs(H, { children: [
+                        /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(w, { variant: "outline", children: "Cancel" }) }),
+                        /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+                          w,
                           {
                             onClick: () => {
-                              c.mutate(a.id);
+                              p.mutate(o.id);
                             },
                             children: "Roll Key"
                           }
@@ -363,116 +512,87 @@ const Le = ({ children: t, custom: i, initial: s = !0, onExitComplete: n, presen
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ e.jsx("div", { className: "col-span-full grid-cols-subgrid grid", children: /* @__PURE__ */ e.jsx(Le, { children: a.apiKeys.map((l) => /* @__PURE__ */ e.jsxs(ye.Fragment, { children: [
+              /* @__PURE__ */ e.jsx("div", { className: "col-span-full grid-cols-subgrid grid", children: /* @__PURE__ */ e.jsx(tt, { children: o.apiKeys.map((c) => /* @__PURE__ */ e.jsxs(Pe.Fragment, { children: [
                 /* @__PURE__ */ e.jsx(
-                  Fe,
+                  at,
                   {
-                    apiKey: l,
+                    apiKey: c,
                     onDeleteKey: () => {
-                      x.mutate({
-                        consumerId: a.id,
-                        keyId: l.id
+                      f.mutate({
+                        consumerId: o.id,
+                        keyId: c.id
                       });
                     },
-                    className: x.variables?.keyId === l.id && (x.isPending || h) ? "opacity-10!" : void 0
+                    className: f.variables?.keyId === c.id && (f.isPending || h) ? "opacity-10!" : void 0
                   }
                 ),
                 /* @__PURE__ */ e.jsx("div", { className: "col-span-full h-px bg-border" })
-              ] }, l.id)) }) })
+              ] }, c.id)) }) })
             ]
           },
-          a.id
+          o.id
         ))
       }
     ) })
   ] });
-}, $e = (t) => {
-  const i = /* @__PURE__ */ new Date(), s = new Date(t), n = Math.floor((i.getTime() - s.getTime()) / 1e3), o = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-  return n < 60 ? o.format(-n, "second") : n < 3600 ? o.format(-Math.floor(n / 60), "minute") : n < 86400 ? o.format(-Math.floor(n / 3600), "hour") : n < 2592e3 ? o.format(-Math.floor(n / 86400), "day") : n < 31536e3 ? o.format(-Math.floor(n / 2592e3), "month") : o.format(-Math.floor(n / 31536e3), "year");
-}, Fe = ({
+}, it = (t) => {
+  const r = /* @__PURE__ */ new Date(), s = new Date(t), n = Math.floor((r.getTime() - s.getTime()) / 1e3), i = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return n < 60 ? i.format(-n, "second") : n < 3600 ? i.format(-Math.floor(n / 60), "minute") : n < 86400 ? i.format(-Math.floor(n / 3600), "hour") : n < 2592e3 ? i.format(-Math.floor(n / 86400), "day") : n < 31536e3 ? i.format(-Math.floor(n / 2592e3), "month") : i.format(-Math.floor(n / 31536e3), "year");
+}, at = ({
   apiKey: t,
-  onDeleteKey: i,
+  onDeleteKey: r,
   className: s
 }) => {
-  const [n, o] = E(!1), [r, u] = E(!1), { key: m, createdOn: h, expiresOn: x } = t, d = x && new Date(x) < /* @__PURE__ */ new Date(), c = x ? Math.ceil(
-    (new Date(x).getTime() - (/* @__PURE__ */ new Date()).getTime()) / (1e3 * 60 * 60 * 24)
-  ) : 1 / 0, y = c <= 7 && !d;
-  return /* @__PURE__ */ e.jsxs("div", { className: R("grid col-span-full grid-cols-subgrid p-6", s), children: [
+  const [n, i] = K(!1), { key: a, createdOn: l, expiresOn: u } = t, h = u && new Date(u) < /* @__PURE__ */ new Date(), d = u ? Math.ceil(
+    (new Date(u).getTime() - Date.now()) / (1e3 * 60 * 60 * 24)
+  ) : 1 / 0, g = d <= 7 && !h;
+  return /* @__PURE__ */ e.jsxs("div", { className: A("grid col-span-full grid-cols-subgrid p-6", s), children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center text-sm border rounded-md w-fit px-1", children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "font-mono truncate h-9 items-center flex px-2 text-xs gap-2", children: [
-          /* @__PURE__ */ e.jsx(
-            "div",
-            {
-              className: R(
-                "rounded-full w-2 h-2 bg-emerald-400 mr-2",
-                (y || d) && "bg-neutral-200"
-              )
-            }
-          ),
-          /* @__PURE__ */ e.jsxs("span", { children: [
-            /* @__PURE__ */ e.jsx("span", { className: n ? "" : "opacity-20", children: n ? m.slice(0, -5) : "**** ".repeat(m.slice(0, -5).length / 5) + "*".repeat(m.slice(0, -5).length % 5) }),
-            /* @__PURE__ */ e.jsx("span", { children: m.slice(-5) })
-          ] })
-        ] }),
-        /* @__PURE__ */ e.jsx(
-          j,
-          {
-            variant: "ghost",
-            onClick: () => o((f) => !f),
-            size: "icon",
-            children: n ? /* @__PURE__ */ e.jsx(re, { size: 16 }) : /* @__PURE__ */ e.jsx(ae, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          j,
-          {
-            variant: "ghost",
-            onClick: () => {
-              navigator.clipboard.writeText(m).then(() => {
-                u(!0), setTimeout(() => u(!1), 2e3);
-              });
-            },
-            size: "icon",
-            children: r ? /* @__PURE__ */ e.jsx(_, { size: 16 }) : /* @__PURE__ */ e.jsx(oe, { size: 16 })
-          }
-        )
-      ] }),
+      /* @__PURE__ */ e.jsx(
+        Ae,
+        {
+          className: "max-w-fit w-full",
+          secret: a,
+          status: h ? "expired" : g ? "expiring" : "active",
+          revealed: n,
+          onReveal: i
+        }
+      ),
       /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 mt-0.5 text-nowrap", children: [
-        h && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        l && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
           "Created ",
-          $e(h),
+          it(l),
           "."
         ] }),
         " ",
-        x && y && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+        u && g && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
           "Expires in ",
-          c,
+          d,
           " ",
-          c === 1 ? "day" : "days",
+          d === 1 ? "day" : "days",
           "."
         ] }),
-        x && d && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
+        u && h && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-primary", children: [
           "Expired",
           " ",
-          c === 0 ? "today." : `${c * -1} days ago.`
+          d === 0 ? "today." : `${d * -1} days ago.`
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: d && i && /* @__PURE__ */ e.jsxs(U, { children: [
-      /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(j, { variant: "ghost", size: "icon", children: /* @__PURE__ */ e.jsx(le, { size: 16 }) }) }),
-      /* @__PURE__ */ e.jsxs(X, { children: [
-        /* @__PURE__ */ e.jsxs(Y, { children: [
-          /* @__PURE__ */ e.jsx(G, { children: "Delete API Key" }),
-          /* @__PURE__ */ e.jsx(J, { children: "Are you sure you want to delete this API key?" })
+    /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: u && r && /* @__PURE__ */ e.jsxs(V, { children: [
+      /* @__PURE__ */ e.jsx(G, { asChild: !0, children: /* @__PURE__ */ e.jsx(w, { variant: "ghost", size: "icon", children: /* @__PURE__ */ e.jsx(me, { size: 16 }) }) }),
+      /* @__PURE__ */ e.jsxs(J, { children: [
+        /* @__PURE__ */ e.jsxs(U, { children: [
+          /* @__PURE__ */ e.jsx(W, { children: "Delete API Key" }),
+          /* @__PURE__ */ e.jsx(ie, { children: "Are you sure you want to delete this API key?" })
         ] }),
-        /* @__PURE__ */ e.jsxs(V, { children: [
-          /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(j, { variant: "outline", children: "Cancel" }) }),
-          /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-            j,
+        /* @__PURE__ */ e.jsxs(H, { children: [
+          /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(w, { variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ e.jsx(D, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+            w,
             {
               onClick: () => {
-                i();
+                r();
               },
               children: "Delete"
             }
@@ -481,89 +601,101 @@ const Le = ({ children: t, custom: i, initial: s = !0, onExitComplete: n, presen
       ] })
     ] }) })
   ] });
-}, N = "https://api.zuploedge.com/v2/client", Qe = (t) => ({
-  deleteKey: async (i, s, n) => {
-    const o = new Request(
-      N + `/${t}/consumers/${i}/keys/${s}`,
+}, S = "https://api.zuploedge.com/v2/client", ot = async (t) => {
+  try {
+    return await t.json();
+  } catch {
+    return;
+  }
+}, T = async (t) => {
+  const r = t.headers.get("content-type");
+  if (!t.ok && r?.includes("application/problem+json")) {
+    const s = await ot(t);
+    if (s.type && s.title)
+      throw new Error(s.detail ?? s.title);
+  }
+}, lt = (t, r) => ({
+  deleteKey: async (s, n, i) => {
+    const a = new Request(
+      S + `/${t}/consumers/${s}/keys/${n}`,
       {
         method: "DELETE"
       }
     );
-    await n.signRequest(o);
-    const r = await fetch(o);
-    P(r.ok, "Failed to delete API key");
+    await i.signRequest(a);
+    const l = await fetch(a);
+    await T(l), I(l.ok, "Failed to delete API key");
   },
-  updateConsumer: async (i, s) => {
-    const n = await fetch(
-      await s.signRequest(
+  updateConsumer: async (s, n) => {
+    const i = await fetch(
+      await n.signRequest(
         new Request(
-          N + `/${t}/consumers/${i.id}`,
+          S + `/${t}/consumers/${s.id}`,
           {
             method: "PATCH",
             headers: {
               "Content-Type": "application/json"
             },
             body: JSON.stringify({
-              label: i.label
+              label: s.label
             })
           }
         )
       )
     );
-    P(n.ok, "Failed to update API key description");
+    await T(i), I(i.ok, "Failed to update API key description");
   },
-  rollKey: async (i, s) => {
-    const n = await fetch(
-      await s.signRequest(
+  rollKey: async (s, n) => {
+    const i = await fetch(
+      await n.signRequest(
         new Request(
-          N + `/${t}/consumers/${i}/roll-key`,
+          S + `/${t}/consumers/${s}/roll-key`,
           {
             method: "POST",
             headers: {
               "Content-Type": "application/json"
             },
-            body: JSON.stringify({
-              expiresOn: /* @__PURE__ */ new Date()
-            })
+            body: JSON.stringify({})
           }
         )
       )
     );
-    P(n.ok, "Failed to delete API key");
+    await T(i), I(i.ok, "Failed to delete API key");
   },
-  getConsumers: async (i) => {
-    const s = new Request(
-      N + `/${t}/consumers`
+  getConsumers: async (s) => {
+    const n = new Request(
+      `${S}/${t}/consumers`
     );
-    await i.signRequest(s);
-    const n = await fetch(s);
-    return P(n.ok, "Failed to fetch API keys"), (await n.json()).data.map((r) => ({
-      id: r.id,
-      label: r.label || "API Key",
-      apiKeys: r.apiKeys.data,
-      key: r.apiKeys.data.at(0)
+    await s.signRequest(n);
+    const i = await fetch(n);
+    return await T(i), I(i.ok, "Failed to fetch API keys"), (await i.json()).data.map((l) => ({
+      id: l.id,
+      label: l.label || l.subject || "API Key",
+      apiKeys: l.apiKeys.data,
+      key: l.apiKeys.data.at(0)
     }));
-  }
-}), st = (t) => t, nt = (t) => {
-  const i = "deploymentName" in t ? Qe(t.deploymentName) : t;
+  },
+  ...r
+}), Dt = (t) => t, At = (t) => {
+  const r = "deploymentName" in t ? lt(t.deploymentName, t) : t;
   return {
     getProfileMenuItems: () => [
       {
         label: "API Keys",
         path: "/settings/api-keys",
         category: "middle",
-        icon: de
+        icon: xe
       }
     ],
     getIdentities: async (s) => {
       try {
-        return (await i.getConsumers(s)).map((o) => ({
-          authorizeRequest: (r) => (r.headers.set(
+        return (await r.getConsumers(s)).map((i) => ({
+          authorizeRequest: (a) => (a.headers.set(
             "Authorization",
-            `Bearer ${o.apiKeys.at(0)?.key}`
-          ), r),
-          id: o.id,
-          label: o.description ?? o.id
+            `Bearer ${i.apiKeys.at(0)?.key}`
+          ), a),
+          id: i.id,
+          label: i.label
         }));
       } catch {
         return [];
@@ -571,24 +703,20 @@ const Le = ({ children: t, custom: i, initial: s = !0, onExitComplete: n, presen
     },
     getRoutes: () => [
       {
-        element: /* @__PURE__ */ e.jsx(De, {}),
-        errorElement: /* @__PURE__ */ e.jsx(ue, {}),
+        element: /* @__PURE__ */ e.jsx(_e, {}),
+        errorElement: /* @__PURE__ */ e.jsx(ye, {}),
         children: [
           {
             path: "/settings/api-keys",
-            element: /* @__PURE__ */ e.jsx(Oe, { service: i })
+            element: /* @__PURE__ */ e.jsx(rt, { service: r })
           }
-          // {
-          //   path: "/settings/api-keys/new",
-          //   element: <CreateApiKey service={service} />,
-          // },
         ]
       }
     ]
   };
 };
 export {
-  nt as apiKeyPlugin,
-  st as createApiKeyService
+  At as apiKeyPlugin,
+  Dt as createApiKeyService
 };
 //# sourceMappingURL=zudoku.plugin-api-keys.js.map