@workos-inc/widgets 1.4.2 → 1.5.1

package/dist/esm/lib/api-keys/api-keys-search.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { IconButton } from "@radix-ui/themes";
+import cx from "clsx";
+import * as React from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { TextField, TextFieldSlot } from "../elements.js";
+import { useApiKeysSearchContext } from "./api-keys-search-provider.js";
+import { useApiKeysContext } from "./api-keys-context.js";
+import { namespaceClassNames } from "../utils.js";
+const ApiKeysSearch = React.forwardRef(({ className, ...props }, ref) => {
+  const { inputRef, clearSearch, searchValue, setSearchValue } = useApiKeysSearchContext();
+  const { dispatch } = useApiKeysContext();
+  const filter = useDebouncedCallback((value) => {
+    dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
+  }, 200);
+  const resetSearch = () => {
+    clearSearch();
+    filter.cancel();
+  };
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      ref: useComposedRefs(inputRef, ref),
+      className: cx(namespaceClassNames("api-keys-search"), className),
+      autoComplete: "off",
+      placeholder: "Search by name",
+      value: searchValue,
+      onChange: (event) => {
+        const value = event.target.value;
+        setSearchValue(value);
+        filter(value);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          resetSearch();
+        }
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TextFieldSlot, { side: "left", children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) }),
+        /* @__PURE__ */ jsx(TextFieldSlot, { side: "right", children: searchValue && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "1",
+            color: "gray",
+            variant: "ghost",
+            radius: "full",
+            onClick: resetSearch,
+            "aria-label": "Clear search",
+            title: "Clear search",
+            children: /* @__PURE__ */ jsx(Cross2Icon, { "aria-hidden": "true" })
+          }
+        ) })
+      ]
+    }
+  );
+});
+export {
+  ApiKeysSearch
+};
+//# sourceMappingURL=api-keys-search.js.map

package/dist/esm/lib/api-keys/api-keys-search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { Cross2Icon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { IconButton } from \"@radix-ui/themes\";\nimport cx from \"clsx\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { TextField, TextFieldSlot } from \"../elements.js\";\nimport { useApiKeysSearchContext } from \"./api-keys-search-provider.js\";\nimport { useApiKeysContext } from \"./api-keys-context.js\";\nimport { namespaceClassNames } from \"../utils.js\";\n\ntype ApiKeysSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;\n\nexport const ApiKeysSearch = React.forwardRef<\n  HTMLInputElement,\n  ApiKeysSearchProps\n>(({ className, ...props }, ref) => {\n  const { inputRef, clearSearch, searchValue, setSearchValue } =\n    useApiKeysSearchContext();\n  const { dispatch } = useApiKeysContext();\n\n  const filter = useDebouncedCallback((value) => {\n    dispatch({ type: \"FILTER_BY_SEARCH\", searchQuery: value });\n  }, 200);\n\n  const resetSearch = () => {\n    clearSearch();\n    filter.cancel();\n  };\n\n  return (\n    <TextField\n      ref={useComposedRefs(inputRef, ref)}\n      className={cx(namespaceClassNames(\"api-keys-search\"), className)}\n      autoComplete=\"off\"\n      placeholder=\"Search by name\"\n      value={searchValue}\n      onChange={(event) => {\n        const value = event.target.value;\n        setSearchValue(value);\n        filter(value);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          resetSearch();\n        }\n      }}\n      {...props}\n    >\n      <TextFieldSlot side=\"left\">\n        <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n      </TextFieldSlot>\n\n      <TextFieldSlot side=\"right\">\n        {searchValue && (\n          <IconButton\n            size=\"1\"\n            color=\"gray\"\n            variant=\"ghost\"\n            radius=\"full\"\n            onClick={resetSearch}\n            aria-label=\"Clear search\"\n            title=\"Clear search\"\n          >\n            <Cross2Icon aria-hidden=\"true\" />\n          </IconButton>\n        )}\n      </TextFieldSlot>\n    </TextField>\n  );\n});\n"],"mappings":";AAiCI,SAoBI,KApBJ;AA/BJ,SAAS,uBAAuB;AAChC,SAAS,YAAY,2BAA2B;AAChD,SAAS,kBAAkB;AAC3B,OAAO,QAAQ;AACf,YAAY,WAAW;AACvB,SAAS,4BAA4B;AACrC,SAAS,WAAW,qBAAqB;AACzC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAI7B,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,UAAU,aAAa,aAAa,eAAe,IACzD,wBAAwB;AAC1B,QAAM,EAAE,SAAS,IAAI,kBAAkB;AAEvC,QAAM,SAAS,qBAAqB,CAAC,UAAU;AAC7C,aAAS,EAAE,MAAM,oBAAoB,aAAa,MAAM,CAAC;AAAA,EAC3D,GAAG,GAAG;AAEN,QAAM,cAAc,MAAM;AACxB,gBAAY;AACZ,WAAO,OAAO;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,gBAAgB,UAAU,GAAG;AAAA,MAClC,WAAW,GAAG,oBAAoB,iBAAiB,GAAG,SAAS;AAAA,MAC/D,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,OAAO;AAAA,MACP,UAAU,CAAC,UAAU;AACnB,cAAM,QAAQ,MAAM,OAAO;AAC3B,uBAAe,KAAK;AACpB,eAAO,KAAK;AAAA,MACd;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,UAAU;AAC1B,gBAAM,eAAe;AACrB,sBAAY;AAAA,QACd;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,iBAAc,MAAK,QAClB,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA,QAEA,oBAAC,iBAAc,MAAK,SACjB,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,QAAO;AAAA,YACP,SAAS;AAAA,YACT,cAAW;AAAA,YACX,OAAM;AAAA,YAEN,8BAAC,cAAW,eAAY,QAAO;AAAA;AAAA,QACjC,GAEJ;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}

package/dist/esm/lib/api-keys/api-keys-state.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ListMetadata, CreateOrganizationApiKeyResponse } from '../../api/endpoint.js';
+import '@tanstack/react-query';
+import '../../api/widgets-api-client.js';
+
+declare function useApiKeysState(initialState: ApiKeysState): readonly [ApiKeysState, React.ActionDispatch<[action: ApiKeysAction]>];
+interface ApiKeysState {
+    searchQuery: string | null;
+    pagination: ListMetadata | null;
+    createDialogOpen: boolean;
+    createdApiKey: CreateOrganizationApiKeyResponse | null;
+}
+type ApiKeysAction = {
+    type: "INIT";
+    params: URLSearchParams;
+} | {
+    type: "FILTER_BY_SEARCH";
+    searchQuery: string | null;
+} | {
+    type: "SET_PAGINATION";
+    pagination: ListMetadata;
+} | {
+    type: "OPEN_CREATE_DIALOG";
+} | {
+    type: "CLOSE_CREATE_DIALOG";
+} | {
+    type: "SET_CREATED_API_KEY";
+    apiKey: CreateOrganizationApiKeyResponse;
+};
+
+export { type ApiKeysAction, type ApiKeysState, useApiKeysState };

package/dist/esm/lib/api-keys/api-keys-state.js

@@ -0,0 +1,123 @@
+import * as React from "react";
+import { canUseDOM } from "../utils.js";
+function useApiKeysState(initialState) {
+  const [[state, effects], dispatch] = React.useReducer(reducer, [
+    initialState,
+    []
+  ]);
+  React.useEffect(() => {
+    if (window !== window.top) {
+      return;
+    }
+    const params = new URLSearchParams(window.location.search);
+    dispatch({ type: "INIT", params });
+  }, []);
+  React.useEffect(() => {
+    for (const effect of effects) {
+      effect();
+    }
+  }, [effects]);
+  return [state, dispatch];
+}
+function reducer(current, action) {
+  const effects = [];
+  const exec = (fn) => {
+    const effect = () => {
+      if (!effect.disposed) {
+        effect.disposed = true;
+        fn();
+      }
+    };
+    effect.disposed = false;
+    effects.push(effect);
+  };
+  const [currentState] = current;
+  switch (action.type) {
+    case "INIT": {
+      const { params } = action;
+      let searchQuery;
+      if (searchQuery = params.get("ak_q")) {
+        return [{ ...currentState, searchQuery }, effects];
+      }
+      return current;
+    }
+    case "SET_PAGINATION": {
+      const { pagination } = action;
+      if (pagination.after && pagination.after === currentState.pagination?.after || pagination.before && pagination.before === currentState.pagination?.before) {
+        return current;
+      }
+      return [{ ...currentState, pagination }, effects];
+    }
+    case "FILTER_BY_SEARCH": {
+      if (action.searchQuery === currentState.searchQuery) {
+        return current;
+      }
+      const { searchQuery } = action;
+      exec(
+        () => updateQueryParams({ ak_q: searchQuery }, { replaceState: true })
+      );
+      return [{ ...currentState, pagination: null, searchQuery }, effects];
+    }
+    case "OPEN_CREATE_DIALOG": {
+      return [
+        {
+          ...currentState,
+          createDialogOpen: true,
+          createdApiKey: null
+        },
+        effects
+      ];
+    }
+    case "CLOSE_CREATE_DIALOG": {
+      return [
+        {
+          ...currentState,
+          createDialogOpen: false,
+          createdApiKey: null
+        },
+        effects
+      ];
+    }
+    case "SET_CREATED_API_KEY": {
+      return [
+        {
+          ...currentState,
+          createdApiKey: action.apiKey
+        },
+        effects
+      ];
+    }
+    default:
+      return current;
+  }
+}
+function updateQueryParams(newParams, args = {}) {
+  if (!canUseDOM) {
+    throw new Error("Cannot update query params on the server");
+  }
+  if (window !== window.top) {
+    return;
+  }
+  const initialSearch = window.location.search;
+  const params = new URLSearchParams(initialSearch);
+  Object.entries(newParams).forEach(([key, value]) => {
+    if (value != null && value !== "") {
+      params.set(key, String(value));
+    } else {
+      params.delete(key);
+    }
+  });
+  if (initialSearch === `?${params.toString()}`) {
+    return;
+  }
+  const newUrl = params.toString() ? `${window.location.pathname}?${params}` : window.location.pathname;
+  if (args.replaceState) {
+    window.history.replaceState({}, "", newUrl);
+  } else {
+    window.history.pushState({}, "", newUrl);
+  }
+}
+export {
+  useApiKeysState
+};
+//# sourceMappingURL=api-keys-state.js.map

package/dist/esm/lib/api-keys/api-keys-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys-state.ts"],"sourcesContent":["import * as React from \"react\";\nimport { canUseDOM } from \"../utils.js\";\nimport {\n  CreateOrganizationApiKeyResponse,\n  ListMetadata,\n} from \"../../api/endpoint.js\";\n\nexport function useApiKeysState(initialState: ApiKeysState) {\n  const [[state, effects], dispatch] = React.useReducer(reducer, [\n    initialState,\n    [],\n  ]);\n\n  React.useEffect(() => {\n    if (window !== window.top) {\n      // do not use query params if widget is rendered in an iframe\n      return;\n    }\n    const params = new URLSearchParams(window.location.search);\n    dispatch({ type: \"INIT\", params });\n  }, []);\n\n  React.useEffect(() => {\n    for (const effect of effects) {\n      effect();\n    }\n  }, [effects]);\n\n  return [state, dispatch] as const;\n}\n\nfunction reducer(\n  current: StateWithEffects<ApiKeysState>,\n  action: ApiKeysAction,\n): StateWithEffects<ApiKeysState> {\n  const effects: EffectFn[] = [];\n  const exec = (fn: () => void) => {\n    const effect = () => {\n      if (!effect.disposed) {\n        effect.disposed = true;\n        fn();\n      }\n    };\n    effect.disposed = false;\n    effects.push(effect);\n  };\n\n  const [currentState] = current;\n  switch (action.type) {\n    case \"INIT\": {\n      const { params } = action;\n      let searchQuery;\n      if ((searchQuery = params.get(\"ak_q\"))) {\n        return [{ ...currentState, searchQuery }, effects];\n      }\n      return current;\n    }\n    case \"SET_PAGINATION\": {\n      const { pagination } = action;\n      if (\n        (pagination.after &&\n          pagination.after === currentState.pagination?.after) ||\n        (pagination.before &&\n          pagination.before === currentState.pagination?.before)\n      ) {\n        return current;\n      }\n\n      return [{ ...currentState, pagination }, effects];\n    }\n    case \"FILTER_BY_SEARCH\": {\n      if (action.searchQuery === currentState.searchQuery) {\n        return current;\n      }\n      const { searchQuery } = action;\n      exec(() =>\n        updateQueryParams({ ak_q: searchQuery }, { replaceState: true }),\n      );\n      return [{ ...currentState, pagination: null, searchQuery }, effects];\n    }\n    case \"OPEN_CREATE_DIALOG\": {\n      return [\n        {\n          ...currentState,\n          createDialogOpen: true,\n          createdApiKey: null,\n        },\n        effects,\n      ];\n    }\n    case \"CLOSE_CREATE_DIALOG\": {\n      return [\n        {\n          ...currentState,\n          createDialogOpen: false,\n          createdApiKey: null,\n        },\n        effects,\n      ];\n    }\n    case \"SET_CREATED_API_KEY\": {\n      return [\n        {\n          ...currentState,\n          createdApiKey: action.apiKey,\n        },\n        effects,\n      ];\n    }\n    default:\n      return current;\n  }\n}\n\nexport interface ApiKeysState {\n  searchQuery: string | null;\n  pagination: ListMetadata | null;\n  createDialogOpen: boolean;\n  createdApiKey: CreateOrganizationApiKeyResponse | null;\n}\n\nexport type ApiKeysAction =\n  | { type: \"INIT\"; params: URLSearchParams }\n  | { type: \"FILTER_BY_SEARCH\"; searchQuery: string | null }\n  | { type: \"SET_PAGINATION\"; pagination: ListMetadata }\n  | { type: \"OPEN_CREATE_DIALOG\" }\n  | { type: \"CLOSE_CREATE_DIALOG\" }\n  | { type: \"SET_CREATED_API_KEY\"; apiKey: CreateOrganizationApiKeyResponse };\n\ntype EffectFn = {\n  (): void;\n  disposed: boolean;\n};\n\ntype StateWithEffects<State> = [State, EffectFn[]];\n\nfunction updateQueryParams(\n  newParams: { [key: string]: { toString(): string } | null },\n  args: { replaceState?: boolean } = {},\n) {\n  if (!canUseDOM) {\n    throw new Error(\"Cannot update query params on the server\");\n  }\n\n  if (window !== window.top) {\n    // do not update query params if widget is rendered in an iframe\n    return;\n  }\n\n  const initialSearch = window.location.search;\n  const params = new URLSearchParams(initialSearch);\n  Object.entries(newParams).forEach(([key, value]) => {\n    if (value != null && value !== \"\") {\n      params.set(key, String(value));\n    } else {\n      params.delete(key);\n    }\n  });\n\n  if (initialSearch === `?${params.toString()}`) {\n    return;\n  }\n\n  const newUrl = params.toString()\n    ? `${window.location.pathname}?${params}`\n    : window.location.pathname;\n\n  if (args.replaceState) {\n    window.history.replaceState({}, \"\", newUrl);\n  } else {\n    window.history.pushState({}, \"\", newUrl);\n  }\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListOrganizationApiKeysResponse } from '../../api/endpoint.js';
+import '@tanstack/react-query';
+import '../../api/widgets-api-client.js';
+
+declare function ApiKeysTable({ apiKeys, }: {
+    apiKeys: ListOrganizationApiKeysResponse;
+}): react_jsx_runtime.JSX.Element;
+
+export { ApiKeysTable };

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

@@ -0,0 +1,169 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  Flex,
+  Text,
+  IconButton,
+  Table,
+  Code,
+  DropdownMenu,
+  Heading
+} from "@radix-ui/themes";
+import {
+  DestructiveMenuItem,
+  DropdownMenuContent,
+  SecondaryButton
+} from "../elements.js";
+import { DotsHorizontalIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import { RevokeApiKeyDialog } from "./revoke-api-key-dialog.js";
+import { CreateApiKeyButton } from "./create-api-key.js";
+import { ApiKeyDetailsDialog } from "./api-key-details-dialog.js";
+import { useIsHydrated } from "../use-is-hydrated.js";
+import { RelativeTime } from "./relative-time.js";
+import { useApiKeysContext } from "./api-keys-context.js";
+import { useApiKeysSearchContext } from "./api-keys-search-provider.js";
+import { ApiKeysSearch } from "./api-keys-search.js";
+function NoApiKeys() {
+  const { clearSearch } = useApiKeysSearchContext();
+  return /* @__PURE__ */ jsxs(Flex, { p: "6", gap: "4", justify: "center", align: "center", direction: "column", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", maxWidth: "420px", align: "center", children: [
+      /* @__PURE__ */ jsx(
+        MagnifyingGlassIcon,
+        {
+          style: { color: "var(--gray-9)" },
+          width: "32px",
+          height: "32px"
+        }
+      ),
+      /* @__PURE__ */ jsx(Heading, { size: "5", mb: "1", wrap: "balance", as: "h3", children: "No API keys match your search" })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", color: "gray", onClick: clearSearch, children: "Clear search" })
+  ] });
+}
+function ApiKeysTableHeader() {
+  return /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", children: [
+    /* @__PURE__ */ jsx(ApiKeysSearch, { name: "api-keys-widget-search", style: { width: "390px" } }),
+    /* @__PURE__ */ jsx(CreateApiKeyButton, {})
+  ] });
+}
+function CreatedOn({ createdOn }) {
+  const isHydrated = useIsHydrated();
+  return /* @__PURE__ */ jsx(Fragment, { children: createdOn.toLocaleDateString("en-US", {
+    timeZone: isHydrated ? void 0 : "UTC",
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }) });
+}
+function ApiKeyRow({ apiKey }) {
+  const [revokeDialogOpen, setRevokeDialogOpen] = useState(false);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RevokeApiKeyDialog,
+      {
+        open: revokeDialogOpen,
+        onOpenChange: setRevokeDialogOpen,
+        apiKey
+      },
+      `${revokeDialogOpen}`
+    ),
+    /* @__PURE__ */ jsx(
+      ApiKeyDetailsDialog,
+      {
+        open: detailsOpen,
+        onOpenChange: setDetailsOpen,
+        apiKey,
+        permissions: apiKey.permissions
+      }
+    ),
+    /* @__PURE__ */ jsxs(Table.Row, { children: [
+      /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Text, { children: apiKey.name }) }),
+      /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Code, { color: "gray", children: apiKey.obfuscatedValue }) }),
+      /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: apiKey.lastUsedAt ? void 0 : { color: "var(--gray-10)" },
+          children: /* @__PURE__ */ jsx(
+            RelativeTime,
+            {
+              date: apiKey.lastUsedAt ? new Date(apiKey.lastUsedAt) : void 0
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(CreatedOn, { createdOn: new Date(apiKey.createdAt) }) }) }),
+      /* @__PURE__ */ jsx(Table.Cell, { justify: "end", children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            radius: "full",
+            style: { verticalAlign: "middle" },
+            variant: "ghost",
+            color: "gray",
+            title: "API key actions",
+            children: /* @__PURE__ */ jsx(DotsHorizontalIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { size: "2", align: "end", children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => setDetailsOpen(true), children: "View details" }),
+          /* @__PURE__ */ jsx(DestructiveMenuItem, { onSelect: () => setRevokeDialogOpen(true), children: "Revoke key" })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+function ApiKeysTable({
+  apiKeys
+}) {
+  const { dispatch } = useApiKeysContext();
+  const hasPagination = apiKeys.listMetadata.before || apiKeys.listMetadata.after;
+  const hasPreviousPage = apiKeys.listMetadata.after;
+  const hasNextPage = apiKeys.listMetadata.before;
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "stretch", gap: "3", children: [
+    /* @__PURE__ */ jsx(ApiKeysTableHeader, {}),
+    apiKeys.data.length === 0 ? /* @__PURE__ */ jsx(NoApiKeys, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Table.Root, { variant: "ghost", size: "2", children: [
+        /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+          /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "25%", children: "Name" }),
+          /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "25%", children: "Secret key" }),
+          /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "25%", children: "Last used" }),
+          /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "25%", children: "Created" }),
+          /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "28px" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Body, { children: apiKeys.data.map((apiKey) => /* @__PURE__ */ jsx(ApiKeyRow, { apiKey }, apiKey.id)) })
+      ] }),
+      hasPagination && /* @__PURE__ */ jsxs(Flex, { gap: "2", justify: "end", children: [
+        /* @__PURE__ */ jsx(
+          SecondaryButton,
+          {
+            disabled: !hasPreviousPage,
+            size: "1",
+            onClick: () => dispatch({
+              type: "SET_PAGINATION",
+              pagination: { after: apiKeys.listMetadata.after }
+            }),
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SecondaryButton,
+          {
+            disabled: !hasNextPage,
+            size: "1",
+            onClick: () => dispatch({
+              type: "SET_PAGINATION",
+              pagination: { before: apiKeys.listMetadata.before }
+            }),
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  ApiKeysTable
+};
+//# sourceMappingURL=api-keys-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys-table.tsx"],"sourcesContent":["import {\n  Button,\n  Flex,\n  Text,\n  IconButton,\n  Table,\n  Code,\n  DropdownMenu,\n  Heading,\n} from \"@radix-ui/themes\";\nimport {\n  DestructiveMenuItem,\n  DropdownMenuContent,\n  SecondaryButton,\n} from \"../elements.js\";\nimport { DotsHorizontalIcon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { useState } from \"react\";\nimport { RevokeApiKeyDialog } from \"./revoke-api-key-dialog.js\";\nimport { CreateApiKeyButton } from \"./create-api-key.js\";\nimport { ApiKeyDetailsDialog } from \"./api-key-details-dialog.js\";\nimport { useIsHydrated } from \"../use-is-hydrated.js\";\nimport { RelativeTime } from \"./relative-time.js\";\nimport {\n  ListOrganizationApiKeysResponse,\n  ListOrganizationApiKeysResponseData,\n} from \"../../api/endpoint.js\";\nimport { useApiKeysContext } from \"./api-keys-context.js\";\nimport { useApiKeysSearchContext } from \"./api-keys-search-provider.js\";\nimport { ApiKeysSearch } from \"./api-keys-search.js\";\n\nfunction NoApiKeys() {\n  const { clearSearch } = useApiKeysSearchContext();\n  return (\n    <Flex p=\"6\" gap=\"4\" justify=\"center\" align=\"center\" direction=\"column\">\n      <Flex direction=\"column\" gap=\"1\" maxWidth=\"420px\" align=\"center\">\n        <MagnifyingGlassIcon\n          style={{ color: \"var(--gray-9)\" }}\n          width=\"32px\"\n          height=\"32px\"\n        />\n        <Heading size=\"5\" mb=\"1\" wrap=\"balance\" as=\"h3\">\n          No API keys match your search\n        </Heading>\n      </Flex>\n\n      <Button variant=\"outline\" color=\"gray\" onClick={clearSearch}>\n        Clear search\n      </Button>\n    </Flex>\n  );\n}\n\nfunction ApiKeysTableHeader() {\n  return (\n    <Flex justify=\"between\" align=\"center\">\n      <ApiKeysSearch name=\"api-keys-widget-search\" style={{ width: \"390px\" }} />\n      <CreateApiKeyButton />\n    </Flex>\n  );\n}\n\nfunction CreatedOn({ createdOn }: { createdOn: Date }) {\n  const isHydrated = useIsHydrated();\n  return (\n    <>\n      {createdOn.toLocaleDateString(\"en-US\", {\n        timeZone: isHydrated ? undefined : \"UTC\",\n        month: \"short\",\n        day: \"numeric\",\n        year: \"numeric\",\n      })}\n    </>\n  );\n}\n\ninterface ApiKeyRowProps {\n  apiKey: ListOrganizationApiKeysResponseData;\n}\n\nfunction ApiKeyRow({ apiKey }: ApiKeyRowProps) {\n  const [revokeDialogOpen, setRevokeDialogOpen] = useState(false);\n  const [detailsOpen, setDetailsOpen] = useState(false);\n  return (\n    <>\n      <RevokeApiKeyDialog\n        // always remount the form when the dialog is opened to reset the validation errors\n        key={`${revokeDialogOpen}`}\n        open={revokeDialogOpen}\n        onOpenChange={setRevokeDialogOpen}\n        apiKey={apiKey}\n      />\n      <ApiKeyDetailsDialog\n        open={detailsOpen}\n        onOpenChange={setDetailsOpen}\n        apiKey={apiKey}\n        permissions={apiKey.permissions}\n      />\n      <Table.Row>\n        <Table.Cell>\n          <Text>{apiKey.name}</Text>\n        </Table.Cell>\n        <Table.Cell>\n          <Code color=\"gray\">{apiKey.obfuscatedValue}</Code>\n        </Table.Cell>\n        <Table.Cell>\n          <Text\n            style={apiKey.lastUsedAt ? undefined : { color: \"var(--gray-10)\" }}\n          >\n            <RelativeTime\n              date={apiKey.lastUsedAt ? new Date(apiKey.lastUsedAt) : undefined}\n            />\n          </Text>\n        </Table.Cell>\n        <Table.Cell>\n          <Text>\n            <CreatedOn createdOn={new Date(apiKey.createdAt)} />\n          </Text>\n        </Table.Cell>\n        <Table.Cell justify=\"end\">\n          <DropdownMenu.Root>\n            <DropdownMenu.Trigger>\n              <IconButton\n                radius=\"full\"\n                style={{ verticalAlign: \"middle\" }}\n                variant=\"ghost\"\n                color=\"gray\"\n                title=\"API key actions\"\n              >\n                <DotsHorizontalIcon />\n              </IconButton>\n            </DropdownMenu.Trigger>\n            <DropdownMenuContent size=\"2\" align=\"end\">\n              <DropdownMenu.Item onSelect={() => setDetailsOpen(true)}>\n                View details\n              </DropdownMenu.Item>\n              <DestructiveMenuItem onSelect={() => setRevokeDialogOpen(true)}>\n                Revoke key\n              </DestructiveMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu.Root>\n        </Table.Cell>\n      </Table.Row>\n    </>\n  );\n}\n\nexport function ApiKeysTable({\n  apiKeys,\n}: {\n  apiKeys: ListOrganizationApiKeysResponse;\n}) {\n  const { dispatch } = useApiKeysContext();\n  const hasPagination =\n    apiKeys.listMetadata.before || apiKeys.listMetadata.after;\n  const hasPreviousPage = apiKeys.listMetadata.after;\n  const hasNextPage = apiKeys.listMetadata.before;\n\n  return (\n    <Flex direction=\"column\" align=\"stretch\" gap=\"3\">\n      <ApiKeysTableHeader />\n      {apiKeys.data.length === 0 ? (\n        <NoApiKeys />\n      ) : (\n        <>\n          <Table.Root variant=\"ghost\" size=\"2\">\n            <Table.Header>\n              <Table.Row>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  Name\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  Secret key\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  Last used\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  Created\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"28px\" />\n              </Table.Row>\n            </Table.Header>\n            <Table.Body>\n              {apiKeys.data.map((apiKey) => (\n                <ApiKeyRow key={apiKey.id} apiKey={apiKey} />\n              ))}\n            </Table.Body>\n          </Table.Root>\n          {hasPagination && (\n            <Flex gap=\"2\" justify=\"end\">\n              <SecondaryButton\n                disabled={!hasPreviousPage}\n                size=\"1\"\n                onClick={() =>\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { after: apiKeys.listMetadata.after },\n                  })\n                }\n              >\n                Previous\n              </SecondaryButton>\n              <SecondaryButton\n                disabled={!hasNextPage}\n                size=\"1\"\n                onClick={() =>\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { before: apiKeys.listMetadata.before },\n                  })\n                }\n              >\n                Next\n              </SecondaryButton>\n            </Flex>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n}\n"],"mappings":"AAkCM,SA8BF,UA7BI,KADF;AAlCN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB,2BAA2B;AACxD,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAK7B,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAE9B,SAAS,YAAY;AACnB,QAAM,EAAE,YAAY,IAAI,wBAAwB;AAChD,SACE,qBAAC,QAAK,GAAE,KAAI,KAAI,KAAI,SAAQ,UAAS,OAAM,UAAS,WAAU,UAC5D;AAAA,yBAAC,QAAK,WAAU,UAAS,KAAI,KAAI,UAAS,SAAQ,OAAM,UACtD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,EAAE,OAAO,gBAAgB;AAAA,UAChC,OAAM;AAAA,UACN,QAAO;AAAA;AAAA,MACT;AAAA,MACA,oBAAC,WAAQ,MAAK,KAAI,IAAG,KAAI,MAAK,WAAU,IAAG,MAAK,2CAEhD;AAAA,OACF;AAAA,IAEA,oBAAC,UAAO,SAAQ,WAAU,OAAM,QAAO,SAAS,aAAa,0BAE7D;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB;AAC5B,SACE,qBAAC,QAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,wBAAC,iBAAc,MAAK,0BAAyB,OAAO,EAAE,OAAO,QAAQ,GAAG;AAAA,IACxE,oBAAC,sBAAmB;AAAA,KACtB;AAEJ;AAEA,SAAS,UAAU,EAAE,UAAU,GAAwB;AACrD,QAAM,aAAa,cAAc;AACjC,SACE,gCACG,oBAAU,mBAAmB,SAAS;AAAA,IACrC,UAAU,aAAa,SAAY;AAAA,IACnC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC,GACH;AAEJ;AAMA,SAAS,UAAU,EAAE,OAAO,GAAmB;AAC7C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QAGC,MAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA;AAAA,MAHK,GAAG,gBAAgB;AAAA,IAI1B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACA,aAAa,OAAO;AAAA;AAAA,IACtB;AAAA,IACA,qBAAC,MAAM,KAAN,EACC;AAAA,0BAAC,MAAM,MAAN,EACC,8BAAC,QAAM,iBAAO,MAAK,GACrB;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,QAAK,OAAM,QAAQ,iBAAO,iBAAgB,GAC7C;AAAA,MACA,oBAAC,MAAM,MAAN,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,OAAO,aAAa,SAAY,EAAE,OAAO,iBAAiB;AAAA,UAEjE;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,OAAO,aAAa,IAAI,KAAK,OAAO,UAAU,IAAI;AAAA;AAAA,UAC1D;AAAA;AAAA,MACF,GACF;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,QACC,8BAAC,aAAU,WAAW,IAAI,KAAK,OAAO,SAAS,GAAG,GACpD,GACF;AAAA,MACA,oBAAC,MAAM,MAAN,EAAW,SAAQ,OAClB,+BAAC,aAAa,MAAb,EACC;AAAA,4BAAC,aAAa,SAAb,EACC;AAAA,UAAC;AAAA;AAAA,YACC,QAAO;AAAA,YACP,OAAO,EAAE,eAAe,SAAS;AAAA,YACjC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,OAAM;AAAA,YAEN,8BAAC,sBAAmB;AAAA;AAAA,QACtB,GACF;AAAA,QACA,qBAAC,uBAAoB,MAAK,KAAI,OAAM,OAClC;AAAA,8BAAC,aAAa,MAAb,EAAkB,UAAU,MAAM,eAAe,IAAI,GAAG,0BAEzD;AAAA,UACA,oBAAC,uBAAoB,UAAU,MAAM,oBAAoB,IAAI,GAAG,wBAEhE;AAAA,WACF;AAAA,SACF,GACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AACF,GAEG;AACD,QAAM,EAAE,SAAS,IAAI,kBAAkB;AACvC,QAAM,gBACJ,QAAQ,aAAa,UAAU,QAAQ,aAAa;AACtD,QAAM,kBAAkB,QAAQ,aAAa;AAC7C,QAAM,cAAc,QAAQ,aAAa;AAEzC,SACE,qBAAC,QAAK,WAAU,UAAS,OAAM,WAAU,KAAI,KAC3C;AAAA,wBAAC,sBAAmB;AAAA,IACnB,QAAQ,KAAK,WAAW,IACvB,oBAAC,aAAU,IAEX,iCACE;AAAA,2BAAC,MAAM,MAAN,EAAW,SAAQ,SAAQ,MAAK,KAC/B;AAAA,4BAAC,MAAM,QAAN,EACC,+BAAC,MAAM,KAAN,EACC;AAAA,8BAAC,MAAM,kBAAN,EAAuB,OAAM,OAAM,kBAEpC;AAAA,UACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,OAAM,wBAEpC;AAAA,UACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,OAAM,uBAEpC;AAAA,UACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,OAAM,qBAEpC;AAAA,UACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,QAAO;AAAA,WACvC,GACF;AAAA,QACA,oBAAC,MAAM,MAAN,EACE,kBAAQ,KAAK,IAAI,CAAC,WACjB,oBAAC,aAA0B,UAAX,OAAO,EAAoB,CAC5C,GACH;AAAA,SACF;AAAA,MACC,iBACC,qBAAC,QAAK,KAAI,KAAI,SAAQ,OACpB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,CAAC;AAAA,YACX,MAAK;AAAA,YACL,SAAS,MACP,SAAS;AAAA,cACP,MAAM;AAAA,cACN,YAAY,EAAE,OAAO,QAAQ,aAAa,MAAM;AAAA,YAClD,CAAC;AAAA,YAEJ;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,CAAC;AAAA,YACX,MAAK;AAAA,YACL,SAAS,MACP,SAAS;AAAA,cACP,MAAM;AAAA,cACN,YAAY,EAAE,QAAQ,QAAQ,aAAa,OAAO;AAAA,YACpD,CAAC;AAAA,YAEJ;AAAA;AAAA,QAED;AAAA,SACF;AAAA,OAEJ;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Flex } from '@radix-ui/themes';
+
+declare function ApiKeysError({ error }: {
+    error: unknown;
+}): react_jsx_runtime.JSX.Element;
+declare function ApiKeysEmptyState(): react_jsx_runtime.JSX.Element;
+declare function ApiKeysLoading(): react_jsx_runtime.JSX.Element;
+declare function ApiKeysRoot({ className, children, ...props }: React.ComponentProps<typeof Flex>): react_jsx_runtime.JSX.Element;
+
+export { ApiKeysEmptyState, ApiKeysError, ApiKeysLoading, ApiKeysRoot };

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

@@ -0,0 +1,74 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Flex, Skeleton } from "@radix-ui/themes";
+import { TextField, TextFieldSlot } from "../elements.js";
+import { GenericError } from "../generic-error.js";
+import { EmptyState } from "../empty-state.js";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { SkeletonTable } from "./skeleton-table.js";
+import { CreateApiKeyButton } from "./create-api-key.js";
+import clsx from "clsx";
+function ApiKeysError({ error }) {
+  return /* @__PURE__ */ jsx(GenericError, { error });
+}
+function ApiKeysEmptyState() {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      heading: "No API keys yet",
+      message: "Generate an API key to authenticate and interact with our API.",
+      action: /* @__PURE__ */ jsx(CreateApiKeyButton, {})
+    }
+  );
+}
+function ApiKeysLoading() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          name: "api-keys-widget-search",
+          style: { width: "390px" },
+          placeholder: "Search by name",
+          children: /* @__PURE__ */ jsx(TextFieldSlot, { side: "left", children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Button, { children: "Create API key" }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      SkeletonTable,
+      {
+        numRows: 5,
+        columns: [
+          { children: "Name", width: "25%" },
+          { children: "Secret key", width: "25%" },
+          { children: "Last used", width: "25%" },
+          { children: "Created", width: "25%" }
+        ]
+      }
+    )
+  ] });
+}
+function ApiKeysRoot({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      className: clsx("woswidgets-widget", className),
+      "data-woswidgets-widget-id": "api-keys",
+      direction: "column",
+      gap: "3",
+      ...props,
+      children
+    }
+  );
+}
+export {
+  ApiKeysEmptyState,
+  ApiKeysError,
+  ApiKeysLoading,
+  ApiKeysRoot
+};
+//# sourceMappingURL=api-keys.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys.tsx"],"sourcesContent":["import { Button, Flex, Skeleton } from \"@radix-ui/themes\";\nimport { TextField, TextFieldSlot } from \"../elements.js\";\nimport { GenericError } from \"../generic-error.js\";\nimport { EmptyState } from \"../empty-state.js\";\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { SkeletonTable } from \"./skeleton-table.js\";\nimport { CreateApiKeyButton } from \"./create-api-key.js\";\nimport clsx from \"clsx\";\n\nexport function ApiKeysError({ error }: { error: unknown }) {\n  return <GenericError error={error} />;\n}\n\nexport function ApiKeysEmptyState() {\n  return (\n    <EmptyState\n      heading=\"No API keys yet\"\n      message=\"Generate an API key to authenticate and interact with our API.\"\n      action={<CreateApiKeyButton />}\n    />\n  );\n}\n\nexport function ApiKeysLoading() {\n  return (\n    <>\n      <Flex justify=\"between\" align=\"center\">\n        <Skeleton>\n          <TextField\n            name=\"api-keys-widget-search\"\n            style={{ width: \"390px\" }}\n            placeholder=\"Search by name\"\n          >\n            <TextFieldSlot side=\"left\">\n              <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n            </TextFieldSlot>\n          </TextField>\n        </Skeleton>\n        <Skeleton>\n          <Button>Create API key</Button>\n        </Skeleton>\n      </Flex>\n      <SkeletonTable\n        numRows={5}\n        columns={[\n          { children: \"Name\", width: \"25%\" },\n          { children: \"Secret key\", width: \"25%\" },\n          { children: \"Last used\", width: \"25%\" },\n          { children: \"Created\", width: \"25%\" },\n        ]}\n      />\n    </>\n  );\n}\n\nexport function ApiKeysRoot({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      className={clsx(\"woswidgets-widget\", className)}\n      data-woswidgets-widget-id=\"api-keys\"\n      direction=\"column\"\n      gap=\"3\"\n      {...props}\n    >\n      {children}\n    </Flex>\n  );\n}\n"],"mappings":"AAUS,SAeL,UAfK,KAgBH,YAhBG;AAVT,SAAS,QAAQ,MAAM,gBAAgB;AACvC,SAAS,WAAW,qBAAqB;AACzC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,OAAO,UAAU;AAEV,SAAS,aAAa,EAAE,MAAM,GAAuB;AAC1D,SAAO,oBAAC,gBAAa,OAAc;AACrC;AAEO,SAAS,oBAAoB;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ,oBAAC,sBAAmB;AAAA;AAAA,EAC9B;AAEJ;AAEO,SAAS,iBAAiB;AAC/B,SACE,iCACE;AAAA,yBAAC,QAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,0BAAC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,EAAE,OAAO,QAAQ;AAAA,UACxB,aAAY;AAAA,UAEZ,8BAAC,iBAAc,MAAK,QAClB,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,MACF,GACF;AAAA,MACA,oBAAC,YACC,8BAAC,UAAO,4BAAc,GACxB;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAS;AAAA,UACP,EAAE,UAAU,QAAQ,OAAO,MAAM;AAAA,UACjC,EAAE,UAAU,cAAc,OAAO,MAAM;AAAA,UACvC,EAAE,UAAU,aAAa,OAAO,MAAM;AAAA,UACtC,EAAE,UAAU,WAAW,OAAO,MAAM;AAAA,QACtC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,qBAAqB,SAAS;AAAA,MAC9C,6BAA0B;AAAA,MAC1B,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function CreateApiKeyDialog(): react_jsx_runtime.JSX.Element;
+declare function CreateApiKeyButton(): react_jsx_runtime.JSX.Element;
+
+export { CreateApiKeyButton, CreateApiKeyDialog };