@workos-inc/widgets 1.7.2 → 1.8.1

package/dist/esm/lib/admin-portal-sso-connection.js

@@ -19,6 +19,8 @@ import {
   getDomProps,
   unreachable
 } from "./utils.js";
+import { Translation } from "./i18n/translation.js";
+import { useTranslation } from "./i18n/use-translation.js";
 import { getErrorMessage } from "./generic-error.js";
 const AdminPortalSsoConnectionContext = React.createContext(null);
 AdminPortalSsoConnectionContext.displayName = "AdminPortalSsoConnectionContext";
@@ -44,7 +46,14 @@ const AdminPortalSsoConnection = ({
     /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: (() => {
       if (connectionStatus === "NotConfigured") {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: "You haven\u2019t set up Single Sign-On yet." }),
+          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "You haven't set up Single Sign-On yet.",
+              id: "KDs1Ib",
+              description: "Empty state message when SSO is not configured"
+            }
+          ) }),
           adminPortalOpenButton
         ] });
       }
@@ -68,42 +77,62 @@ const AdminPortalSsoConnection = ({
       /* @__PURE__ */ jsx(Box, { asChild: true, mt: "2px", flexShrink: "0", children: /* @__PURE__ */ jsx(InfoCircledIcon, { color: "gray" }) }),
       (() => {
         if (connectionStatus === "Expired") {
-          return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-            (() => {
-              if (!expiryDate) {
-                return "The SAML response signing certificate has expired";
+          return /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: (() => {
+            if (!expiryDate) {
+              return /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "The SAML response signing certificate has expired. Users won't be able to sign-in to the application until the certificate is renewed.",
+                  id: "5tX19v",
+                  description: "Error message when SAML certificate has expired (no date)"
+                }
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "The SAML response signing certificate expired on {expiryDate}. Users won't be able to sign-in to the application until the certificate is renewed.",
+                id: "vmTW/h",
+                description: "Error message when SAML certificate has expired with date",
+                values: {
+                  expiryDate: /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric"
+                  }) })
+                }
               }
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                "The SAML response signing certificate expired on",
-                " ",
-                /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
-                  month: "long",
-                  day: "numeric",
-                  year: "numeric"
-                }) })
-              ] });
-            })(),
-            ". Users won\u2019t be able to sign-in to the application until the certificate is renewed."
-          ] });
+            );
+          })() });
         }
         if (connectionStatus === "Expiring") {
-          return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-            (() => {
-              if (!expiryDate) {
-                return "The SAML response signing certificate is expiring soon";
+          return /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: (() => {
+            if (!expiryDate) {
+              return /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "The SAML response signing certificate is expiring soon. When expired, users won't be able to sign-in.",
+                  id: "3dgA5f",
+                  description: "Warning message when SAML certificate is expiring soon (no date)"
+                }
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "The SAML response signing certificate will expire on {expiryDate}. When expired, users won't be able to sign-in.",
+                id: "xT9Exy",
+                description: "Warning message when SAML certificate is expiring with date",
+                values: {
+                  expiryDate: /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric"
+                  }) })
+                }
               }
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                "The SAML response signing certificate will expire on",
-                " ",
-                /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
-                  month: "long",
-                  day: "numeric",
-                  year: "numeric"
-                }) })
-              ] });
-            })(),
-            ". When expired, users won\u2019t be able to sign-in."
-          ] });
+            );
+          })() });
         }
       })()
     ] }) })
@@ -116,13 +145,34 @@ function SsoStatus({
     return null;
   }
   if (status === "Inactive") {
-    return /* @__PURE__ */ jsx(Status, { state: "waiting", children: "Setup in progress" });
+    return /* @__PURE__ */ jsx(Status, { state: "waiting", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Setup in progress",
+        id: "MQR5mR",
+        description: "Status label when SSO setup is incomplete"
+      }
+    ) });
   }
   if (status === "Expired") {
-    return /* @__PURE__ */ jsx(Status, { state: "error", children: "Requires action" });
+    return /* @__PURE__ */ jsx(Status, { state: "error", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Requires action",
+        id: "Yo2vHC",
+        description: "Status label when SSO requires attention"
+      }
+    ) });
   }
   if (status === "Active" || status === "Expiring") {
-    return /* @__PURE__ */ jsx(Status, { state: "success", children: "Connected" });
+    return /* @__PURE__ */ jsx(Status, { state: "success", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Connected",
+        id: "8S+Cyw",
+        description: "Status label when SSO is active"
+      }
+    ) });
   }
   return unreachable(status);
 }
@@ -142,10 +192,15 @@ function SessionInfo({
     /* @__PURE__ */ jsx(IconPanel, { color: "panel", children: /* @__PURE__ */ jsx(ProviderIcon, { provider: identityProvider, size: "2" }) }),
     lastSession ? /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
       /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: getIdentityProviderName(identityProvider) }),
-      relativeTimeString ? /* @__PURE__ */ jsxs(Text, { color: "gray", size: "2", children: [
-        "Last session ",
-        relativeTimeString
-      ] }) : null
+      relativeTimeString ? /* @__PURE__ */ jsx(Text, { color: "gray", size: "2", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Last session {relativeTime}",
+          id: "yN72Gc",
+          description: "Label showing when the last SSO session occurred",
+          values: { relativeTime: relativeTimeString }
+        }
+      ) }) : null
     ] }) : /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: getIdentityProviderName(identityProvider) })
   ] });
 }
@@ -158,13 +213,34 @@ function AdminPortalOpenButton({
   const label = (() => {
     switch (connectionStatus) {
       case "NotConfigured":
-        return "Set up SSO";
+        return /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Set up SSO",
+            id: "MtkNQO",
+            description: "Button label to start SSO setup"
+          }
+        );
       case "Inactive":
-        return "Continue setup";
+        return /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Continue setup",
+            id: "HFxrbY",
+            description: "Button label to continue incomplete SSO setup"
+          }
+        );
       case "Active":
       case "Expiring":
       case "Expired":
-        return "Manage";
+        return /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Manage",
+            id: "T1VKzP",
+            description: "Button label to manage SSO settings"
+          }
+        );
       default:
         return unreachable(connectionStatus);
     }
@@ -210,10 +286,11 @@ const AdminPortalSsoConnectionLoading = (props) => {
   ] }) });
 };
 const AdminPortalSsoConnectionError = ({ error, ...domProps }) => {
+  const translate = useTranslation();
   React.useEffect(() => {
     console.error(error);
   }, [error]);
-  const { heading, message } = getErrorMessage(error);
+  const { heading, message } = getErrorMessage(error, translate);
   return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ jsx(
       Flex,

package/dist/esm/lib/admin-portal-sso-connection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/admin-portal-sso-connection.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Button, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport {\n  ExternalLinkIcon,\n  InfoCircledIcon,\n  Cross2Icon,\n} from \"@radix-ui/react-icons\";\nimport * as CardList from \"./card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  getIdentityProviderName,\n  type IdentityProvider,\n} from \"./identity-providers.js\";\nimport { Status } from \"./status.js\";\nimport {\n  getDomProps,\n  unreachable,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { getErrorMessage } from \"./generic-error.js\";\n\ninterface NotConfiguredProps {\n  connectionStatus: \"NotConfigured\";\n  identityProvider?: never;\n  expiryDate?: never;\n}\n\ninterface InactiveProps {\n  connectionStatus: \"Inactive\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface ActiveProps {\n  connectionStatus: \"Active\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface RequiresActionProps {\n  connectionStatus: \"Expired\" | \"Expiring\";\n  identityProvider: IdentityProvider;\n  expiryDate: Date | null;\n}\n\nexport type AdminPortalSsoConnectionStatusProps =\n  | NotConfiguredProps\n  | InactiveProps\n  | ActiveProps\n  | RequiresActionProps;\n\ntype AdminPortalSsoConnectionProps = WidgetRootDomProps &\n  AdminPortalSsoConnectionStatusProps & {\n    currentDate: Date | null;\n    lastSession: Date | null;\n    adminPortalOpenButton: React.ReactNode;\n  };\n\ninterface AdminPortalSsoConnectionContextValue {\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}\n\nconst AdminPortalSsoConnectionContext =\n  React.createContext<AdminPortalSsoConnectionContextValue | null>(null);\nAdminPortalSsoConnectionContext.displayName = \"AdminPortalSsoConnectionContext\";\n\nfunction useAdminPortalSsoConnectionContext() {\n  const context = React.useContext(AdminPortalSsoConnectionContext);\n  if (!context) {\n    throw new Error(\n      \"useAdminPortalSsoConnectionContext must be used within a AdminPortalSsoConnectionContext provider\",\n    );\n  }\n  return context;\n}\n\nconst AdminPortalSsoConnection: React.FC<AdminPortalSsoConnectionProps> = ({\n  currentDate,\n  connectionStatus,\n  identityProvider,\n  expiryDate,\n  lastSession,\n  adminPortalOpenButton,\n  ...domProps\n}) => {\n  return (\n    <CardList.Root size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <AdminPortalSsoConnectionContext.Provider value={{ connectionStatus }}>\n        <CardList.Item>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            {(() => {\n              if (connectionStatus === \"NotConfigured\") {\n                return (\n                  <>\n                    <Text size=\"2\" color=\"gray\">\n                      You haven’t set up Single Sign-On yet.\n                    </Text>\n                    {adminPortalOpenButton}\n                  </>\n                );\n              }\n\n              return (\n                <>\n                  <SessionInfo\n                    connectionStatus={connectionStatus}\n                    identityProvider={identityProvider}\n                    lastSession={lastSession}\n                    currentDate={currentDate}\n                  />\n                  <Flex gap=\"5\" align=\"center\">\n                    <SsoStatus status={connectionStatus} />\n                    {adminPortalOpenButton}\n                  </Flex>\n                </>\n              );\n            })()}\n          </Flex>\n        </CardList.Item>\n        {connectionStatus === \"Expired\" && (\n          <CardList.Item>\n            <Flex align=\"start\" gap=\"2\">\n              <Box asChild mt=\"2px\" flexShrink=\"0\">\n                <InfoCircledIcon color=\"gray\" />\n              </Box>\n              {(() => {\n                if (connectionStatus === \"Expired\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate has expired\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate expired on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . Users won’t be able to sign-in to the application until\n                      the certificate is renewed.\n                    </Text>\n                  );\n                }\n\n                if (connectionStatus === \"Expiring\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate is expiring soon\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate will expire on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . When expired, users won’t be able to sign-in.\n                    </Text>\n                  );\n                }\n              })()}\n            </Flex>\n          </CardList.Item>\n        )}\n      </AdminPortalSsoConnectionContext.Provider>\n    </CardList.Root>\n  );\n};\n\nfunction SsoStatus({\n  status,\n}: {\n  status: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  if (status === \"NotConfigured\") {\n    return null;\n  }\n\n  if (status === \"Inactive\") {\n    return <Status state=\"waiting\">Setup in progress</Status>;\n  }\n\n  if (status === \"Expired\") {\n    return <Status state=\"error\">Requires action</Status>;\n  }\n\n  if (status === \"Active\" || status === \"Expiring\") {\n    return <Status state=\"success\">Connected</Status>;\n  }\n\n  return unreachable(status);\n}\n\nfunction SessionInfo({\n  currentDate,\n  identityProvider,\n  lastSession,\n  connectionStatus,\n}: {\n  identityProvider: IdentityProvider;\n  lastSession: Date | null;\n  currentDate: Date | null;\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  const relativeTimeString = React.useMemo(() => {\n    if (\n      !lastSession ||\n      !currentDate ||\n      connectionStatus === \"NotConfigured\" ||\n      connectionStatus === \"Inactive\"\n    ) {\n      return null;\n    }\n\n    return getRelativeTimeString(currentDate, lastSession);\n  }, [lastSession, currentDate, connectionStatus]);\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel color=\"panel\">\n        <ProviderIcon provider={identityProvider} size=\"2\" />\n      </IconPanel>\n      {lastSession ? (\n        <Flex direction=\"column\">\n          <Text size=\"2\" weight=\"bold\">\n            {getIdentityProviderName(identityProvider)}\n          </Text>\n          {relativeTimeString ? (\n            <Text color=\"gray\" size=\"2\">\n              Last session {relativeTimeString}\n            </Text>\n          ) : null}\n        </Flex>\n      ) : (\n        <Text size=\"2\" weight=\"bold\">\n          {getIdentityProviderName(identityProvider)}\n        </Text>\n      )}\n    </Flex>\n  );\n}\n\nfunction AdminPortalOpenButton({\n  isPending,\n  href,\n  initConfig,\n}: {\n  isPending: boolean;\n  href: string | null;\n  initConfig: () => void;\n}) {\n  const { connectionStatus } = useAdminPortalSsoConnectionContext();\n  const label = (() => {\n    switch (connectionStatus) {\n      case \"NotConfigured\":\n        return \"Set up SSO\";\n      case \"Inactive\":\n        return \"Continue setup\";\n      case \"Active\":\n      case \"Expiring\":\n      case \"Expired\":\n        return \"Manage\";\n      default:\n        return unreachable(connectionStatus);\n    }\n  })();\n\n  if (href) {\n    return (\n      <Button variant=\"secondary\" asChild>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n          {label} <ExternalLinkIcon aria-hidden />\n        </a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"secondary\"\n      loading={isPending}\n      disabled={isPending}\n      onClick={initConfig}\n    >\n      {label} <ExternalLinkIcon aria-hidden />\n    </Button>\n  );\n}\n\ninterface AdminPortalSsoConnectionLoadingProps extends WidgetRootDomProps {}\n\nconst AdminPortalSsoConnectionLoading: React.FC<\n  AdminPortalSsoConnectionLoadingProps\n> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Skeleton>\n            <IconPanel color=\"panel\">\n              <ProviderIcon provider=\"okta\" size=\"2\" />\n            </IconPanel>\n          </Skeleton>\n          <Flex direction=\"column\" gap=\"1\" my=\"-4px\">\n            <Skeleton>\n              <Text size=\"1\">Okta</Text>\n            </Skeleton>\n            <Skeleton>\n              <Text size=\"1\">Last session 10 minutes ago</Text>\n            </Skeleton>\n          </Flex>\n        </Flex>\n        <Flex gap=\"5\" align=\"center\">\n          <Skeleton>\n            <Status state=\"error\">Requires action</Status>\n          </Skeleton>\n          <Skeleton>\n            <Button variant=\"secondary\">\n              Manage <ExternalLinkIcon aria-hidden />\n            </Button>\n          </Skeleton>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\ninterface AdminPortalSsoConnectionErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst AdminPortalSsoConnectionError: React.FC<\n  AdminPortalSsoConnectionErrorProps\n> = ({ error, ...domProps }) => {\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const { heading, message } = getErrorMessage(error);\n\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            width=\"24px\"\n            height=\"24px\"\n            style={{\n              borderRadius: \"9999px\",\n              backgroundColor: \"var(--red-a4)\",\n              color: \"var(--red-a11)\",\n              flexShrink: 0,\n            }}\n          >\n            <Cross2Icon width=\"18px\" height=\"18px\" />\n          </Flex>\n          <Flex direction=\"column\">\n            <Text size=\"2\" weight=\"bold\">\n              {heading}\n            </Text>\n            <Text size=\"2\" color=\"gray\">\n              {message}\n            </Text>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nfunction getRelativeTimeString(\n  currentDate: Date | null,\n  lastSession: Date | null,\n) {\n  if (!currentDate || !lastSession) {\n    return null;\n  }\n\n  const rtf = new Intl.RelativeTimeFormat(\"en\", { numeric: \"auto\" });\n  const diff = lastSession.getTime() - currentDate.getTime();\n\n  const diffSeconds = Math.round(diff / 1000);\n  const diffMinutes = Math.round(diffSeconds / 60);\n  const diffHours = Math.round(diffMinutes / 60);\n  const diffDays = Math.round(diffHours / 24);\n  const diffMonths = Math.round(diffDays / 30);\n  const diffYears = Math.round(diffMonths / 12);\n\n  if (Math.abs(diffSeconds) < 60) {\n    return \"now\";\n  }\n\n  if (Math.abs(diffMinutes) < 60) {\n    return rtf.format(diffMinutes, \"minute\");\n  }\n\n  if (Math.abs(diffHours) < 24) {\n    return rtf.format(diffHours, \"hour\");\n  }\n\n  if (Math.abs(diffDays) < 30) {\n    return rtf.format(diffDays, \"day\");\n  }\n\n  if (Math.abs(diffMonths) < 12) {\n    return rtf.format(diffMonths, \"month\");\n  }\n\n  return rtf.format(diffYears, \"year\");\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"admin-portal-sso-connection\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  AdminPortalSsoConnectionProps,\n  AdminPortalSsoConnectionLoadingProps,\n  AdminPortalSsoConnectionErrorProps,\n};\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  AdminPortalSsoConnectionError,\n  /** @internal */\n  AdminPortalOpenButton,\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/admin-portal-sso-connection.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Button, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport {\n  ExternalLinkIcon,\n  InfoCircledIcon,\n  Cross2Icon,\n} from \"@radix-ui/react-icons\";\nimport * as CardList from \"./card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  getIdentityProviderName,\n  type IdentityProvider,\n} from \"./identity-providers.js\";\nimport { Status } from \"./status.js\";\nimport {\n  getDomProps,\n  unreachable,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\nimport { getErrorMessage } from \"./generic-error.js\";\n\ninterface NotConfiguredProps {\n  connectionStatus: \"NotConfigured\";\n  identityProvider?: never;\n  expiryDate?: never;\n}\n\ninterface InactiveProps {\n  connectionStatus: \"Inactive\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface ActiveProps {\n  connectionStatus: \"Active\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface RequiresActionProps {\n  connectionStatus: \"Expired\" | \"Expiring\";\n  identityProvider: IdentityProvider;\n  expiryDate: Date | null;\n}\n\nexport type AdminPortalSsoConnectionStatusProps =\n  | NotConfiguredProps\n  | InactiveProps\n  | ActiveProps\n  | RequiresActionProps;\n\ntype AdminPortalSsoConnectionProps = WidgetRootDomProps &\n  AdminPortalSsoConnectionStatusProps & {\n    currentDate: Date | null;\n    lastSession: Date | null;\n    adminPortalOpenButton: React.ReactNode;\n  };\n\ninterface AdminPortalSsoConnectionContextValue {\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}\n\nconst AdminPortalSsoConnectionContext =\n  React.createContext<AdminPortalSsoConnectionContextValue | null>(null);\nAdminPortalSsoConnectionContext.displayName = \"AdminPortalSsoConnectionContext\";\n\nfunction useAdminPortalSsoConnectionContext() {\n  const context = React.useContext(AdminPortalSsoConnectionContext);\n  if (!context) {\n    throw new Error(\n      \"useAdminPortalSsoConnectionContext must be used within a AdminPortalSsoConnectionContext provider\",\n    );\n  }\n  return context;\n}\n\nconst AdminPortalSsoConnection: React.FC<AdminPortalSsoConnectionProps> = ({\n  currentDate,\n  connectionStatus,\n  identityProvider,\n  expiryDate,\n  lastSession,\n  adminPortalOpenButton,\n  ...domProps\n}) => {\n  return (\n    <CardList.Root size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <AdminPortalSsoConnectionContext.Provider value={{ connectionStatus }}>\n        <CardList.Item>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            {(() => {\n              if (connectionStatus === \"NotConfigured\") {\n                return (\n                  <>\n                    <Text size=\"2\" color=\"gray\">\n                      <Translation\n                        defaultMessage=\"You haven't set up Single Sign-On yet.\"\n                        id=\"KDs1Ib\"\n                        description=\"Empty state message when SSO is not configured\"\n                      />\n                    </Text>\n                    {adminPortalOpenButton}\n                  </>\n                );\n              }\n\n              return (\n                <>\n                  <SessionInfo\n                    connectionStatus={connectionStatus}\n                    identityProvider={identityProvider}\n                    lastSession={lastSession}\n                    currentDate={currentDate}\n                  />\n                  <Flex gap=\"5\" align=\"center\">\n                    <SsoStatus status={connectionStatus} />\n                    {adminPortalOpenButton}\n                  </Flex>\n                </>\n              );\n            })()}\n          </Flex>\n        </CardList.Item>\n        {connectionStatus === \"Expired\" && (\n          <CardList.Item>\n            <Flex align=\"start\" gap=\"2\">\n              <Box asChild mt=\"2px\" flexShrink=\"0\">\n                <InfoCircledIcon color=\"gray\" />\n              </Box>\n              {(() => {\n                if (connectionStatus === \"Expired\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return (\n                            <Translation\n                              defaultMessage=\"The SAML response signing certificate has expired. Users won't be able to sign-in to the application until the certificate is renewed.\"\n                              id=\"5tX19v\"\n                              description=\"Error message when SAML certificate has expired (no date)\"\n                            />\n                          );\n                        }\n\n                        return (\n                          <Translation\n                            defaultMessage=\"The SAML response signing certificate expired on {expiryDate}. Users won't be able to sign-in to the application until the certificate is renewed.\"\n                            id=\"vmTW/h\"\n                            description=\"Error message when SAML certificate has expired with date\"\n                            values={{\n                              expiryDate: (\n                                <Text weight=\"bold\" as=\"span\">\n                                  {expiryDate?.toLocaleString(\"en-US\", {\n                                    month: \"long\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                  })}\n                                </Text>\n                              ),\n                            }}\n                          />\n                        );\n                      })()}\n                    </Text>\n                  );\n                }\n\n                if (connectionStatus === \"Expiring\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return (\n                            <Translation\n                              defaultMessage=\"The SAML response signing certificate is expiring soon. When expired, users won't be able to sign-in.\"\n                              id=\"3dgA5f\"\n                              description=\"Warning message when SAML certificate is expiring soon (no date)\"\n                            />\n                          );\n                        }\n\n                        return (\n                          <Translation\n                            defaultMessage=\"The SAML response signing certificate will expire on {expiryDate}. When expired, users won't be able to sign-in.\"\n                            id=\"xT9Exy\"\n                            description=\"Warning message when SAML certificate is expiring with date\"\n                            values={{\n                              expiryDate: (\n                                <Text weight=\"bold\" as=\"span\">\n                                  {expiryDate?.toLocaleString(\"en-US\", {\n                                    month: \"long\",\n                                    day: \"numeric\",\n                                    year: \"numeric\",\n                                  })}\n                                </Text>\n                              ),\n                            }}\n                          />\n                        );\n                      })()}\n                    </Text>\n                  );\n                }\n              })()}\n            </Flex>\n          </CardList.Item>\n        )}\n      </AdminPortalSsoConnectionContext.Provider>\n    </CardList.Root>\n  );\n};\n\nfunction SsoStatus({\n  status,\n}: {\n  status: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  if (status === \"NotConfigured\") {\n    return null;\n  }\n\n  if (status === \"Inactive\") {\n    return (\n      <Status state=\"waiting\">\n        <Translation\n          defaultMessage=\"Setup in progress\"\n          id=\"MQR5mR\"\n          description=\"Status label when SSO setup is incomplete\"\n        />\n      </Status>\n    );\n  }\n\n  if (status === \"Expired\") {\n    return (\n      <Status state=\"error\">\n        <Translation\n          defaultMessage=\"Requires action\"\n          id=\"Yo2vHC\"\n          description=\"Status label when SSO requires attention\"\n        />\n      </Status>\n    );\n  }\n\n  if (status === \"Active\" || status === \"Expiring\") {\n    return (\n      <Status state=\"success\">\n        <Translation\n          defaultMessage=\"Connected\"\n          id=\"8S+Cyw\"\n          description=\"Status label when SSO is active\"\n        />\n      </Status>\n    );\n  }\n\n  return unreachable(status);\n}\n\nfunction SessionInfo({\n  currentDate,\n  identityProvider,\n  lastSession,\n  connectionStatus,\n}: {\n  identityProvider: IdentityProvider;\n  lastSession: Date | null;\n  currentDate: Date | null;\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  const relativeTimeString = React.useMemo(() => {\n    if (\n      !lastSession ||\n      !currentDate ||\n      connectionStatus === \"NotConfigured\" ||\n      connectionStatus === \"Inactive\"\n    ) {\n      return null;\n    }\n\n    return getRelativeTimeString(currentDate, lastSession);\n  }, [lastSession, currentDate, connectionStatus]);\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel color=\"panel\">\n        <ProviderIcon provider={identityProvider} size=\"2\" />\n      </IconPanel>\n      {lastSession ? (\n        <Flex direction=\"column\">\n          <Text size=\"2\" weight=\"bold\">\n            {getIdentityProviderName(identityProvider)}\n          </Text>\n          {relativeTimeString ? (\n            <Text color=\"gray\" size=\"2\">\n              <Translation\n                defaultMessage=\"Last session {relativeTime}\"\n                id=\"yN72Gc\"\n                description=\"Label showing when the last SSO session occurred\"\n                values={{ relativeTime: relativeTimeString }}\n              />\n            </Text>\n          ) : null}\n        </Flex>\n      ) : (\n        <Text size=\"2\" weight=\"bold\">\n          {getIdentityProviderName(identityProvider)}\n        </Text>\n      )}\n    </Flex>\n  );\n}\n\nfunction AdminPortalOpenButton({\n  isPending,\n  href,\n  initConfig,\n}: {\n  isPending: boolean;\n  href: string | null;\n  initConfig: () => void;\n}) {\n  const { connectionStatus } = useAdminPortalSsoConnectionContext();\n  const label = (() => {\n    switch (connectionStatus) {\n      case \"NotConfigured\":\n        return (\n          <Translation\n            defaultMessage=\"Set up SSO\"\n            id=\"MtkNQO\"\n            description=\"Button label to start SSO setup\"\n          />\n        );\n      case \"Inactive\":\n        return (\n          <Translation\n            defaultMessage=\"Continue setup\"\n            id=\"HFxrbY\"\n            description=\"Button label to continue incomplete SSO setup\"\n          />\n        );\n      case \"Active\":\n      case \"Expiring\":\n      case \"Expired\":\n        return (\n          <Translation\n            defaultMessage=\"Manage\"\n            id=\"T1VKzP\"\n            description=\"Button label to manage SSO settings\"\n          />\n        );\n      default:\n        return unreachable(connectionStatus);\n    }\n  })();\n\n  if (href) {\n    return (\n      <Button variant=\"secondary\" asChild>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n          {label} <ExternalLinkIcon aria-hidden />\n        </a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"secondary\"\n      loading={isPending}\n      disabled={isPending}\n      onClick={initConfig}\n    >\n      {label} <ExternalLinkIcon aria-hidden />\n    </Button>\n  );\n}\n\ninterface AdminPortalSsoConnectionLoadingProps extends WidgetRootDomProps {}\n\nconst AdminPortalSsoConnectionLoading: React.FC<\n  AdminPortalSsoConnectionLoadingProps\n> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Skeleton>\n            <IconPanel color=\"panel\">\n              <ProviderIcon provider=\"okta\" size=\"2\" />\n            </IconPanel>\n          </Skeleton>\n          <Flex direction=\"column\" gap=\"1\" my=\"-4px\">\n            <Skeleton>\n              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n              <Text size=\"1\">Okta</Text>\n            </Skeleton>\n            <Skeleton>\n              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n              <Text size=\"1\">Last session 10 minutes ago</Text>\n            </Skeleton>\n          </Flex>\n        </Flex>\n        <Flex gap=\"5\" align=\"center\">\n          <Skeleton>\n            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n            <Status state=\"error\">Requires action</Status>\n          </Skeleton>\n          <Skeleton>\n            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n            <Button variant=\"secondary\">\n              Manage <ExternalLinkIcon aria-hidden />\n            </Button>\n          </Skeleton>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\ninterface AdminPortalSsoConnectionErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst AdminPortalSsoConnectionError: React.FC<\n  AdminPortalSsoConnectionErrorProps\n> = ({ error, ...domProps }) => {\n  const translate = useTranslation();\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const { heading, message } = getErrorMessage(error, translate);\n\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            width=\"24px\"\n            height=\"24px\"\n            style={{\n              borderRadius: \"9999px\",\n              backgroundColor: \"var(--red-a4)\",\n              color: \"var(--red-a11)\",\n              flexShrink: 0,\n            }}\n          >\n            <Cross2Icon width=\"18px\" height=\"18px\" />\n          </Flex>\n          <Flex direction=\"column\">\n            <Text size=\"2\" weight=\"bold\">\n              {heading}\n            </Text>\n            <Text size=\"2\" color=\"gray\">\n              {message}\n            </Text>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nfunction getRelativeTimeString(\n  currentDate: Date | null,\n  lastSession: Date | null,\n) {\n  if (!currentDate || !lastSession) {\n    return null;\n  }\n\n  const rtf = new Intl.RelativeTimeFormat(\"en\", { numeric: \"auto\" });\n  const diff = lastSession.getTime() - currentDate.getTime();\n\n  const diffSeconds = Math.round(diff / 1000);\n  const diffMinutes = Math.round(diffSeconds / 60);\n  const diffHours = Math.round(diffMinutes / 60);\n  const diffDays = Math.round(diffHours / 24);\n  const diffMonths = Math.round(diffDays / 30);\n  const diffYears = Math.round(diffMonths / 12);\n\n  if (Math.abs(diffSeconds) < 60) {\n    return \"now\";\n  }\n\n  if (Math.abs(diffMinutes) < 60) {\n    return rtf.format(diffMinutes, \"minute\");\n  }\n\n  if (Math.abs(diffHours) < 24) {\n    return rtf.format(diffHours, \"hour\");\n  }\n\n  if (Math.abs(diffDays) < 30) {\n    return rtf.format(diffDays, \"day\");\n  }\n\n  if (Math.abs(diffMonths) < 12) {\n    return rtf.format(diffMonths, \"month\");\n  }\n\n  return rtf.format(diffYears, \"year\");\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"admin-portal-sso-connection\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  AdminPortalSsoConnectionProps,\n  AdminPortalSsoConnectionLoadingProps,\n  AdminPortalSsoConnectionErrorProps,\n};\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  AdminPortalSsoConnectionError,\n  /** @internal */\n  AdminPortalOpenButton,\n};\n"],"mappings":"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","names":[]}

package/dist/esm/lib/api-keys/api-key-details-card.js

@@ -1,21 +1,43 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DataList, Card, Code } from "@radix-ui/themes";
 import { RelativeTime } from "./relative-time.js";
+import { Translation } from "../i18n/translation.js";
 function ApiKeyDetailsCard({
   apiKey,
   ...cardProps
 }) {
   return /* @__PURE__ */ jsx(Card, { size: "2", ...cardProps, children: /* @__PURE__ */ jsxs(DataList.Root, { children: [
     /* @__PURE__ */ jsxs(DataList.Item, { children: [
-      /* @__PURE__ */ jsx(DataList.Label, { children: "Name" }),
+      /* @__PURE__ */ jsx(DataList.Label, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Name",
+          id: "tuCHkH",
+          description: "Label for API key name field"
+        }
+      ) }),
       /* @__PURE__ */ jsx(DataList.Value, { children: apiKey.name })
     ] }),
     /* @__PURE__ */ jsxs(DataList.Item, { children: [
-      /* @__PURE__ */ jsx(DataList.Label, { children: "Value" }),
+      /* @__PURE__ */ jsx(DataList.Label, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Value",
+          id: "HnuClZ",
+          description: "Label for API key value field"
+        }
+      ) }),
       /* @__PURE__ */ jsx(DataList.Value, { children: /* @__PURE__ */ jsx(Code, { color: "gray", children: apiKey.obfuscatedValue }) })
     ] }),
     /* @__PURE__ */ jsxs(DataList.Item, { children: [
-      /* @__PURE__ */ jsx(DataList.Label, { children: "Last used" }),
+      /* @__PURE__ */ jsx(DataList.Label, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Last used",
+          id: "elg/zm",
+          description: "Label for API key last used timestamp"
+        }
+      ) }),
       /* @__PURE__ */ jsx(
         DataList.Value,
         {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/api-keys/api-key-details-card.tsx"],"sourcesContent":["import { DataList, Card, Code, CardProps } from \"@radix-ui/themes\";\nimport { RelativeTime } from \"./relative-time.js\";\nimport { ListOrganizationApiKeysResponseData } from \"../../api/endpoint.js\";\n\nexport function ApiKeyDetailsCard({\n  apiKey,\n  ...cardProps\n}: { apiKey: ListOrganizationApiKeysResponseData } & CardProps) {\n  return (\n    <Card size=\"2\" {...cardProps}>\n      <DataList.Root>\n        <DataList.Item>\n          <DataList.Label>Name</DataList.Label>\n          <DataList.Value>{apiKey.name}</DataList.Value>\n        </DataList.Item>\n        <DataList.Item>\n          <DataList.Label>Value</DataList.Label>\n          <DataList.Value>\n            <Code color=\"gray\">{apiKey.obfuscatedValue}</Code>\n          </DataList.Value>\n        </DataList.Item>\n        <DataList.Item>\n          <DataList.Label>Last used</DataList.Label>\n          <DataList.Value\n            style={apiKey.lastUsedAt ? undefined : { color: \"var(--gray-10)\" }}\n          >\n            <RelativeTime\n              date={apiKey.lastUsedAt ? new Date(apiKey.lastUsedAt) : undefined}\n            />\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\n    </Card>\n  );\n}\n"],"mappings":"AAWQ,SACE,KADF;AAXR,SAAS,UAAU,MAAM,YAAuB;AAChD,SAAS,oBAAoB;AAGtB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAAgE;AAC9D,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,WACjB,+BAAC,SAAS,MAAT,EACC;AAAA,yBAAC,SAAS,MAAT,EACC;AAAA,0BAAC,SAAS,OAAT,EAAe,kBAAI;AAAA,MACpB,oBAAC,SAAS,OAAT,EAAgB,iBAAO,MAAK;AAAA,OAC/B;AAAA,IACA,qBAAC,SAAS,MAAT,EACC;AAAA,0BAAC,SAAS,OAAT,EAAe,mBAAK;AAAA,MACrB,oBAAC,SAAS,OAAT,EACC,8BAAC,QAAK,OAAM,QAAQ,iBAAO,iBAAgB,GAC7C;AAAA,OACF;AAAA,IACA,qBAAC,SAAS,MAAT,EACC;AAAA,0BAAC,SAAS,OAAT,EAAe,uBAAS;AAAA,MACzB;AAAA,QAAC,SAAS;AAAA,QAAT;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;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/lib/api-keys/api-key-details-card.tsx"],"sourcesContent":["import { DataList, Card, Code, CardProps } from \"@radix-ui/themes\";\nimport { RelativeTime } from \"./relative-time.js\";\nimport { ListOrganizationApiKeysResponseData } from \"../../api/endpoint.js\";\nimport { Translation } from \"../i18n/translation.js\";\n\nexport function ApiKeyDetailsCard({\n  apiKey,\n  ...cardProps\n}: { apiKey: ListOrganizationApiKeysResponseData } & CardProps) {\n  return (\n    <Card size=\"2\" {...cardProps}>\n      <DataList.Root>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Name\"\n              id=\"tuCHkH\"\n              description=\"Label for API key name field\"\n            />\n          </DataList.Label>\n          <DataList.Value>{apiKey.name}</DataList.Value>\n        </DataList.Item>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Value\"\n              id=\"HnuClZ\"\n              description=\"Label for API key value field\"\n            />\n          </DataList.Label>\n          <DataList.Value>\n            <Code color=\"gray\">{apiKey.obfuscatedValue}</Code>\n          </DataList.Value>\n        </DataList.Item>\n        <DataList.Item>\n          <DataList.Label>\n            <Translation\n              defaultMessage=\"Last used\"\n              id=\"elg/zm\"\n              description=\"Label for API key last used timestamp\"\n            />\n          </DataList.Label>\n          <DataList.Value\n            style={apiKey.lastUsedAt ? undefined : { color: \"var(--gray-10)\" }}\n          >\n            <RelativeTime\n              date={apiKey.lastUsedAt ? new Date(apiKey.lastUsedAt) : undefined}\n            />\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\n    </Card>\n  );\n}\n"],"mappings":"AAYQ,SAEI,KAFJ;AAZR,SAAS,UAAU,MAAM,YAAuB;AAChD,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAErB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAAgE;AAC9D,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,WACjB,+BAAC,SAAS,MAAT,EACC;AAAA,yBAAC,SAAS,MAAT,EACC;AAAA,0BAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,oBAAC,SAAS,OAAT,EAAgB,iBAAO,MAAK;AAAA,OAC/B;AAAA,IACA,qBAAC,SAAS,MAAT,EACC;AAAA,0BAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,oBAAC,SAAS,OAAT,EACC,8BAAC,QAAK,OAAM,QAAQ,iBAAO,iBAAgB,GAC7C;AAAA,OACF;AAAA,IACA,qBAAC,SAAS,MAAT,EACC;AAAA,0BAAC,SAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA;AAAA,QAAC,SAAS;AAAA,QAAT;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;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

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

@@ -5,6 +5,7 @@ import { ApiKeyDetailsCard } from "./api-key-details-card.js";
 import {
   useListOrganizationApiKeyPermissions
 } from "../../api/endpoint.js";
+import { Translation } from "../i18n/translation.js";
 function Permission({
   ...permission
 }) {
@@ -24,11 +25,25 @@ function ApiKeyDetailsDialog({
     (permission) => permissionsQuery.data?.data.find((p) => p.slug === permission)
   );
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Content, { maxWidth: "529px", children: [
-    /* @__PURE__ */ jsx(Dialog.Title, { children: "API key details" }),
+    /* @__PURE__ */ jsx(Dialog.Title, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "API key details",
+        id: "dqU4kt",
+        description: "Dialog title for viewing API key details"
+      }
+    ) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
       /* @__PURE__ */ jsx(ApiKeyDetailsCard, { apiKey, mt: "5" }),
       permissions.length ? /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
-        /* @__PURE__ */ jsx(Label, { children: "Permissions" }),
+        /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Permissions",
+            id: "i0XUeg",
+            description: "Label for API key permissions section"
+          }
+        ) }),
         /* @__PURE__ */ jsx(
           Flex,
           {
@@ -48,7 +63,14 @@ function ApiKeyDetailsDialog({
         )
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx(Flex, { align: "center", gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Close" }) }) })
+    /* @__PURE__ */ jsx(Flex, { align: "center", gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Close",
+        id: "/4YwoE",
+        description: "Button to close the API key details dialog"
+      }
+    ) }) }) })
   ] }) });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/api-keys/api-key-details-dialog.tsx"],"sourcesContent":["import { Flex, Box, Text, ScrollArea } from \"@radix-ui/themes\";\nimport { Button, Dialog, Label } from \"../elements.js\";\nimport { ApiKeyDetailsCard } from \"./api-key-details-card.js\";\nimport {\n  ListOrganizationApiKeysResponseData,\n  useListOrganizationApiKeyPermissions,\n} from \"../../api/endpoint.js\";\n\nfunction Permission({\n  ...permission\n}: {\n  name: string;\n  description?: string | null;\n}) {\n  return (\n    <Box className=\"woswidgets-api-key-details-permission\" px=\"4\" py=\"3\">\n      <Flex direction=\"column\">\n        <Text size=\"2\" weight=\"bold\">\n          {permission.name}\n        </Text>\n        {permission.description ? (\n          <Text size=\"2\" color=\"gray\">\n            {permission.description}\n          </Text>\n        ) : null}\n      </Flex>\n    </Box>\n  );\n}\n\nexport function ApiKeyDetailsDialog({\n  open,\n  onOpenChange,\n  apiKey,\n  permissions,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  apiKey: ListOrganizationApiKeysResponseData;\n  permissions: string[];\n}) {\n  const permissionsQuery = useListOrganizationApiKeyPermissions({ limit: 100 });\n  const filteredPermissions = permissions.map((permission) =>\n    permissionsQuery.data?.data.find((p) => p.slug === permission),\n  );\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content maxWidth=\"529px\">\n        <Dialog.Title>API key details</Dialog.Title>\n        <Flex direction=\"column\" gap=\"5\">\n          <ApiKeyDetailsCard apiKey={apiKey} mt=\"5\" />\n          {permissions.length ? (\n            <Flex direction=\"column\" gap=\"2\">\n              <Label>Permissions</Label>\n              <Flex\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                <ScrollArea style={{ maxHeight: \"calc(50vh - 150px)\" }}>\n                  {filteredPermissions.map((permission) => {\n                    if (!permission) return null;\n                    return <Permission key={permission.name} {...permission} />;\n                  })}\n                </ScrollArea>\n              </Flex>\n            </Flex>\n          ) : null}\n        </Flex>\n        <Flex align=\"center\" gap=\"3\" justify=\"end\" mt=\"5\">\n          <Dialog.Close>\n            <Button variant=\"secondary\">Close</Button>\n          </Dialog.Close>\n        </Flex>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"],"mappings":"AAgBM,SACE,KADF;AAhBN,SAAS,MAAM,KAAK,MAAM,kBAAkB;AAC5C,SAAS,QAAQ,QAAQ,aAAa;AACtC,SAAS,yBAAyB;AAClC;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,WAAW;AAAA,EAClB,GAAG;AACL,GAGG;AACD,SACE,oBAAC,OAAI,WAAU,yCAAwC,IAAG,KAAI,IAAG,KAC/D,+BAAC,QAAK,WAAU,UACd;AAAA,wBAAC,QAAK,MAAK,KAAI,QAAO,QACnB,qBAAW,MACd;AAAA,IACC,WAAW,cACV,oBAAC,QAAK,MAAK,KAAI,OAAM,QAClB,qBAAW,aACd,IACE;AAAA,KACN,GACF;AAEJ;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,mBAAmB,qCAAqC,EAAE,OAAO,IAAI,CAAC;AAC5E,QAAM,sBAAsB,YAAY;AAAA,IAAI,CAAC,eAC3C,iBAAiB,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,UAAU;AAAA,EAC/D;AAEA,SACE,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,+BAAC,OAAO,SAAP,EAAe,UAAS,SACvB;AAAA,wBAAC,OAAO,OAAP,EAAa,6BAAe;AAAA,IAC7B,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,0BAAC,qBAAkB,QAAgB,IAAG,KAAI;AAAA,MACzC,YAAY,SACX,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,4BAAC,SAAM,yBAAW;AAAA,QAClB;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,cAAc;AAAA,cACd,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,YACf;AAAA,YACA,WAAU;AAAA,YACV,OAAM;AAAA,YAEN,8BAAC,cAAW,OAAO,EAAE,WAAW,qBAAqB,GAClD,8BAAoB,IAAI,CAAC,eAAe;AACvC,kBAAI,CAAC,WAAY,QAAO;AACxB,qBAAO,oBAAC,cAAkC,GAAG,cAArB,WAAW,IAAsB;AAAA,YAC3D,CAAC,GACH;AAAA;AAAA,QACF;AAAA,SACF,IACE;AAAA,OACN;AAAA,IACA,oBAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,OAAM,IAAG,KAC5C,8BAAC,OAAO,OAAP,EACC,8BAAC,UAAO,SAAQ,aAAY,mBAAK,GACnC,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/lib/api-keys/api-key-details-dialog.tsx"],"sourcesContent":["import { Flex, Box, Text, ScrollArea } from \"@radix-ui/themes\";\nimport { Button, Dialog, Label } from \"../elements.js\";\nimport { ApiKeyDetailsCard } from \"./api-key-details-card.js\";\nimport {\n  ListOrganizationApiKeysResponseData,\n  useListOrganizationApiKeyPermissions,\n} from \"../../api/endpoint.js\";\nimport { Translation } from \"../i18n/translation.js\";\n\nfunction Permission({\n  ...permission\n}: {\n  name: string;\n  description?: string | null;\n}) {\n  return (\n    <Box className=\"woswidgets-api-key-details-permission\" px=\"4\" py=\"3\">\n      <Flex direction=\"column\">\n        <Text size=\"2\" weight=\"bold\">\n          {permission.name}\n        </Text>\n        {permission.description ? (\n          <Text size=\"2\" color=\"gray\">\n            {permission.description}\n          </Text>\n        ) : null}\n      </Flex>\n    </Box>\n  );\n}\n\nexport function ApiKeyDetailsDialog({\n  open,\n  onOpenChange,\n  apiKey,\n  permissions,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  apiKey: ListOrganizationApiKeysResponseData;\n  permissions: string[];\n}) {\n  const permissionsQuery = useListOrganizationApiKeyPermissions({ limit: 100 });\n  const filteredPermissions = permissions.map((permission) =>\n    permissionsQuery.data?.data.find((p) => p.slug === permission),\n  );\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content maxWidth=\"529px\">\n        <Dialog.Title>\n          <Translation\n            defaultMessage=\"API key details\"\n            id=\"dqU4kt\"\n            description=\"Dialog title for viewing API key details\"\n          />\n        </Dialog.Title>\n        <Flex direction=\"column\" gap=\"5\">\n          <ApiKeyDetailsCard apiKey={apiKey} mt=\"5\" />\n          {permissions.length ? (\n            <Flex direction=\"column\" gap=\"2\">\n              <Label>\n                <Translation\n                  defaultMessage=\"Permissions\"\n                  id=\"i0XUeg\"\n                  description=\"Label for API key permissions section\"\n                />\n              </Label>\n              <Flex\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                <ScrollArea style={{ maxHeight: \"calc(50vh - 150px)\" }}>\n                  {filteredPermissions.map((permission) => {\n                    if (!permission) return null;\n                    return <Permission key={permission.name} {...permission} />;\n                  })}\n                </ScrollArea>\n              </Flex>\n            </Flex>\n          ) : null}\n        </Flex>\n        <Flex align=\"center\" gap=\"3\" justify=\"end\" mt=\"5\">\n          <Dialog.Close>\n            <Button variant=\"secondary\">\n              <Translation\n                defaultMessage=\"Close\"\n                id=\"/4YwoE\"\n                description=\"Button to close the API key details dialog\"\n              />\n            </Button>\n          </Dialog.Close>\n        </Flex>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"],"mappings":"AAiBM,SACE,KADF;AAjBN,SAAS,MAAM,KAAK,MAAM,kBAAkB;AAC5C,SAAS,QAAQ,QAAQ,aAAa;AACtC,SAAS,yBAAyB;AAClC;AAAA,EAEE;AAAA,OACK;AACP,SAAS,mBAAmB;AAE5B,SAAS,WAAW;AAAA,EAClB,GAAG;AACL,GAGG;AACD,SACE,oBAAC,OAAI,WAAU,yCAAwC,IAAG,KAAI,IAAG,KAC/D,+BAAC,QAAK,WAAU,UACd;AAAA,wBAAC,QAAK,MAAK,KAAI,QAAO,QACnB,qBAAW,MACd;AAAA,IACC,WAAW,cACV,oBAAC,QAAK,MAAK,KAAI,OAAM,QAClB,qBAAW,aACd,IACE;AAAA,KACN,GACF;AAEJ;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,mBAAmB,qCAAqC,EAAE,OAAO,IAAI,CAAC;AAC5E,QAAM,sBAAsB,YAAY;AAAA,IAAI,CAAC,eAC3C,iBAAiB,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,UAAU;AAAA,EAC/D;AAEA,SACE,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,+BAAC,OAAO,SAAP,EAAe,UAAS,SACvB;AAAA,wBAAC,OAAO,OAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA;AAAA,IACd,GACF;AAAA,IACA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,0BAAC,qBAAkB,QAAgB,IAAG,KAAI;AAAA,MACzC,YAAY,SACX,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,4BAAC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA;AAAA,QACd,GACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,cAAc;AAAA,cACd,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,YACf;AAAA,YACA,WAAU;AAAA,YACV,OAAM;AAAA,YAEN,8BAAC,cAAW,OAAO,EAAE,WAAW,qBAAqB,GAClD,8BAAoB,IAAI,CAAC,eAAe;AACvC,kBAAI,CAAC,WAAY,QAAO;AACxB,qBAAO,oBAAC,cAAkC,GAAG,cAArB,WAAW,IAAsB;AAAA,YAC3D,CAAC,GACH;AAAA;AAAA,QACF;AAAA,SACF,IACE;AAAA,OACN;AAAA,IACA,oBAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,OAAM,IAAG,KAC5C,8BAAC,OAAO,OAAP,EACC,8BAAC,UAAO,SAAQ,aACd;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA;AAAA,IACd,GACF,GACF,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

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

@@ -9,9 +9,11 @@ import { IconButton, 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";
+import { useTranslation } from "../i18n/use-translation.js";
 const ApiKeysSearch = React.forwardRef(({ className, ...props }, ref) => {
   const { inputRef, clearSearch, searchValue, setSearchValue } = useApiKeysSearchContext();
   const { dispatch } = useApiKeysContext();
+  const translate = useTranslation();
   const filter = useDebouncedCallback((value) => {
     dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
   }, 200);
@@ -25,7 +27,11 @@ const ApiKeysSearch = React.forwardRef(({ className, ...props }, ref) => {
       ref: useComposedRefs(inputRef, ref),
       className: cx(namespaceClassNames("api-keys-search"), className),
       autoComplete: "off",
-      placeholder: "Search by name",
+      placeholder: translate({
+        defaultMessage: "Search by name",
+        id: "GC8aGI",
+        description: "Placeholder for API key search input"
+      }),
       value: searchValue,
       onChange: (event) => {
         const value = event.target.value;
@@ -41,13 +47,16 @@ const ApiKeysSearch = React.forwardRef(({ className, ...props }, ref) => {
       ...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(
+        /* @__PURE__ */ jsx(TextFieldSlot, { side: "right", children: !!searchValue && /* @__PURE__ */ jsx(
           IconButton,
           {
             size: "1",
             onClick: resetSearch,
-            title: "Clear search",
-            "aria-label": "Clear search",
+            title: translate({
+              defaultMessage: "Clear search",
+              id: "7enwzK",
+              description: "Title tooltip for clear search button"
+            }),
             children: /* @__PURE__ */ jsx(Cross2Icon, { "aria-hidden": "true" })
           }
         ) })

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

@@ -1 +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 cx from \"clsx\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IconButton, 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            onClick={resetSearch}\n            title=\"Clear search\"\n            aria-label=\"Clear search\"\n          >\n            <Cross2Icon aria-hidden=\"true\" />\n          </IconButton>\n        )}\n      </TextFieldSlot>\n    </TextField>\n  );\n});\n"],"mappings":";AAgCI,SAoBI,KApBJ;AA9BJ,SAAS,uBAAuB;AAChC,SAAS,YAAY,2BAA2B;AAChD,OAAO,QAAQ;AACf,YAAY,WAAW;AACvB,SAAS,4BAA4B;AACrC,SAAS,YAAY,WAAW,qBAAqB;AACrD,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,SAAS;AAAA,YACT,OAAM;AAAA,YACN,cAAW;AAAA,YAEX,8BAAC,cAAW,eAAY,QAAO;AAAA;AAAA,QACjC,GAEJ;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}
+{"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 cx from \"clsx\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IconButton, 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\";\nimport { useTranslation } from \"../i18n/use-translation.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  const translate = useTranslation();\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={translate({\n        defaultMessage: \"Search by name\",\n        id: \"GC8aGI\",\n        description: \"Placeholder for API key search input\",\n      })}\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            onClick={resetSearch}\n            title={translate({\n              defaultMessage: \"Clear search\",\n              id: \"7enwzK\",\n              description: \"Title tooltip for clear search button\",\n            })}\n          >\n            <Cross2Icon aria-hidden=\"true\" />\n          </IconButton>\n        )}\n      </TextFieldSlot>\n    </TextField>\n  );\n});\n"],"mappings":";AAkCI,SAwBI,KAxBJ;AAhCJ,SAAS,uBAAuB;AAChC,SAAS,YAAY,2BAA2B;AAChD,OAAO,QAAQ;AACf,YAAY,WAAW;AACvB,SAAS,4BAA4B;AACrC,SAAS,YAAY,WAAW,qBAAqB;AACrD,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAIxB,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;AACvC,QAAM,YAAY,eAAe;AAEjC,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,aAAa,UAAU;AAAA,QACrB,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf,CAAC;AAAA,MACD,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,WAAC,CAAC,eACD;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,OAAO,UAAU;AAAA,cACf,gBAAgB;AAAA,cAChB,IAAI;AAAA,cACJ,aAAa;AAAA,YACf,CAAC;AAAA,YAED,8BAAC,cAAW,eAAY,QAAO;AAAA;AAAA,QACjC,GAEJ;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}