@workos-inc/widgets 1.10.2 → 1.11.0-next.1776971102464

package/dist/esm/lib/set-password-dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Callout, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
 import * as React from "react";
 import { Dialog, Label, PasswordField, Button } from "./elements.js";
@@ -25,6 +25,13 @@ function SetPasswordDialog({
   ] });
 }
 function Content({ onClose }) {
+  return /* @__PURE__ */ jsx(SetPasswordForm, { onSuccess: onClose });
+}
+function SetPasswordForm({
+  onSuccess,
+  cancel,
+  description
+}) {
   const translate = useTranslation();
   const setPassword = useCreatePassword();
   const securitySettings = useSecuritySettings();
@@ -41,24 +48,26 @@ function Content({ onClose }) {
   useDialogClose(setPassword.isSuccess, () => {
     securitySettings.update("Password", true);
   });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Dialog.Title, { mb: "5", children: /* @__PURE__ */ jsx(
-      Translation,
-      {
-        defaultMessage: "Set New Password",
-        id: "4ymFUc",
-        description: "Dialog title for setting a new password"
-      }
-    ) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Dialog.Description, { children: /* @__PURE__ */ jsx(
-      Translation,
-      {
-        defaultMessage: "Set a new password for your account",
-        id: "KYv5vS",
-        description: "Screen reader description for set password dialog"
-      }
-    ) }) }),
-    setPassword.error ? /* @__PURE__ */ jsx(Callout.Root, { color: "red", my: "-2", children: /* @__PURE__ */ jsx(Callout.Text, { children: getMutationErrorMessage(setPassword.error) }) }) : null,
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Set a password",
+          id: "0N6IHb",
+          description: "Dialog title for setting a password"
+        }
+      ) }),
+      description ?? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Dialog.Description, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Set a new password for your account",
+          id: "KYv5vS",
+          description: "Screen reader description for set password dialog"
+        }
+      ) }) })
+    ] }),
+    setPassword.error ? /* @__PURE__ */ jsx(Callout.Root, { color: "red", children: /* @__PURE__ */ jsx(Callout.Text, { children: getMutationErrorMessage(setPassword.error) }) }) : null,
     /* @__PURE__ */ jsxs(
       Form.Root,
       {
@@ -70,128 +79,130 @@ function Content({ onClose }) {
           setDisableSubmit(password === "" || confirmPassword === "");
         },
         children: [
-          /* @__PURE__ */ jsxs(Flex, { mt: "5", direction: "column", gap: "4", children: [
-            /* @__PURE__ */ jsx(Form.Field, { name: "password", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
-              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
-                Translation,
-                {
-                  defaultMessage: "Enter a new password",
-                  id: "OHDxyL",
-                  description: "Label for password input field"
-                }
-              ) }) }),
-              /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
-                PasswordField,
-                {
-                  autoFocus: true,
-                  required: true,
-                  autoComplete: "new-password",
-                  placeholder: translate({
-                    defaultMessage: "New password",
-                    id: "ABfT4E",
-                    description: "Placeholder for password input"
-                  }),
-                  disabled: setPassword.isPending || setPassword.isSuccess
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Form.Message, { match: "valueMissing", asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
-                Translation,
-                {
-                  defaultMessage: "Please enter a new password",
-                  id: "+2kQs5",
-                  description: "Error message when password field is empty"
-                }
-              ) }) }),
-              /* @__PURE__ */ jsx(Form.Message, { match: (value) => value.length < 8, asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
-                Translation,
-                {
-                  defaultMessage: "Password must be at least 8 characters",
-                  id: "WRjyrh",
-                  description: "Error message when password is too short"
-                }
-              ) }) })
-            ] }) }),
-            /* @__PURE__ */ jsx(Form.Field, { name: "confirmPassword", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
-              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
-                Translation,
-                {
-                  defaultMessage: "Confirm your new password",
-                  id: "K83lBn",
-                  description: "Label for password confirmation field"
-                }
-              ) }) }),
-              /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
-                PasswordField,
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", children: [
+              /* @__PURE__ */ jsx(Form.Field, { name: "password", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+                /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Enter a password",
+                    id: "YxbwGs",
+                    description: "Label for password input field"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+                  PasswordField,
+                  {
+                    autoFocus: true,
+                    required: true,
+                    autoComplete: "new-password",
+                    placeholder: translate({
+                      defaultMessage: "Password",
+                      id: "HYO1Ra",
+                      description: "Placeholder for password input"
+                    }),
+                    disabled: setPassword.isPending || setPassword.isSuccess
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Form.Message, { match: "valueMissing", asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Please enter a new password",
+                    id: "+2kQs5",
+                    description: "Error message when password field is empty"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(Form.Message, { match: (value) => value.length < 8, asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Password must be at least 8 characters",
+                    id: "WRjyrh",
+                    description: "Error message when password is too short"
+                  }
+                ) }) })
+              ] }) }),
+              /* @__PURE__ */ jsx(Form.Field, { name: "confirmPassword", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+                /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Confirm your password",
+                    id: "/c8Kki",
+                    description: "Label for password confirmation field"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+                  PasswordField,
+                  {
+                    required: true,
+                    autoComplete: "new-password",
+                    placeholder: translate({
+                      defaultMessage: "Confirm password",
+                      id: "1VNN1w",
+                      description: "Placeholder for password confirmation input"
+                    }),
+                    disabled: setPassword.isPending || setPassword.isSuccess
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Form.Message, { match: "valueMissing", asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Please confirm your new password",
+                    id: "vfwqWf",
+                    description: "Error message when password confirmation is empty"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(
+                  Form.Message,
+                  {
+                    match: (value, formData) => value !== formData.get("password"),
+                    asChild: true,
+                    children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
+                      Translation,
+                      {
+                        defaultMessage: "The passwords you entered don't match.",
+                        id: "ayYwQx",
+                        description: "Error message when passwords don't match"
+                      }
+                    ) })
+                  }
+                )
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
+              cancel ?? /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(
+                Button,
                 {
-                  required: true,
-                  autoComplete: "new-password",
-                  placeholder: translate({
-                    defaultMessage: "Confirm new password",
-                    id: "O79vjp",
-                    description: "Placeholder for password confirmation input"
-                  }),
-                  disabled: setPassword.isPending || setPassword.isSuccess
+                  variant: "secondary",
+                  disabled: setPassword.isPending || setPassword.isSuccess,
+                  children: /* @__PURE__ */ jsx(
+                    Translation,
+                    {
+                      defaultMessage: "Cancel",
+                      id: "VJVs4m",
+                      description: "Button to cancel setting password"
+                    }
+                  )
                 }
               ) }),
-              /* @__PURE__ */ jsx(Form.Message, { match: "valueMissing", asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
-                Translation,
-                {
-                  defaultMessage: "Please confirm your new password",
-                  id: "vfwqWf",
-                  description: "Error message when password confirmation is empty"
-                }
-              ) }) }),
               /* @__PURE__ */ jsx(
-                Form.Message,
+                SaveButton,
                 {
-                  match: (value, formData) => value !== formData.get("password"),
-                  asChild: true,
-                  children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: /* @__PURE__ */ jsx(
+                  loading: setPassword.isPending,
+                  done: setPassword.isSuccess,
+                  onDone: onSuccess,
+                  type: "submit",
+                  disabled: disableSubmit || void 0,
+                  children: /* @__PURE__ */ jsx(
                     Translation,
                     {
-                      defaultMessage: "The passwords you entered don't match.",
-                      id: "ayYwQx",
-                      description: "Error message when passwords don't match"
+                      defaultMessage: "Set password",
+                      id: "jSfqX/",
+                      description: "Button to confirm setting new password"
                     }
-                  ) })
+                  )
                 }
               )
-            ] }) })
-          ] }),
-          /* @__PURE__ */ jsxs(Flex, { mt: "5", gap: "3", justify: "end", children: [
-            /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "secondary",
-                disabled: setPassword.isPending || setPassword.isSuccess,
-                children: /* @__PURE__ */ jsx(
-                  Translation,
-                  {
-                    defaultMessage: "Cancel",
-                    id: "VJVs4m",
-                    description: "Button to cancel setting password"
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              SaveButton,
-              {
-                loading: setPassword.isPending,
-                done: setPassword.isSuccess,
-                onDone: onClose,
-                type: "submit",
-                disabled: disableSubmit || void 0,
-                children: /* @__PURE__ */ jsx(
-                  Translation,
-                  {
-                    defaultMessage: "Set password",
-                    id: "jSfqX/",
-                    description: "Button to confirm setting new password"
-                  }
-                )
-              }
-            )
+            ] })
           ] }),
           /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("section", { "aria-live": "polite", children: getMutationErrorMessage(setPassword.error) }) })
         ]
@@ -216,6 +227,7 @@ function getMutationErrorMessage(error) {
   );
 }
 export {
-  SetPasswordDialog
+  SetPasswordDialog,
+  SetPasswordForm
 };
 //# sourceMappingURL=set-password-dialog.js.map

package/dist/esm/lib/set-password-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/set-password-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport { Dialog, Label, PasswordField, Button } from \"./elements.js\";\nimport { Form } from \"radix-ui\";\nimport { useCreatePassword } from \"../api/endpoint.js\";\nimport { useSecuritySettings } from \"./use-security-settings.js\";\nimport { ElevatedAccess } from \"./elevated-access.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { useDialogClose } from \"./use-dialog-close.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface SetPasswordDialogProps extends Dialog.RootProps {\n  children?: ReactNode;\n}\n\nexport function SetPasswordDialog({\n  children,\n  ...props\n}: SetPasswordDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root {...props} open={open} onOpenChange={setOpen}>\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n\n      <Dialog.Content maxWidth=\"480px\">\n        <ElevatedAccess>\n          <Content onClose={handleClose} />\n        </ElevatedAccess>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps {\n  onClose: () => void;\n}\n\nfunction Content({ onClose }: ContentProps) {\n  const translate = useTranslation();\n  const setPassword = useCreatePassword();\n  const securitySettings = useSecuritySettings();\n  const [disableSubmit, setDisableSubmit] = React.useState(true);\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const password = formData.get(\"password\")?.toString();\n\n    if (!password) {\n      return;\n    }\n\n    setPassword.mutate({ data: { password } });\n  };\n\n  useDialogClose(setPassword.isSuccess, () => {\n    securitySettings.update(\"Password\", true);\n  });\n\n  return (\n    <>\n      <Dialog.Title mb=\"5\">\n        <Translation\n          defaultMessage=\"Set New Password\"\n          id=\"4ymFUc\"\n          description=\"Dialog title for setting a new password\"\n        />\n      </Dialog.Title>\n      <VisuallyHidden>\n        <Dialog.Description>\n          <Translation\n            defaultMessage=\"Set a new password for your account\"\n            id=\"KYv5vS\"\n            description=\"Screen reader description for set password dialog\"\n          />\n        </Dialog.Description>\n      </VisuallyHidden>\n\n      {setPassword.error ? (\n        <Callout.Root color=\"red\" my=\"-2\">\n          <Callout.Text>\n            {getMutationErrorMessage(setPassword.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Form.Root\n        onSubmit={handleSubmit}\n        onChange={(event) => {\n          const formData = new FormData(event.currentTarget);\n          const password = formData.get(\"password\")?.toString();\n          const confirmPassword = formData.get(\"confirmPassword\")?.toString();\n          setDisableSubmit(password === \"\" || confirmPassword === \"\");\n        }}\n      >\n        <Flex mt=\"5\" direction=\"column\" gap=\"4\">\n          <Form.Field name=\"password\" asChild>\n            <Flex direction=\"column\" gap=\"2\">\n              <Form.Label asChild>\n                <Label>\n                  <Translation\n                    defaultMessage=\"Enter a new password\"\n                    id=\"OHDxyL\"\n                    description=\"Label for password input field\"\n                  />\n                </Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <PasswordField\n                  autoFocus\n                  required\n                  autoComplete=\"new-password\"\n                  placeholder={translate({\n                    defaultMessage: \"New password\",\n                    id: \"ABfT4E\",\n                    description: \"Placeholder for password input\",\n                  })}\n                  disabled={setPassword.isPending || setPassword.isSuccess}\n                />\n              </Form.Control>\n              <Form.Message match=\"valueMissing\" asChild>\n                <Text size=\"2\" color=\"red\">\n                  <Translation\n                    defaultMessage=\"Please enter a new password\"\n                    id=\"+2kQs5\"\n                    description=\"Error message when password field is empty\"\n                  />\n                </Text>\n              </Form.Message>\n              <Form.Message match={(value) => value.length < 8} asChild>\n                <Text size=\"2\" color=\"red\">\n                  <Translation\n                    defaultMessage=\"Password must be at least 8 characters\"\n                    id=\"WRjyrh\"\n                    description=\"Error message when password is too short\"\n                  />\n                </Text>\n              </Form.Message>\n            </Flex>\n          </Form.Field>\n\n          <Form.Field name=\"confirmPassword\" asChild>\n            <Flex direction=\"column\" gap=\"2\">\n              <Form.Label asChild>\n                <Label>\n                  <Translation\n                    defaultMessage=\"Confirm your new password\"\n                    id=\"K83lBn\"\n                    description=\"Label for password confirmation field\"\n                  />\n                </Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <PasswordField\n                  required\n                  autoComplete=\"new-password\"\n                  placeholder={translate({\n                    defaultMessage: \"Confirm new password\",\n                    id: \"O79vjp\",\n                    description: \"Placeholder for password confirmation input\",\n                  })}\n                  disabled={setPassword.isPending || setPassword.isSuccess}\n                />\n              </Form.Control>\n              <Form.Message match=\"valueMissing\" asChild>\n                <Text size=\"2\" color=\"red\">\n                  <Translation\n                    defaultMessage=\"Please confirm your new password\"\n                    id=\"vfwqWf\"\n                    description=\"Error message when password confirmation is empty\"\n                  />\n                </Text>\n              </Form.Message>\n              <Form.Message\n                match={(value, formData) => value !== formData.get(\"password\")}\n                asChild\n              >\n                <Text size=\"2\" color=\"red\">\n                  <Translation\n                    defaultMessage=\"The passwords you entered don't match.\"\n                    id=\"ayYwQx\"\n                    description=\"Error message when passwords don't match\"\n                  />\n                </Text>\n              </Form.Message>\n            </Flex>\n          </Form.Field>\n        </Flex>\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <Button\n              variant=\"secondary\"\n              disabled={setPassword.isPending || setPassword.isSuccess}\n            >\n              <Translation\n                defaultMessage=\"Cancel\"\n                id=\"VJVs4m\"\n                description=\"Button to cancel setting password\"\n              />\n            </Button>\n          </Dialog.Close>\n\n          <SaveButton\n            loading={setPassword.isPending}\n            done={setPassword.isSuccess}\n            onDone={onClose}\n            type=\"submit\"\n            disabled={disableSubmit || undefined}\n          >\n            <Translation\n              defaultMessage=\"Set password\"\n              id=\"jSfqX/\"\n              description=\"Button to confirm setting new password\"\n            />\n          </SaveButton>\n        </Flex>\n\n        {/* mirror errors in a live region */}\n        <VisuallyHidden asChild>\n          <section aria-live=\"polite\">\n            {getMutationErrorMessage(setPassword.error)}\n          </section>\n        </VisuallyHidden>\n      </Form.Root>\n    </>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (error instanceof Error) {\n    return error.message;\n  }\n\n  if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    return error.message;\n  }\n\n  return (\n    <Translation\n      defaultMessage=\"Something went wrong. Please try again.\"\n      id=\"jLzoYu\"\n      description=\"Generic error message for password setting failure\"\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/set-password-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport { Dialog, Label, PasswordField, Button } from \"./elements.js\";\nimport { Form } from \"radix-ui\";\nimport { useCreatePassword } from \"../api/endpoint.js\";\nimport { useSecuritySettings } from \"./use-security-settings.js\";\nimport { ElevatedAccess } from \"./elevated-access.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { useDialogClose } from \"./use-dialog-close.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface SetPasswordDialogProps extends Dialog.RootProps {\n  children?: ReactNode;\n}\n\nexport function SetPasswordDialog({\n  children,\n  ...props\n}: SetPasswordDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root {...props} open={open} onOpenChange={setOpen}>\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n\n      <Dialog.Content maxWidth=\"480px\">\n        <ElevatedAccess>\n          <Content onClose={handleClose} />\n        </ElevatedAccess>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps {\n  onClose: () => void;\n}\n\nfunction Content({ onClose }: ContentProps) {\n  return <SetPasswordForm onSuccess={onClose} />;\n}\n\ninterface SetPasswordFormProps {\n  onSuccess?: () => void;\n  cancel?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nexport function SetPasswordForm({\n  onSuccess,\n  cancel,\n  description,\n}: SetPasswordFormProps) {\n  const translate = useTranslation();\n  const setPassword = useCreatePassword();\n  const securitySettings = useSecuritySettings();\n  const [disableSubmit, setDisableSubmit] = React.useState(true);\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const password = formData.get(\"password\")?.toString();\n\n    if (!password) {\n      return;\n    }\n\n    setPassword.mutate({ data: { password } });\n  };\n\n  useDialogClose(setPassword.isSuccess, () => {\n    securitySettings.update(\"Password\", true);\n  });\n\n  return (\n    <Flex direction=\"column\" gap=\"5\">\n      <Flex direction=\"column\" gap=\"2\">\n        <Dialog.Title>\n          <Translation\n            defaultMessage=\"Set a password\"\n            id=\"0N6IHb\"\n            description=\"Dialog title for setting a password\"\n          />\n        </Dialog.Title>\n        {description ?? (\n          <VisuallyHidden>\n            <Dialog.Description>\n              <Translation\n                defaultMessage=\"Set a new password for your account\"\n                id=\"KYv5vS\"\n                description=\"Screen reader description for set password dialog\"\n              />\n            </Dialog.Description>\n          </VisuallyHidden>\n        )}\n      </Flex>\n\n      {setPassword.error ? (\n        <Callout.Root color=\"red\">\n          <Callout.Text>\n            {getMutationErrorMessage(setPassword.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Form.Root\n        onSubmit={handleSubmit}\n        onChange={(event) => {\n          const formData = new FormData(event.currentTarget);\n          const password = formData.get(\"password\")?.toString();\n          const confirmPassword = formData.get(\"confirmPassword\")?.toString();\n          setDisableSubmit(password === \"\" || confirmPassword === \"\");\n        }}\n      >\n        <Flex direction=\"column\" gap=\"5\">\n          <Flex direction=\"column\" gap=\"4\">\n            <Form.Field name=\"password\" asChild>\n              <Flex direction=\"column\" gap=\"2\">\n                <Form.Label asChild>\n                  <Label>\n                    <Translation\n                      defaultMessage=\"Enter a password\"\n                      id=\"YxbwGs\"\n                      description=\"Label for password input field\"\n                    />\n                  </Label>\n                </Form.Label>\n                <Form.Control asChild>\n                  <PasswordField\n                    autoFocus\n                    required\n                    autoComplete=\"new-password\"\n                    placeholder={translate({\n                      defaultMessage: \"Password\",\n                      id: \"HYO1Ra\",\n                      description: \"Placeholder for password input\",\n                    })}\n                    disabled={setPassword.isPending || setPassword.isSuccess}\n                  />\n                </Form.Control>\n                <Form.Message match=\"valueMissing\" asChild>\n                  <Text size=\"2\" color=\"red\">\n                    <Translation\n                      defaultMessage=\"Please enter a new password\"\n                      id=\"+2kQs5\"\n                      description=\"Error message when password field is empty\"\n                    />\n                  </Text>\n                </Form.Message>\n                <Form.Message match={(value) => value.length < 8} asChild>\n                  <Text size=\"2\" color=\"red\">\n                    <Translation\n                      defaultMessage=\"Password must be at least 8 characters\"\n                      id=\"WRjyrh\"\n                      description=\"Error message when password is too short\"\n                    />\n                  </Text>\n                </Form.Message>\n              </Flex>\n            </Form.Field>\n\n            <Form.Field name=\"confirmPassword\" asChild>\n              <Flex direction=\"column\" gap=\"2\">\n                <Form.Label asChild>\n                  <Label>\n                    <Translation\n                      defaultMessage=\"Confirm your password\"\n                      id=\"/c8Kki\"\n                      description=\"Label for password confirmation field\"\n                    />\n                  </Label>\n                </Form.Label>\n                <Form.Control asChild>\n                  <PasswordField\n                    required\n                    autoComplete=\"new-password\"\n                    placeholder={translate({\n                      defaultMessage: \"Confirm password\",\n                      id: \"1VNN1w\",\n                      description:\n                        \"Placeholder for password confirmation input\",\n                    })}\n                    disabled={setPassword.isPending || setPassword.isSuccess}\n                  />\n                </Form.Control>\n                <Form.Message match=\"valueMissing\" asChild>\n                  <Text size=\"2\" color=\"red\">\n                    <Translation\n                      defaultMessage=\"Please confirm your new password\"\n                      id=\"vfwqWf\"\n                      description=\"Error message when password confirmation is empty\"\n                    />\n                  </Text>\n                </Form.Message>\n                <Form.Message\n                  match={(value, formData) =>\n                    value !== formData.get(\"password\")\n                  }\n                  asChild\n                >\n                  <Text size=\"2\" color=\"red\">\n                    <Translation\n                      defaultMessage=\"The passwords you entered don't match.\"\n                      id=\"ayYwQx\"\n                      description=\"Error message when passwords don't match\"\n                    />\n                  </Text>\n                </Form.Message>\n              </Flex>\n            </Form.Field>\n          </Flex>\n\n          <Flex gap=\"3\" justify=\"end\">\n            {cancel ?? (\n              <Dialog.Close>\n                <Button\n                  variant=\"secondary\"\n                  disabled={setPassword.isPending || setPassword.isSuccess}\n                >\n                  <Translation\n                    defaultMessage=\"Cancel\"\n                    id=\"VJVs4m\"\n                    description=\"Button to cancel setting password\"\n                  />\n                </Button>\n              </Dialog.Close>\n            )}\n\n            <SaveButton\n              loading={setPassword.isPending}\n              done={setPassword.isSuccess}\n              onDone={onSuccess}\n              type=\"submit\"\n              disabled={disableSubmit || undefined}\n            >\n              <Translation\n                defaultMessage=\"Set password\"\n                id=\"jSfqX/\"\n                description=\"Button to confirm setting new password\"\n              />\n            </SaveButton>\n          </Flex>\n        </Flex>\n\n        {/* mirror errors in a live region */}\n        <VisuallyHidden asChild>\n          <section aria-live=\"polite\">\n            {getMutationErrorMessage(setPassword.error)}\n          </section>\n        </VisuallyHidden>\n      </Form.Root>\n    </Flex>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (error instanceof Error) {\n    return error.message;\n  }\n\n  if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    return error.message;\n  }\n\n  return (\n    <Translation\n      defaultMessage=\"Something went wrong. Please try again.\"\n      id=\"jLzoYu\"\n      description=\"Generic error message for password setting failure\"\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/esm/lib/user-profile.js

@@ -12,6 +12,7 @@ import {
 } from "@radix-ui/themes";
 import { Avatar, Button, Skeleton } from "./elements.js";
 import * as DataList from "./data-list.js";
+import { ChangeEmailDialog } from "./change-email-dialog.js";
 import { EditUserProfileDialog } from "./edit-user-profile-dialog.js";
 import {
   getBestName,
@@ -101,7 +102,26 @@ const UserProfile = ({
           description: "Label for user's email address field"
         }
       ) }),
-      /* @__PURE__ */ jsx(ListValue, { children: /* @__PURE__ */ jsx(Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ jsx(Text, { size: "2", children: user.email }) }) })
+      /* @__PURE__ */ jsx(ListValue, { children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          justify: "between",
+          width: "100%",
+          minHeight: "var(--space-6)",
+          children: [
+            /* @__PURE__ */ jsx(Text, { size: "2", children: user.email }),
+            /* @__PURE__ */ jsx(ChangeEmailDialog, { user, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Edit",
+                id: "+2ILQR",
+                description: "Button text to edit the user's email address"
+              }
+            ) }) })
+          ]
+        }
+      ) })
     ] }),
     oauthAccounts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ListSeparator, {}),

package/dist/esm/lib/user-profile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, Button, Skeleton } from \"./elements.js\";\nimport * as DataList from \"./data-list.js\";\nimport { Me, OAuthProfile, MeOauthProfiles } from \"../api/endpoint.js\";\nimport { EditUserProfileDialog } from \"./edit-user-profile-dialog.js\";\nimport {\n  getBestName,\n  getDomProps,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { OAuthIcon, getOAuthName, type OAuthAccount } from \"./oauth-icons.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { Translation } from \"./i18n/translation.js\";\n\ninterface UserProfileProps extends WidgetRootDomProps {\n  userData: Me;\n}\n\nconst UserProfile: React.FC<UserProfileProps> = ({\n  userData: user,\n  ...domProps\n}) => {\n  const oauthAccounts = user.oauthProfiles\n    ? (Object.entries(user.oauthProfiles) as [\n        keyof Exclude<MeOauthProfiles, null>,\n        OAuthProfile,\n      ][])\n    : [];\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <List>\n        {user.profilePictureUrl && (\n          <>\n            <ListItem>\n              <ListTitle minWidth=\"220px\">\n                <Translation\n                  defaultMessage=\"Profile picture\"\n                  description=\"Label for the user's avatar\"\n                  id=\"RvLqCQ\"\n                />\n              </ListTitle>\n              <ListValue>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </ListValue>\n            </ListItem>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <ListItem>\n          <ListTitle>\n            <Translation\n              defaultMessage=\"Full name\"\n              id=\"kkBScm\"\n              description=\"Label for user's full name field\"\n            />\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                {getBestName(user) || (\n                  <Text\n                    color=\"gray\"\n                    style={{ color: \"var(--gray-10)\", cursor: \"default\" }}\n                  >\n                    <Translation\n                      defaultMessage=\"Not set\"\n                      id=\"i4vzAY\"\n                      description=\"Placeholder text when user's name is not set\"\n                    />\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <Button variant=\"secondary\">\n                  <Translation\n                    defaultMessage=\"Edit\"\n                    id=\"5bhXUz\"\n                    description=\"Button text to edit user profile\"\n                  />\n                </Button>\n              </EditUserProfileDialog>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        <ListSeparator />\n\n        <ListItem>\n          <ListTitle>\n            <Translation\n              defaultMessage=\"Email address\"\n              id=\"nLk5pa\"\n              description=\"Label for user's email address field\"\n            />\n          </ListTitle>\n          <ListValue>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">{user.email}</Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <ListItem>\n              <ListTitle>\n                <Translation\n                  defaultMessage=\"Connected accounts\"\n                  id=\"AW/A69\"\n                  description=\"Label for user's connected OAuth accounts\"\n                />\n              </ListTitle>\n              <ListValue>\n                <Flex direction=\"column\" gap=\"2\">\n                  {oauthAccounts.map(([account, data]) => (\n                    <OAuthAccount\n                      key={account}\n                      account={account}\n                      email={data?.email}\n                    />\n                  ))}\n                </Flex>\n              </ListValue>\n            </ListItem>\n          </>\n        )}\n      </List>\n    </Card>\n  );\n};\n\ninterface UserProfileLoadingProps extends WidgetRootDomProps {}\n\nconst UserProfileLoading: React.FC<UserProfileLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <List>\n        <ListItem>\n          <ListTitle minWidth=\"220px\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Full name\"\n                id=\"nc7fru\"\n                description=\"Loading placeholder for full name label\"\n              />\n            </Skeleton>\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Full name\"\n                    id=\"6GcWa2\"\n                    description=\"Loading placeholder for full name value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        <ListSeparator />\n\n        <ListItem>\n          <ListTitle>\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Email address\"\n                id=\"gjqw+H\"\n                description=\"Loading placeholder for email address label\"\n              />\n            </Skeleton>\n          </ListTitle>\n          <ListValue>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Email address\"\n                    id=\"75F+g5\"\n                    description=\"Loading placeholder for email address value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n      </List>\n    </Card>\n  );\n};\n\ninterface UserProfileErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserProfileError: React.FC<UserProfileErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nconst ListIdContext = React.createContext<string | null>(null);\nListIdContext.displayName = \"ListIdContext\";\n\nconst List = ({ children }: { children: React.ReactNode }) => {\n  const listId = `user-profile-list-${React.useId()}`;\n  return (\n    <ListIdContext.Provider value={listId}>\n      <DataList.Root as=\"div\">{children}</DataList.Root>\n    </ListIdContext.Provider>\n  );\n};\n\nconst ListItemIdContext = React.createContext<string | null>(null);\nListItemIdContext.displayName = \"ListItemIdContext\";\n\nconst ListItem = ({ children }: { children: React.ReactNode }) => {\n  const listId = React.useContext(ListIdContext);\n  const currentId = React.useId();\n  const listItemId = [listId, \"item\", currentId].filter(Boolean).join(\"-\");\n  return (\n    <ListItemIdContext.Provider value={listItemId}>\n      <DataList.Item align=\"center\">{children}</DataList.Item>\n    </ListItemIdContext.Provider>\n  );\n};\n\nconst ListTitle = ({\n  children,\n  ...props\n}: Omit<DataList.LabelProps, \"as\" | \"role\" | \"asChild\">) => {\n  const listItemId = React.useContext(ListItemIdContext);\n  const titleId = [listItemId, \"title\"].filter(Boolean).join(\"-\");\n  return (\n    <DataList.Label as=\"div\" role=\"term\" highContrast id={titleId} {...props}>\n      <Strong>{children}</Strong>\n    </DataList.Label>\n  );\n};\n\nconst ListValue = ({ children }: { children: React.ReactNode }) => {\n  const listItemId = React.useContext(ListItemIdContext);\n  const titleId = [listItemId, \"title\"].filter(Boolean).join(\"-\");\n  return (\n    <DataList.Value as=\"div\" role=\"definition\" aria-labelledby={titleId}>\n      {children}\n    </DataList.Value>\n  );\n};\n\nconst ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\" aria-hidden>\n    <Inset side=\"x\">\n      <Separator size=\"4\" />\n    </Inset>\n  </Box>\n);\n\nconst OAuthAccount = ({\n  account,\n  email,\n}: {\n  account: OAuthAccount;\n  email?: string | null;\n}) => {\n  const name = getOAuthName(account);\n  return (\n    <Flex align=\"center\" gap=\"1\">\n      <OAuthIcon account={account} />\n      <Text size=\"2\" ml=\"1\">\n        {name}\n      </Text>\n      {email && (\n        <Box display={{ initial: \"none\", sm: \"contents\" }}>\n          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n          <Text size=\"2\" color=\"gray\">\n            ∙\n          </Text>\n          <Text size=\"2\" color=\"gray\">\n            {email}\n          </Text>\n        </Box>\n      )}\n    </Flex>\n  );\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n    <title>User icon</title>\n    <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n  </svg>\n);\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-profile\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserProfileProps,\n  UserProfileLoadingProps,\n  UserProfileErrorProps,\n};\nexport { UserProfile, UserProfileLoading, UserProfileError };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, Button, Skeleton } from \"./elements.js\";\nimport * as DataList from \"./data-list.js\";\nimport { Me, OAuthProfile, MeOauthProfiles } from \"../api/endpoint.js\";\nimport { ChangeEmailDialog } from \"./change-email-dialog.js\";\nimport { EditUserProfileDialog } from \"./edit-user-profile-dialog.js\";\nimport {\n  getBestName,\n  getDomProps,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { OAuthIcon, getOAuthName, type OAuthAccount } from \"./oauth-icons.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { Translation } from \"./i18n/translation.js\";\n\ninterface UserProfileProps extends WidgetRootDomProps {\n  userData: Me;\n}\n\nconst UserProfile: React.FC<UserProfileProps> = ({\n  userData: user,\n  ...domProps\n}) => {\n  const oauthAccounts = user.oauthProfiles\n    ? (Object.entries(user.oauthProfiles) as [\n        keyof Exclude<MeOauthProfiles, null>,\n        OAuthProfile,\n      ][])\n    : [];\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <List>\n        {user.profilePictureUrl && (\n          <>\n            <ListItem>\n              <ListTitle minWidth=\"220px\">\n                <Translation\n                  defaultMessage=\"Profile picture\"\n                  description=\"Label for the user's avatar\"\n                  id=\"RvLqCQ\"\n                />\n              </ListTitle>\n              <ListValue>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </ListValue>\n            </ListItem>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <ListItem>\n          <ListTitle>\n            <Translation\n              defaultMessage=\"Full name\"\n              id=\"kkBScm\"\n              description=\"Label for user's full name field\"\n            />\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                {getBestName(user) || (\n                  <Text\n                    color=\"gray\"\n                    style={{ color: \"var(--gray-10)\", cursor: \"default\" }}\n                  >\n                    <Translation\n                      defaultMessage=\"Not set\"\n                      id=\"i4vzAY\"\n                      description=\"Placeholder text when user's name is not set\"\n                    />\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <Button variant=\"secondary\">\n                  <Translation\n                    defaultMessage=\"Edit\"\n                    id=\"5bhXUz\"\n                    description=\"Button text to edit user profile\"\n                  />\n                </Button>\n              </EditUserProfileDialog>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        <ListSeparator />\n\n        <ListItem>\n          <ListTitle>\n            <Translation\n              defaultMessage=\"Email address\"\n              id=\"nLk5pa\"\n              description=\"Label for user's email address field\"\n            />\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">{user.email}</Text>\n\n              <ChangeEmailDialog user={user}>\n                <Button variant=\"secondary\">\n                  <Translation\n                    defaultMessage=\"Edit\"\n                    id=\"+2ILQR\"\n                    description=\"Button text to edit the user's email address\"\n                  />\n                </Button>\n              </ChangeEmailDialog>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <ListItem>\n              <ListTitle>\n                <Translation\n                  defaultMessage=\"Connected accounts\"\n                  id=\"AW/A69\"\n                  description=\"Label for user's connected OAuth accounts\"\n                />\n              </ListTitle>\n              <ListValue>\n                <Flex direction=\"column\" gap=\"2\">\n                  {oauthAccounts.map(([account, data]) => (\n                    <OAuthAccount\n                      key={account}\n                      account={account}\n                      email={data?.email}\n                    />\n                  ))}\n                </Flex>\n              </ListValue>\n            </ListItem>\n          </>\n        )}\n      </List>\n    </Card>\n  );\n};\n\ninterface UserProfileLoadingProps extends WidgetRootDomProps {}\n\nconst UserProfileLoading: React.FC<UserProfileLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <List>\n        <ListItem>\n          <ListTitle minWidth=\"220px\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Full name\"\n                id=\"nc7fru\"\n                description=\"Loading placeholder for full name label\"\n              />\n            </Skeleton>\n          </ListTitle>\n          <ListValue>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Full name\"\n                    id=\"6GcWa2\"\n                    description=\"Loading placeholder for full name value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n\n        <ListSeparator />\n\n        <ListItem>\n          <ListTitle>\n            <Skeleton>\n              <Translation\n                defaultMessage=\"Email address\"\n                id=\"gjqw+H\"\n                description=\"Loading placeholder for email address label\"\n              />\n            </Skeleton>\n          </ListTitle>\n          <ListValue>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>\n                  <Translation\n                    defaultMessage=\"Email address\"\n                    id=\"75F+g5\"\n                    description=\"Loading placeholder for email address value\"\n                  />\n                </Skeleton>\n              </Text>\n            </Flex>\n          </ListValue>\n        </ListItem>\n      </List>\n    </Card>\n  );\n};\n\ninterface UserProfileErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserProfileError: React.FC<UserProfileErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nconst ListIdContext = React.createContext<string | null>(null);\nListIdContext.displayName = \"ListIdContext\";\n\nconst List = ({ children }: { children: React.ReactNode }) => {\n  const listId = `user-profile-list-${React.useId()}`;\n  return (\n    <ListIdContext.Provider value={listId}>\n      <DataList.Root as=\"div\">{children}</DataList.Root>\n    </ListIdContext.Provider>\n  );\n};\n\nconst ListItemIdContext = React.createContext<string | null>(null);\nListItemIdContext.displayName = \"ListItemIdContext\";\n\nconst ListItem = ({ children }: { children: React.ReactNode }) => {\n  const listId = React.useContext(ListIdContext);\n  const currentId = React.useId();\n  const listItemId = [listId, \"item\", currentId].filter(Boolean).join(\"-\");\n  return (\n    <ListItemIdContext.Provider value={listItemId}>\n      <DataList.Item align=\"center\">{children}</DataList.Item>\n    </ListItemIdContext.Provider>\n  );\n};\n\nconst ListTitle = ({\n  children,\n  ...props\n}: Omit<DataList.LabelProps, \"as\" | \"role\" | \"asChild\">) => {\n  const listItemId = React.useContext(ListItemIdContext);\n  const titleId = [listItemId, \"title\"].filter(Boolean).join(\"-\");\n  return (\n    <DataList.Label as=\"div\" role=\"term\" highContrast id={titleId} {...props}>\n      <Strong>{children}</Strong>\n    </DataList.Label>\n  );\n};\n\nconst ListValue = ({ children }: { children: React.ReactNode }) => {\n  const listItemId = React.useContext(ListItemIdContext);\n  const titleId = [listItemId, \"title\"].filter(Boolean).join(\"-\");\n  return (\n    <DataList.Value as=\"div\" role=\"definition\" aria-labelledby={titleId}>\n      {children}\n    </DataList.Value>\n  );\n};\n\nconst ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\" aria-hidden>\n    <Inset side=\"x\">\n      <Separator size=\"4\" />\n    </Inset>\n  </Box>\n);\n\nconst OAuthAccount = ({\n  account,\n  email,\n}: {\n  account: OAuthAccount;\n  email?: string | null;\n}) => {\n  const name = getOAuthName(account);\n  return (\n    <Flex align=\"center\" gap=\"1\">\n      <OAuthIcon account={account} />\n      <Text size=\"2\" ml=\"1\">\n        {name}\n      </Text>\n      {email && (\n        <Box display={{ initial: \"none\", sm: \"contents\" }}>\n          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n          <Text size=\"2\" color=\"gray\">\n            ∙\n          </Text>\n          <Text size=\"2\" color=\"gray\">\n            {email}\n          </Text>\n        </Box>\n      )}\n    </Flex>\n  );\n};\n\nconst FallbackUserIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 256 256\"\n  >\n    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n    <title>User icon</title>\n    <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n  </svg>\n);\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-profile\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserProfileProps,\n  UserProfileLoadingProps,\n  UserProfileErrorProps,\n};\nexport { UserProfile, UserProfileLoading, UserProfileError };\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workos-inc/widgets",
-  "version": "1.10.2",
+  "version": "1.11.0-next.1776971102464",
   "license": "MIT",
   "type": "module",
   "exports": {