@acmekit/dashboard 2.13.7 → 2.13.9

package/dist/api-key-management-create-VWUERPPB.mjs

@@ -0,0 +1,170 @@
+import {
+  getApiKeyTypeFromPathname
+} from "./chunk-G22WWLPG.mjs";
+import {
+  useCreateApiKey
+} from "./chunk-EFRMWHRX.mjs";
+import "./chunk-IUCDCPJU.mjs";
+import {
+  KeyboundForm,
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-2U3RK3JG.mjs";
+import {
+  Form
+} from "./chunk-ND3ODI36.mjs";
+import "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-DTY37DDZ.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/api-key-management/api-key-management-create/api-key-management-create.tsx
+import { useLocation } from "react-router-dom";
+
+// src/routes/api-key-management/api-key-management-create/components/api-key-create-form/api-key-create-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Heading, Input, Prompt, Text, toast } from "@acmekit/ui";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import * as zod from "zod";
+import { Eye, EyeSlash } from "@acmekit/icons";
+import { Fragment, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ApiKeyCreateSchema = zod.object({
+  title: zod.string().min(1)
+});
+function getRedactedKey(key) {
+  if (!key) {
+    return "";
+  }
+  const firstThree = key.slice(0, 4);
+  const lastTwo = key.slice(-2);
+  return `${firstThree}${"\u2022".repeat(key.length - 6)}${lastTwo}`;
+}
+var ApiKeyCreateForm = ({ keyType }) => {
+  const [createdKey, setCreatedKey] = useState(null);
+  const [showRedactedKey, setShowRedactedKey] = useState(true);
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      title: ""
+    },
+    resolver: zodResolver(ApiKeyCreateSchema)
+  });
+  const { mutateAsync, isPending } = useCreateApiKey();
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      // @ts-ignore
+      { title: values.title, type: keyType },
+      {
+        onSuccess: ({ api_key }) => {
+          toast.success(t("apiKeyManagement.create.successToast"));
+          switch (keyType) {
+            case "publishable" /* PUBLISHABLE */:
+              handleSuccess(`/settings/publishable-api-keys/${api_key.id}`);
+              break;
+            case "secret" /* SECRET */:
+              setCreatedKey(api_key);
+              break;
+          }
+        },
+        onError: (err) => {
+          toast.error(err.message);
+        }
+      }
+    );
+  });
+  const handleCopyToken = () => {
+    if (!createdKey) {
+      toast.error(t("apiKeyManagement.create.copySecretTokenFailure"));
+    }
+    navigator.clipboard.writeText(createdKey?.token ?? "");
+    toast.success(t("apiKeyManagement.create.copySecretTokenSuccess"));
+  };
+  const handleGoToSecretKey = () => {
+    if (!createdKey) {
+      return;
+    }
+    handleSuccess(`/settings/secret-api-keys/${createdKey.id}`);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs(
+      KeyboundForm,
+      {
+        className: "flex h-full flex-col overflow-hidden",
+        onSubmit: handleSubmit,
+        children: [
+          /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+          /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8 px-2 py-16", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: keyType === "publishable" /* PUBLISHABLE */ ? t("apiKeyManagement.create.createPublishableHeader") : t("apiKeyManagement.create.createSecretHeader") }) }),
+              /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: keyType === "publishable" /* PUBLISHABLE */ ? t("apiKeyManagement.create.createPublishableHint") : t("apiKeyManagement.create.createSecretHint") }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "title",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { children: [
+                    /* @__PURE__ */ jsx(Form.Label, { children: t("fields.title") }),
+                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                  ] });
+                }
+              }
+            ) })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+            /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
+            /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: t("actions.save") })
+          ] }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Prompt, { variant: "confirmation", open: !!createdKey, children: /* @__PURE__ */ jsxs(Prompt.Content, { className: "w-fit max-w-[42.5%]", children: [
+      /* @__PURE__ */ jsxs(Prompt.Header, { children: [
+        /* @__PURE__ */ jsx(Prompt.Title, { children: t("apiKeyManagement.create.secretKeyCreatedHeader") }),
+        /* @__PURE__ */ jsx(Prompt.Description, { children: t("apiKeyManagement.create.secretKeyCreatedHint") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3 px-6 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "shadow-borders-base bg-ui-bg-component grid h-8 grid-cols-[1fr_32px] items-center overflow-hidden rounded-md", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center px-2", children: /* @__PURE__ */ jsx(Text, { family: "mono", size: "small", children: showRedactedKey ? getRedactedKey(createdKey?.token) : createdKey?.token }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed text-ui-fg-muted active:text-ui-fg-subtle flex size-8 appearance-none items-center justify-center border-l",
+              type: "button",
+              onClick: () => setShowRedactedKey(!showRedactedKey),
+              children: showRedactedKey ? /* @__PURE__ */ jsx(EyeSlash, {}) : /* @__PURE__ */ jsx(Eye, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "secondary",
+            type: "button",
+            className: "w-full",
+            onClick: handleCopyToken,
+            children: t("apiKeyManagement.actions.copy")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Prompt.Footer, { className: "border-t py-4", children: /* @__PURE__ */ jsx(Prompt.Action, { onClick: handleGoToSecretKey, children: t("actions.continue") }) })
+    ] }) })
+  ] });
+};
+
+// src/routes/api-key-management/api-key-management-create/api-key-management-create.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ApiKeyManagementCreate = () => {
+  const { pathname } = useLocation();
+  const keyType = getApiKeyTypeFromPathname(pathname);
+  return /* @__PURE__ */ jsx2(RouteFocusModal, { children: /* @__PURE__ */ jsx2(ApiKeyCreateForm, { keyType }) });
+};
+export {
+  ApiKeyManagementCreate as Component
+};

package/dist/api-key-management-detail-V4ENQHYY.mjs

@@ -0,0 +1,306 @@
+import {
+  getApiKeyStatusProps,
+  getApiKeyTypeProps,
+  prettifyRedactedToken
+} from "./chunk-G22WWLPG.mjs";
+import {
+  useDate
+} from "./chunk-DFFLVEZ5.mjs";
+import "./chunk-535OVBXR.mjs";
+import {
+  SingleColumnPage
+} from "./chunk-22YYMH6M.mjs";
+import {
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
+import {
+  ActionMenu
+} from "./chunk-S3REQHPQ.mjs";
+import "./chunk-ST2YB7JN.mjs";
+import "./chunk-GBFVWROS.mjs";
+import {
+  apiKeysQueryKeys,
+  useApiKey,
+  useDeleteApiKey,
+  useRevokeApiKey
+} from "./chunk-EFRMWHRX.mjs";
+import "./chunk-LKWTBYYC.mjs";
+import "./chunk-ULSPL3DR.mjs";
+import "./chunk-DN3MIYQH.mjs";
+import "./chunk-XIM7X4FB.mjs";
+import {
+  SingleColumnPageSkeleton,
+  Skeleton
+} from "./chunk-ITNQKZQQ.mjs";
+import "./chunk-OAHCJFG3.mjs";
+import "./chunk-S4DMV3ZT.mjs";
+import {
+  useUser
+} from "./chunk-YRWSG3YM.mjs";
+import {
+  queryClient
+} from "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import {
+  sdk
+} from "./chunk-DTY37DDZ.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx
+import { useLoaderData, useParams } from "react-router-dom";
+
+// src/routes/api-key-management/api-key-management-detail/components/api-key-general-section/api-key-general-section.tsx
+import { PencilSquare, Trash, XCircle } from "@acmekit/icons";
+import {
+  Badge,
+  Container,
+  Copy,
+  Heading,
+  StatusBadge,
+  Text as Text2,
+  toast,
+  usePrompt
+} from "@acmekit/ui";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+// src/components/common/user-link/user-link.tsx
+import { Avatar, Text } from "@acmekit/ui";
+import { Link } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UserLink = ({
+  id,
+  first_name,
+  last_name,
+  email,
+  type = "user"
+}) => {
+  const name = [first_name, last_name].filter(Boolean).join(" ");
+  const fallback = name ? name.slice(0, 1) : email.slice(0, 1);
+  const link = type === "user" ? `/settings/users/${id}` : `/customers/${id}`;
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      to: link,
+      className: "flex items-center gap-x-2 w-fit transition-fg hover:text-ui-fg-subtle outline-none focus-visible:shadow-borders-focus rounded-md",
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "2xsmall", fallback: fallback.toUpperCase() }),
+        /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "regular", children: name || email })
+      ]
+    }
+  );
+};
+
+// src/routes/api-key-management/api-key-management-detail/components/api-key-general-section/api-key-general-section.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ApiKeyGeneralSection = ({ apiKey }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const prompt = usePrompt();
+  const { getFullDate } = useDate();
+  const { mutateAsync: revokeAsync } = useRevokeApiKey(apiKey.id);
+  const { mutateAsync: deleteAsync } = useDeleteApiKey(apiKey.id);
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("apiKeyManagement.delete.warning", {
+        title: apiKey.title
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await deleteAsync(void 0, {
+      onSuccess: () => {
+        toast.success(
+          t("apiKeyManagement.delete.successToast", {
+            title: apiKey.title
+          })
+        );
+        navigate("..", { replace: true });
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      }
+    });
+  };
+  const handleRevoke = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("apiKeyManagement.revoke.warning", {
+        title: apiKey.title
+      }),
+      confirmText: t("apiKeyManagement.actions.revoke"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await revokeAsync(void 0, {
+      onSuccess: () => {
+        toast.success(
+          t("apiKeyManagement.revoke.successToast", {
+            title: apiKey.title
+          })
+        );
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      }
+    });
+  };
+  const dangerousActions = [
+    {
+      icon: /* @__PURE__ */ jsx2(Trash, {}),
+      label: t("actions.delete"),
+      onClick: handleDelete,
+      disabled: !apiKey.revoked_at
+    }
+  ];
+  if (!apiKey.revoked_at) {
+    dangerousActions.unshift({
+      icon: /* @__PURE__ */ jsx2(XCircle, {}),
+      label: t("apiKeyManagement.actions.revoke"),
+      onClick: handleRevoke,
+      disabled: !!apiKey.revoked_at
+    });
+  }
+  const apiKeyStatus = getApiKeyStatusProps(apiKey.revoked_at, t);
+  const apiKeyType = getApiKeyTypeProps(apiKey.type, t);
+  return /* @__PURE__ */ jsxs2(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx2(Heading, { children: apiKey.title }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-4", children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-x-2", children: /* @__PURE__ */ jsx2(StatusBadge, { color: apiKeyStatus.color, children: apiKeyStatus.label }) }),
+        /* @__PURE__ */ jsx2(
+          ActionMenu,
+          {
+            groups: [
+              {
+                actions: [
+                  {
+                    label: t("actions.edit"),
+                    icon: /* @__PURE__ */ jsx2(PencilSquare, {}),
+                    to: "edit"
+                  }
+                ]
+              },
+              {
+                actions: dangerousActions
+              }
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", weight: "plus", children: t("fields.key") }),
+      apiKey.type === "secret" ? /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", className: "inline-block w-fit", children: prettifyRedactedToken(apiKey.redacted) }) : /* @__PURE__ */ jsx2(Copy, { asChild: true, content: apiKey.token, className: "cursor-pointer", children: /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", className: "text-ui-tag-neutral-text", children: prettifyRedactedToken(apiKey.redacted) }) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", weight: "plus", children: t("fields.type") }),
+      /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", children: apiKeyType.label })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", weight: "plus", children: t("apiKeyManagement.fields.lastUsedAtLabel") }),
+      /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", children: apiKey.last_used_at ? getFullDate({ date: apiKey.last_used_at, includeTime: true }) : "-" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", weight: "plus", children: t("apiKeyManagement.fields.createdByLabel") }),
+      /* @__PURE__ */ jsx2(ActionBy, { userId: apiKey.created_by })
+    ] }),
+    apiKey.revoked_at && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+        /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", weight: "plus", children: t("apiKeyManagement.fields.revokedAtLabel") }),
+        /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", children: getFullDate({ date: apiKey.revoked_at, includeTime: true }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+        /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", weight: "plus", children: t("apiKeyManagement.fields.revokedByLabel") }),
+        /* @__PURE__ */ jsx2(ActionBy, { userId: apiKey.revoked_by })
+      ] })
+    ] })
+  ] });
+};
+var ActionBy = ({ userId }) => {
+  const { user, isLoading, isError, error } = useUser(userId, void 0, {
+    enabled: !!userId
+  });
+  if (!userId) {
+    return /* @__PURE__ */ jsx2(Text2, { size: "small", className: "text-ui-fg-subtle", children: "-" });
+  }
+  if (isError) {
+    throw error;
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[20px_1fr]", children: [
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-5 w-5 rounded-full" }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "w-full max-w-[220px]" })
+    ] });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsx2(Text2, { size: "small", className: "text-ui-fg-subtle", children: "-" });
+  }
+  return /* @__PURE__ */ jsx2(UserLink, { ...user });
+};
+
+// src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ApiKeyManagementDetail = () => {
+  const initialData = useLoaderData();
+  const { id } = useParams();
+  const { getWidgets } = useExtension();
+  const { api_key, isLoading, isError, error } = useApiKey(id, {
+    initialData
+  });
+  if (isLoading || !api_key) {
+    return /* @__PURE__ */ jsx3(SingleColumnPageSkeleton, { showJSON: true, sections: 1 });
+  }
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx3(
+    SingleColumnPage,
+    {
+      hasOutlet: true,
+      showJSON: true,
+      widgets: {
+        before: getWidgets("api_key.details.before"),
+        after: getWidgets("api_key.details.after")
+      },
+      data: api_key,
+      children: /* @__PURE__ */ jsx3(ApiKeyGeneralSection, { apiKey: api_key })
+    }
+  );
+};
+
+// src/routes/api-key-management/api-key-management-detail/breadcrumb.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ApiKeyManagementDetailBreadcrumb = (props) => {
+  const { id } = props.params || {};
+  const { api_key } = useApiKey(id, {
+    initialData: props.data,
+    enabled: Boolean(id)
+  });
+  if (!api_key) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4("span", { children: api_key.title });
+};
+
+// src/routes/api-key-management/api-key-management-detail/loader.ts
+var apiKeyDetailQuery = (id) => ({
+  queryKey: apiKeysQueryKeys.detail(id),
+  queryFn: async () => sdk.admin.apiKey.retrieve(id)
+});
+var apiKeyLoader = async ({ params }) => {
+  const id = params.id;
+  const query = apiKeyDetailQuery(id);
+  return queryClient.ensureQueryData(query);
+};
+export {
+  ApiKeyManagementDetailBreadcrumb as Breadcrumb,
+  ApiKeyManagementDetail as Component,
+  apiKeyLoader as loader
+};

package/dist/api-key-management-edit-R44OHS7B.mjs

@@ -0,0 +1,106 @@
+import {
+  useApiKey,
+  useUpdateApiKey
+} from "./chunk-EFRMWHRX.mjs";
+import "./chunk-IUCDCPJU.mjs";
+import {
+  KeyboundForm,
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-2U3RK3JG.mjs";
+import {
+  Form
+} from "./chunk-ND3ODI36.mjs";
+import "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-DTY37DDZ.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/api-key-management/api-key-management-edit/api-key-management-edit.tsx
+import { Heading } from "@acmekit/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+// src/components/utilities/visually-hidden/visually-hidden.tsx
+import { jsx } from "react/jsx-runtime";
+var VisuallyHidden = ({ children }) => {
+  return /* @__PURE__ */ jsx("span", { className: "sr-only", children });
+};
+
+// src/routes/api-key-management/api-key-management-edit/components/edit-api-key-form/edit-api-key-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Input, toast } from "@acmekit/ui";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import * as zod from "zod";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var EditApiKeySchema = zod.object({
+  title: zod.string().min(1)
+});
+var EditApiKeyForm = ({ apiKey }) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      title: apiKey.title
+    },
+    resolver: zodResolver(EditApiKeySchema)
+  });
+  const { mutateAsync, isPending } = useUpdateApiKey(apiKey.id);
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(data, {
+      onSuccess: ({ api_key }) => {
+        toast.success(
+          t("apiKeyManagement.edit.successToast", {
+            title: api_key.title
+          })
+        );
+        handleSuccess();
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      }
+    });
+  });
+  return /* @__PURE__ */ jsx2(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { onSubmit: handleSubmit, className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx2(RouteDrawer.Body, { children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-y-4", children: /* @__PURE__ */ jsx2(
+      Form.Field,
+      {
+        control: form.control,
+        name: "title",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxs(Form.Item, { children: [
+            /* @__PURE__ */ jsx2(Form.Label, { children: t("fields.title") }),
+            /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(Input, { ...field }) }),
+            /* @__PURE__ */ jsx2(Form.ErrorMessage, {})
+          ] });
+        }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx2(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx2(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx2(Button, { size: "small", type: "submit", isLoading: isPending, children: t("actions.save") })
+    ] }) })
+  ] }) });
+};
+
+// src/routes/api-key-management/api-key-management-edit/api-key-management-edit.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ApiKeyManagementEdit = () => {
+  const { id } = useParams();
+  const { t } = useTranslation2();
+  const { api_key, isLoading, isError, error } = useApiKey(id);
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxs2(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx3(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx3(Heading, { children: t("apiKeyManagement.edit.header") }) }),
+      /* @__PURE__ */ jsx3(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx3(VisuallyHidden, { children: t("apiKeyManagement.edit.description") }) })
+    ] }),
+    !isLoading && !!api_key && /* @__PURE__ */ jsx3(EditApiKeyForm, { apiKey: api_key })
+  ] });
+};
+export {
+  ApiKeyManagementEdit as Component
+};