@workos-inc/widgets 1.7.2 → 1.8.0

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

@@ -11,6 +11,9 @@ 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";
+import { Translation } from "../i18n/translation.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { useLocale } from "../i18n/use-locale.js";
 function NoApiKeys() {
   const { clearSearch } = useApiKeysSearchContext();
   return /* @__PURE__ */ jsxs(Flex, { p: "6", gap: "4", justify: "center", align: "center", direction: "column", children: [
@@ -23,9 +26,23 @@ function NoApiKeys() {
           height: "32px"
         }
       ),
-      /* @__PURE__ */ jsx(Heading, { size: "5", mb: "1", wrap: "balance", as: "h3", children: "No API keys match your search" })
+      /* @__PURE__ */ jsx(Heading, { size: "5", mb: "1", wrap: "balance", as: "h3", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "No API keys match your search",
+          id: "cKitHb",
+          description: "Empty state message when no API keys match search"
+        }
+      ) })
     ] }),
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: clearSearch, children: "Clear search" })
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: clearSearch, children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Clear search",
+        id: "jTupOW",
+        description: "Button to clear API key search filters"
+      }
+    ) })
   ] });
 }
 function ApiKeysTableHeader() {
@@ -36,7 +53,8 @@ function ApiKeysTableHeader() {
 }
 function CreatedOn({ createdOn }) {
   const isHydrated = useIsHydrated();
-  return /* @__PURE__ */ jsx(Fragment, { children: createdOn.toLocaleDateString("en-US", {
+  const locale = useLocale();
+  return /* @__PURE__ */ jsx(Fragment, { children: createdOn.toLocaleDateString(locale, {
     timeZone: isHydrated ? void 0 : "UTC",
     month: "short",
     day: "numeric",
@@ -46,6 +64,7 @@ function CreatedOn({ createdOn }) {
 function ApiKeyRow({ apiKey }) {
   const [revokeDialogOpen, setRevokeDialogOpen] = useState(false);
   const [detailsOpen, setDetailsOpen] = useState(false);
+  const translate = useTranslation();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       RevokeApiKeyDialog,
@@ -82,15 +101,36 @@ function ApiKeyRow({ apiKey }) {
       ) }),
       /* @__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, { "aria-label": "API key actions", title: "API key actions", children: /* @__PURE__ */ jsx(DotsHorizontalIcon, {}) }) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: (() => {
+          const title = translate({
+            defaultMessage: "API key actions",
+            id: "RIBfYe",
+            description: "Tooltip for API key actions menu button"
+          });
+          return /* @__PURE__ */ jsx(IconButton, { title, children: /* @__PURE__ */ jsx(DotsHorizontalIcon, {}) });
+        })() }),
         /* @__PURE__ */ jsxs(DropdownMenu.Content, { size: "2", align: "end", children: [
-          /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => setDetailsOpen(true), children: "View details" }),
+          /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => setDetailsOpen(true), children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "View details",
+              id: "VGKbbj",
+              description: "Menu item to view API key details"
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             DropdownMenu.Item,
             {
               variant: "destructive",
               onSelect: () => setRevokeDialogOpen(true),
-              children: "Revoke key"
+              children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "Revoke key",
+                  id: "KZIJPP",
+                  description: "Menu item to revoke an API key"
+                }
+              )
             }
           )
         ] })
@@ -110,10 +150,38 @@ function ApiKeysTable({
     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: "25%", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Name",
+              id: "VYbVXN",
+              description: "Table column header for API key name"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "25%", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Secret key",
+              id: "H5k7GB",
+              description: "Table column header for API key secret value"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "25%", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Last used",
+              id: "E46t3O",
+              description: "Table column header for API key last used timestamp"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "25%", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Created",
+              id: "CXHhXd",
+              description: "Table column header for API key creation date"
+            }
+          ) }),
           /* @__PURE__ */ jsx(Table.ColumnHeaderCell, { width: "28px" })
         ] }) }),
         /* @__PURE__ */ jsx(Table.Body, { children: apiKeys.data.map((apiKey) => /* @__PURE__ */ jsx(ApiKeyRow, { apiKey }, apiKey.id)) })
@@ -129,7 +197,14 @@ function ApiKeysTable({
               type: "SET_PAGINATION",
               pagination: { after: apiKeys.listMetadata.after }
             }),
-            children: "Previous"
+            children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Previous",
+                id: "f7TUj0",
+                description: "Button to navigate to previous page of API keys"
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx(
@@ -142,7 +217,14 @@ function ApiKeysTable({
               type: "SET_PAGINATION",
               pagination: { before: apiKeys.listMetadata.before }
             }),
-            children: "Next"
+            children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Next",
+                id: "L2EBxV",
+                description: "Button to navigate to next page of API keys"
+              }
+            )
           }
         )
       ] })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/api-keys/api-keys-table.tsx"],"sourcesContent":["import { Flex, Text, Table, Code, Heading } from \"@radix-ui/themes\";\nimport { Button, DropdownMenu, IconButton } 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=\"secondary\" 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 align=\"center\">\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 aria-label=\"API key actions\" title=\"API key actions\">\n                <DotsHorizontalIcon />\n              </IconButton>\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content size=\"2\" align=\"end\">\n              <DropdownMenu.Item onSelect={() => setDetailsOpen(true)}>\n                View details\n              </DropdownMenu.Item>\n              <DropdownMenu.Item\n                variant=\"destructive\"\n                onSelect={() => setRevokeDialogOpen(true)}\n              >\n                Revoke key\n              </DropdownMenu.Item>\n            </DropdownMenu.Content>\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              <Button\n                variant=\"secondary\"\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              </Button>\n              <Button\n                variant=\"secondary\"\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              </Button>\n            </Flex>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys-table.tsx"],"sourcesContent":["import { Flex, Text, Table, Code, Heading } from \"@radix-ui/themes\";\nimport { Button, DropdownMenu, IconButton } 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\";\nimport { Translation } from \"../i18n/translation.js\";\nimport { useTranslation } from \"../i18n/use-translation.js\";\nimport { useLocale } from \"../i18n/use-locale.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          <Translation\n            defaultMessage=\"No API keys match your search\"\n            id=\"cKitHb\"\n            description=\"Empty state message when no API keys match search\"\n          />\n        </Heading>\n      </Flex>\n\n      <Button variant=\"secondary\" onClick={clearSearch}>\n        <Translation\n          defaultMessage=\"Clear search\"\n          id=\"jTupOW\"\n          description=\"Button to clear API key search filters\"\n        />\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  const locale = useLocale();\n  return (\n    <>\n      {createdOn.toLocaleDateString(locale, {\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  const translate = useTranslation();\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 align=\"center\">\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              {(() => {\n                const title = translate({\n                  defaultMessage: \"API key actions\",\n                  id: \"RIBfYe\",\n                  description: \"Tooltip for API key actions menu button\",\n                });\n                return (\n                  <IconButton title={title}>\n                    <DotsHorizontalIcon />\n                  </IconButton>\n                );\n              })()}\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content size=\"2\" align=\"end\">\n              <DropdownMenu.Item onSelect={() => setDetailsOpen(true)}>\n                <Translation\n                  defaultMessage=\"View details\"\n                  id=\"VGKbbj\"\n                  description=\"Menu item to view API key details\"\n                />\n              </DropdownMenu.Item>\n              <DropdownMenu.Item\n                variant=\"destructive\"\n                onSelect={() => setRevokeDialogOpen(true)}\n              >\n                <Translation\n                  defaultMessage=\"Revoke key\"\n                  id=\"KZIJPP\"\n                  description=\"Menu item to revoke an API key\"\n                />\n              </DropdownMenu.Item>\n            </DropdownMenu.Content>\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                  <Translation\n                    defaultMessage=\"Name\"\n                    id=\"VYbVXN\"\n                    description=\"Table column header for API key name\"\n                  />\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  <Translation\n                    defaultMessage=\"Secret key\"\n                    id=\"H5k7GB\"\n                    description=\"Table column header for API key secret value\"\n                  />\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  <Translation\n                    defaultMessage=\"Last used\"\n                    id=\"E46t3O\"\n                    description=\"Table column header for API key last used timestamp\"\n                  />\n                </Table.ColumnHeaderCell>\n                <Table.ColumnHeaderCell width=\"25%\">\n                  <Translation\n                    defaultMessage=\"Created\"\n                    id=\"CXHhXd\"\n                    description=\"Table column header for API key creation date\"\n                  />\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              <Button\n                variant=\"secondary\"\n                disabled={!hasPreviousPage}\n                size=\"1\"\n                onClick={() =>\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { after: apiKeys.listMetadata.after },\n                  })\n                }\n              >\n                <Translation\n                  defaultMessage=\"Previous\"\n                  id=\"f7TUj0\"\n                  description=\"Button to navigate to previous page of API keys\"\n                />\n              </Button>\n              <Button\n                variant=\"secondary\"\n                disabled={!hasNextPage}\n                size=\"1\"\n                onClick={() =>\n                  dispatch({\n                    type: \"SET_PAGINATION\",\n                    pagination: { before: apiKeys.listMetadata.before },\n                  })\n                }\n              >\n                <Translation\n                  defaultMessage=\"Next\"\n                  id=\"L2EBxV\"\n                  description=\"Button to navigate to next page of API keys\"\n                />\n              </Button>\n            </Flex>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -9,6 +9,8 @@ import { CreateApiKeyButton } from "./create-api-key.js";
 import { getDomProps } from "../utils.js";
 import { ApiKeysSearchProvider } from "./api-keys-search-provider.js";
 import { ApiKeysTable } from "./api-keys-table.js";
+import { Translation } from "../i18n/translation.js";
+import { useTranslation } from "../i18n/use-translation.js";
 const ApiKeys = ({
   apiKeys,
   searchQuery,
@@ -23,6 +25,7 @@ const ApiKeys = ({
   ) });
 };
 const ApiKeysLoading = (props) => {
+  const translate = useTranslation();
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -37,11 +40,22 @@ const ApiKeysLoading = (props) => {
             {
               name: "api-keys-widget-search",
               style: { width: "390px" },
-              placeholder: "Search by name",
+              placeholder: translate({
+                defaultMessage: "Search by name",
+                id: "VBESVz",
+                description: "Placeholder for API key search input in loading state"
+              }),
               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(Skeleton, { children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Create API key",
+              id: "eTEzjH",
+              description: "Button to create a new API key in loading state"
+            }
+          ) }) })
         ] }),
         /* @__PURE__ */ jsx(
           SkeletonTable,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/api-keys/api-keys.tsx"],"sourcesContent":["import { Flex } from \"@radix-ui/themes\";\nimport { Button, Skeleton, 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 { getDomProps, WidgetRootDomProps, WidgetRootState } from \"../utils.js\";\nimport { ListOrganizationApiKeysResponse } from \"../../api/endpoint.js\";\nimport { ApiKeysSearchProvider } from \"./api-keys-search-provider.js\";\nimport { ApiKeysTable } from \"./api-keys-table.js\";\n\ninterface ApiKeysProps extends WidgetRootDomProps {\n  apiKeys: ListOrganizationApiKeysResponse;\n  searchQuery: string | null;\n}\n\nconst ApiKeys: React.FC<ApiKeysProps> = ({\n  apiKeys,\n  searchQuery,\n  ...domProps\n}) => {\n  return apiKeys.data.length === 0 && !searchQuery ? (\n    <ApiKeysEmptyState {...getWidgetRootDomProps(\"resolved\", domProps)} />\n  ) : (\n    <ApiKeysSearchProvider>\n      <ApiKeysTable\n        apiKeys={apiKeys}\n        {...getWidgetRootDomProps(\"resolved\", domProps)}\n      />\n    </ApiKeysSearchProvider>\n  );\n};\n\ninterface ApiKeysLoadingProps extends WidgetRootDomProps {}\n\nconst ApiKeysLoading: React.FC<ApiKeysLoadingProps> = (props) => {\n  return (\n    <Flex\n      direction=\"column\"\n      align=\"stretch\"\n      gap=\"3\"\n      {...getWidgetRootDomProps(\"loading\", props)}\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    </Flex>\n  );\n};\n\ninterface ApiKeysErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst ApiKeysError: React.FC<ApiKeysErrorProps> = ({ error, ...domProps }) => {\n  return (\n    <GenericError error={error} {...getWidgetRootDomProps(\"error\", domProps)} />\n  );\n};\n\nfunction ApiKeysEmptyState(props: WidgetRootDomProps) {\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      {...props}\n    />\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"api-keys\",\n    widgetState: state,\n  });\n}\n\nexport type { ApiKeysProps, ApiKeysLoadingProps, ApiKeysErrorProps };\nexport { ApiKeys, ApiKeysLoading, ApiKeysError };\n"],"mappings":"AAuBI,cAqBE,YArBF;AAvBJ,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU,WAAW,qBAAqB;AAC3D,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,mBAAwD;AAEjE,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAO7B,MAAM,UAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAO,QAAQ,KAAK,WAAW,KAAK,CAAC,cACnC,oBAAC,qBAAmB,GAAG,sBAAsB,YAAY,QAAQ,GAAG,IAEpE,oBAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG,sBAAsB,YAAY,QAAQ;AAAA;AAAA,EAChD,GACF;AAEJ;AAIA,MAAM,iBAAgD,CAAC,UAAU;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,KAAI;AAAA,MACH,GAAG,sBAAsB,WAAW,KAAK;AAAA,MAE1C;AAAA,6BAAC,QAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,8BAAC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,OAAO,QAAQ;AAAA,cACxB,aAAY;AAAA,cAEZ,8BAAC,iBAAc,MAAK,QAClB,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,UACF,GACF;AAAA,UACA,oBAAC,YACC,8BAAC,UAAO,4BAAc,GACxB;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAS;AAAA,cACP,EAAE,UAAU,QAAQ,OAAO,MAAM;AAAA,cACjC,EAAE,UAAU,cAAc,OAAO,MAAM;AAAA,cACvC,EAAE,UAAU,aAAa,OAAO,MAAM;AAAA,cACtC,EAAE,UAAU,WAAW,OAAO,MAAM;AAAA,YACtC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,eAA4C,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM;AAC5E,SACE,oBAAC,gBAAa,OAAe,GAAG,sBAAsB,SAAS,QAAQ,GAAG;AAE9E;AAEA,SAAS,kBAAkB,OAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ,oBAAC,sBAAmB;AAAA,MAC3B,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,sBACP,OACA,UACA;AACA,SAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys.tsx"],"sourcesContent":["import { Flex } from \"@radix-ui/themes\";\nimport { Button, Skeleton, 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 { getDomProps, WidgetRootDomProps, WidgetRootState } from \"../utils.js\";\nimport { ListOrganizationApiKeysResponse } from \"../../api/endpoint.js\";\nimport { ApiKeysSearchProvider } from \"./api-keys-search-provider.js\";\nimport { ApiKeysTable } from \"./api-keys-table.js\";\nimport { Translation } from \"../i18n/translation.js\";\nimport { useTranslation } from \"../i18n/use-translation.js\";\n\ninterface ApiKeysProps extends WidgetRootDomProps {\n  apiKeys: ListOrganizationApiKeysResponse;\n  searchQuery: string | null;\n}\n\nconst ApiKeys: React.FC<ApiKeysProps> = ({\n  apiKeys,\n  searchQuery,\n  ...domProps\n}) => {\n  return apiKeys.data.length === 0 && !searchQuery ? (\n    <ApiKeysEmptyState {...getWidgetRootDomProps(\"resolved\", domProps)} />\n  ) : (\n    <ApiKeysSearchProvider>\n      <ApiKeysTable\n        apiKeys={apiKeys}\n        {...getWidgetRootDomProps(\"resolved\", domProps)}\n      />\n    </ApiKeysSearchProvider>\n  );\n};\n\ninterface ApiKeysLoadingProps extends WidgetRootDomProps {}\n\nconst ApiKeysLoading: React.FC<ApiKeysLoadingProps> = (props) => {\n  const translate = useTranslation();\n  return (\n    <Flex\n      direction=\"column\"\n      align=\"stretch\"\n      gap=\"3\"\n      {...getWidgetRootDomProps(\"loading\", props)}\n    >\n      <Flex justify=\"between\" align=\"center\">\n        <Skeleton>\n          <TextField\n            name=\"api-keys-widget-search\"\n            style={{ width: \"390px\" }}\n            placeholder={translate({\n              defaultMessage: \"Search by name\",\n              id: \"VBESVz\",\n              description:\n                \"Placeholder for API key search input in loading state\",\n            })}\n          >\n            <TextFieldSlot side=\"left\">\n              <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n            </TextFieldSlot>\n          </TextField>\n        </Skeleton>\n        <Skeleton>\n          <Button>\n            <Translation\n              defaultMessage=\"Create API key\"\n              id=\"eTEzjH\"\n              description=\"Button to create a new API key in loading state\"\n            />\n          </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    </Flex>\n  );\n};\n\ninterface ApiKeysErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst ApiKeysError: React.FC<ApiKeysErrorProps> = ({ error, ...domProps }) => {\n  return (\n    <GenericError error={error} {...getWidgetRootDomProps(\"error\", domProps)} />\n  );\n};\n\nfunction ApiKeysEmptyState(props: WidgetRootDomProps) {\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      {...props}\n    />\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"api-keys\",\n    widgetState: state,\n  });\n}\n\nexport type { ApiKeysProps, ApiKeysLoadingProps, ApiKeysErrorProps };\nexport { ApiKeys, ApiKeysLoading, ApiKeysError };\n"],"mappings":"AAyBI,cAsBE,YAtBF;AAzBJ,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU,WAAW,qBAAqB;AAC3D,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,mBAAwD;AAEjE,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAO/B,MAAM,UAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAO,QAAQ,KAAK,WAAW,KAAK,CAAC,cACnC,oBAAC,qBAAmB,GAAG,sBAAsB,YAAY,QAAQ,GAAG,IAEpE,oBAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG,sBAAsB,YAAY,QAAQ;AAAA;AAAA,EAChD,GACF;AAEJ;AAIA,MAAM,iBAAgD,CAAC,UAAU;AAC/D,QAAM,YAAY,eAAe;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,KAAI;AAAA,MACH,GAAG,sBAAsB,WAAW,KAAK;AAAA,MAE1C;AAAA,6BAAC,QAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,8BAAC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,OAAO,QAAQ;AAAA,cACxB,aAAa,UAAU;AAAA,gBACrB,gBAAgB;AAAA,gBAChB,IAAI;AAAA,gBACJ,aACE;AAAA,cACJ,CAAC;AAAA,cAED,8BAAC,iBAAc,MAAK,QAClB,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,UACF,GACF;AAAA,UACA,oBAAC,YACC,8BAAC,UACC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF,GACF;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAS;AAAA,cACP,EAAE,UAAU,QAAQ,OAAO,MAAM;AAAA,cACjC,EAAE,UAAU,cAAc,OAAO,MAAM;AAAA,cACvC,EAAE,UAAU,aAAa,OAAO,MAAM;AAAA,cACtC,EAAE,UAAU,WAAW,OAAO,MAAM;AAAA,YACtC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,eAA4C,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM;AAC5E,SACE,oBAAC,gBAAa,OAAe,GAAG,sBAAsB,SAAS,QAAQ,GAAG;AAE9E;AAEA,SAAS,kBAAkB,OAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ,oBAAC,sBAAmB;AAAA,MAC3B,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,sBACP,OACA,UACA;AACA,SAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

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

@@ -22,12 +22,13 @@ import {
 } from "@radix-ui/react-icons";
 import { CopyButton, CopyIconButton } 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";
+import { Translation } from "../i18n/translation.js";
+import { useTranslation } from "../i18n/use-translation.js";
 function CreateApiKeyDialog() {
   const {
     state: { createDialogOpen, createdApiKey },
@@ -52,6 +53,7 @@ function CreateApiKeyDialog() {
 }
 function CreateApiKeyForm() {
   const { dispatch } = useApiKeysContext();
+  const translate = useTranslation();
   const [errors, setErrors] = React.useState({ name: false });
   const validate = (formData) => {
     const name = formData.get("name")?.toString() ?? "";
@@ -68,7 +70,14 @@ function CreateApiKeyForm() {
   } = 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__ */ jsx(Dialog.Title, { size: "4", weight: "bold", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Create API key",
+        id: "eUFRNS",
+        description: "Dialog title for creating a new API key"
+      }
+    ) }),
     /* @__PURE__ */ jsxs(
       Form.Root,
       {
@@ -98,25 +107,64 @@ function CreateApiKeyForm() {
           /* @__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(Callout.Text, { children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "An error occurred while creating the API key.",
+                  id: "0LyBVd",
+                  description: "Error message when API key creation fails"
+                }
+              ) })
             ] }),
             /* @__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.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "Name",
+                  id: "v0VmRy",
+                  description: "Label for API key name input field"
+                }
+              ) }) }),
               /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
                 TextField,
                 {
                   "data-1p-ignore": true,
                   autoComplete: "off",
-                  placeholder: "A descriptive name for the API key"
+                  placeholder: translate({
+                    defaultMessage: "A descriptive name for the API key",
+                    id: "moyvr4",
+                    description: "Placeholder for API key name input"
+                  })
                 }
               ) }),
-              errors.name && /* @__PURE__ */ jsx(Form.Message, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: "The name is required" }) })
+              errors.name && /* @__PURE__ */ jsx(Form.Message, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "The name is required",
+                  id: "oF9d2V",
+                  description: "Validation error when API key name is empty"
+                }
+              ) }) })
             ] }) }),
             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(Button, { variant: "secondary", disabled: isPending || isSuccess, children: "Cancel" }) }),
-            /* @__PURE__ */ jsx(Button, { type: "submit", loading: isPending || isSuccess, children: "Create API key" })
+            /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: isPending || isSuccess, children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Cancel",
+                id: "AyVAAW",
+                description: "Button to cancel API key creation"
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", loading: isPending || isSuccess, children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Create API key",
+                id: "d4BNWL",
+                description: "Button to submit and create the API key"
+              }
+            ) })
           ] })
         ]
       }
@@ -125,14 +173,42 @@ function CreateApiKeyForm() {
 }
 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__ */ jsx(Dialog.Title, { size: "4", weight: "bold", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Save your key",
+        id: "wFFCij",
+        description: "Dialog title prompting user to save their API key"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Dialog.Description, { size: "2", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Please save this API key in a secure location. If you lose it, you'll need to generate a new one.",
+        id: "sy+2x7",
+        description: "Warning message about saving the API key"
+      }
+    ) }),
     /* @__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(Callout.Text, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "You won't be able to access the key again. Please copy it now.",
+          id: "EFAK/K",
+          description: "Callout warning that the key won't be accessible again"
+        }
+      ) })
     ] }),
     /* @__PURE__ */ jsx(TextField, { value: apiKey, readOnly: true, children: /* @__PURE__ */ jsx(TextFieldSlot, { side: "right", children: /* @__PURE__ */ jsx(CopyIconButton, { value: apiKey }) }) }),
-    /* @__PURE__ */ jsx(Flex, { align: "center", gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(CopyButton, { value: apiKey, children: "Copy and close" }) }) })
+    /* @__PURE__ */ jsx(Flex, { align: "center", gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(CopyButton, { value: apiKey, children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Copy and close",
+        id: "ViYtvQ",
+        description: "Button to copy API key and close dialog"
+      }
+    ) }) }) })
   ] });
 }
 function Permission({
@@ -177,6 +253,7 @@ function PermissionsField({
   const [selectedPermissions, setSelectedPermissions] = React.useState([]);
   const [filter, setFilter] = React.useState("");
   const fieldRef = React.useRef(null);
+  const translate = useTranslation();
   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());
@@ -194,8 +271,22 @@ function PermissionsField({
     };
   }, [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__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Permissions",
+        id: "6YN1wO",
+        description: "Label for API key permissions field"
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Text, { size: "2", mb: "2", color: "gray", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Only enable the minimum permissions required for your use case.",
+        id: "q2VEtG",
+        description: "Help text for API key permissions selection"
+      }
+    ) }),
     /* @__PURE__ */ jsxs(
       Flex,
       {
@@ -226,7 +317,11 @@ function PermissionsField({
                 borderRadius: "var(--radius-3) var(--radius-3) 0 0",
                 boxShadow: "none"
               },
-              placeholder: "Search",
+              placeholder: translate({
+                defaultMessage: "Search",
+                id: "iyNcly",
+                description: "Placeholder for permissions search input"
+              }),
               children: /* @__PURE__ */ jsx(TextFieldSlot, { side: "left", px: "3", children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) })
             }
           ),
@@ -301,14 +396,28 @@ function PermissionsField({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx(Text, { size: "2", align: "center", mb: "2", wrap: "balance", weight: "bold", children: "No permissions match your search" }),
+                /* @__PURE__ */ jsx(Text, { size: "2", align: "center", mb: "2", wrap: "balance", weight: "bold", children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "No permissions match your search",
+                    id: "xjqT9f",
+                    description: "Empty state message when no permissions match search"
+                  }
+                ) }),
                 /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "secondary",
                     size: "1",
                     onClick: () => setFilter(""),
-                    children: "Clear search"
+                    children: /* @__PURE__ */ jsx(
+                      Translation,
+                      {
+                        defaultMessage: "Clear search",
+                        id: "YrMs63",
+                        description: "Button to clear permissions search"
+                      }
+                    )
                   }
                 )
               ]
@@ -325,14 +434,50 @@ function SelectedPermissions({
   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", style: { lineHeight: 1, color: "var(--gray-11)" }, children: selected === 0 ? /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "No permissions selected",
+        id: "FqU9hv",
+        description: "Message when no permissions are selected"
+      }
+    ) : selected === 1 ? /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "1 permission selected",
+        id: "VouLgT",
+        description: "Message showing count of selected permissions"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "{count} permissions selected",
+        id: "ZL90DI",
+        description: "Message showing count of selected permissions",
+        values: { count: selected }
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       Text,
       {
         size: "1",
         onClick: onToggle,
         style: { cursor: "pointer", color: "var(--accent-10)" },
-        children: total === selected ? "Deselect all" : "Select all"
+        children: total === selected ? /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Deselect all",
+            id: "63f7SY",
+            description: "Button to deselect all permissions"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Select all",
+            id: "onTqlA",
+            description: "Button to select all permissions"
+          }
+        )
       }
     )
   ] });
@@ -344,7 +489,14 @@ function CreateApiKeyButton() {
     {
       variant: "secondary",
       onClick: () => dispatch({ type: "OPEN_CREATE_DIALOG" }),
-      children: "Create API key"
+      children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Create API key",
+          id: "vq5724",
+          description: "Button to open create API key dialog"
+        }
+      )
     }
   );
 }