@workos-inc/widgets 1.4.2 → 1.5.0

package/dist/esm/lib/api-keys/create-api-key.js

@@ -0,0 +1,352 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  Flex,
+  ScrollArea,
+  Text,
+  Callout,
+  IconButton
+} from "@radix-ui/themes";
+import {
+  Label,
+  PrimaryButton,
+  SecondaryButton,
+  TextField,
+  TextFieldSlot
+} from "../elements.js";
+import * as Form from "@radix-ui/react-form";
+import {
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
+  MagnifyingGlassIcon
+} from "@radix-ui/react-icons";
+import { CopyButton } from "../copy-button.js";
+import * as React from "react";
+import { pluralize } from "../utils.js";
+import {
+  useListOrganizationApiKeyPermissions
+} from "../../api/endpoint.js";
+import { useCreateApiKey } from "../api/api-key.js";
+import { useApiKeysContext } from "./api-keys-context.js";
+function CreateApiKeyDialog() {
+  const {
+    state: { createDialogOpen, createdApiKey },
+    dispatch
+  } = useApiKeysContext();
+  return /* @__PURE__ */ jsx(
+    Dialog.Root,
+    {
+      open: createDialogOpen,
+      onOpenChange: (open) => {
+        if (!open) {
+          dispatch({ type: "CLOSE_CREATE_DIALOG" });
+        }
+      },
+      children: createdApiKey ? /* @__PURE__ */ jsx(SaveApiKeyContent, { apiKey: createdApiKey.value }) : /* @__PURE__ */ jsx(
+        CreateApiKeyForm,
+        {},
+        `${createDialogOpen}`
+      )
+    }
+  );
+}
+function CreateApiKeyForm() {
+  const { dispatch } = useApiKeysContext();
+  const [errors, setErrors] = React.useState({ name: false });
+  const validate = (formData) => {
+    const name = formData.get("name")?.toString() ?? "";
+    const errors2 = { name: !name.trim().length };
+    setErrors(errors2);
+    const isValid = Object.values(errors2).every((error2) => error2 === false);
+    return isValid;
+  };
+  const {
+    mutate: createOrganizationApiKey,
+    error,
+    isPending,
+    isSuccess
+  } = useCreateApiKey();
+  const permissions = useListOrganizationApiKeyPermissions({ limit: 100 });
+  return /* @__PURE__ */ jsxs(Dialog.Content, { maxWidth: "529px", children: [
+    /* @__PURE__ */ jsx(Dialog.Title, { size: "4", weight: "bold", children: "Create API key" }),
+    /* @__PURE__ */ jsxs(
+      Form.Root,
+      {
+        onSubmit: (e) => {
+          if (isPending) return;
+          e.preventDefault();
+          const data = new FormData(e.currentTarget);
+          const isValid = validate(data);
+          if (!isValid) {
+            return;
+          }
+          createOrganizationApiKey(
+            {
+              data: {
+                name: data.get("name")?.toString() ?? "",
+                permissions: data.getAll("permission").map(String) || []
+              }
+            },
+            {
+              onSuccess: (data2) => {
+                dispatch({ type: "SET_CREATED_API_KEY", apiKey: data2 });
+              }
+            }
+          );
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "stretch", gap: "4", children: [
+            error && /* @__PURE__ */ jsxs(Callout.Root, { color: "red", role: "alert", children: [
+              /* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(ExclamationTriangleIcon, {}) }),
+              /* @__PURE__ */ jsx(Callout.Text, { children: "An error occurred while creating the API key." })
+            ] }),
+            /* @__PURE__ */ jsx(Form.Field, { name: "name", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "stretch", gap: "2", children: [
+              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: "Name" }) }),
+              /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  "data-1p-ignore": true,
+                  autoComplete: "off",
+                  placeholder: "A descriptive name for the API key"
+                }
+              ) }),
+              errors.name && /* @__PURE__ */ jsx(Form.Message, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: "The name is required" }) })
+            ] }) }),
+            permissions.isSuccess && permissions.data.data.length > 0 && /* @__PURE__ */ jsx(PermissionsField, { permissions: permissions.data.data })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "end", mt: "5", children: [
+            /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(SecondaryButton, { disabled: isPending || isSuccess, children: "Cancel" }) }),
+            /* @__PURE__ */ jsx(PrimaryButton, { loading: isPending || isSuccess, children: "Create API key" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SaveApiKeyContent({ apiKey }) {
+  return /* @__PURE__ */ jsxs(Dialog.Content, { maxWidth: "529px", children: [
+    /* @__PURE__ */ jsx(Dialog.Title, { size: "4", weight: "bold", children: "Save your key" }),
+    /* @__PURE__ */ jsx(Dialog.Description, { size: "2", children: "Please save this API key in a secure location. If you lose it, you'll need to generate a new one." }),
+    /* @__PURE__ */ jsxs(Callout.Root, { mt: "5", mb: "4", children: [
+      /* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }),
+      /* @__PURE__ */ jsx(Callout.Text, { children: "You won't be able to access the key again. Please copy it now." })
+    ] }),
+    /* @__PURE__ */ jsx(TextField, { value: apiKey, readOnly: true, children: /* @__PURE__ */ jsx(TextFieldSlot, { side: "right", children: /* @__PURE__ */ jsx(CopyButton, { asChild: true, value: apiKey, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "1", color: "gray" }) }) }) }),
+    /* @__PURE__ */ jsx(Flex, { align: "center", gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(CopyButton, { asChild: true, value: apiKey, withIcon: false, children: /* @__PURE__ */ jsx(PrimaryButton, { children: "Copy and close" }) }) }) })
+  ] });
+}
+function Permission({
+  checked,
+  permission,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: permission.slug,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        padding: "var(--space-2) var(--space-4)",
+        gap: "var(--space-3)",
+        borderBottom: "1px solid var(--gray-6)",
+        cursor: "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked,
+            id: permission.slug,
+            name: "permission",
+            value: permission.slug,
+            onCheckedChange: (e) => onChange(e === "indeterminate" ? false : e)
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+          /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: permission.name }),
+          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: permission.description })
+        ] })
+      ]
+    }
+  );
+}
+function PermissionsField({
+  permissions = []
+}) {
+  const [selectedPermissions, setSelectedPermissions] = React.useState([]);
+  const [filter, setFilter] = React.useState("");
+  const fieldRef = React.useRef(null);
+  const filteredPermissions = React.useMemo(() => {
+    return permissions.filter((p) => {
+      return !filter.trim().length || p.description?.toLowerCase().match(filter.toLowerCase()) || p.name.toLowerCase().match(filter.toLowerCase()) || p.slug.toLowerCase().match(filter.toLowerCase());
+    });
+  }, [permissions, filter]);
+  React.useEffect(() => {
+    const onResize = () => {
+      if (fieldRef.current && filteredPermissions.length !== 0) {
+        fieldRef.current.style.minHeight = "unset";
+      }
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [filteredPermissions.length]);
+  return /* @__PURE__ */ jsx(Form.Field, { name: "permissions", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "stretch", gap: "1", children: [
+    /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: "Permissions" }) }),
+    /* @__PURE__ */ jsx(Text, { size: "2", mb: "2", color: "gray", children: "Only enable the minimum permissions required for your use case." }),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref: fieldRef,
+        style: {
+          borderRadius: "var(--radius-3)",
+          borderColor: "var(--gray-6)",
+          borderWidth: "1px",
+          borderStyle: "solid"
+        },
+        direction: "column",
+        align: "stretch",
+        children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              name: "search",
+              value: filter,
+              size: "2",
+              onChange: (e) => {
+                if (fieldRef.current) {
+                  fieldRef.current.style.minHeight = fieldRef.current.clientHeight + 2 + "px";
+                }
+                setFilter(e.target.value);
+              },
+              style: {
+                height: "40px",
+                borderRadius: "var(--radius-3) var(--radius-3) 0 0",
+                boxShadow: "none"
+              },
+              placeholder: "Search",
+              children: /* @__PURE__ */ jsx(TextFieldSlot, { side: "left", px: "3", children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) })
+            }
+          ),
+          filteredPermissions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              ScrollArea,
+              {
+                scrollbars: "vertical",
+                style: {
+                  flex: 1,
+                  maxHeight: "calc(50vh - 150px)",
+                  border: "1px solid var(--gray-6)",
+                  borderWidth: "1px 0 0"
+                },
+                children: filteredPermissions.map((permission) => /* @__PURE__ */ jsx(
+                  Permission,
+                  {
+                    checked: selectedPermissions.some(
+                      (sp) => sp.slug === permission.slug
+                    ),
+                    permission,
+                    onChange: (isChecked) => setSelectedPermissions(
+                      (prev) => isChecked ? [...prev, permission] : prev.filter((sp) => sp.slug !== permission.slug)
+                    )
+                  },
+                  permission.slug
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                px: "4",
+                py: "3",
+                mt: "-1px",
+                flexGrow: "0",
+                style: {
+                  borderTop: "0 solid var(--gray-6)",
+                  borderWidth: "1px 0 0"
+                },
+                children: /* @__PURE__ */ jsx(
+                  SelectedPermissions,
+                  {
+                    total: permissions.length,
+                    selected: selectedPermissions.length,
+                    onToggle: () => setSelectedPermissions(
+                      (prev) => prev.length === permissions.length ? [] : permissions
+                    )
+                  }
+                )
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: "4",
+              pt: "6",
+              pb: "6",
+              style: { borderTop: "1px solid var(--gray-6)" },
+              flexGrow: "1",
+              justify: "center",
+              align: "center",
+              direction: "column",
+              children: [
+                /* @__PURE__ */ jsx(
+                  MagnifyingGlassIcon,
+                  {
+                    style: {
+                      color: "var(--gray-9)",
+                      width: "var(--space-5)",
+                      height: "var(--space-5)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "2", align: "center", mb: "2", wrap: "balance", weight: "bold", children: "No permissions match your search" }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "1",
+                    color: "gray",
+                    variant: "outline",
+                    onClick: () => setFilter(""),
+                    children: "Clear search"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+function SelectedPermissions({
+  total,
+  selected,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+    /* @__PURE__ */ jsx(Text, { size: "1", style: { lineHeight: 1, color: "var(--gray-11)" }, children: selected === 0 ? "No permissions selected" : `${pluralize("permission", selected)} selected` }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: "1",
+        onClick: onToggle,
+        style: { cursor: "pointer", color: "var(--accent-10)" },
+        children: total === selected ? "Deselect all" : "Select all"
+      }
+    )
+  ] });
+}
+function CreateApiKeyButton() {
+  const { dispatch } = useApiKeysContext();
+  return /* @__PURE__ */ jsx(Button, { onClick: () => dispatch({ type: "OPEN_CREATE_DIALOG" }), children: "Create API key" });
+}
+export {
+  CreateApiKeyButton,
+  CreateApiKeyDialog
+};
+//# sourceMappingURL=create-api-key.js.map

package/dist/esm/lib/api-keys/create-api-key.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/create-api-key.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Checkbox,\n  Dialog,\n  Flex,\n  ScrollArea,\n  Text,\n  Callout,\n  IconButton,\n} from \"@radix-ui/themes\";\nimport {\n  Label,\n  PrimaryButton,\n  SecondaryButton,\n  TextField,\n  TextFieldSlot,\n} from \"../elements.js\";\nimport * as Form from \"@radix-ui/react-form\";\nimport {\n  ExclamationTriangleIcon,\n  InfoCircledIcon,\n  MagnifyingGlassIcon,\n} from \"@radix-ui/react-icons\";\nimport { CopyButton } from \"../copy-button.js\";\nimport * as React from \"react\";\nimport { pluralize } from \"../utils.js\";\nimport {\n  useListOrganizationApiKeyPermissions,\n  ListOrganizationApiKeyPermission,\n} from \"../../api/endpoint.js\";\nimport { useCreateApiKey } from \"../api/api-key.js\";\nimport { useApiKeysContext } from \"./api-keys-context.js\";\n\nexport function CreateApiKeyDialog() {\n  const {\n    state: { createDialogOpen, createdApiKey },\n    dispatch,\n  } = useApiKeysContext();\n\n  return (\n    <Dialog.Root\n      open={createDialogOpen}\n      onOpenChange={(open) => {\n        if (!open) {\n          dispatch({ type: \"CLOSE_CREATE_DIALOG\" });\n        }\n      }}\n    >\n      {createdApiKey ? (\n        <SaveApiKeyContent apiKey={createdApiKey.value} />\n      ) : (\n        <CreateApiKeyForm\n          // always remount the form when the dialog is opened to reset the validation errors\n          key={`${createDialogOpen}`}\n        />\n      )}\n    </Dialog.Root>\n  );\n}\n\nfunction CreateApiKeyForm() {\n  const { dispatch } = useApiKeysContext();\n  const [errors, setErrors] = React.useState<{\n    name: boolean;\n  }>({ name: false });\n\n  const validate = (formData: FormData) => {\n    const name = formData.get(\"name\")?.toString() ?? \"\";\n    const errors = { name: !name.trim().length };\n    setErrors(errors);\n    const isValid = Object.values(errors).every((error) => error === false);\n    return isValid;\n  };\n\n  const {\n    mutate: createOrganizationApiKey,\n    error,\n    isPending,\n    isSuccess,\n  } = useCreateApiKey();\n  const permissions = useListOrganizationApiKeyPermissions({ limit: 100 });\n\n  return (\n    <Dialog.Content maxWidth=\"529px\">\n      <Dialog.Title size=\"4\" weight={\"bold\"}>\n        Create API key\n      </Dialog.Title>\n      <Form.Root\n        onSubmit={(e) => {\n          if (isPending) return;\n          e.preventDefault();\n          const data = new FormData(e.currentTarget);\n          const isValid = validate(data);\n          if (!isValid) {\n            return;\n          }\n\n          createOrganizationApiKey(\n            {\n              data: {\n                name: data.get(\"name\")?.toString() ?? \"\",\n                permissions: data.getAll(\"permission\").map(String) || [],\n              },\n            },\n            {\n              onSuccess: (data) => {\n                dispatch({ type: \"SET_CREATED_API_KEY\", apiKey: data });\n              },\n            },\n          );\n        }}\n      >\n        <Flex direction=\"column\" align=\"stretch\" gap=\"4\">\n          {error && (\n            <Callout.Root color=\"red\" role=\"alert\">\n              <Callout.Icon>\n                <ExclamationTriangleIcon />\n              </Callout.Icon>\n              <Callout.Text>\n                An error occurred while creating the API key.\n              </Callout.Text>\n            </Callout.Root>\n          )}\n          <Form.Field name=\"name\" asChild>\n            <Flex direction=\"column\" align=\"stretch\" gap=\"2\">\n              <Form.Label asChild>\n                <Label>Name</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <TextField\n                  data-1p-ignore\n                  autoComplete=\"off\"\n                  placeholder=\"A descriptive name for the API key\"\n                />\n              </Form.Control>\n              {errors.name && (\n                <Form.Message asChild>\n                  <Text size=\"2\" color=\"red\">\n                    The name is required\n                  </Text>\n                </Form.Message>\n              )}\n            </Flex>\n          </Form.Field>\n          {permissions.isSuccess && permissions.data.data.length > 0 && (\n            <PermissionsField permissions={permissions.data.data} />\n          )}\n        </Flex>\n\n        <Flex align=\"center\" gap=\"3\" justify=\"end\" mt=\"5\">\n          <Dialog.Close>\n            <SecondaryButton disabled={isPending || isSuccess}>\n              Cancel\n            </SecondaryButton>\n          </Dialog.Close>\n\n          <PrimaryButton loading={isPending || isSuccess}>\n            Create API key\n          </PrimaryButton>\n        </Flex>\n      </Form.Root>\n    </Dialog.Content>\n  );\n}\n\nfunction SaveApiKeyContent({ apiKey }: { apiKey: string }) {\n  return (\n    <Dialog.Content maxWidth=\"529px\">\n      <Dialog.Title size=\"4\" weight={\"bold\"}>\n        Save your key\n      </Dialog.Title>\n      <Dialog.Description size=\"2\">\n        Please save this API key in a secure location. If you lose it,\n        you&apos;ll need to generate a new one.\n      </Dialog.Description>\n      <Callout.Root mt=\"5\" mb=\"4\">\n        <Callout.Icon>\n          <InfoCircledIcon />\n        </Callout.Icon>\n        <Callout.Text>\n          You won&apos;t be able to access the key again. Please copy it now.\n        </Callout.Text>\n      </Callout.Root>\n      <TextField value={apiKey} readOnly>\n        <TextFieldSlot side=\"right\">\n          <CopyButton asChild value={apiKey}>\n            <IconButton variant=\"ghost\" size=\"1\" color=\"gray\" />\n          </CopyButton>\n        </TextFieldSlot>\n      </TextField>\n      <Flex align=\"center\" gap=\"3\" justify=\"end\" mt=\"5\">\n        <Dialog.Close>\n          <CopyButton asChild value={apiKey} withIcon={false}>\n            <PrimaryButton>Copy and close</PrimaryButton>\n          </CopyButton>\n        </Dialog.Close>\n      </Flex>\n    </Dialog.Content>\n  );\n}\n\nfunction Permission({\n  checked,\n  permission,\n  onChange,\n}: {\n  checked: boolean;\n  permission: ListOrganizationApiKeyPermission;\n  onChange: (isChecked: boolean) => void;\n}) {\n  return (\n    <label\n      htmlFor={permission.slug}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        padding: \"var(--space-2) var(--space-4)\",\n        gap: \"var(--space-3)\",\n        borderBottom: \"1px solid var(--gray-6)\",\n        cursor: \"pointer\",\n      }}\n    >\n      <Checkbox\n        checked={checked}\n        id={permission.slug}\n        name=\"permission\"\n        value={permission.slug}\n        onCheckedChange={(e) => onChange(e === \"indeterminate\" ? false : e)}\n      />\n      <Flex direction=\"column\">\n        <Text size=\"2\" weight=\"bold\">\n          {permission.name}\n        </Text>\n        <Text size=\"2\" color=\"gray\">\n          {permission.description}\n        </Text>\n      </Flex>\n    </label>\n  );\n}\n\nfunction PermissionsField({\n  permissions = [],\n}: {\n  permissions: ListOrganizationApiKeyPermission[];\n}) {\n  const [selectedPermissions, setSelectedPermissions] = React.useState<\n    ListOrganizationApiKeyPermission[]\n  >([]);\n  const [filter, setFilter] = React.useState(\"\");\n  const fieldRef = React.useRef<HTMLDivElement | null>(null);\n  const filteredPermissions = React.useMemo(() => {\n    return permissions.filter((p) => {\n      return (\n        !filter.trim().length ||\n        p.description?.toLowerCase().match(filter.toLowerCase()) ||\n        p.name.toLowerCase().match(filter.toLowerCase()) ||\n        p.slug.toLowerCase().match(filter.toLowerCase())\n      );\n    });\n  }, [permissions, filter]);\n\n  React.useEffect(() => {\n    const onResize = () => {\n      if (fieldRef.current && filteredPermissions.length !== 0) {\n        fieldRef.current.style.minHeight = \"unset\";\n      }\n    };\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n    };\n  }, [filteredPermissions.length]);\n\n  return (\n    <Form.Field name=\"permissions\" asChild>\n      <Flex direction=\"column\" align=\"stretch\" gap=\"1\">\n        <Form.Label asChild>\n          <Label>Permissions</Label>\n        </Form.Label>\n        <Text size=\"2\" mb=\"2\" color=\"gray\">\n          Only enable the minimum permissions required for your use case.\n        </Text>\n        <Flex\n          ref={fieldRef}\n          style={{\n            borderRadius: \"var(--radius-3)\",\n            borderColor: \"var(--gray-6)\",\n            borderWidth: \"1px\",\n            borderStyle: \"solid\",\n          }}\n          direction=\"column\"\n          align=\"stretch\"\n        >\n          <TextField\n            name=\"search\"\n            value={filter}\n            size=\"2\"\n            onChange={(e) => {\n              if (fieldRef.current) {\n                fieldRef.current.style.minHeight =\n                  fieldRef.current.clientHeight + 2 + \"px\";\n              }\n              setFilter(e.target.value);\n            }}\n            style={{\n              height: \"40px\",\n              borderRadius: \"var(--radius-3) var(--radius-3) 0 0\",\n              boxShadow: \"none\",\n            }}\n            placeholder=\"Search\"\n          >\n            <TextFieldSlot side=\"left\" px=\"3\">\n              <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n            </TextFieldSlot>\n          </TextField>\n          {filteredPermissions.length > 0 ? (\n            <>\n              <ScrollArea\n                scrollbars=\"vertical\"\n                style={{\n                  flex: 1,\n                  maxHeight: \"calc(50vh - 150px)\",\n                  border: \"1px solid var(--gray-6)\",\n                  borderWidth: \"1px 0 0\",\n                }}\n              >\n                {filteredPermissions.map((permission) => (\n                  <Permission\n                    checked={selectedPermissions.some(\n                      (sp) => sp.slug === permission.slug,\n                    )}\n                    key={permission.slug}\n                    permission={permission}\n                    onChange={(isChecked) =>\n                      setSelectedPermissions((prev) =>\n                        isChecked\n                          ? [...prev, permission]\n                          : prev.filter((sp) => sp.slug !== permission.slug),\n                      )\n                    }\n                  />\n                ))}\n              </ScrollArea>\n              <Box\n                px=\"4\"\n                py=\"3\"\n                mt={\"-1px\"}\n                flexGrow=\"0\"\n                style={{\n                  borderTop: \"0 solid var(--gray-6)\",\n                  borderWidth: \"1px 0 0\",\n                }}\n              >\n                <SelectedPermissions\n                  total={permissions.length}\n                  selected={selectedPermissions.length}\n                  onToggle={() =>\n                    setSelectedPermissions((prev) =>\n                      prev.length === permissions.length ? [] : permissions,\n                    )\n                  }\n                />\n              </Box>\n            </>\n          ) : (\n            <Flex\n              gap=\"4\"\n              pt=\"6\"\n              pb=\"6\"\n              style={{ borderTop: \"1px solid var(--gray-6)\" }}\n              flexGrow=\"1\"\n              justify=\"center\"\n              align=\"center\"\n              direction=\"column\"\n            >\n              <MagnifyingGlassIcon\n                style={{\n                  color: \"var(--gray-9)\",\n                  width: \"var(--space-5)\",\n                  height: \"var(--space-5)\",\n                }}\n              />\n              <Text size=\"2\" align=\"center\" mb=\"2\" wrap=\"balance\" weight=\"bold\">\n                No permissions match your search\n              </Text>\n              <Button\n                size=\"1\"\n                color=\"gray\"\n                variant=\"outline\"\n                onClick={() => setFilter(\"\")}\n              >\n                Clear search\n              </Button>\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n    </Form.Field>\n  );\n}\n\nfunction SelectedPermissions({\n  total,\n  selected,\n  onToggle,\n}: {\n  total: number;\n  selected: number;\n  onToggle: () => void;\n}) {\n  return (\n    <Flex align=\"center\" gap=\"2\">\n      <Text size=\"1\" style={{ lineHeight: 1, color: \"var(--gray-11)\" }}>\n        {selected === 0\n          ? \"No permissions selected\"\n          : `${pluralize(\"permission\", selected)} selected`}\n      </Text>\n      <Text\n        size=\"1\"\n        onClick={onToggle}\n        style={{ cursor: \"pointer\", color: \"var(--accent-10)\" }}\n      >\n        {total === selected ? \"Deselect all\" : \"Select all\"}\n      </Text>\n    </Flex>\n  );\n}\n\nexport function CreateApiKeyButton() {\n  const { dispatch } = useApiKeysContext();\n  return (\n    <Button onClick={() => dispatch({ type: \"OPEN_CREATE_DIALOG\" })}>\n      Create API key\n    </Button>\n  );\n}\n"],"mappings":"AAkDQ,SA4QI,UA5QJ,KAiEI,YAjEJ;AAlDR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,UAAU;AACtB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,OAEK;AACP,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAE3B,SAAS,qBAAqB;AACnC,QAAM;AAAA,IACJ,OAAO,EAAE,kBAAkB,cAAc;AAAA,IACzC;AAAA,EACF,IAAI,kBAAkB;AAEtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,SAAS;AACtB,YAAI,CAAC,MAAM;AACT,mBAAS,EAAE,MAAM,sBAAsB,CAAC;AAAA,QAC1C;AAAA,MACF;AAAA,MAEC,0BACC,oBAAC,qBAAkB,QAAQ,cAAc,OAAO,IAEhD;AAAA,QAAC;AAAA;AAAA,QAEM,GAAG,gBAAgB;AAAA,MAC1B;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,mBAAmB;AAC1B,QAAM,EAAE,SAAS,IAAI,kBAAkB;AACvC,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAE/B,EAAE,MAAM,MAAM,CAAC;AAElB,QAAM,WAAW,CAAC,aAAuB;AACvC,UAAM,OAAO,SAAS,IAAI,MAAM,GAAG,SAAS,KAAK;AACjD,UAAMA,UAAS,EAAE,MAAM,CAAC,KAAK,KAAK,EAAE,OAAO;AAC3C,cAAUA,OAAM;AAChB,UAAM,UAAU,OAAO,OAAOA,OAAM,EAAE,MAAM,CAACC,WAAUA,WAAU,KAAK;AACtE,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AACpB,QAAM,cAAc,qCAAqC,EAAE,OAAO,IAAI,CAAC;AAEvE,SACE,qBAAC,OAAO,SAAP,EAAe,UAAS,SACvB;AAAA,wBAAC,OAAO,OAAP,EAAa,MAAK,KAAI,QAAQ,QAAQ,4BAEvC;AAAA,IACA;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU,CAAC,MAAM;AACf,cAAI,UAAW;AACf,YAAE,eAAe;AACjB,gBAAM,OAAO,IAAI,SAAS,EAAE,aAAa;AACzC,gBAAM,UAAU,SAAS,IAAI;AAC7B,cAAI,CAAC,SAAS;AACZ;AAAA,UACF;AAEA;AAAA,YACE;AAAA,cACE,MAAM;AAAA,gBACJ,MAAM,KAAK,IAAI,MAAM,GAAG,SAAS,KAAK;AAAA,gBACtC,aAAa,KAAK,OAAO,YAAY,EAAE,IAAI,MAAM,KAAK,CAAC;AAAA,cACzD;AAAA,YACF;AAAA,YACA;AAAA,cACE,WAAW,CAACC,UAAS;AACnB,yBAAS,EAAE,MAAM,uBAAuB,QAAQA,MAAK,CAAC;AAAA,cACxD;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,QAEA;AAAA,+BAAC,QAAK,WAAU,UAAS,OAAM,WAAU,KAAI,KAC1C;AAAA,qBACC,qBAAC,QAAQ,MAAR,EAAa,OAAM,OAAM,MAAK,SAC7B;AAAA,kCAAC,QAAQ,MAAR,EACC,8BAAC,2BAAwB,GAC3B;AAAA,cACA,oBAAC,QAAQ,MAAR,EAAa,2DAEd;AAAA,eACF;AAAA,YAEF,oBAAC,KAAK,OAAL,EAAW,MAAK,QAAO,SAAO,MAC7B,+BAAC,QAAK,WAAU,UAAS,OAAM,WAAU,KAAI,KAC3C;AAAA,kCAAC,KAAK,OAAL,EAAW,SAAO,MACjB,8BAAC,SAAM,kBAAI,GACb;AAAA,cACA,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB;AAAA,gBAAC;AAAA;AAAA,kBACC,kBAAc;AAAA,kBACd,cAAa;AAAA,kBACb,aAAY;AAAA;AAAA,cACd,GACF;AAAA,cACC,OAAO,QACN,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB,8BAAC,QAAK,MAAK,KAAI,OAAM,OAAM,kCAE3B,GACF;AAAA,eAEJ,GACF;AAAA,YACC,YAAY,aAAa,YAAY,KAAK,KAAK,SAAS,KACvD,oBAAC,oBAAiB,aAAa,YAAY,KAAK,MAAM;AAAA,aAE1D;AAAA,UAEA,qBAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,OAAM,IAAG,KAC5C;AAAA,gCAAC,OAAO,OAAP,EACC,8BAAC,mBAAgB,UAAU,aAAa,WAAW,oBAEnD,GACF;AAAA,YAEA,oBAAC,iBAAc,SAAS,aAAa,WAAW,4BAEhD;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,kBAAkB,EAAE,OAAO,GAAuB;AACzD,SACE,qBAAC,OAAO,SAAP,EAAe,UAAS,SACvB;AAAA,wBAAC,OAAO,OAAP,EAAa,MAAK,KAAI,QAAQ,QAAQ,2BAEvC;AAAA,IACA,oBAAC,OAAO,aAAP,EAAmB,MAAK,KAAI,+GAG7B;AAAA,IACA,qBAAC,QAAQ,MAAR,EAAa,IAAG,KAAI,IAAG,KACtB;AAAA,0BAAC,QAAQ,MAAR,EACC,8BAAC,mBAAgB,GACnB;AAAA,MACA,oBAAC,QAAQ,MAAR,EAAa,4EAEd;AAAA,OACF;AAAA,IACA,oBAAC,aAAU,OAAO,QAAQ,UAAQ,MAChC,8BAAC,iBAAc,MAAK,SAClB,8BAAC,cAAW,SAAO,MAAC,OAAO,QACzB,8BAAC,cAAW,SAAQ,SAAQ,MAAK,KAAI,OAAM,QAAO,GACpD,GACF,GACF;AAAA,IACA,oBAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,OAAM,IAAG,KAC5C,8BAAC,OAAO,OAAP,EACC,8BAAC,cAAW,SAAO,MAAC,OAAO,QAAQ,UAAU,OAC3C,8BAAC,iBAAc,4BAAc,GAC/B,GACF,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,WAAW;AAAA,MACpB,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,KAAK;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,MACV;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,IAAI,WAAW;AAAA,YACf,MAAK;AAAA,YACL,OAAO,WAAW;AAAA,YAClB,iBAAiB,CAAC,MAAM,SAAS,MAAM,kBAAkB,QAAQ,CAAC;AAAA;AAAA,QACpE;AAAA,QACA,qBAAC,QAAK,WAAU,UACd;AAAA,8BAAC,QAAK,MAAK,KAAI,QAAO,QACnB,qBAAW,MACd;AAAA,UACA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAClB,qBAAW,aACd;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB,cAAc,CAAC;AACjB,GAEG;AACD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,MAAM,SAE1D,CAAC,CAAC;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE;AAC7C,QAAM,WAAW,MAAM,OAA8B,IAAI;AACzD,QAAM,sBAAsB,MAAM,QAAQ,MAAM;AAC9C,WAAO,YAAY,OAAO,CAAC,MAAM;AAC/B,aACE,CAAC,OAAO,KAAK,EAAE,UACf,EAAE,aAAa,YAAY,EAAE,MAAM,OAAO,YAAY,CAAC,KACvD,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,YAAY,CAAC,KAC/C,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,YAAY,CAAC;AAAA,IAEnD,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,QAAM,UAAU,MAAM;AACpB,UAAM,WAAW,MAAM;AACrB,UAAI,SAAS,WAAW,oBAAoB,WAAW,GAAG;AACxD,iBAAS,QAAQ,MAAM,YAAY;AAAA,MACrC;AAAA,IACF;AACA,WAAO,iBAAiB,UAAU,QAAQ;AAC1C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,QAAQ;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,oBAAoB,MAAM,CAAC;AAE/B,SACE,oBAAC,KAAK,OAAL,EAAW,MAAK,eAAc,SAAO,MACpC,+BAAC,QAAK,WAAU,UAAS,OAAM,WAAU,KAAI,KAC3C;AAAA,wBAAC,KAAK,OAAL,EAAW,SAAO,MACjB,8BAAC,SAAM,yBAAW,GACpB;AAAA,IACA,oBAAC,QAAK,MAAK,KAAI,IAAG,KAAI,OAAM,QAAO,6EAEnC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,cAAc;AAAA,UACd,aAAa;AAAA,UACb,aAAa;AAAA,UACb,aAAa;AAAA,QACf;AAAA,QACA,WAAU;AAAA,QACV,OAAM;AAAA,QAEN;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,MAAK;AAAA,cACL,UAAU,CAAC,MAAM;AACf,oBAAI,SAAS,SAAS;AACpB,2BAAS,QAAQ,MAAM,YACrB,SAAS,QAAQ,eAAe,IAAI;AAAA,gBACxC;AACA,0BAAU,EAAE,OAAO,KAAK;AAAA,cAC1B;AAAA,cACA,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,WAAW;AAAA,cACb;AAAA,cACA,aAAY;AAAA,cAEZ,8BAAC,iBAAc,MAAK,QAAO,IAAG,KAC5B,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,UACF;AAAA,UACC,oBAAoB,SAAS,IAC5B,iCACE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,OAAO;AAAA,kBACL,MAAM;AAAA,kBACN,WAAW;AAAA,kBACX,QAAQ;AAAA,kBACR,aAAa;AAAA,gBACf;AAAA,gBAEC,8BAAoB,IAAI,CAAC,eACxB;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS,oBAAoB;AAAA,sBAC3B,CAAC,OAAO,GAAG,SAAS,WAAW;AAAA,oBACjC;AAAA,oBAEA;AAAA,oBACA,UAAU,CAAC,cACT;AAAA,sBAAuB,CAAC,SACtB,YACI,CAAC,GAAG,MAAM,UAAU,IACpB,KAAK,OAAO,CAAC,OAAO,GAAG,SAAS,WAAW,IAAI;AAAA,oBACrD;AAAA;AAAA,kBAPG,WAAW;AAAA,gBASlB,CACD;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,IAAI;AAAA,gBACJ,UAAS;AAAA,gBACT,OAAO;AAAA,kBACL,WAAW;AAAA,kBACX,aAAa;AAAA,gBACf;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,YAAY;AAAA,oBACnB,UAAU,oBAAoB;AAAA,oBAC9B,UAAU,MACR;AAAA,sBAAuB,CAAC,SACtB,KAAK,WAAW,YAAY,SAAS,CAAC,IAAI;AAAA,oBAC5C;AAAA;AAAA,gBAEJ;AAAA;AAAA,YACF;AAAA,aACF,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,KAAI;AAAA,cACJ,IAAG;AAAA,cACH,IAAG;AAAA,cACH,OAAO,EAAE,WAAW,0BAA0B;AAAA,cAC9C,UAAS;AAAA,cACT,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,WAAU;AAAA,cAEV;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,sBACL,OAAO;AAAA,sBACP,OAAO;AAAA,sBACP,QAAQ;AAAA,oBACV;AAAA;AAAA,gBACF;AAAA,gBACA,oBAAC,QAAK,MAAK,KAAI,OAAM,UAAS,IAAG,KAAI,MAAK,WAAU,QAAO,QAAO,8CAElE;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,OAAM;AAAA,oBACN,SAAQ;AAAA,oBACR,SAAS,MAAM,UAAU,EAAE;AAAA,oBAC5B;AAAA;AAAA,gBAED;AAAA;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,QAAK,OAAM,UAAS,KAAI,KACvB;AAAA,wBAAC,QAAK,MAAK,KAAI,OAAO,EAAE,YAAY,GAAG,OAAO,iBAAiB,GAC5D,uBAAa,IACV,4BACA,GAAG,UAAU,cAAc,QAAQ,CAAC,aAC1C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,OAAO,EAAE,QAAQ,WAAW,OAAO,mBAAmB;AAAA,QAErD,oBAAU,WAAW,iBAAiB;AAAA;AAAA,IACzC;AAAA,KACF;AAEJ;AAEO,SAAS,qBAAqB;AACnC,QAAM,EAAE,SAAS,IAAI,kBAAkB;AACvC,SACE,oBAAC,UAAO,SAAS,MAAM,SAAS,EAAE,MAAM,qBAAqB,CAAC,GAAG,4BAEjE;AAEJ;","names":["errors","error","data"]}

package/dist/esm/lib/api-keys/relative-time.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function RelativeTime({ date }: {
+    date?: Date;
+}): react_jsx_runtime.JSX.Element;
+
+export { RelativeTime };

package/dist/esm/lib/api-keys/relative-time.js

@@ -0,0 +1,18 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useIsHydrated } from "../use-is-hydrated.js";
+import { getComparativeReadableDate } from "../utils.js";
+function RelativeTime({ date }) {
+  const isHydrated = useIsHydrated();
+  if (!date) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "Never" });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: isHydrated ? getComparativeReadableDate(/* @__PURE__ */ new Date(), date) : date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }) });
+}
+export {
+  RelativeTime
+};
+//# sourceMappingURL=relative-time.js.map

package/dist/esm/lib/api-keys/relative-time.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/relative-time.tsx"],"sourcesContent":["import { useIsHydrated } from \"../use-is-hydrated.js\";\nimport { getComparativeReadableDate } from \"../utils.js\";\n\nexport function RelativeTime({ date }: { date?: Date }) {\n  const isHydrated = useIsHydrated();\n\n  if (!date) {\n    return <>Never</>;\n  }\n\n  return (\n    <>\n      {isHydrated\n        ? getComparativeReadableDate(new Date(), date)\n        : date.toLocaleDateString(\"en-US\", {\n            month: \"short\",\n            day: \"numeric\",\n            year: \"numeric\",\n          })}\n    </>\n  );\n}\n"],"mappings":"AAOW;AAPX,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAEpC,SAAS,aAAa,EAAE,KAAK,GAAoB;AACtD,QAAM,aAAa,cAAc;AAEjC,MAAI,CAAC,MAAM;AACT,WAAO,gCAAE,mBAAK;AAAA,EAChB;AAEA,SACE,gCACG,uBACG,2BAA2B,oBAAI,KAAK,GAAG,IAAI,IAC3C,KAAK,mBAAmB,SAAS;AAAA,IAC/B,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC,GACP;AAEJ;","names":[]}

package/dist/esm/lib/api-keys/revoke-api-key-dialog.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListOrganizationApiKeysResponseData } from '../../api/endpoint.js';
+import '@tanstack/react-query';
+import '../../api/widgets-api-client.js';
+
+declare function RevokeApiKeyDialog({ apiKey, open, onOpenChange, }: {
+    apiKey: ListOrganizationApiKeysResponseData;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { RevokeApiKeyDialog };

package/dist/esm/lib/api-keys/revoke-api-key-dialog.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Flex, AlertDialog, Callout } from "@radix-ui/themes";
+import { ApiKeyDetailsCard } from "./api-key-details-card.js";
+import {
+  getListOrganizationApiKeysQueryKey
+} from "../../api/endpoint.js";
+import { useDeleteOrganizationApiKey } from "../../api/endpoint.js";
+import { useQueryClient } from "@tanstack/react-query";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+function RevokeApiKeyDialog({
+  apiKey,
+  open,
+  onOpenChange
+}) {
+  const queryClient = useQueryClient();
+  const {
+    mutate: deleteOrganizationApiKey,
+    isPending,
+    error,
+    isSuccess
+  } = useDeleteOrganizationApiKey({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: getListOrganizationApiKeysQueryKey()
+        });
+        onOpenChange(false);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(AlertDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialog.Content, { maxWidth: "529px", children: [
+    /* @__PURE__ */ jsx(AlertDialog.Title, { mb: "2", children: "Revoke API key?" }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
+      /* @__PURE__ */ jsxs(AlertDialog.Description, { size: "2", children: [
+        "This API key will be immediately disabled. API request made using this key will be rejected, which could cause any systems still depending on it to break.",
+        " ",
+        /* @__PURE__ */ jsx("strong", { children: "This action cannot be undone." })
+      ] }),
+      error && /* @__PURE__ */ jsxs(Callout.Root, { color: "red", role: "alert", children: [
+        /* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(ExclamationTriangleIcon, {}) }),
+        /* @__PURE__ */ jsx(Callout.Text, { children: "An error occurred while revoking the API key." })
+      ] }),
+      /* @__PURE__ */ jsx(ApiKeyDetailsCard, { apiKey }),
+      /* @__PURE__ */ jsxs(Flex, { justify: "end", gap: "2", children: [
+        /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", color: "gray", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isPending || isSuccess,
+            loading: isPending || isSuccess,
+            variant: "solid",
+            color: "red",
+            onClick: () => deleteOrganizationApiKey({ apiKeyId: apiKey.id }),
+            children: "Revoke key"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  RevokeApiKeyDialog
+};
+//# sourceMappingURL=revoke-api-key-dialog.js.map

package/dist/esm/lib/api-keys/revoke-api-key-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/revoke-api-key-dialog.tsx"],"sourcesContent":["import { Button, Flex, AlertDialog, Callout } from \"@radix-ui/themes\";\nimport { ApiKeyDetailsCard } from \"./api-key-details-card.js\";\nimport {\n  getListOrganizationApiKeysQueryKey,\n  ListOrganizationApiKeysResponseData,\n} from \"../../api/endpoint.js\";\nimport { useDeleteOrganizationApiKey } from \"../../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { ExclamationTriangleIcon } from \"@radix-ui/react-icons\";\n\nexport function RevokeApiKeyDialog({\n  apiKey,\n  open,\n  onOpenChange,\n}: {\n  apiKey: ListOrganizationApiKeysResponseData;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) {\n  const queryClient = useQueryClient();\n  const {\n    mutate: deleteOrganizationApiKey,\n    isPending,\n    error,\n    isSuccess,\n  } = useDeleteOrganizationApiKey({\n    mutation: {\n      onSuccess: () => {\n        queryClient.invalidateQueries({\n          queryKey: getListOrganizationApiKeysQueryKey(),\n        });\n        onOpenChange(false);\n      },\n    },\n  });\n\n  return (\n    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>\n      <AlertDialog.Content maxWidth=\"529px\">\n        <AlertDialog.Title mb=\"2\">Revoke API key?</AlertDialog.Title>\n        <Flex direction=\"column\" gap=\"5\">\n          <AlertDialog.Description size=\"2\">\n            This API key will be immediately disabled. API request made using\n            this key will be rejected, which could cause any systems still\n            depending on it to break.{\" \"}\n            <strong>This action cannot be undone.</strong>\n          </AlertDialog.Description>\n          {error && (\n            <Callout.Root color=\"red\" role=\"alert\">\n              <Callout.Icon>\n                <ExclamationTriangleIcon />\n              </Callout.Icon>\n              <Callout.Text>\n                An error occurred while revoking the API key.\n              </Callout.Text>\n            </Callout.Root>\n          )}\n          <ApiKeyDetailsCard apiKey={apiKey} />\n          <Flex justify=\"end\" gap=\"2\">\n            <AlertDialog.Cancel>\n              <Button variant=\"outline\" color=\"gray\">\n                Cancel\n              </Button>\n            </AlertDialog.Cancel>\n            <Button\n              disabled={isPending || isSuccess}\n              loading={isPending || isSuccess}\n              variant=\"solid\"\n              color=\"red\"\n              onClick={() => deleteOrganizationApiKey({ apiKeyId: apiKey.id })}\n            >\n              Revoke key\n            </Button>\n          </Flex>\n        </Flex>\n      </AlertDialog.Content>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":"AAuCQ,cAEE,YAFF;AAvCR,SAAS,QAAQ,MAAM,aAAa,eAAe;AACnD,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AAEjC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,cAAc,eAAe;AACnC,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAAA,IAC9B,UAAU;AAAA,MACR,WAAW,MAAM;AACf,oBAAY,kBAAkB;AAAA,UAC5B,UAAU,mCAAmC;AAAA,QAC/C,CAAC;AACD,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SACE,oBAAC,YAAY,MAAZ,EAAiB,MAAY,cAC5B,+BAAC,YAAY,SAAZ,EAAoB,UAAS,SAC5B;AAAA,wBAAC,YAAY,OAAZ,EAAkB,IAAG,KAAI,6BAAe;AAAA,IACzC,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,2BAAC,YAAY,aAAZ,EAAwB,MAAK,KAAI;AAAA;AAAA,QAGN;AAAA,QAC1B,oBAAC,YAAO,2CAA6B;AAAA,SACvC;AAAA,MACC,SACC,qBAAC,QAAQ,MAAR,EAAa,OAAM,OAAM,MAAK,SAC7B;AAAA,4BAAC,QAAQ,MAAR,EACC,8BAAC,2BAAwB,GAC3B;AAAA,QACA,oBAAC,QAAQ,MAAR,EAAa,2DAEd;AAAA,SACF;AAAA,MAEF,oBAAC,qBAAkB,QAAgB;AAAA,MACnC,qBAAC,QAAK,SAAQ,OAAM,KAAI,KACtB;AAAA,4BAAC,YAAY,QAAZ,EACC,8BAAC,UAAO,SAAQ,WAAU,OAAM,QAAO,oBAEvC,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,aAAa;AAAA,YACvB,SAAS,aAAa;AAAA,YACtB,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,SAAS,MAAM,yBAAyB,EAAE,UAAU,OAAO,GAAG,CAAC;AAAA,YAChE;AAAA;AAAA,QAED;AAAA,SACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/esm/lib/api-keys/skeleton-table.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Table } from '@radix-ui/themes';
+
+declare function SkeletonTable({ numRows, columns, }: {
+    numRows: number;
+    columns: Table.ColumnHeaderCellProps[];
+}): react_jsx_runtime.JSX.Element;
+
+export { SkeletonTable };

package/dist/esm/lib/api-keys/skeleton-table.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton, Table } from "@radix-ui/themes";
+function SkeletonTable({
+  numRows,
+  columns
+}) {
+  return /* @__PURE__ */ jsxs(Table.Root, { children: [
+    /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsx(Table.Row, { children: columns.map((column, index) => /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { children: /* @__PURE__ */ jsx(Skeleton, { children: column.children }) }, index)) }) }),
+    /* @__PURE__ */ jsx(Table.Body, { children: Array.from({ length: numRows }).map((_, index) => /* @__PURE__ */ jsx(Table.Row, { children: columns.map((column, index2) => /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Skeleton, { children: column.children }) }, index2)) }, index)) })
+  ] });
+}
+export {
+  SkeletonTable
+};
+//# sourceMappingURL=skeleton-table.js.map

package/dist/esm/lib/api-keys/skeleton-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/skeleton-table.tsx"],"sourcesContent":["import { Skeleton, Table } from \"@radix-ui/themes\";\n\nexport function SkeletonTable({\n  numRows,\n  columns,\n}: {\n  numRows: number;\n  columns: Table.ColumnHeaderCellProps[];\n}) {\n  return (\n    <Table.Root>\n      <Table.Header>\n        <Table.Row>\n          {columns.map((column, index) => (\n            <Table.ColumnHeaderCell key={index}>\n              <Skeleton>{column.children}</Skeleton>\n            </Table.ColumnHeaderCell>\n          ))}\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {Array.from({ length: numRows }).map((_, index) => (\n          <Table.Row key={index}>\n            {columns.map((column, index) => (\n              <Table.Cell key={index}>\n                <Skeleton>{column.children}</Skeleton>\n              </Table.Cell>\n            ))}\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  );\n}\n"],"mappings":"AAUI,SAKU,KALV;AAVJ,SAAS,UAAU,aAAa;AAEzB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,SACE,qBAAC,MAAM,MAAN,EACC;AAAA,wBAAC,MAAM,QAAN,EACC,8BAAC,MAAM,KAAN,EACE,kBAAQ,IAAI,CAAC,QAAQ,UACpB,oBAAC,MAAM,kBAAN,EACC,8BAAC,YAAU,iBAAO,UAAS,KADA,KAE7B,CACD,GACH,GACF;AAAA,IACA,oBAAC,MAAM,MAAN,EACE,gBAAM,KAAK,EAAE,QAAQ,QAAQ,CAAC,EAAE,IAAI,CAAC,GAAG,UACvC,oBAAC,MAAM,KAAN,EACE,kBAAQ,IAAI,CAAC,QAAQA,WACpB,oBAAC,MAAM,MAAN,EACC,8BAAC,YAAU,iBAAO,UAAS,KADZA,MAEjB,CACD,KALa,KAMhB,CACD,GACH;AAAA,KACF;AAEJ;","names":["index"]}

package/dist/esm/lib/change-password-dialog.d.ts

@@ -1,8 +1,10 @@
-import { Dialog } from "@radix-ui/themes";
-import { type ReactNode } from "react";
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dialog } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+
 interface ChangePasswordDialogProps extends Dialog.RootProps {
     children?: ReactNode;
 }
-export declare function ChangePasswordDialog({ children, ...props }: ChangePasswordDialogProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=change-password-dialog.d.ts.map
+declare function ChangePasswordDialog({ children, ...props }: ChangePasswordDialogProps): react_jsx_runtime.JSX.Element;
+
+export { ChangePasswordDialog };