@workos-inc/widgets 1.7.2 → 1.8.0

package/dist/esm/lib/elevated-access.js

@@ -6,6 +6,7 @@ import { useElevatedAccessToken } from "../api/api-provider.js";
 import { useEffect, useRef, useState } from "react";
 import { AlertDialog, Dialog, Button } from "./elements.js";
 import * as Otp from "./otp-input.js";
+import { Translation } from "./i18n/translation.js";
 function ElevatedAccess({
   type = "dialog",
   children,
@@ -65,13 +66,32 @@ function SendVerificationEmailForm({
     sendVerification.mutate();
   };
   return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx(Title, { children: hasTokenExpired ? "Your verification token has expired" : "Verify your identity" }),
-    /* @__PURE__ */ jsxs(Description, { color: "gray", mb: "5", children: [
-      "To continue, we need to confirm your identity. We'll send a temporary verification code to",
-      " ",
-      /* @__PURE__ */ jsx(Text, { weight: "bold", highContrast: true, children: me?.email }),
-      "."
-    ] }),
+    /* @__PURE__ */ jsx(Title, { children: hasTokenExpired ? /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Your verification token has expired",
+        id: "lb/AsC",
+        description: "Dialog title when verification token has expired"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Verify your identity",
+        id: "7tGCOh",
+        description: "Dialog title for identity verification"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Description, { color: "gray", mb: "5", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "To continue, we need to confirm your identity. We'll send a temporary verification code to {email}.",
+        id: "FTUSRM",
+        description: "Description explaining verification code will be sent",
+        values: {
+          email: /* @__PURE__ */ jsx(Text, { weight: "bold", highContrast: true, children: me?.email })
+        }
+      }
+    ) }),
     sendVerification.error && /* @__PURE__ */ jsx(Callout.Root, { color: "red", mt: "-2", mb: "0", children: /* @__PURE__ */ jsx(Callout.Text, { children: getMutationErrorMessage(sendVerification.error) }) }),
     /* @__PURE__ */ jsxs(Flex, { justify: "end", align: "center", gap: "3", mt: "5", children: [
       /* @__PURE__ */ jsx(Close, { children: /* @__PURE__ */ jsx(
@@ -80,10 +100,24 @@ function SendVerificationEmailForm({
           variant: "secondary",
           type: "button",
           disabled: sendVerification.isPending,
-          children: "Cancel"
+          children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Cancel",
+              id: "hHNj31",
+              description: "Cancel button text"
+            }
+          )
         }
       ) }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", loading: sendVerification.isPending, children: "Send verification code" })
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading: sendVerification.isPending, children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Send verification code",
+          id: "XsTeXJ",
+          description: "Button text to send verification code"
+        }
+      ) })
     ] })
   ] });
 }
@@ -127,13 +161,25 @@ function VerificationIdentityForm({
     setIsSubmitting(false);
   };
   return /* @__PURE__ */ jsxs(Form.Root, { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx(Title, { children: "Verify your identity" }),
-    /* @__PURE__ */ jsxs(Description, { color: "gray", children: [
-      "A verification code was sent to",
-      " ",
-      /* @__PURE__ */ jsx(Text, { weight: "bold", highContrast: true, children: me?.email }),
-      ". Please enter it below."
-    ] }),
+    /* @__PURE__ */ jsx(Title, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Verify your identity",
+        id: "7tGCOh",
+        description: "Dialog title for identity verification"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Description, { color: "gray", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "A verification code was sent to {email}. Please enter it below.",
+        id: "kvxE0S",
+        description: "Description explaining where verification code was sent",
+        values: {
+          email: /* @__PURE__ */ jsx(Text, { weight: "bold", highContrast: true, children: me?.email })
+        }
+      }
+    ) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", mt: "5", mx: "auto", width: "fit-content", children: [
       /* @__PURE__ */ jsxs(
         Otp.Root,
@@ -159,8 +205,22 @@ function VerificationIdentityForm({
       verifyIdentity.error && /* @__PURE__ */ jsx(Text, { color: "red", size: "2", as: "p", children: getMutationErrorMessage(verifyIdentity.error) })
     ] }),
     /* @__PURE__ */ jsxs(Flex, { justify: "end", align: "center", gap: "3", mt: "5", children: [
-      /* @__PURE__ */ jsx(Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", children: "Cancel" }) }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", loading: isSubmitting, children: "Confirm" })
+      /* @__PURE__ */ jsx(Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Cancel",
+          id: "hHNj31",
+          description: "Cancel button text"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading: isSubmitting, children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Confirm",
+          id: "EmYENK",
+          description: "Confirm button text for verification"
+        }
+      ) })
     ] })
   ] });
 }

package/dist/esm/lib/elevated-access.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/elevated-access.tsx"],"sourcesContent":["import * as Form from \"@radix-ui/react-form\";\nimport { Callout, Flex, Text } from \"@radix-ui/themes\";\nimport { useMe, useSendVerification, useVerify } from \"../api/endpoint.js\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport { PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { AlertDialog, Dialog, Button } from \"./elements.js\";\nimport * as Otp from \"./otp-input.js\";\n\ninterface ElevatedAccessProps extends PropsWithChildren {\n  onVerified?: () => Promise<unknown>;\n  type?: \"dialog\" | \"alert\";\n}\n\nexport function ElevatedAccess({\n  type = \"dialog\",\n  children,\n  onVerified,\n}: ElevatedAccessProps) {\n  const { elevatedAccess } = useElevatedAccessToken();\n  const [authenticationChallengeId, setAuthenticationChallengeId] =\n    useState<string>();\n\n  const prevAccessToken = useRef(elevatedAccess);\n\n  useEffect(() => {\n    prevAccessToken.current = elevatedAccess;\n  }, [elevatedAccess]);\n\n  if (elevatedAccess) {\n    return <>{children}</>;\n  }\n\n  if (!authenticationChallengeId) {\n    // FIXME: This should be refactored\n    // eslint-disable-next-line react-hooks/refs\n    const hasTokenExpired = !!prevAccessToken.current;\n\n    return (\n      <SendVerificationEmailForm\n        type={type}\n        hasTokenExpired={hasTokenExpired}\n        onSuccess={(challengeId) => {\n          setAuthenticationChallengeId(challengeId);\n        }}\n      />\n    );\n  }\n\n  if (authenticationChallengeId) {\n    return (\n      <VerificationIdentityForm\n        type={type}\n        authenticationChallengeId={authenticationChallengeId}\n        onSuccess={() => {\n          // Reset the challenge id\n          setAuthenticationChallengeId(undefined);\n\n          return onVerified?.();\n        }}\n      />\n    );\n  }\n\n  return null;\n}\n\ninterface SendVerificationEmailFormProps {\n  onSuccess: (challengeId: string) => unknown | Promise<unknown>;\n  type: \"dialog\" | \"alert\";\n  hasTokenExpired: boolean;\n}\n\nfunction SendVerificationEmailForm({\n  onSuccess,\n  type,\n  hasTokenExpired,\n}: SendVerificationEmailFormProps) {\n  const { data: me } = useMe();\n  const sendVerification = useSendVerification({\n    mutation: { onSuccess: (data) => onSuccess(data.authenticationChallenge) },\n  });\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    sendVerification.mutate();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Title>\n        {hasTokenExpired\n          ? \"Your verification token has expired\"\n          : \"Verify your identity\"}\n      </Title>\n\n      <Description color=\"gray\" mb=\"5\">\n        To continue, we need to confirm your identity. We'll send a temporary\n        verification code to{\" \"}\n        <Text weight=\"bold\" highContrast>\n          {me?.email}\n        </Text>\n        .\n      </Description>\n\n      {sendVerification.error && (\n        <Callout.Root color=\"red\" mt=\"-2\" mb=\"0\">\n          <Callout.Text>\n            {getMutationErrorMessage(sendVerification.error)}\n          </Callout.Text>\n        </Callout.Root>\n      )}\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button\n            variant=\"secondary\"\n            type=\"button\"\n            disabled={sendVerification.isPending}\n          >\n            Cancel\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={sendVerification.isPending}>\n          Send verification code\n        </Button>\n      </Flex>\n    </form>\n  );\n}\n\ninterface VerificationIdentityFormProps {\n  onSuccess?: () => unknown | Promise<unknown>;\n  authenticationChallengeId: string;\n  type: \"dialog\" | \"alert\";\n}\n\nfunction VerificationIdentityForm({\n  onSuccess,\n  authenticationChallengeId,\n  type,\n}: VerificationIdentityFormProps) {\n  const { data: me } = useMe();\n  const { setElevatedAccess } = useElevatedAccessToken();\n  const verifyIdentity = useVerify();\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const code = formData.get(\"otp-code\")?.toString() ?? \"\";\n\n    setIsSubmitting(true);\n\n    try {\n      // Mutate async so we can wait for the onSuccess callback as well\n      const newAuthState = await verifyIdentity.mutateAsync({\n        data: {\n          code,\n          authenticationChallengeId,\n        },\n      });\n\n      const in10Seconds = new Date(Date.now() + 5 * 1000);\n\n      setElevatedAccess({\n        token: newAuthState.elevatedAccessToken,\n        // expiresAt: newAuthState.expiresAt,\n        expiresAt: in10Seconds.toISOString(),\n      });\n\n      if (onSuccess) {\n        await new Promise((resolve) => setTimeout(resolve, 200));\n        await onSuccess();\n      }\n    } catch (error) {\n      console.error(error);\n    }\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <Form.Root onSubmit={handleSubmit}>\n      <Title>Verify your identity</Title>\n\n      <Description color=\"gray\">\n        A verification code was sent to{\" \"}\n        <Text weight=\"bold\" highContrast>\n          {me?.email}\n        </Text>\n        . Please enter it below.\n      </Description>\n\n      <Flex direction=\"column\" gap=\"2\" mt=\"5\" mx=\"auto\" width=\"fit-content\">\n        <Otp.Root\n          autoSubmit\n          gap=\"2\"\n          justify=\"center\"\n          columns=\"repeat(6, 48px)\"\n          width=\"fit-content\"\n          rows=\"48px\"\n          name=\"otp-code\"\n          readOnly={isSubmitting}\n        >\n          <Otp.Input required autoFocus autoComplete=\"off\" />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n        </Otp.Root>\n\n        {verifyIdentity.error && (\n          <Text color=\"red\" size=\"2\" as=\"p\">\n            {getMutationErrorMessage(verifyIdentity.error)}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button variant=\"secondary\" type=\"button\">\n            Cancel\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={isSubmitting}>\n          Confirm\n        </Button>\n      </Flex>\n    </Form.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = typeof error === \"string\" ? error : \"\";\n\n  if (error instanceof Error) {\n    message = error.message;\n  } else if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    message = error.message;\n  }\n\n  if (!message || message === \"Bad Request\") {\n    message = \"Invalid code, please try again.\";\n  }\n\n  return message;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/elevated-access.tsx"],"sourcesContent":["import * as Form from \"@radix-ui/react-form\";\nimport { Callout, Flex, Text } from \"@radix-ui/themes\";\nimport { useMe, useSendVerification, useVerify } from \"../api/endpoint.js\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport { PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { AlertDialog, Dialog, Button } from \"./elements.js\";\nimport * as Otp from \"./otp-input.js\";\nimport { Translation } from \"./i18n/translation.js\";\n\ninterface ElevatedAccessProps extends PropsWithChildren {\n  onVerified?: () => Promise<unknown>;\n  type?: \"dialog\" | \"alert\";\n}\n\nexport function ElevatedAccess({\n  type = \"dialog\",\n  children,\n  onVerified,\n}: ElevatedAccessProps) {\n  const { elevatedAccess } = useElevatedAccessToken();\n  const [authenticationChallengeId, setAuthenticationChallengeId] =\n    useState<string>();\n\n  const prevAccessToken = useRef(elevatedAccess);\n\n  useEffect(() => {\n    prevAccessToken.current = elevatedAccess;\n  }, [elevatedAccess]);\n\n  if (elevatedAccess) {\n    return <>{children}</>;\n  }\n\n  if (!authenticationChallengeId) {\n    // FIXME: This should be refactored\n    // eslint-disable-next-line react-hooks/refs\n    const hasTokenExpired = !!prevAccessToken.current;\n\n    return (\n      <SendVerificationEmailForm\n        type={type}\n        hasTokenExpired={hasTokenExpired}\n        onSuccess={(challengeId) => {\n          setAuthenticationChallengeId(challengeId);\n        }}\n      />\n    );\n  }\n\n  if (authenticationChallengeId) {\n    return (\n      <VerificationIdentityForm\n        type={type}\n        authenticationChallengeId={authenticationChallengeId}\n        onSuccess={() => {\n          // Reset the challenge id\n          setAuthenticationChallengeId(undefined);\n\n          return onVerified?.();\n        }}\n      />\n    );\n  }\n\n  return null;\n}\n\ninterface SendVerificationEmailFormProps {\n  onSuccess: (challengeId: string) => unknown | Promise<unknown>;\n  type: \"dialog\" | \"alert\";\n  hasTokenExpired: boolean;\n}\n\nfunction SendVerificationEmailForm({\n  onSuccess,\n  type,\n  hasTokenExpired,\n}: SendVerificationEmailFormProps) {\n  const { data: me } = useMe();\n  const sendVerification = useSendVerification({\n    mutation: { onSuccess: (data) => onSuccess(data.authenticationChallenge) },\n  });\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    sendVerification.mutate();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Title>\n        {hasTokenExpired ? (\n          <Translation\n            defaultMessage=\"Your verification token has expired\"\n            id=\"lb/AsC\"\n            description=\"Dialog title when verification token has expired\"\n          />\n        ) : (\n          <Translation\n            defaultMessage=\"Verify your identity\"\n            id=\"7tGCOh\"\n            description=\"Dialog title for identity verification\"\n          />\n        )}\n      </Title>\n\n      <Description color=\"gray\" mb=\"5\">\n        <Translation\n          defaultMessage=\"To continue, we need to confirm your identity. We'll send a temporary verification code to {email}.\"\n          id=\"FTUSRM\"\n          description=\"Description explaining verification code will be sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      {sendVerification.error && (\n        <Callout.Root color=\"red\" mt=\"-2\" mb=\"0\">\n          <Callout.Text>\n            {getMutationErrorMessage(sendVerification.error)}\n          </Callout.Text>\n        </Callout.Root>\n      )}\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button\n            variant=\"secondary\"\n            type=\"button\"\n            disabled={sendVerification.isPending}\n          >\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={sendVerification.isPending}>\n          <Translation\n            defaultMessage=\"Send verification code\"\n            id=\"XsTeXJ\"\n            description=\"Button text to send verification code\"\n          />\n        </Button>\n      </Flex>\n    </form>\n  );\n}\n\ninterface VerificationIdentityFormProps {\n  onSuccess?: () => unknown | Promise<unknown>;\n  authenticationChallengeId: string;\n  type: \"dialog\" | \"alert\";\n}\n\nfunction VerificationIdentityForm({\n  onSuccess,\n  authenticationChallengeId,\n  type,\n}: VerificationIdentityFormProps) {\n  const { data: me } = useMe();\n  const { setElevatedAccess } = useElevatedAccessToken();\n  const verifyIdentity = useVerify();\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const code = formData.get(\"otp-code\")?.toString() ?? \"\";\n\n    setIsSubmitting(true);\n\n    try {\n      // Mutate async so we can wait for the onSuccess callback as well\n      const newAuthState = await verifyIdentity.mutateAsync({\n        data: {\n          code,\n          authenticationChallengeId,\n        },\n      });\n\n      const in10Seconds = new Date(Date.now() + 5 * 1000);\n\n      setElevatedAccess({\n        token: newAuthState.elevatedAccessToken,\n        // expiresAt: newAuthState.expiresAt,\n        expiresAt: in10Seconds.toISOString(),\n      });\n\n      if (onSuccess) {\n        await new Promise((resolve) => setTimeout(resolve, 200));\n        await onSuccess();\n      }\n    } catch (error) {\n      console.error(error);\n    }\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <Form.Root onSubmit={handleSubmit}>\n      <Title>\n        <Translation\n          defaultMessage=\"Verify your identity\"\n          id=\"7tGCOh\"\n          description=\"Dialog title for identity verification\"\n        />\n      </Title>\n\n      <Description color=\"gray\">\n        <Translation\n          defaultMessage=\"A verification code was sent to {email}. Please enter it below.\"\n          id=\"kvxE0S\"\n          description=\"Description explaining where verification code was sent\"\n          values={{\n            email: (\n              <Text weight=\"bold\" highContrast>\n                {me?.email}\n              </Text>\n            ),\n          }}\n        />\n      </Description>\n\n      <Flex direction=\"column\" gap=\"2\" mt=\"5\" mx=\"auto\" width=\"fit-content\">\n        <Otp.Root\n          autoSubmit\n          gap=\"2\"\n          justify=\"center\"\n          columns=\"repeat(6, 48px)\"\n          width=\"fit-content\"\n          rows=\"48px\"\n          name=\"otp-code\"\n          readOnly={isSubmitting}\n        >\n          <Otp.Input required autoFocus autoComplete=\"off\" />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n          <Otp.Input required />\n        </Otp.Root>\n\n        {verifyIdentity.error && (\n          <Text color=\"red\" size=\"2\" as=\"p\">\n            {getMutationErrorMessage(verifyIdentity.error)}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <Button variant=\"secondary\" type=\"button\">\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Close>\n        <Button type=\"submit\" loading={isSubmitting}>\n          <Translation\n            defaultMessage=\"Confirm\"\n            id=\"EmYENK\"\n            description=\"Confirm button text for verification\"\n          />\n        </Button>\n      </Flex>\n    </Form.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = typeof error === \"string\" ? error : \"\";\n\n  if (error instanceof Error) {\n    message = error.message;\n  } else if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    message = error.message;\n  }\n\n  if (!message || message === \"Bad Request\") {\n    message = \"Invalid code, please try again.\";\n  }\n\n  return message;\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they are displayed dynamically\n"],"mappings":"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","names":[]}

package/dist/esm/lib/generic-error.d.ts

@@ -6,7 +6,11 @@ type GenericErrorProps = React.ComponentProps<typeof Flex> & {
     error: unknown;
 };
 declare function GenericError({ error, ...domProps }: GenericErrorProps): react_jsx_runtime.JSX.Element;
-declare function getErrorMessage(error: unknown): {
+declare function getErrorMessage(error: unknown, translate: ({ defaultMessage, description, id, }: {
+    defaultMessage: string;
+    description: string;
+    id: string;
+}) => string): {
     heading: string;
     message: string;
 };

package/dist/esm/lib/generic-error.js

@@ -7,11 +7,14 @@ import {
   NoAuthTokenError
 } from "./errors.js";
 import { Cross2Icon } from "@radix-ui/react-icons";
+import { Translation } from "./i18n/translation.js";
+import { useTranslation } from "./i18n/use-translation.js";
 function GenericError({ error, ...domProps }) {
+  const translate = useTranslation();
   React.useEffect(() => {
     console.error(error);
   }, [error]);
-  const { heading, message } = getErrorMessage(error);
+  const { message } = getErrorMessage(error, translate);
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -38,35 +41,74 @@ function GenericError({ error, ...domProps }) {
           }
         ),
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", maxWidth: "420px", children: [
-          /* @__PURE__ */ jsx(Heading, { size: "5", align: "center", mb: "1", wrap: "balance", as: "h3", children: heading }),
+          /* @__PURE__ */ jsx(Heading, { size: "5", align: "center", mb: "1", wrap: "balance", as: "h3", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Error fetching data",
+              id: "mjZ9vq",
+              description: "Error heading shown when there is a network or authorization error"
+            }
+          ) }),
           /* @__PURE__ */ jsx(Text, { as: "p", align: "center", wrap: "balance", color: "gray", children: message })
         ] })
       ]
     }
   );
 }
-function getErrorMessage(error) {
+function getErrorMessage(error, translate) {
   if (error instanceof FetchError) {
     return {
-      heading: "Error fetching data",
-      message: "An error occurred. You may need to configure CORS in the WorkOS Dashboard."
+      heading: translate({
+        defaultMessage: "Error fetching data",
+        description: "Error message heading",
+        id: "5QzKdW"
+      }),
+      message: translate({
+        defaultMessage: "An error occurred. You may need to configure CORS in the WorkOS Dashboard.",
+        description: "Error message details",
+        id: "63rRud"
+      })
     };
   }
   if (error instanceof NoAuthTokenError) {
     return {
-      heading: "Authorization error",
-      message: "You likely forgot to provide an authorization token to the widget."
+      heading: translate({
+        defaultMessage: "Authorization error",
+        description: "Error message heading",
+        id: "s/dQVI"
+      }),
+      message: translate({
+        defaultMessage: "You likely forgot to provide an authorization token to the widget.",
+        description: "Error message details",
+        id: "d7mvgq"
+      })
     };
   }
   if (error instanceof IncorrectPermissionsError) {
     return {
-      heading: "Incorrect permissions",
-      message: "Check that the correct permissions have been assigned."
+      heading: translate({
+        defaultMessage: "Incorrect permissions",
+        description: "Error message heading",
+        id: "dFmPj3"
+      }),
+      message: translate({
+        defaultMessage: "Check that the correct permissions have been assigned.",
+        description: "Error message details",
+        id: "hd/Llp"
+      })
     };
   }
   return {
-    heading: "Error fetching data",
-    message: "An unexpected error occurred. Check your network connection or try refreshing the page."
+    heading: translate({
+      defaultMessage: "Error fetching data",
+      description: "Error message heading",
+      id: "5QzKdW"
+    }),
+    message: translate({
+      defaultMessage: "An unexpected error occurred. Check your network connection or try refreshing the page.",
+      description: "Error message details",
+      id: "t+CDVJ"
+    })
   };
 }
 export {

package/dist/esm/lib/generic-error.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/generic-error.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Flex, Heading, Text } from \"@radix-ui/themes\";\nimport {\n  FetchError,\n  IncorrectPermissionsError,\n  NoAuthTokenError,\n} from \"./errors.js\";\nimport { Cross2Icon } from \"@radix-ui/react-icons\";\n\ntype GenericErrorProps = React.ComponentProps<typeof Flex> & {\n  error: unknown;\n};\n\nexport function GenericError({ error, ...domProps }: GenericErrorProps) {\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const { heading, message } = getErrorMessage(error);\n  return (\n    <Flex\n      p=\"6\"\n      justify=\"center\"\n      align=\"center\"\n      direction=\"column\"\n      {...domProps}\n    >\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        width=\"32px\"\n        height=\"32px\"\n        mb=\"2\"\n        style={{\n          borderRadius: \"9999px\",\n          backgroundColor: \"var(--red-a4)\",\n          color: \"var(--red-a11)\",\n        }}\n      >\n        <Cross2Icon width=\"24px\" height=\"24px\" />\n      </Flex>\n\n      <Flex direction=\"column\" gap=\"1\" maxWidth=\"420px\">\n        <Heading size=\"5\" align=\"center\" mb=\"1\" wrap=\"balance\" as=\"h3\">\n          {heading}\n        </Heading>\n        <Text as=\"p\" align=\"center\" wrap=\"balance\" color=\"gray\">\n          {message}\n        </Text>\n      </Flex>\n    </Flex>\n  );\n}\n\nexport function getErrorMessage(error: unknown) {\n  if (error instanceof FetchError) {\n    return {\n      heading: \"Error fetching data\",\n      message:\n        \"An error occurred. You may need to configure CORS in the WorkOS Dashboard.\",\n    };\n  }\n\n  if (error instanceof NoAuthTokenError) {\n    return {\n      heading: \"Authorization error\",\n      message:\n        \"You likely forgot to provide an authorization token to the widget.\",\n    };\n  }\n\n  if (error instanceof IncorrectPermissionsError) {\n    return {\n      heading: \"Incorrect permissions\",\n      message: \"Check that the correct permissions have been assigned.\",\n    };\n  }\n\n  return {\n    heading: \"Error fetching data\",\n    message:\n      \"An unexpected error occurred. Check your network connection or try refreshing the page.\",\n  };\n}\n"],"mappings":"AAuCQ,cAGF,YAHE;AAvCR,YAAY,WAAW;AACvB,SAAS,MAAM,SAAS,YAAY;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAMpB,SAAS,aAAa,EAAE,OAAO,GAAG,SAAS,GAAsB;AACtE,QAAM,UAAU,MAAM;AACpB,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,EAAE,SAAS,QAAQ,IAAI,gBAAgB,KAAK;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,OAAO;AAAA,cACL,cAAc;AAAA,cACd,iBAAiB;AAAA,cACjB,OAAO;AAAA,YACT;AAAA,YAEA,8BAAC,cAAW,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,QACzC;AAAA,QAEA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAAI,UAAS,SACxC;AAAA,8BAAC,WAAQ,MAAK,KAAI,OAAM,UAAS,IAAG,KAAI,MAAK,WAAU,IAAG,MACvD,mBACH;AAAA,UACA,oBAAC,QAAK,IAAG,KAAI,OAAM,UAAS,MAAK,WAAU,OAAM,QAC9C,mBACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,gBAAgB,OAAgB;AAC9C,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SACE;AAAA,IACJ;AAAA,EACF;AAEA,MAAI,iBAAiB,kBAAkB;AACrC,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SACE;AAAA,IACJ;AAAA,EACF;AAEA,MAAI,iBAAiB,2BAA2B;AAC9C,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,SACE;AAAA,EACJ;AACF;","names":[]}
+{"version":3,"sources":["../../../src/lib/generic-error.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Flex, Heading, Text } from \"@radix-ui/themes\";\nimport {\n  FetchError,\n  IncorrectPermissionsError,\n  NoAuthTokenError,\n} from \"./errors.js\";\nimport { Cross2Icon } from \"@radix-ui/react-icons\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ntype GenericErrorProps = React.ComponentProps<typeof Flex> & {\n  error: unknown;\n};\n\nexport function GenericError({ error, ...domProps }: GenericErrorProps) {\n  const translate = useTranslation();\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const { message } = getErrorMessage(error, translate);\n  return (\n    <Flex\n      p=\"6\"\n      justify=\"center\"\n      align=\"center\"\n      direction=\"column\"\n      {...domProps}\n    >\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        width=\"32px\"\n        height=\"32px\"\n        mb=\"2\"\n        style={{\n          borderRadius: \"9999px\",\n          backgroundColor: \"var(--red-a4)\",\n          color: \"var(--red-a11)\",\n        }}\n      >\n        <Cross2Icon width=\"24px\" height=\"24px\" />\n      </Flex>\n\n      <Flex direction=\"column\" gap=\"1\" maxWidth=\"420px\">\n        <Heading size=\"5\" align=\"center\" mb=\"1\" wrap=\"balance\" as=\"h3\">\n          <Translation\n            defaultMessage=\"Error fetching data\"\n            id=\"mjZ9vq\"\n            description=\"Error heading shown when there is a network or authorization error\"\n          />\n        </Heading>\n        <Text as=\"p\" align=\"center\" wrap=\"balance\" color=\"gray\">\n          {message}\n        </Text>\n      </Flex>\n    </Flex>\n  );\n}\n\nexport function getErrorMessage(\n  error: unknown,\n  translate: ({\n    defaultMessage,\n    description,\n    id,\n  }: {\n    defaultMessage: string;\n    description: string;\n    id: string;\n  }) => string,\n) {\n  if (error instanceof FetchError) {\n    return {\n      heading: translate({\n        defaultMessage: \"Error fetching data\",\n        description: \"Error message heading\",\n        id: \"5QzKdW\",\n      }),\n      message: translate({\n        defaultMessage:\n          \"An error occurred. You may need to configure CORS in the WorkOS Dashboard.\",\n        description: \"Error message details\",\n        id: \"63rRud\",\n      }),\n    };\n  }\n\n  if (error instanceof NoAuthTokenError) {\n    return {\n      heading: translate({\n        defaultMessage: \"Authorization error\",\n        description: \"Error message heading\",\n        id: \"s/dQVI\",\n      }),\n      message: translate({\n        defaultMessage:\n          \"You likely forgot to provide an authorization token to the widget.\",\n        description: \"Error message details\",\n        id: \"d7mvgq\",\n      }),\n    };\n  }\n\n  if (error instanceof IncorrectPermissionsError) {\n    return {\n      heading: translate({\n        defaultMessage: \"Incorrect permissions\",\n        description: \"Error message heading\",\n        id: \"dFmPj3\",\n      }),\n      message: translate({\n        defaultMessage:\n          \"Check that the correct permissions have been assigned.\",\n        description: \"Error message details\",\n        id: \"hd/Llp\",\n      }),\n    };\n  }\n\n  return {\n    heading: translate({\n      defaultMessage: \"Error fetching data\",\n      description: \"Error message heading\",\n      id: \"5QzKdW\",\n    }),\n    message: translate({\n      defaultMessage:\n        \"An unexpected error occurred. Check your network connection or try refreshing the page.\",\n      description: \"Error message details\",\n      id: \"t+CDVJ\",\n    }),\n  };\n}\n"],"mappings":"AA0CQ,cAGF,YAHE;AA1CR,YAAY,WAAW;AACvB,SAAS,MAAM,SAAS,YAAY;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAMxB,SAAS,aAAa,EAAE,OAAO,GAAG,SAAS,GAAsB;AACtE,QAAM,YAAY,eAAe;AACjC,QAAM,UAAU,MAAM;AACpB,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,EAAE,QAAQ,IAAI,gBAAgB,OAAO,SAAS;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,OAAO;AAAA,cACL,cAAc;AAAA,cACd,iBAAiB;AAAA,cACjB,OAAO;AAAA,YACT;AAAA,YAEA,8BAAC,cAAW,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,QACzC;AAAA,QAEA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAAI,UAAS,SACxC;AAAA,8BAAC,WAAQ,MAAK,KAAI,OAAM,UAAS,IAAG,KAAI,MAAK,WAAU,IAAG,MACxD;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,QAAK,IAAG,KAAI,OAAM,UAAS,MAAK,WAAU,OAAM,QAC9C,mBACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,gBACd,OACA,WASA;AACA,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,MACL,SAAS,UAAU;AAAA,QACjB,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,IAAI;AAAA,MACN,CAAC;AAAA,MACD,SAAS,UAAU;AAAA,QACjB,gBACE;AAAA,QACF,aAAa;AAAA,QACb,IAAI;AAAA,MACN,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,iBAAiB,kBAAkB;AACrC,WAAO;AAAA,MACL,SAAS,UAAU;AAAA,QACjB,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,IAAI;AAAA,MACN,CAAC;AAAA,MACD,SAAS,UAAU;AAAA,QACjB,gBACE;AAAA,QACF,aAAa;AAAA,QACb,IAAI;AAAA,MACN,CAAC;AAAA,IACH;AAAA,EACF;AAEA,MAAI,iBAAiB,2BAA2B;AAC9C,WAAO;AAAA,MACL,SAAS,UAAU;AAAA,QACjB,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,IAAI;AAAA,MACN,CAAC;AAAA,MACD,SAAS,UAAU;AAAA,QACjB,gBACE;AAAA,QACF,aAAa;AAAA,QACb,IAAI;AAAA,MACN,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AAAA,IACL,SAAS,UAAU;AAAA,MACjB,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,IAAI;AAAA,IACN,CAAC;AAAA,IACD,SAAS,UAAU;AAAA,MACjB,gBACE;AAAA,MACF,aAAa;AAAA,MACb,IAAI;AAAA,IACN,CAAC;AAAA,EACH;AACF;","names":[]}

package/dist/esm/lib/i18n/intl-context.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+type MessageDescriptor = {
+    id: string;
+    defaultMessage: string;
+    description: string;
+};
+type MessageValues = Record<string, string | React.ReactNode>;
+/**
+ * Shape of the i18n context value.
+ * This mirrors the essential parts of react-intl's IntlShape without importing it.
+ */
+interface IntlContextValue {
+    locale: string;
+    formatMessage(descriptor: MessageDescriptor, values?: MessageValues): string | React.ReactNode[];
+}
+/**
+ * Context for optional i18n support.
+ * When this context has a value, translations will use react-intl.
+ * When this context is null/undefined, translations will fall back to defaultMessage.
+ */
+declare const IntlContext: React.Context<IntlContextValue | null>;
+/**
+ * Hook to access the i18n context.
+ * Returns null if no IntlProvider is present in the component tree.
+ */
+declare function useIntl(): IntlContextValue | null;
+
+export { IntlContext, type IntlContextValue, type MessageDescriptor, type MessageValues, useIntl };

package/dist/esm/lib/i18n/intl-context.js

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+const IntlContext = React.createContext(null);
+IntlContext.displayName = "IntlContext";
+function useIntl() {
+  return React.useContext(IntlContext);
+}
+export {
+  IntlContext,
+  useIntl
+};
+//# sourceMappingURL=intl-context.js.map

package/dist/esm/lib/i18n/intl-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/i18n/intl-context.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport type MessageDescriptor = {\n  id: string;\n  defaultMessage: string;\n  description: string;\n};\n\nexport type MessageValues = Record<string, string | React.ReactNode>;\n\n/**\n * Shape of the i18n context value.\n * This mirrors the essential parts of react-intl's IntlShape without importing it.\n */\nexport interface IntlContextValue {\n  locale: string;\n  formatMessage(\n    descriptor: MessageDescriptor,\n    values?: MessageValues,\n  ): string | React.ReactNode[];\n}\n\n/**\n * Context for optional i18n support.\n * When this context has a value, translations will use react-intl.\n * When this context is null/undefined, translations will fall back to defaultMessage.\n */\nexport const IntlContext = React.createContext<IntlContextValue | null>(null);\nIntlContext.displayName = \"IntlContext\";\n\n/**\n * Hook to access the i18n context.\n * Returns null if no IntlProvider is present in the component tree.\n */\nexport function useIntl(): IntlContextValue | null {\n  return React.useContext(IntlContext);\n}\n"],"mappings":";AAEA,YAAY,WAAW;AA2BhB,MAAM,cAAc,MAAM,cAAuC,IAAI;AAC5E,YAAY,cAAc;AAMnB,SAAS,UAAmC;AACjD,SAAO,MAAM,WAAW,WAAW;AACrC;","names":[]}

package/dist/esm/lib/i18n/translation.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { MessageDescriptor, MessageValues } from './intl-context.js';
+
+type TranslationProps = MessageDescriptor & {
+    trailingSpace?: boolean;
+    values?: MessageValues;
+};
+/**
+ * Translation component that gracefully degrades when no I18nProvider is present.
+ *
+ * - With I18nProvider: Uses react-intl for full i18n support (react-intl will be bundled)
+ * - Without I18nProvider: Renders the defaultMessage with simple value interpolation (no react-intl bundled)
+ */
+declare const Translation: React.FC<TranslationProps>;
+
+export { Translation };

package/dist/esm/lib/i18n/translation.js

@@ -0,0 +1,45 @@
+"use client";
+import { Fragment, jsxs } from "react/jsx-runtime";
+import {
+  useIntl
+} from "./intl-context.js";
+const Translation = (props) => {
+  const { defaultMessage, id, description, trailingSpace, values } = props;
+  const i18n = useIntl();
+  if (i18n) {
+    const str = i18n.formatMessage({ id, defaultMessage, description }, values);
+    return trailingSpace ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      str,
+      " "
+    ] }) : str;
+  }
+  if (!values) {
+    return trailingSpace ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      defaultMessage,
+      " "
+    ] }) : defaultMessage;
+  }
+  const parts = [];
+  let lastIndex = 0;
+  const regex = /\{(\w+)\}/g;
+  let match;
+  while ((match = regex.exec(defaultMessage)) !== null) {
+    const [placeholder, key] = match;
+    if (match.index > lastIndex) {
+      parts.push(defaultMessage.substring(lastIndex, match.index));
+    }
+    parts.push(values[key] ?? placeholder);
+    lastIndex = match.index + placeholder.length;
+  }
+  if (lastIndex < defaultMessage.length) {
+    parts.push(defaultMessage.substring(lastIndex));
+  }
+  return trailingSpace ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    parts,
+    " "
+  ] }) : parts;
+};
+export {
+  Translation
+};
+//# sourceMappingURL=translation.js.map

package/dist/esm/lib/i18n/translation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/i18n/translation.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  useIntl,\n  type MessageDescriptor,\n  type MessageValues,\n} from \"./intl-context.js\";\n\ntype TranslationProps = MessageDescriptor & {\n  trailingSpace?: boolean;\n  values?: MessageValues;\n};\n\n/**\n * Translation component that gracefully degrades when no I18nProvider is present.\n *\n * - With I18nProvider: Uses react-intl for full i18n support (react-intl will be bundled)\n * - Without I18nProvider: Renders the defaultMessage with simple value interpolation (no react-intl bundled)\n */\nexport const Translation: React.FC<TranslationProps> = (props) => {\n  const { defaultMessage, id, description, trailingSpace, values } = props;\n  const i18n = useIntl();\n\n  // If I18nProvider is present, use react-intl's formatting\n  if (i18n) {\n    const str = i18n.formatMessage({ id, defaultMessage, description }, values);\n    return trailingSpace ? <>{str} </> : str;\n  }\n\n  // If no I18nProvider is present, render the defaultMessage with simple interpolation\n  if (!values) {\n    return trailingSpace ? <>{defaultMessage} </> : defaultMessage;\n  }\n\n  // Simple interpolation: split by placeholders and interleave with values\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n  const regex = /\\{(\\w+)\\}/g;\n  let match;\n\n  while ((match = regex.exec(defaultMessage)) !== null) {\n    const [placeholder, key] = match;\n\n    // Add text before the placeholder\n    if (match.index > lastIndex) {\n      parts.push(defaultMessage.substring(lastIndex, match.index));\n    }\n\n    // Add the interpolated value or placeholder if not found\n    parts.push(values[key] ?? placeholder);\n    lastIndex = match.index + placeholder.length;\n  }\n\n  // Add remaining text\n  if (lastIndex < defaultMessage.length) {\n    parts.push(defaultMessage.substring(lastIndex));\n  }\n\n  return trailingSpace ? <>{parts} </> : parts;\n};\n"],"mappings":";AA2B2B;AAxB3B;AAAA,EACE;AAAA,OAGK;AAaA,MAAM,cAA0C,CAAC,UAAU;AAChE,QAAM,EAAE,gBAAgB,IAAI,aAAa,eAAe,OAAO,IAAI;AACnE,QAAM,OAAO,QAAQ;AAGrB,MAAI,MAAM;AACR,UAAM,MAAM,KAAK,cAAc,EAAE,IAAI,gBAAgB,YAAY,GAAG,MAAM;AAC1E,WAAO,gBAAgB,iCAAG;AAAA;AAAA,MAAI;AAAA,OAAC,IAAM;AAAA,EACvC;AAGA,MAAI,CAAC,QAAQ;AACX,WAAO,gBAAgB,iCAAG;AAAA;AAAA,MAAe;AAAA,OAAC,IAAM;AAAA,EAClD;AAGA,QAAM,QAA2B,CAAC;AAClC,MAAI,YAAY;AAChB,QAAM,QAAQ;AACd,MAAI;AAEJ,UAAQ,QAAQ,MAAM,KAAK,cAAc,OAAO,MAAM;AACpD,UAAM,CAAC,aAAa,GAAG,IAAI;AAG3B,QAAI,MAAM,QAAQ,WAAW;AAC3B,YAAM,KAAK,eAAe,UAAU,WAAW,MAAM,KAAK,CAAC;AAAA,IAC7D;AAGA,UAAM,KAAK,OAAO,GAAG,KAAK,WAAW;AACrC,gBAAY,MAAM,QAAQ,YAAY;AAAA,EACxC;AAGA,MAAI,YAAY,eAAe,QAAQ;AACrC,UAAM,KAAK,eAAe,UAAU,SAAS,CAAC;AAAA,EAChD;AAEA,SAAO,gBAAgB,iCAAG;AAAA;AAAA,IAAM;AAAA,KAAC,IAAM;AACzC;","names":[]}

package/dist/esm/lib/i18n/use-locale.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook to get the current locale.
+ * Returns the locale from IntlContext if available, otherwise falls back to "en-US".
+ */
+declare function useLocale(): string;
+
+export { useLocale };

package/dist/esm/lib/i18n/use-locale.js

@@ -0,0 +1,9 @@
+import { useIntl } from "./intl-context.js";
+function useLocale() {
+  const intl = useIntl();
+  return intl?.locale ?? "en-US";
+}
+export {
+  useLocale
+};
+//# sourceMappingURL=use-locale.js.map

package/dist/esm/lib/i18n/use-locale.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/i18n/use-locale.ts"],"sourcesContent":["import { useIntl } from \"./intl-context.js\";\n\n/**\n * Hook to get the current locale.\n * Returns the locale from IntlContext if available, otherwise falls back to \"en-US\".\n */\nexport function useLocale(): string {\n  const intl = useIntl();\n  return intl?.locale ?? \"en-US\";\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAMjB,SAAS,YAAoB;AAClC,QAAM,OAAO,QAAQ;AACrB,SAAO,MAAM,UAAU;AACzB;","names":[]}

package/dist/esm/lib/i18n/use-translation.d.ts

@@ -0,0 +1,15 @@
+import { MessageDescriptor } from './intl-context.js';
+import 'react';
+
+type TranslationParams = MessageDescriptor & {
+    values?: Record<string, string>;
+};
+/**
+ * Translation hook that gracefully degrades when no I18nProvider is present.
+ *
+ * - With I18nProvider: Uses react-intl's formatMessage for full i18n support (react-intl will be bundled)
+ * - Without I18nProvider: Returns the defaultMessage with simple string interpolation (no react-intl bundled)
+ */
+declare function useTranslation(): (params: TranslationParams) => string;
+
+export { useTranslation };

package/dist/esm/lib/i18n/use-translation.js

@@ -0,0 +1,23 @@
+"use client";
+import { useIntl } from "./intl-context.js";
+function useTranslation() {
+  const i18n = useIntl();
+  return (params) => {
+    const { defaultMessage, description, id, values } = params;
+    if (i18n) {
+      return String(
+        i18n.formatMessage({ id, defaultMessage, description }, values)
+      );
+    }
+    if (!values) {
+      return defaultMessage;
+    }
+    return defaultMessage.replace(/\{(\w+)\}/g, (match, key) => {
+      return key in values ? String(values[key]) : match;
+    });
+  };
+}
+export {
+  useTranslation
+};
+//# sourceMappingURL=use-translation.js.map

package/dist/esm/lib/i18n/use-translation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/i18n/use-translation.ts"],"sourcesContent":["\"use client\";\n\nimport { useIntl, type MessageDescriptor } from \"./intl-context.js\";\n\ntype TranslationParams = MessageDescriptor & {\n  values?: Record<string, string>;\n};\n\n/**\n * Translation hook that gracefully degrades when no I18nProvider is present.\n *\n * - With I18nProvider: Uses react-intl's formatMessage for full i18n support (react-intl will be bundled)\n * - Without I18nProvider: Returns the defaultMessage with simple string interpolation (no react-intl bundled)\n */\nexport function useTranslation() {\n  const i18n = useIntl();\n\n  return (params: TranslationParams): string => {\n    const { defaultMessage, description, id, values } = params;\n\n    // If I18nProvider is present, use react-intl's formatMessage\n    if (i18n) {\n      // TODO: Do we really want to cast this to a string?\n      return String(\n        i18n.formatMessage({ id, defaultMessage, description }, values),\n      );\n    }\n\n    // If no I18nProvider is present, return defaultMessage with simple interpolation\n    if (!values) {\n      return defaultMessage;\n    }\n\n    // Simple string interpolation for values\n    return defaultMessage.replace(/\\{(\\w+)\\}/g, (match, key) => {\n      return key in values ? String(values[key]) : match;\n    });\n  };\n}\n"],"mappings":";AAEA,SAAS,eAAuC;AAYzC,SAAS,iBAAiB;AAC/B,QAAM,OAAO,QAAQ;AAErB,SAAO,CAAC,WAAsC;AAC5C,UAAM,EAAE,gBAAgB,aAAa,IAAI,OAAO,IAAI;AAGpD,QAAI,MAAM;AAER,aAAO;AAAA,QACL,KAAK,cAAc,EAAE,IAAI,gBAAgB,YAAY,GAAG,MAAM;AAAA,MAChE;AAAA,IACF;AAGA,QAAI,CAAC,QAAQ;AACX,aAAO;AAAA,IACT;AAGA,WAAO,eAAe,QAAQ,cAAc,CAAC,OAAO,QAAQ;AAC1D,aAAO,OAAO,SAAS,OAAO,OAAO,GAAG,CAAC,IAAI;AAAA,IAC/C,CAAC;AAAA,EACH;AACF;","names":[]}

package/dist/esm/lib/identity-providers.d.ts

@@ -1,4 +1,4 @@
-declare const IDENTITY_PROVIDER_DICT: Map<"asana" | "box" | "dropbox" | "github" | "gitlab" | "google" | "google-calendar" | "google-drive" | "hubspot" | "intercom" | "linear" | "microsoft" | "notion" | "salesforce" | "slack" | "stripe" | "zendesk" | "azure" | "access-people-hr" | "adp" | "apple" | "auth0" | "aws" | "bamboohr" | "bamboo-hr" | "bitbucket" | "breathe-hr" | "bubble" | "cas" | "cezanne-hr" | "classlink" | "clerk" | "cloudflare" | "cyberark" | "datadog" | "duo" | "firebase" | "fourth" | "generic-saml" | "generic-oidc" | "godaddy" | "google-analytics" | "google-mail" | "google-cloud" | "hibob" | "intuit" | "jumpcloud" | "keycloak" | "lastpass" | "linkedin" | "login-gov" | "miniorange" | "net-iq" | "next-auth" | "okta" | "onelogin" | "oracle" | "personio" | "ping-identity" | "react-native-expo" | "rippling" | "segment" | "shibboleth" | "simple-saml-php" | "splunk" | "supabase" | "vercel" | "vmware" | "workday" | "workos" | "xero" | "test-idp" | "discord" | "clever", "GoDaddy" | "Access People HR" | "ADP" | "Apple" | "Asana" | "Auth0" | "Azure" | "AWS" | "BambooHR" | "Bitbucket" | "Box" | "BreatheHR" | "Bubble" | "CAS" | "Cezanne HR" | "Classlink" | "Clerk" | "Cloudflare" | "CyberArk" | "Datadog" | "Dropbox" | "Duo" | "Firebase" | "Fourth" | "Generic SAML" | "Generic OIDC" | "GitHub" | "GitLab" | "Google" | "Google Analytics" | "Google Calendar" | "Google Drive" | "Google Mail" | "Google Cloud" | "Hibob" | "Hubspot" | "Intercom" | "Intuit" | "JumpCloud" | "Keycloak" | "LastPass" | "Linear" | "LinkedIn" | "Login.gov" | "Microsoft" | "Miniorange" | "NetIQ" | "NextAuth" | "Notion" | "Okta" | "OneLogin" | "Oracle" | "Personio" | "Ping Identity" | "React Native Expo" | "Rippling" | "Salesforce" | "Segment" | "Shibboleth" | "Simple SAML PHP" | "Slack" | "Splunk" | "Stripe" | "Supabase" | "Vercel" | "VMware" | "Workday" | "WorkOS" | "Xero" | "Zendesk" | "Test IDP" | "Discord" | "Clever">;
+declare const IDENTITY_PROVIDER_DICT: Map<"asana" | "box" | "dropbox" | "github" | "gitlab" | "google" | "google-calendar" | "google-drive" | "hubspot" | "intercom" | "linear" | "microsoft" | "notion" | "salesforce" | "slack" | "stripe" | "xero" | "zendesk" | "azure" | "access-people-hr" | "adp" | "apple" | "auth0" | "aws" | "bamboohr" | "bamboo-hr" | "bitbucket" | "breathe-hr" | "bubble" | "cas" | "cezanne-hr" | "classlink" | "clerk" | "cloudflare" | "cyberark" | "datadog" | "duo" | "firebase" | "fourth" | "generic-saml" | "generic-oidc" | "godaddy" | "google-analytics" | "google-mail" | "google-cloud" | "hibob" | "intuit" | "jumpcloud" | "keycloak" | "lastpass" | "linkedin" | "login-gov" | "miniorange" | "net-iq" | "next-auth" | "okta" | "onelogin" | "oracle" | "personio" | "ping-identity" | "react-native-expo" | "rippling" | "segment" | "shibboleth" | "simple-saml-php" | "splunk" | "supabase" | "vercel" | "vmware" | "workday" | "workos" | "test-idp" | "discord" | "clever", "GoDaddy" | "Access People HR" | "ADP" | "Apple" | "Asana" | "Auth0" | "Azure" | "AWS" | "BambooHR" | "Bitbucket" | "Box" | "BreatheHR" | "Bubble" | "CAS" | "Cezanne HR" | "Classlink" | "Clerk" | "Cloudflare" | "CyberArk" | "Datadog" | "Dropbox" | "Duo" | "Firebase" | "Fourth" | "Generic SAML" | "Generic OIDC" | "GitHub" | "GitLab" | "Google" | "Google Analytics" | "Google Calendar" | "Google Drive" | "Google Mail" | "Google Cloud" | "Hibob" | "Hubspot" | "Intercom" | "Intuit" | "JumpCloud" | "Keycloak" | "LastPass" | "Linear" | "LinkedIn" | "Login.gov" | "Microsoft" | "Miniorange" | "NetIQ" | "NextAuth" | "Notion" | "Okta" | "OneLogin" | "Oracle" | "Personio" | "Ping Identity" | "React Native Expo" | "Rippling" | "Salesforce" | "Segment" | "Shibboleth" | "Simple SAML PHP" | "Slack" | "Splunk" | "Stripe" | "Supabase" | "Vercel" | "VMware" | "Workday" | "WorkOS" | "Xero" | "Zendesk" | "Test IDP" | "Discord" | "Clever">;
 type MapKey<T extends Map<unknown, unknown>> = T extends Map<infer K, unknown> ? K : never;
 type IdentityProvider = MapKey<typeof IDENTITY_PROVIDER_DICT>;
 declare function getIdentityProviderName(provider: IdentityProvider): "GoDaddy" | "Access People HR" | "ADP" | "Apple" | "Asana" | "Auth0" | "Azure" | "AWS" | "BambooHR" | "Bitbucket" | "Box" | "BreatheHR" | "Bubble" | "CAS" | "Cezanne HR" | "Classlink" | "Clerk" | "Cloudflare" | "CyberArk" | "Datadog" | "Dropbox" | "Duo" | "Firebase" | "Fourth" | "Generic SAML" | "Generic OIDC" | "GitHub" | "GitLab" | "Google" | "Google Analytics" | "Google Calendar" | "Google Drive" | "Google Mail" | "Google Cloud" | "Hibob" | "Hubspot" | "Intercom" | "Intuit" | "JumpCloud" | "Keycloak" | "LastPass" | "Linear" | "LinkedIn" | "Login.gov" | "Microsoft" | "Miniorange" | "NetIQ" | "NextAuth" | "Notion" | "Okta" | "OneLogin" | "Oracle" | "Personio" | "Ping Identity" | "React Native Expo" | "Rippling" | "Salesforce" | "Segment" | "Shibboleth" | "Simple SAML PHP" | "Slack" | "Splunk" | "Stripe" | "Supabase" | "Vercel" | "VMware" | "Workday" | "WorkOS" | "Xero" | "Zendesk" | "Test IDP" | "Discord" | "Clever" | undefined;