@workos-inc/widgets 1.7.2 → 1.8.0

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

@@ -7,6 +7,8 @@ import * as React from "react";
 import * as Form from "@radix-ui/react-form";
 import { Dialog, Label, Button, TextField } from "./elements.js";
 import { SaveButton } from "./save-button.js";
+import { Translation } from "./i18n/translation.js";
+import { useTranslation } from "./i18n/use-translation.js";
 function EditUserProfileDialog({
   children,
   user,
@@ -30,6 +32,7 @@ function EditUserProfileDialog({
   );
 }
 function Content({ user, onClose }) {
+  const translate = useTranslation();
   const client = useQueryClient();
   const updateMe = useUpdateMe({
     mutation: {
@@ -46,11 +49,23 @@ function Content({ user, onClose }) {
     }
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Dialog.Title, { mb: "5", children: "Edit name" }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsxs(Dialog.Description, { children: [
-      "Edit the details of ",
-      /* @__PURE__ */ jsx(Text, { weight: "bold", children: user.email })
-    ] }) }),
+    /* @__PURE__ */ jsx(Dialog.Title, { mb: "5", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Edit name",
+        id: "pcK9ly",
+        description: "Dialog title for editing user name"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Dialog.Description, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Edit the details of {email}",
+        id: "SEsXx0",
+        description: "Dialog description for editing user details",
+        values: { email: /* @__PURE__ */ jsx(Text, { weight: "bold", children: user.email }) }
+      }
+    ) }) }),
     updateMe.error ? /* @__PURE__ */ jsx(Callout.Root, { color: "red", my: "-2", children: /* @__PURE__ */ jsx(Callout.Text, { children: getMutationErrorMessage(updateMe.error) }) }) : null,
     /* @__PURE__ */ jsxs(
       Form.Root,
@@ -70,27 +85,49 @@ function Content({ user, onClose }) {
         children: [
           /* @__PURE__ */ jsxs(Flex, { my: "5", direction: "column", gap: "4", children: [
             /* @__PURE__ */ jsx(Form.Field, { name: "firstName", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
-              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: "First name" }) }),
+              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "First name",
+                  id: "DAYdcg",
+                  description: "Label for first name field"
+                }
+              ) }) }),
               /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
                 TextField,
                 {
                   "data-1p-ignore": true,
                   autoComplete: "given-name",
                   defaultValue: user.firstName ?? "",
-                  placeholder: "Your first name",
+                  placeholder: translate({
+                    defaultMessage: "Your first name",
+                    id: "gUTpgG",
+                    description: "Placeholder for first name field"
+                  }),
                   disabled: updateMe.isPending || updateMe.isSuccess
                 }
               ) })
             ] }) }),
             /* @__PURE__ */ jsx(Form.Field, { name: "lastName", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
-              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: "Last name" }) }),
+              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "Last name",
+                  id: "IwcAMv",
+                  description: "Label for last name field"
+                }
+              ) }) }),
               /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
                 TextField,
                 {
                   "data-1p-ignore": true,
                   autoComplete: "family-name",
                   defaultValue: user.lastName ?? "",
-                  placeholder: "Your last name",
+                  placeholder: translate({
+                    defaultMessage: "Your last name",
+                    id: "Gy8eW0",
+                    description: "Placeholder for last name field"
+                  }),
                   disabled: updateMe.isPending || updateMe.isSuccess
                 }
               ) })
@@ -102,7 +139,14 @@ function Content({ user, onClose }) {
               {
                 variant: "secondary",
                 disabled: updateMe.isPending || updateMe.isSuccess,
-                children: "Cancel"
+                children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Cancel",
+                    id: "hHNj31",
+                    description: "Cancel button text"
+                  }
+                )
               }
             ) }),
             /* @__PURE__ */ jsx(
@@ -112,7 +156,14 @@ function Content({ user, onClose }) {
                 loading: updateMe.isPending,
                 done: updateMe.isSuccess,
                 onDone: onClose,
-                children: "Save"
+                children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Save",
+                    id: "RT8KNi",
+                    description: "Save button text"
+                  }
+                )
               }
             )
           ] }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/edit-user-profile-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport { getMeQueryKey, Me, useUpdateMe } from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { Dialog, Label, Button, TextField } from \"./elements.js\";\nimport { SaveButton } from \"./save-button.js\";\n\ninterface EditUserProfileDialogProps extends Dialog.RootProps {\n  user: Me;\n  children?: ReactNode;\n}\n\nexport function EditUserProfileDialog({\n  children,\n  user,\n  ...props\n}: EditUserProfileDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root\n      {...props}\n      open={props.open ?? open}\n      onOpenChange={props.onOpenChange ?? setOpen}\n    >\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n\n      <Dialog.Content maxWidth=\"480px\">\n        <Content user={user} onClose={handleClose} />\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps extends Pick<EditUserProfileDialogProps, \"user\"> {\n  onClose: () => void;\n}\n\nfunction Content({ user, onClose }: ContentProps) {\n  const client = useQueryClient();\n  const updateMe = useUpdateMe({\n    mutation: {\n      onSettled: () => {\n        client.invalidateQueries({ queryKey: getMeQueryKey() });\n      },\n      onSuccess: (newProfile) => {\n        client.setQueryData(getMeQueryKey(), {\n          ...user,\n          firstName: newProfile.firstName || user.firstName,\n          lastName: newProfile.lastName || user.lastName,\n        });\n      },\n    },\n  });\n\n  return (\n    <>\n      <Dialog.Title mb=\"5\">Edit name</Dialog.Title>\n      <VisuallyHidden>\n        <Dialog.Description>\n          Edit the details of <Text weight=\"bold\">{user.email}</Text>\n        </Dialog.Description>\n      </VisuallyHidden>\n\n      {updateMe.error ? (\n        <Callout.Root color=\"red\" my=\"-2\">\n          <Callout.Text>{getMutationErrorMessage(updateMe.error)}</Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Form.Root\n        onSubmit={async (event) => {\n          event.preventDefault();\n          const formData = new FormData(event.currentTarget);\n          const firstName = formData.get(\"firstName\")?.toString();\n          const lastName = formData.get(\"lastName\")?.toString();\n          updateMe.mutate({\n            data: {\n              firstName: firstName ?? undefined,\n              lastName: lastName ?? undefined,\n            },\n          });\n        }}\n      >\n        <Flex my=\"5\" direction=\"column\" gap=\"4\">\n          <Form.Field name=\"firstName\" asChild>\n            <Flex direction=\"column\" gap=\"1\">\n              <Form.Label asChild>\n                <Label>First name</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <TextField\n                  data-1p-ignore\n                  autoComplete=\"given-name\"\n                  defaultValue={user.firstName ?? \"\"}\n                  placeholder=\"Your first name\"\n                  disabled={updateMe.isPending || updateMe.isSuccess}\n                />\n              </Form.Control>\n            </Flex>\n          </Form.Field>\n\n          <Form.Field name=\"lastName\" asChild>\n            <Flex direction=\"column\" gap=\"1\">\n              <Form.Label asChild>\n                <Label>Last name</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <TextField\n                  data-1p-ignore\n                  autoComplete=\"family-name\"\n                  defaultValue={user.lastName ?? \"\"}\n                  placeholder=\"Your last name\"\n                  disabled={updateMe.isPending || updateMe.isSuccess}\n                />\n              </Form.Control>\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={updateMe.isPending || updateMe.isSuccess}\n            >\n              Cancel\n            </Button>\n          </Dialog.Close>\n          <SaveButton\n            type=\"submit\"\n            loading={updateMe.isPending}\n            done={updateMe.isSuccess}\n            onDone={onClose}\n          >\n            Save\n          </SaveButton>\n        </Flex>\n\n        {/* mirror errors in a live region */}\n        <VisuallyHidden asChild>\n          <section aria-live=\"polite\">\n            {getMutationErrorMessage(updateMe.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  // TODO Handle server errors\n  return \"Something went wrong. Please try again.\";\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/edit-user-profile-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport { getMeQueryKey, Me, useUpdateMe } from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { Dialog, Label, Button, TextField } from \"./elements.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface EditUserProfileDialogProps extends Dialog.RootProps {\n  user: Me;\n  children?: ReactNode;\n}\n\nexport function EditUserProfileDialog({\n  children,\n  user,\n  ...props\n}: EditUserProfileDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root\n      {...props}\n      open={props.open ?? open}\n      onOpenChange={props.onOpenChange ?? setOpen}\n    >\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n\n      <Dialog.Content maxWidth=\"480px\">\n        <Content user={user} onClose={handleClose} />\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps extends Pick<EditUserProfileDialogProps, \"user\"> {\n  onClose: () => void;\n}\n\nfunction Content({ user, onClose }: ContentProps) {\n  const translate = useTranslation();\n  const client = useQueryClient();\n  const updateMe = useUpdateMe({\n    mutation: {\n      onSettled: () => {\n        client.invalidateQueries({ queryKey: getMeQueryKey() });\n      },\n      onSuccess: (newProfile) => {\n        client.setQueryData(getMeQueryKey(), {\n          ...user,\n          firstName: newProfile.firstName || user.firstName,\n          lastName: newProfile.lastName || user.lastName,\n        });\n      },\n    },\n  });\n\n  return (\n    <>\n      <Dialog.Title mb=\"5\">\n        <Translation\n          defaultMessage=\"Edit name\"\n          id=\"pcK9ly\"\n          description=\"Dialog title for editing user name\"\n        />\n      </Dialog.Title>\n      <VisuallyHidden>\n        <Dialog.Description>\n          <Translation\n            defaultMessage=\"Edit the details of {email}\"\n            id=\"SEsXx0\"\n            description=\"Dialog description for editing user details\"\n            values={{ email: <Text weight=\"bold\">{user.email}</Text> }}\n          />\n        </Dialog.Description>\n      </VisuallyHidden>\n\n      {updateMe.error ? (\n        <Callout.Root color=\"red\" my=\"-2\">\n          <Callout.Text>{getMutationErrorMessage(updateMe.error)}</Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Form.Root\n        onSubmit={async (event) => {\n          event.preventDefault();\n          const formData = new FormData(event.currentTarget);\n          const firstName = formData.get(\"firstName\")?.toString();\n          const lastName = formData.get(\"lastName\")?.toString();\n          updateMe.mutate({\n            data: {\n              firstName: firstName ?? undefined,\n              lastName: lastName ?? undefined,\n            },\n          });\n        }}\n      >\n        <Flex my=\"5\" direction=\"column\" gap=\"4\">\n          <Form.Field name=\"firstName\" asChild>\n            <Flex direction=\"column\" gap=\"1\">\n              <Form.Label asChild>\n                <Label>\n                  <Translation\n                    defaultMessage=\"First name\"\n                    id=\"DAYdcg\"\n                    description=\"Label for first name field\"\n                  />\n                </Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <TextField\n                  data-1p-ignore\n                  autoComplete=\"given-name\"\n                  defaultValue={user.firstName ?? \"\"}\n                  placeholder={translate({\n                    defaultMessage: \"Your first name\",\n                    id: \"gUTpgG\",\n                    description: \"Placeholder for first name field\",\n                  })}\n                  disabled={updateMe.isPending || updateMe.isSuccess}\n                />\n              </Form.Control>\n            </Flex>\n          </Form.Field>\n\n          <Form.Field name=\"lastName\" asChild>\n            <Flex direction=\"column\" gap=\"1\">\n              <Form.Label asChild>\n                <Label>\n                  <Translation\n                    defaultMessage=\"Last name\"\n                    id=\"IwcAMv\"\n                    description=\"Label for last name field\"\n                  />\n                </Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <TextField\n                  data-1p-ignore\n                  autoComplete=\"family-name\"\n                  defaultValue={user.lastName ?? \"\"}\n                  placeholder={translate({\n                    defaultMessage: \"Your last name\",\n                    id: \"Gy8eW0\",\n                    description: \"Placeholder for last name field\",\n                  })}\n                  disabled={updateMe.isPending || updateMe.isSuccess}\n                />\n              </Form.Control>\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={updateMe.isPending || updateMe.isSuccess}\n            >\n              <Translation\n                defaultMessage=\"Cancel\"\n                id=\"hHNj31\"\n                description=\"Cancel button text\"\n              />\n            </Button>\n          </Dialog.Close>\n          <SaveButton\n            type=\"submit\"\n            loading={updateMe.isPending}\n            done={updateMe.isSuccess}\n            onDone={onClose}\n          >\n            <Translation\n              defaultMessage=\"Save\"\n              id=\"RT8KNi\"\n              description=\"Save button text\"\n            />\n          </SaveButton>\n        </Flex>\n\n        {/* mirror errors in a live region */}\n        <VisuallyHidden asChild>\n          <section aria-live=\"polite\">\n            {getMutationErrorMessage(updateMe.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  // TODO Handle server errors\n  return \"Something went wrong. Please try again.\";\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/edit-user-role-dialog.js

@@ -19,6 +19,8 @@ import { getBestName } from "./utils.js";
 import {
   useRolesAndConfig
 } from "../api/endpoint.js";
+import { Translation } from "./i18n/translation.js";
+import { useTranslation } from "./i18n/use-translation.js";
 function EditUserRoleDialog({
   children,
   user,
@@ -62,6 +64,7 @@ function EditSingleUserRoleDialogContent({
   queryState,
   onFormSubmitSuccess
 }) {
+  const translate = useTranslation();
   const displayName = getBestName(user) || user.email;
   const updateUser = useUpdateUserRole();
   const [selectedRole, setSelectedRole] = useState(
@@ -86,11 +89,23 @@ function EditSingleUserRoleDialogContent({
   const showErrorMessage = !!queryState.error;
   const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;
   return /* @__PURE__ */ jsxs(Dialog.Content, { maxWidth: "480px", children: [
-    /* @__PURE__ */ jsx(Dialog.Title, { children: "Edit role" }),
-    /* @__PURE__ */ jsxs(Dialog.Description, { children: [
-      "Select the role to assign to ",
-      /* @__PURE__ */ jsx(Text, { weight: "bold", children: displayName })
-    ] }),
+    /* @__PURE__ */ jsx(Dialog.Title, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Edit role",
+        id: "Ue7G8Y",
+        description: "Dialog title for editing user role"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Dialog.Description, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Select the role to assign to {displayName}",
+        id: "jWl49/",
+        description: "Dialog description for role selection",
+        values: { displayName: /* @__PURE__ */ jsx(Text, { weight: "bold", children: displayName }) }
+      }
+    ) }),
     /* @__PURE__ */ jsx(Flex, { mt: "2", direction: "column", gap: "1", asChild: true, children: /* @__PURE__ */ jsxs(
       "form",
       {
@@ -112,7 +127,11 @@ function EditSingleUserRoleDialogContent({
                   Select.Trigger,
                   {
                     id: selectId,
-                    placeholder: "Assign a role",
+                    placeholder: translate({
+                      defaultMessage: "Assign a role",
+                      id: "0beebz",
+                      description: "Placeholder for role selection dropdown"
+                    }),
                     "aria-labelledby": selectLabelId,
                     "aria-invalid": showErrorMessage || void 0,
                     "aria-describedby": [showErrorMessage && errorId, showSingleRoleInfo && infoId].filter(Boolean).join(" ") || void 0
@@ -123,20 +142,41 @@ function EditSingleUserRoleDialogContent({
             }
           ),
           showErrorMessage ? /* @__PURE__ */ jsx(Text, { color: "red", size: "2", id: errorId, children: getRoleSelectErrorMessage(queryState.error) }) : null,
-          showSingleRoleInfo ? /* @__PURE__ */ jsx(Text, { color: "gray", size: "2", id: infoId, mt: "1", children: "You cannot update the role for this user as there is only one role available." }) : null
+          showSingleRoleInfo ? /* @__PURE__ */ jsx(Text, { color: "gray", size: "2", id: infoId, mt: "1", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "You cannot update the role for this user as there is only one role available.",
+              id: "XLp48i",
+              description: "Info message when only one role is available"
+            }
+          ) }) : null
         ]
       }
     ) }),
     updateUser.error ? /* @__PURE__ */ jsx(Callout.Root, { color: "red", mt: "4", mb: "-2", children: /* @__PURE__ */ jsx(Callout.Text, { children: getMutationErrorMessage(updateUser.error) }) }) : null,
     /* @__PURE__ */ jsxs(Flex, { mt: "5", gap: "3", justify: "end", children: [
-      /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: updateUser.isPending, children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: updateUser.isPending, children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Cancel",
+          id: "hHNj31",
+          description: "Cancel button text"
+        }
+      ) }) }),
       /* @__PURE__ */ jsx(
         Button,
         {
           form: formId,
           loading: updateUser.isPending,
           disabled: queryState.isLoading || showSingleRoleInfo || void 0,
-          children: "Save"
+          children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Save",
+              id: "RT8KNi",
+              description: "Save button text"
+            }
+          )
         }
       )
     ] }),
@@ -190,11 +230,23 @@ function EditMultipleUserRolesDialogContent({
         maxHeight: "calc(100vh - var(--dialog-content-padding) * 2 - var(--space-6) - max(var(--space-6), 6vh)",
         minHeight: "200px",
         children: [
-          /* @__PURE__ */ jsx(Dialog.Title, { children: "Edit roles" }),
-          /* @__PURE__ */ jsxs(Dialog.Description, { children: [
-            "Select the roles to assign to ",
-            /* @__PURE__ */ jsx(Text, { weight: "bold", children: displayName })
-          ] }),
+          /* @__PURE__ */ jsx(Dialog.Title, { children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Edit roles",
+              id: "VQ1Avr",
+              description: "Dialog title for editing user roles (multiple)"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Dialog.Description, { children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Select the roles to assign to {displayName}",
+              id: "yyM/+B",
+              description: "Dialog description for selecting multiple roles",
+              values: { displayName: /* @__PURE__ */ jsx(Text, { weight: "bold", children: displayName }) }
+            }
+          ) }),
           /* @__PURE__ */ jsx(Flex, { mt: "4", direction: "column", gap: "1", asChild: true, minHeight: "0", children: /* @__PURE__ */ jsx(
             Card,
             {
@@ -259,17 +311,38 @@ function EditMultipleUserRolesDialogContent({
               )
             }
           ) }),
-          showSingleRoleInfo ? /* @__PURE__ */ jsx(Text, { color: "gray", size: "2", id: infoId, mt: "1", children: "You cannot update the role for this user as there is only one role available." }) : null,
+          showSingleRoleInfo ? /* @__PURE__ */ jsx(Text, { color: "gray", size: "2", id: infoId, mt: "1", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "You cannot update the role for this user as there is only one role available.",
+              id: "XLp48i",
+              description: "Info message when only one role is available"
+            }
+          ) }) : null,
           error ? /* @__PURE__ */ jsx(Callout.Root, { color: "red", mt: "4", mb: "-2", children: /* @__PURE__ */ jsx(Callout.Text, { children: error }) }) : null,
           /* @__PURE__ */ jsxs(Flex, { mt: "5", gap: "3", justify: "end", children: [
-            /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: updateUser.isPending, children: "Cancel" }) }),
+            /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: updateUser.isPending, children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Cancel",
+                id: "hHNj31",
+                description: "Cancel button text"
+              }
+            ) }) }),
             /* @__PURE__ */ jsx(
               Button,
               {
                 form: formId,
                 loading: updateUser.isPending,
                 disabled: queryState.isLoading || showSingleRoleInfo || void 0,
-                children: "Save"
+                children: /* @__PURE__ */ jsx(
+                  Translation,
+                  {
+                    defaultMessage: "Save",
+                    id: "RT8KNi",
+                    description: "Save button text"
+                  }
+                )
               }
             )
           ] })

package/dist/esm/lib/edit-user-role-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/edit-user-role-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Callout,\n  CheckboxGroup,\n  Flex,\n  ScrollArea,\n  Text,\n  VisuallyHidden,\n  Separator,\n} from \"@radix-ui/themes\";\nimport { type ReactNode, useState } from \"react\";\nimport { useUpdateUserRole } from \"./api/user.js\";\nimport { Dialog, Button, Select, Skeleton } from \"./elements.js\";\nimport { getBestName } from \"./utils.js\";\nimport {\n  Member,\n  MemberRole,\n  RolesAndConfig403,\n  RolesAndConfig404,\n  useRolesAndConfig,\n} from \"../api/endpoint.js\";\n\ninterface EditUserRoleDialogProps extends Dialog.RootProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  user: Member;\n  children?: ReactNode;\n}\n\nexport function EditUserRoleDialog({\n  children,\n  user,\n  ...props\n}: EditUserRoleDialogProps) {\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { data, ...restQueryState } = rolesAndConfigQuery;\n  const queryState = {\n    error: restQueryState.error,\n    isLoading: restQueryState.isLoading,\n    isSuccess: restQueryState.isSuccess,\n  };\n\n  return (\n    <Dialog.Root {...props}>\n      {children && <Dialog.Trigger>{children}</Dialog.Trigger>}\n      {data.multipleRolesEnabled ? (\n        <EditMultipleUserRolesDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      ) : (\n        <EditSingleUserRoleDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      )}\n    </Dialog.Root>\n  );\n}\n\ninterface EditSingleUserRoleDialogContentProps {\n  user: Member;\n  roles: MemberRole[];\n  queryState: {\n    error: RolesAndConfig403 | RolesAndConfig404 | null;\n    isLoading: boolean;\n    isSuccess: boolean;\n  };\n  onFormSubmitSuccess: () => void;\n}\n\nexport function EditSingleUserRoleDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditSingleUserRoleDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [selectedRole, setSelectedRole] = useState(\n    user.roles?.at(0)?.slug || \"Unknown\",\n  );\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const selectId = `role-select-${rootId}`;\n  const selectLabelId = `${selectId}-label`;\n  const infoId = `${selectId}-info`;\n  const errorId = `${selectId}-error`;\n  const showErrorMessage = !!queryState.error;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n\n  return (\n    <Dialog.Content maxWidth=\"480px\">\n      <Dialog.Title>Edit role</Dialog.Title>\n      <Dialog.Description>\n        Select the role to assign to <Text weight=\"bold\">{displayName}</Text>\n      </Dialog.Description>\n      <Flex mt=\"2\" direction=\"column\" gap=\"1\" asChild>\n        <form\n          id={formId}\n          onSubmit={async (event) => {\n            event.preventDefault();\n            onSubmitForm({ id: user.id, roles: [selectedRole] });\n          }}\n        >\n          <Select.Root\n            name=\"roles\"\n            value={selectedRole ?? \"Unknown\"}\n            onValueChange={setSelectedRole}\n            disabled={queryState.isLoading || showSingleRoleInfo}\n          >\n            <Skeleton loading={queryState.isLoading}>\n              <Select.Trigger\n                id={selectId}\n                placeholder=\"Assign a role\"\n                aria-labelledby={selectLabelId}\n                aria-invalid={showErrorMessage || undefined}\n                aria-describedby={\n                  [showErrorMessage && errorId, showSingleRoleInfo && infoId]\n                    .filter(Boolean)\n                    .join(\" \") || undefined\n                }\n              />\n            </Skeleton>\n\n            <Select.Content>\n              {roles.map((role) => (\n                <Select.Item key={role.slug} value={role.slug}>\n                  {role.name}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select.Root>\n\n          {showErrorMessage ? (\n            <Text color=\"red\" size=\"2\" id={errorId}>\n              {getRoleSelectErrorMessage(queryState.error)}\n            </Text>\n          ) : null}\n\n          {showSingleRoleInfo ? (\n            <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n              You cannot update the role for this user as there is only one role\n              available.\n            </Text>\n          ) : null}\n        </form>\n      </Flex>\n\n      {updateUser.error ? (\n        <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n          <Callout.Text>\n            {getMutationErrorMessage(updateUser.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n        <Dialog.Close>\n          <Button variant=\"secondary\" disabled={updateUser.isPending}>\n            Cancel\n          </Button>\n        </Dialog.Close>\n\n        <Button\n          form={formId}\n          loading={updateUser.isPending}\n          disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n        >\n          Save\n        </Button>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </Dialog.Content>\n  );\n}\n\ntype EditMultipleUserRolesDialogContentProps =\n  EditSingleUserRoleDialogContentProps;\n\nfunction EditMultipleUserRolesDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditMultipleUserRolesDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [error, setError] = useState<string | null>(null);\n\n  React.useEffect(() => {\n    if (queryState.error && !error) {\n      setError(\"There was an error fetching roles. Please try again.\");\n    }\n  }, [queryState.error, error]);\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    if (roles.length === 0) {\n      setError(\"Please select at least one role\");\n      return;\n    }\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n        onError: () => {\n          setError(\n            \"There was an error updating the user role. Please try again.\",\n          );\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const checkboxGroupId = `role-checkbox-group-${rootId}`;\n  const infoId = `${checkboxGroupId}-info`;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n  return (\n    <Dialog.Content maxWidth=\"480px\">\n      <Flex\n        direction=\"column\"\n        gap=\"1\"\n        maxHeight=\"calc(100vh - var(--dialog-content-padding) * 2 - var(--space-6) - max(var(--space-6), 6vh)\"\n        minHeight=\"200px\"\n      >\n        <Dialog.Title>Edit roles</Dialog.Title>\n        <Dialog.Description>\n          Select the roles to assign to <Text weight=\"bold\">{displayName}</Text>\n        </Dialog.Description>\n        <Flex mt=\"4\" direction=\"column\" gap=\"1\" asChild minHeight=\"0\">\n          <Card\n            asChild\n            style={{ display: \"flex\", padding: \"2px 0\", flexGrow: 0 }}\n          >\n            <form\n              id={formId}\n              onSubmit={async (event) => {\n                event.preventDefault();\n                const formData = new FormData(event.currentTarget);\n                const selectedRoles = formData\n                  .getAll(\"roles\")\n                  .map((role) => role.toString());\n                onSubmitForm({ id: user.id, roles: selectedRoles });\n              }}\n            >\n              <ScrollArea>\n                <CheckboxGroup.Root\n                  defaultValue={user.roles?.map((role) => role.slug) || []}\n                  name=\"roles\"\n                  style={{ gap: \"0\" }}\n                  id={checkboxGroupId}\n                  onValueChange={(values) => {\n                    if (error && values.length > 0) {\n                      setError(\"\");\n                    }\n                  }}\n                >\n                  {roles.map((role, i) => (\n                    <Box key={role.slug}>\n                      <Flex px=\"4\" justify=\"center\" py=\"3\">\n                        <CheckboxGroup.Item\n                          value={role.slug}\n                          style={{\n                            width: \"100%\",\n                            gap: \"var(--space-3)\",\n                            alignItems: \"center\",\n                          }}\n                          disabled={showSingleRoleInfo}\n                        >\n                          <Flex direction=\"column\" width=\"100%\">\n                            <Text weight=\"bold\" size=\"2\">\n                              {role.name}\n                            </Text>\n                            <Text\n                              color=\"gray\"\n                              size=\"2\"\n                              style={{\n                                overflow: \"hidden\",\n                                textOverflow: \"ellipsis\",\n                                whiteSpace: \"nowrap\",\n                              }}\n                            >\n                              {role.description}\n                            </Text>\n                          </Flex>\n                        </CheckboxGroup.Item>\n                      </Flex>\n                      {i !== roles.length - 1 && (\n                        <Separator orientation=\"horizontal\" size=\"4\" />\n                      )}\n                    </Box>\n                  ))}\n                </CheckboxGroup.Root>\n              </ScrollArea>\n            </form>\n          </Card>\n        </Flex>\n\n        {showSingleRoleInfo ? (\n          <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n            You cannot update the role for this user as there is only one role\n            available.\n          </Text>\n        ) : null}\n\n        {error ? (\n          <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n            <Callout.Text>{error}</Callout.Text>\n          </Callout.Root>\n        ) : null}\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <Button variant=\"secondary\" disabled={updateUser.isPending}>\n              Cancel\n            </Button>\n          </Dialog.Close>\n\n          <Button\n            form={formId}\n            loading={updateUser.isPending}\n            disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n          >\n            Save\n          </Button>\n        </Flex>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </Dialog.Content>\n  );\n}\n\nfunction getRoleSelectErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error fetching roles. Please try again.\";\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error updating the user role. Please try again.\";\n}\n"],"mappings":"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","names":["roles"]}
+{"version":3,"sources":["../../../src/lib/edit-user-role-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Callout,\n  CheckboxGroup,\n  Flex,\n  ScrollArea,\n  Text,\n  VisuallyHidden,\n  Separator,\n} from \"@radix-ui/themes\";\nimport { type ReactNode, useState } from \"react\";\nimport { useUpdateUserRole } from \"./api/user.js\";\nimport { Dialog, Button, Select, Skeleton } from \"./elements.js\";\nimport { getBestName } from \"./utils.js\";\nimport {\n  Member,\n  MemberRole,\n  RolesAndConfig403,\n  RolesAndConfig404,\n  useRolesAndConfig,\n} from \"../api/endpoint.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface EditUserRoleDialogProps extends Dialog.RootProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  user: Member;\n  children?: ReactNode;\n}\n\nexport function EditUserRoleDialog({\n  children,\n  user,\n  ...props\n}: EditUserRoleDialogProps) {\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { data, ...restQueryState } = rolesAndConfigQuery;\n  const queryState = {\n    error: restQueryState.error,\n    isLoading: restQueryState.isLoading,\n    isSuccess: restQueryState.isSuccess,\n  };\n\n  return (\n    <Dialog.Root {...props}>\n      {children && <Dialog.Trigger>{children}</Dialog.Trigger>}\n      {data.multipleRolesEnabled ? (\n        <EditMultipleUserRolesDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      ) : (\n        <EditSingleUserRoleDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      )}\n    </Dialog.Root>\n  );\n}\n\ninterface EditSingleUserRoleDialogContentProps {\n  user: Member;\n  roles: MemberRole[];\n  queryState: {\n    error: RolesAndConfig403 | RolesAndConfig404 | null;\n    isLoading: boolean;\n    isSuccess: boolean;\n  };\n  onFormSubmitSuccess: () => void;\n}\n\nexport function EditSingleUserRoleDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditSingleUserRoleDialogContentProps) {\n  const translate = useTranslation();\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [selectedRole, setSelectedRole] = useState(\n    user.roles?.at(0)?.slug || \"Unknown\",\n  );\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const selectId = `role-select-${rootId}`;\n  const selectLabelId = `${selectId}-label`;\n  const infoId = `${selectId}-info`;\n  const errorId = `${selectId}-error`;\n  const showErrorMessage = !!queryState.error;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n\n  return (\n    <Dialog.Content maxWidth=\"480px\">\n      <Dialog.Title>\n        <Translation\n          defaultMessage=\"Edit role\"\n          id=\"Ue7G8Y\"\n          description=\"Dialog title for editing user role\"\n        />\n      </Dialog.Title>\n      <Dialog.Description>\n        <Translation\n          defaultMessage=\"Select the role to assign to {displayName}\"\n          id=\"jWl49/\"\n          description=\"Dialog description for role selection\"\n          values={{ displayName: <Text weight=\"bold\">{displayName}</Text> }}\n        />\n      </Dialog.Description>\n      <Flex mt=\"2\" direction=\"column\" gap=\"1\" asChild>\n        <form\n          id={formId}\n          onSubmit={async (event) => {\n            event.preventDefault();\n            onSubmitForm({ id: user.id, roles: [selectedRole] });\n          }}\n        >\n          <Select.Root\n            name=\"roles\"\n            value={selectedRole ?? \"Unknown\"}\n            onValueChange={setSelectedRole}\n            disabled={queryState.isLoading || showSingleRoleInfo}\n          >\n            <Skeleton loading={queryState.isLoading}>\n              <Select.Trigger\n                id={selectId}\n                placeholder={translate({\n                  defaultMessage: \"Assign a role\",\n                  id: \"0beebz\",\n                  description: \"Placeholder for role selection dropdown\",\n                })}\n                aria-labelledby={selectLabelId}\n                aria-invalid={showErrorMessage || undefined}\n                aria-describedby={\n                  [showErrorMessage && errorId, showSingleRoleInfo && infoId]\n                    .filter(Boolean)\n                    .join(\" \") || undefined\n                }\n              />\n            </Skeleton>\n\n            <Select.Content>\n              {roles.map((role) => (\n                <Select.Item key={role.slug} value={role.slug}>\n                  {role.name}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select.Root>\n\n          {showErrorMessage ? (\n            <Text color=\"red\" size=\"2\" id={errorId}>\n              {getRoleSelectErrorMessage(queryState.error)}\n            </Text>\n          ) : null}\n\n          {showSingleRoleInfo ? (\n            <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n              <Translation\n                defaultMessage=\"You cannot update the role for this user as there is only one role available.\"\n                id=\"XLp48i\"\n                description=\"Info message when only one role is available\"\n              />\n            </Text>\n          ) : null}\n        </form>\n      </Flex>\n\n      {updateUser.error ? (\n        <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n          <Callout.Text>\n            {getMutationErrorMessage(updateUser.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n        <Dialog.Close>\n          <Button variant=\"secondary\" disabled={updateUser.isPending}>\n            <Translation\n              defaultMessage=\"Cancel\"\n              id=\"hHNj31\"\n              description=\"Cancel button text\"\n            />\n          </Button>\n        </Dialog.Close>\n\n        <Button\n          form={formId}\n          loading={updateUser.isPending}\n          disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n        >\n          <Translation\n            defaultMessage=\"Save\"\n            id=\"RT8KNi\"\n            description=\"Save button text\"\n          />\n        </Button>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </Dialog.Content>\n  );\n}\n\ntype EditMultipleUserRolesDialogContentProps =\n  EditSingleUserRoleDialogContentProps;\n\nfunction EditMultipleUserRolesDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditMultipleUserRolesDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [error, setError] = useState<string | null>(null);\n\n  React.useEffect(() => {\n    if (queryState.error && !error) {\n      setError(\"There was an error fetching roles. Please try again.\");\n    }\n  }, [queryState.error, error]);\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    if (roles.length === 0) {\n      setError(\"Please select at least one role\");\n      return;\n    }\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n        onError: () => {\n          setError(\n            \"There was an error updating the user role. Please try again.\",\n          );\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const checkboxGroupId = `role-checkbox-group-${rootId}`;\n  const infoId = `${checkboxGroupId}-info`;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n  return (\n    <Dialog.Content maxWidth=\"480px\">\n      <Flex\n        direction=\"column\"\n        gap=\"1\"\n        maxHeight=\"calc(100vh - var(--dialog-content-padding) * 2 - var(--space-6) - max(var(--space-6), 6vh)\"\n        minHeight=\"200px\"\n      >\n        <Dialog.Title>\n          <Translation\n            defaultMessage=\"Edit roles\"\n            id=\"VQ1Avr\"\n            description=\"Dialog title for editing user roles (multiple)\"\n          />\n        </Dialog.Title>\n        <Dialog.Description>\n          <Translation\n            defaultMessage=\"Select the roles to assign to {displayName}\"\n            id=\"yyM/+B\"\n            description=\"Dialog description for selecting multiple roles\"\n            values={{ displayName: <Text weight=\"bold\">{displayName}</Text> }}\n          />\n        </Dialog.Description>\n        <Flex mt=\"4\" direction=\"column\" gap=\"1\" asChild minHeight=\"0\">\n          <Card\n            asChild\n            style={{ display: \"flex\", padding: \"2px 0\", flexGrow: 0 }}\n          >\n            <form\n              id={formId}\n              onSubmit={async (event) => {\n                event.preventDefault();\n                const formData = new FormData(event.currentTarget);\n                const selectedRoles = formData\n                  .getAll(\"roles\")\n                  .map((role) => role.toString());\n                onSubmitForm({ id: user.id, roles: selectedRoles });\n              }}\n            >\n              <ScrollArea>\n                <CheckboxGroup.Root\n                  defaultValue={user.roles?.map((role) => role.slug) || []}\n                  name=\"roles\"\n                  style={{ gap: \"0\" }}\n                  id={checkboxGroupId}\n                  onValueChange={(values) => {\n                    if (error && values.length > 0) {\n                      setError(\"\");\n                    }\n                  }}\n                >\n                  {roles.map((role, i) => (\n                    <Box key={role.slug}>\n                      <Flex px=\"4\" justify=\"center\" py=\"3\">\n                        <CheckboxGroup.Item\n                          value={role.slug}\n                          style={{\n                            width: \"100%\",\n                            gap: \"var(--space-3)\",\n                            alignItems: \"center\",\n                          }}\n                          disabled={showSingleRoleInfo}\n                        >\n                          <Flex direction=\"column\" width=\"100%\">\n                            <Text weight=\"bold\" size=\"2\">\n                              {role.name}\n                            </Text>\n                            <Text\n                              color=\"gray\"\n                              size=\"2\"\n                              style={{\n                                overflow: \"hidden\",\n                                textOverflow: \"ellipsis\",\n                                whiteSpace: \"nowrap\",\n                              }}\n                            >\n                              {role.description}\n                            </Text>\n                          </Flex>\n                        </CheckboxGroup.Item>\n                      </Flex>\n                      {i !== roles.length - 1 && (\n                        <Separator orientation=\"horizontal\" size=\"4\" />\n                      )}\n                    </Box>\n                  ))}\n                </CheckboxGroup.Root>\n              </ScrollArea>\n            </form>\n          </Card>\n        </Flex>\n\n        {showSingleRoleInfo ? (\n          <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n            <Translation\n              defaultMessage=\"You cannot update the role for this user as there is only one role available.\"\n              id=\"XLp48i\"\n              description=\"Info message when only one role is available\"\n            />\n          </Text>\n        ) : null}\n\n        {error ? (\n          <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n            <Callout.Text>{error}</Callout.Text>\n          </Callout.Root>\n        ) : null}\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <Button variant=\"secondary\" disabled={updateUser.isPending}>\n              <Translation\n                defaultMessage=\"Cancel\"\n                id=\"hHNj31\"\n                description=\"Cancel button text\"\n              />\n            </Button>\n          </Dialog.Close>\n\n          <Button\n            form={formId}\n            loading={updateUser.isPending}\n            disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n          >\n            <Translation\n              defaultMessage=\"Save\"\n              id=\"RT8KNi\"\n              description=\"Save button text\"\n            />\n          </Button>\n        </Flex>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </Dialog.Content>\n  );\n}\n\nfunction getRoleSelectErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error fetching roles. Please try again.\";\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error updating the user role. Please try again.\";\n}\n\n// Note: Error messages in helper functions are kept as plain strings\n// since they are displayed dynamically\n"],"mappings":"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","names":["roles"]}

package/dist/esm/lib/elements.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonProps as ButtonProps$1, IconButtonProps, SkeletonProps, TextProps, TextField as TextField$1, BadgeProps, AvatarProps as AvatarProps$1 } from '@radix-ui/themes';
+import { ButtonProps as ButtonProps$1, IconButtonProps as IconButtonProps$1, SkeletonProps, TextProps, TextField as TextField$1, BadgeProps, AvatarProps as AvatarProps$1 } from '@radix-ui/themes';
 import { GetPropDefTypes, dialogContentPropDefs, buttonPropDefs, iconButtonPropDefs, textFieldRootPropDefs, selectTriggerPropDefs, badgePropDefs, dropdownMenuContentPropDefs, dropdownMenuItemPropDefs, avatarPropDefs, textPropDefs, skeletonPropDefs } from '@radix-ui/themes/props';
 export { d as Dialog } from '../dialog-C15qCLN3.js';
 export { a as AlertDialog } from '../alert-dialog-BlG3_awx.js';
@@ -15,6 +15,9 @@ interface ButtonProps extends Omit<ButtonProps$1, "variant" | "color"> {
     unsafe_radixVariant?: ButtonProps$1["variant"];
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface IconButtonProps extends IconButtonProps$1 {
+    title: string;
+}
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
 declare const Label: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLLabelElement>>;
@@ -47,4 +50,4 @@ type Elements = OmitAsChild<{
     skeleton?: GetPropDefTypes<typeof skeletonPropDefs>;
 }>;
 
-export { Avatar, Badge, Button, type ButtonProps, type Elements, IconButton, Label, PasswordField, Skeleton, TextField, TextFieldSlot };
+export { Avatar, Badge, Button, type ButtonProps, type Elements, IconButton, type IconButtonProps, Label, PasswordField, Skeleton, TextField, TextFieldSlot };

package/dist/esm/lib/elements.js

@@ -14,6 +14,7 @@ import cx from "clsx";
 import { useElement } from "./widgets-context.js";
 import { getDomProps, namespaceClassNames } from "./utils.js";
 import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
+import { useTranslation } from "./i18n/use-translation.js";
 const Button = React.forwardRef(
   function Button2({ className, variant = "primary", unsafe_radixVariant, ...props }, ref) {
     const element = useElement(`${variant}Button`);
@@ -71,6 +72,7 @@ const IconButton = React.forwardRef(
         ...getDomProps({ elementId: "iconButton", className }),
         variant: "ghost",
         color: "gray",
+        "aria-label": props.title,
         ...props,
         ...element
       }
@@ -136,7 +138,17 @@ const TextFieldSlot = React.forwardRef(function TextFieldSlot2({ className, ...p
 const PasswordField = React.forwardRef(function PasswordField2({ className, ...props }, ref) {
   const element = useElement("textfield");
   const [showPassword, setShowPassword] = React.useState(false);
-  const label = showPassword ? "Hide password" : "Show password";
+  const translate = useTranslation();
+  const hidePasswordText = translate({
+    defaultMessage: "Hide password",
+    id: "Jv4Vps",
+    description: "Button text to hide password"
+  });
+  const showPasswordText = translate({
+    defaultMessage: "Show password",
+    id: "UIfBSd",
+    description: "Button text to show password"
+  });
   return /* @__PURE__ */ jsx(
     RadixTextField.Root,
     {
@@ -152,8 +164,7 @@ const PasswordField = React.forwardRef(function PasswordField2({ className, ...p
           type: "button",
           size: "1",
           onClick: () => setShowPassword(!showPassword),
-          "aria-label": label,
-          title: label,
+          title: showPassword ? hidePasswordText : showPasswordText,
           children: showPassword ? /* @__PURE__ */ jsx(EyeOpenIcon, {}) : /* @__PURE__ */ jsx(EyeClosedIcon, {})
         }
       ) })

package/dist/esm/lib/elements.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/elements.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Avatar as RadixAvatar,\n  AvatarProps as RadixAvatarProps,\n  Badge as RadixBadge,\n  IconButton as RadixIconButton,\n  Skeleton as RadixSkeleton,\n  Text,\n  TextField as RadixTextField,\n  type BadgeProps,\n  type ButtonProps as RadixButtonProps,\n  type IconButtonProps,\n  type SkeletonProps,\n  type TextProps,\n  Button as RadixButton,\n} from \"@radix-ui/themes\";\nimport type {\n  GetPropDefTypes,\n  avatarPropDefs,\n  badgePropDefs,\n  buttonPropDefs,\n  dialogContentPropDefs,\n  dropdownMenuContentPropDefs,\n  dropdownMenuItemPropDefs,\n  iconButtonPropDefs,\n  textPropDefs,\n  textFieldRootPropDefs,\n  selectTriggerPropDefs,\n  skeletonPropDefs,\n} from \"@radix-ui/themes/props\";\nimport cx from \"clsx\";\nimport { useElement } from \"./widgets-context.js\";\nimport { getDomProps, namespaceClassNames } from \"./utils.js\";\nimport { EyeClosedIcon, EyeOpenIcon } from \"@radix-ui/react-icons\";\n\nexport interface ButtonProps\n  extends Omit<RadixButtonProps, \"variant\" | \"color\"> {\n  variant?: \"primary\" | \"secondary\" | \"destructive\";\n  unsafe_radixVariant?: RadixButtonProps[\"variant\"];\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { className, variant = \"primary\", unsafe_radixVariant, ...props },\n    ref,\n  ) {\n    const element = useElement(`${variant}Button`);\n\n    const themeProps = (() => {\n      let props: RadixButtonProps = {};\n      if (variant === \"primary\") {\n        props = {\n          variant: \"solid\",\n        } satisfies RadixButtonProps;\n      } else if (variant === \"secondary\") {\n        props = {\n          highContrast: true,\n          variant: \"surface\",\n          color: \"gray\",\n        } satisfies RadixButtonProps;\n      } else if (variant === \"destructive\") {\n        props = {\n          variant: \"solid\",\n          color: \"red\",\n        } satisfies RadixButtonProps;\n      } else {\n        variant satisfies never;\n      }\n\n      if (unsafe_radixVariant) {\n        props.variant = unsafe_radixVariant;\n      }\n\n      return props;\n    })();\n\n    return (\n      <RadixButton\n        ref={ref}\n        {...getDomProps({\n          elementId: `${variant}Button`,\n          className: cx(\n            className,\n            // TODO: Remove BEM-style selector once conventions are standardized\n            `button--${variant}`,\n          ),\n        })}\n        {...themeProps}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton({ className, ...props }, ref) {\n    const element = useElement(\"iconButton\");\n    return (\n      <RadixIconButton\n        ref={ref}\n        {...getDomProps({ elementId: \"iconButton\", className })}\n        variant=\"ghost\"\n        color=\"gray\"\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n  function Skeleton({ className, ...props }, ref) {\n    const element = useElement(\"skeleton\");\n    return (\n      <RadixSkeleton\n        ref={ref}\n        {...getDomProps({ elementId: \"skeleton\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const Label = React.forwardRef<HTMLLabelElement, TextProps>(\n  function Label({ children, className, style = {}, ...props }, ref) {\n    const element = useElement(\"label\");\n    return (\n      <Text\n        as=\"label\"\n        ref={ref}\n        weight=\"bold\"\n        size=\"2\"\n        {...getDomProps({ elementId: \"label\", className })}\n        style={{ width: \"fit-content\", ...style }}\n        // Text props are a complex union type depending on the `as` prop value,\n        // which breaks down when spreading in `element`.\n        {...(props as any)}\n        {...element}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n\nexport const TextField = React.forwardRef<\n  HTMLInputElement,\n  RadixTextField.RootProps\n>(function TextField({ className, ...props }, ref) {\n  const element = useElement(\"textfield\");\n  return (\n    <RadixTextField.Root\n      ref={ref}\n      variant=\"surface\"\n      className={cx(namespaceClassNames(\"text-field\"), className)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\nexport const TextFieldSlot = React.forwardRef<\n  HTMLDivElement,\n  RadixTextField.SlotProps\n>(function TextFieldSlot({ className, ...props }, ref) {\n  return (\n    <RadixTextField.Slot\n      ref={ref}\n      className={cx(namespaceClassNames(\"text-field-slot\"), className)}\n      {...props}\n    />\n  );\n});\n\nexport const PasswordField = React.forwardRef<\n  HTMLInputElement,\n  RadixTextField.RootProps\n>(function PasswordField({ className, ...props }, ref) {\n  const element = useElement(\"textfield\");\n  const [showPassword, setShowPassword] = React.useState(false);\n  const label = showPassword ? \"Hide password\" : \"Show password\";\n  return (\n    <RadixTextField.Root\n      ref={ref}\n      variant=\"surface\"\n      className={cx(namespaceClassNames(\"text-field\"), className)}\n      {...props}\n      {...element}\n      type={showPassword ? \"text\" : \"password\"}\n    >\n      <RadixTextField.Slot side=\"right\">\n        <IconButton\n          type=\"button\"\n          size=\"1\"\n          onClick={() => setShowPassword(!showPassword)}\n          aria-label={label}\n          title={label}\n        >\n          {showPassword ? <EyeOpenIcon /> : <EyeClosedIcon />}\n        </IconButton>\n      </RadixTextField.Slot>\n    </RadixTextField.Root>\n  );\n});\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge({ className, ...props }, ref) {\n    const element = useElement(\"badge\");\n    return (\n      <RadixBadge\n        ref={ref}\n        {...getDomProps({ elementId: \"badge\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\ninterface AvatarProps extends RadixAvatarProps {\n  dim?: boolean;\n}\n\nexport const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(\n  function Avatar({ dim, className, ...props }, ref) {\n    const element = useElement(\"avatar\");\n    return (\n      <RadixAvatar\n        ref={ref}\n        color=\"gray\"\n        {...getDomProps({ elementId: \"avatar\", className })}\n        {...props}\n        {...element}\n        // TODO: use CSS var instead of hard-coded value for opacity\n        style={dim ? { opacity: 0.6, ...props.style } : props.style}\n      />\n    );\n  },\n);\n\ntype OmitAsChild<T> = {\n  [K in keyof T]: T[K] extends undefined\n    ? undefined\n    : Omit<NonNullable<T[K]>, \"asChild\">;\n};\n\nexport * as Dialog from \"./elements/dialog.js\";\nexport * as AlertDialog from \"./elements/alert-dialog.js\";\nexport * as DropdownMenu from \"./elements/dropdown-menu.js\";\nexport * as Select from \"./elements/select.js\";\n\nexport type Elements = OmitAsChild<{\n  dialog?: GetPropDefTypes<typeof dialogContentPropDefs>;\n  primaryButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  secondaryButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  destructiveButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  iconButton?: GetPropDefTypes<typeof iconButtonPropDefs>;\n  textfield?: GetPropDefTypes<typeof textFieldRootPropDefs>;\n  select?: GetPropDefTypes<typeof selectTriggerPropDefs>;\n  badge?: GetPropDefTypes<typeof badgePropDefs>;\n  dropdown?: GetPropDefTypes<typeof dropdownMenuContentPropDefs>;\n  primaryMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\n  destructiveMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\n  avatar?: Omit<GetPropDefTypes<typeof avatarPropDefs>, \"fallback\">;\n  label?: GetPropDefTypes<typeof textPropDefs>;\n  skeleton?: GetPropDefTypes<typeof skeletonPropDefs>;\n}>;\n"],"mappings":"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","names":["Button","props","IconButton","Skeleton","Label","TextField","TextFieldSlot","PasswordField","Badge","Avatar"]}
+{"version":3,"sources":["../../../src/lib/elements.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Avatar as RadixAvatar,\n  AvatarProps as RadixAvatarProps,\n  Badge as RadixBadge,\n  IconButton as RadixIconButton,\n  Skeleton as RadixSkeleton,\n  Text,\n  TextField as RadixTextField,\n  type BadgeProps,\n  type ButtonProps as RadixButtonProps,\n  type IconButtonProps as RadixIconButtonProps,\n  type SkeletonProps,\n  type TextProps,\n  Button as RadixButton,\n} from \"@radix-ui/themes\";\nimport type {\n  GetPropDefTypes,\n  avatarPropDefs,\n  badgePropDefs,\n  buttonPropDefs,\n  dialogContentPropDefs,\n  dropdownMenuContentPropDefs,\n  dropdownMenuItemPropDefs,\n  iconButtonPropDefs,\n  textPropDefs,\n  textFieldRootPropDefs,\n  selectTriggerPropDefs,\n  skeletonPropDefs,\n} from \"@radix-ui/themes/props\";\nimport cx from \"clsx\";\nimport { useElement } from \"./widgets-context.js\";\nimport { getDomProps, namespaceClassNames } from \"./utils.js\";\nimport { EyeClosedIcon, EyeOpenIcon } from \"@radix-ui/react-icons\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\nexport interface ButtonProps\n  extends Omit<RadixButtonProps, \"variant\" | \"color\"> {\n  variant?: \"primary\" | \"secondary\" | \"destructive\";\n  unsafe_radixVariant?: RadixButtonProps[\"variant\"];\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { className, variant = \"primary\", unsafe_radixVariant, ...props },\n    ref,\n  ) {\n    const element = useElement(`${variant}Button`);\n\n    const themeProps = (() => {\n      let props: RadixButtonProps = {};\n      if (variant === \"primary\") {\n        props = {\n          variant: \"solid\",\n        } satisfies RadixButtonProps;\n      } else if (variant === \"secondary\") {\n        props = {\n          highContrast: true,\n          variant: \"surface\",\n          color: \"gray\",\n        } satisfies RadixButtonProps;\n      } else if (variant === \"destructive\") {\n        props = {\n          variant: \"solid\",\n          color: \"red\",\n        } satisfies RadixButtonProps;\n      } else {\n        variant satisfies never;\n      }\n\n      if (unsafe_radixVariant) {\n        props.variant = unsafe_radixVariant;\n      }\n\n      return props;\n    })();\n\n    return (\n      <RadixButton\n        ref={ref}\n        {...getDomProps({\n          elementId: `${variant}Button`,\n          className: cx(\n            className,\n            // TODO: Remove BEM-style selector once conventions are standardized\n            `button--${variant}`,\n          ),\n        })}\n        {...themeProps}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport interface IconButtonProps extends RadixIconButtonProps {\n  title: string;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton({ className, ...props }, ref) {\n    const element = useElement(\"iconButton\");\n    return (\n      <RadixIconButton\n        ref={ref}\n        {...getDomProps({ elementId: \"iconButton\", className })}\n        variant=\"ghost\"\n        color=\"gray\"\n        aria-label={props.title}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n  function Skeleton({ className, ...props }, ref) {\n    const element = useElement(\"skeleton\");\n    return (\n      <RadixSkeleton\n        ref={ref}\n        {...getDomProps({ elementId: \"skeleton\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const Label = React.forwardRef<HTMLLabelElement, TextProps>(\n  function Label({ children, className, style = {}, ...props }, ref) {\n    const element = useElement(\"label\");\n    return (\n      <Text\n        as=\"label\"\n        ref={ref}\n        weight=\"bold\"\n        size=\"2\"\n        {...getDomProps({ elementId: \"label\", className })}\n        style={{ width: \"fit-content\", ...style }}\n        // Text props are a complex union type depending on the `as` prop value,\n        // which breaks down when spreading in `element`.\n        {...(props as any)}\n        {...element}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n\nexport const TextField = React.forwardRef<\n  HTMLInputElement,\n  RadixTextField.RootProps\n>(function TextField({ className, ...props }, ref) {\n  const element = useElement(\"textfield\");\n  return (\n    <RadixTextField.Root\n      ref={ref}\n      variant=\"surface\"\n      className={cx(namespaceClassNames(\"text-field\"), className)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\nexport const TextFieldSlot = React.forwardRef<\n  HTMLDivElement,\n  RadixTextField.SlotProps\n>(function TextFieldSlot({ className, ...props }, ref) {\n  return (\n    <RadixTextField.Slot\n      ref={ref}\n      className={cx(namespaceClassNames(\"text-field-slot\"), className)}\n      {...props}\n    />\n  );\n});\n\nexport const PasswordField = React.forwardRef<\n  HTMLInputElement,\n  RadixTextField.RootProps\n>(function PasswordField({ className, ...props }, ref) {\n  const element = useElement(\"textfield\");\n  const [showPassword, setShowPassword] = React.useState(false);\n  const translate = useTranslation();\n  const hidePasswordText = translate({\n    defaultMessage: \"Hide password\",\n    id: \"Jv4Vps\",\n    description: \"Button text to hide password\",\n  });\n  const showPasswordText = translate({\n    defaultMessage: \"Show password\",\n    id: \"UIfBSd\",\n    description: \"Button text to show password\",\n  });\n  return (\n    <RadixTextField.Root\n      ref={ref}\n      variant=\"surface\"\n      className={cx(namespaceClassNames(\"text-field\"), className)}\n      {...props}\n      {...element}\n      type={showPassword ? \"text\" : \"password\"}\n    >\n      <RadixTextField.Slot side=\"right\">\n        <IconButton\n          type=\"button\"\n          size=\"1\"\n          onClick={() => setShowPassword(!showPassword)}\n          title={showPassword ? hidePasswordText : showPasswordText}\n        >\n          {showPassword ? <EyeOpenIcon /> : <EyeClosedIcon />}\n        </IconButton>\n      </RadixTextField.Slot>\n    </RadixTextField.Root>\n  );\n});\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge({ className, ...props }, ref) {\n    const element = useElement(\"badge\");\n    return (\n      <RadixBadge\n        ref={ref}\n        {...getDomProps({ elementId: \"badge\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\ninterface AvatarProps extends RadixAvatarProps {\n  dim?: boolean;\n}\n\nexport const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(\n  function Avatar({ dim, className, ...props }, ref) {\n    const element = useElement(\"avatar\");\n    return (\n      <RadixAvatar\n        ref={ref}\n        color=\"gray\"\n        {...getDomProps({ elementId: \"avatar\", className })}\n        {...props}\n        {...element}\n        // TODO: use CSS var instead of hard-coded value for opacity\n        style={dim ? { opacity: 0.6, ...props.style } : props.style}\n      />\n    );\n  },\n);\n\ntype OmitAsChild<T> = {\n  [K in keyof T]: T[K] extends undefined\n    ? undefined\n    : Omit<NonNullable<T[K]>, \"asChild\">;\n};\n\nexport * as Dialog from \"./elements/dialog.js\";\nexport * as AlertDialog from \"./elements/alert-dialog.js\";\nexport * as DropdownMenu from \"./elements/dropdown-menu.js\";\nexport * as Select from \"./elements/select.js\";\n\nexport type Elements = OmitAsChild<{\n  dialog?: GetPropDefTypes<typeof dialogContentPropDefs>;\n  primaryButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  secondaryButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  destructiveButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  iconButton?: GetPropDefTypes<typeof iconButtonPropDefs>;\n  textfield?: GetPropDefTypes<typeof textFieldRootPropDefs>;\n  select?: GetPropDefTypes<typeof selectTriggerPropDefs>;\n  badge?: GetPropDefTypes<typeof badgePropDefs>;\n  dropdown?: GetPropDefTypes<typeof dropdownMenuContentPropDefs>;\n  primaryMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\n  destructiveMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\n  avatar?: Omit<GetPropDefTypes<typeof avatarPropDefs>, \"fallback\">;\n  label?: GetPropDefTypes<typeof textPropDefs>;\n  skeleton?: GetPropDefTypes<typeof skeletonPropDefs>;\n}>;\n"],"mappings":"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","names":["Button","props","IconButton","Skeleton","Label","TextField","TextFieldSlot","PasswordField","Badge","Avatar"]}