@workos-inc/widgets 1.7.2 → 1.8.0

package/dist/cjs/lib/user-actions-dropdown.cjs

@@ -40,10 +40,13 @@ var import_edit_user_role_dialog = require("./edit-user-role-dialog.js");
 var import_elements = require("./elements.js");
 var import_resend_invite_dialog = require("./resend-invite-dialog.js");
 var import_revoke_invite_dialog = require("./revoke-invite-dialog.js");
+var import_translation = require("./i18n/translation.js");
+var import_use_translation = require("./i18n/use-translation.js");
 const UserActionsDropdown = ({
   user,
   children
 }) => {
+  const translate = (0, import_use_translation.useTranslation)();
   const rolesAndConfigQuery = (0, import_endpoint.useRolesAndConfig)({
     query: {
       initialData: { roles: [], multipleRolesEnabled: false }
@@ -66,8 +69,26 @@ const UserActionsDropdown = ({
           {
             onSelect: () => setOpenDialog("edit-role"),
             disabled: rolesAndConfigQuery.isLoading || rolesAndConfigQuery.isSuccess && roles.length <= 1,
-            title: rolesAndConfigQuery.isSuccess && roles.length <= 1 ? "You cannot update the role for this user as there is only one role available." : void 0,
-            children: `Edit role${isMultipleRolesEnabled ? "s" : ""}`
+            title: rolesAndConfigQuery.isSuccess && roles.length <= 1 ? translate({
+              defaultMessage: "You cannot update the role for this user as there is only one role available.",
+              id: "rzvafM",
+              description: "Tooltip explaining why role editing is disabled"
+            }) : void 0,
+            children: isMultipleRolesEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Edit roles",
+                id: "yjbD6m",
+                description: "Menu option to edit user roles (plural)"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Edit role",
+                id: "NJqcnW",
+                description: "Menu option to edit user role (singular)"
+              }
+            )
           },
           "edit-role"
         )
@@ -79,7 +100,14 @@ const UserActionsDropdown = ({
           import_elements.DropdownMenu.Item,
           {
             onSelect: () => setOpenDialog("resend-invite"),
-            children: "Resend invitation"
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Resend invitation",
+                id: "1fzoWe",
+                description: "Menu option to resend user invitation"
+              }
+            )
           },
           "resend-invite"
         )
@@ -92,7 +120,14 @@ const UserActionsDropdown = ({
           {
             variant: "destructive",
             onSelect: () => setOpenDialog("revoke-invite"),
-            children: "Revoke invitation"
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Revoke invitation",
+                id: "0Ie4dM",
+                description: "Menu option to revoke user invitation"
+              }
+            )
           },
           "revoke-invite"
         )
@@ -105,7 +140,14 @@ const UserActionsDropdown = ({
           {
             variant: "destructive",
             onSelect: () => setOpenDialog("revoke-membership"),
-            children: "Remove user"
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Remove user",
+                id: "qGSR1P",
+                description: "Menu option to remove user from organization"
+              }
+            )
           },
           "revoke-membership"
         )
@@ -115,7 +157,13 @@ const UserActionsDropdown = ({
       actions: actions2,
       items: items2
     };
-  }, [rolesAndConfigQuery, user.actions, isMultipleRolesEnabled, roles]);
+  }, [
+    rolesAndConfigQuery,
+    user.actions,
+    isMultipleRolesEnabled,
+    roles,
+    translate
+  ]);
   if (user.isLoggedInUser || items.length === 0) {
     return null;
   }

package/dist/cjs/lib/user-actions-dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-actions-dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Member, useRolesAndConfig } from \"../api/endpoint.js\";\nimport { DeleteUserDialog } from \"./delete-user-dialog.js\";\nimport { EditUserRoleDialog } from \"./edit-user-role-dialog.js\";\nimport { DropdownMenu } from \"./elements.js\";\nimport { ResendInviteDialog } from \"./resend-invite-dialog.js\";\nimport { RevokeInviteDialog } from \"./revoke-invite-dialog.js\";\n\ninterface UserActionsDropdownProps {\n  user: Member;\n  children: React.ReactNode;\n}\n\ntype UserActionDialog =\n  | \"revoke-membership\"\n  | \"revoke-invite\"\n  | \"resend-invite\"\n  | \"edit-role\";\n\nexport const UserActionsDropdown = ({\n  user,\n  children,\n}: UserActionsDropdownProps) => {\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { roles, multipleRolesEnabled: isMultipleRolesEnabled } =\n    rolesAndConfigQuery.data;\n  const [openDialog, setOpenDialog] = React.useState<UserActionDialog | null>(\n    null,\n  );\n\n  /**\n   * Assigns a key for each dialog based on its open state to ensure its\n   * internal state is cleared when it is closed.\n   */\n  function getDialogKey(dialog: UserActionDialog) {\n    return `${dialog}-${openDialog === dialog}-${user.id}`;\n  }\n\n  const { actions, items } = React.useMemo(() => {\n    const actions = new Set(user.actions);\n    const items: React.ReactElement[] = [];\n    if (actions.has(\"edit-role\")) {\n      items.push(\n        <DropdownMenu.Item\n          key=\"edit-role\"\n          onSelect={() => setOpenDialog(\"edit-role\")}\n          disabled={\n            rolesAndConfigQuery.isLoading ||\n            (rolesAndConfigQuery.isSuccess && roles.length <= 1)\n          }\n          title={\n            rolesAndConfigQuery.isSuccess && roles.length <= 1\n              ? \"You cannot update the role for this user as there is only one role available.\"\n              : undefined\n          }\n        >\n          {`Edit role${isMultipleRolesEnabled ? \"s\" : \"\"}`}\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"resend-invite\")) {\n      items.push(\n        <DropdownMenu.Item\n          key=\"resend-invite\"\n          onSelect={() => setOpenDialog(\"resend-invite\")}\n        >\n          Resend invitation\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"revoke-invite\")) {\n      items.push(\n        <DropdownMenu.Item\n          variant=\"destructive\"\n          key=\"revoke-invite\"\n          onSelect={() => setOpenDialog(\"revoke-invite\")}\n        >\n          Revoke invitation\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"revoke-membership\")) {\n      items.push(\n        <DropdownMenu.Item\n          variant=\"destructive\"\n          key=\"revoke-membership\"\n          onSelect={() => setOpenDialog(\"revoke-membership\")}\n        >\n          Remove user\n        </DropdownMenu.Item>,\n      );\n    }\n    return {\n      actions,\n      items,\n    };\n  }, [rolesAndConfigQuery, user.actions, isMultipleRolesEnabled, roles]);\n\n  if (user.isLoggedInUser || items.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>\n        <DropdownMenu.Content size=\"2\" align=\"end\">\n          {items}\n        </DropdownMenu.Content>\n      </DropdownMenu.Root>\n\n      {actions.has(\"edit-role\") && (\n        <EditUserRoleDialog\n          key={getDialogKey(\"edit-role\")}\n          user={user}\n          open={openDialog === \"edit-role\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"revoke-membership\") && (\n        <DeleteUserDialog\n          key={getDialogKey(\"revoke-membership\")}\n          user={user}\n          open={openDialog === \"revoke-membership\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"revoke-invite\") && (\n        <RevokeInviteDialog\n          key={getDialogKey(\"revoke-invite\")}\n          user={user}\n          open={openDialog === \"revoke-invite\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"resend-invite\") && (\n        <ResendInviteDialog\n          key={getDialogKey(\"resend-invite\")}\n          user={user}\n          open={openDialog === \"resend-invite\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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","names":["actions","items"]}
+{"version":3,"sources":["../../../src/lib/user-actions-dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Member, useRolesAndConfig } from \"../api/endpoint.js\";\nimport { DeleteUserDialog } from \"./delete-user-dialog.js\";\nimport { EditUserRoleDialog } from \"./edit-user-role-dialog.js\";\nimport { DropdownMenu } from \"./elements.js\";\nimport { ResendInviteDialog } from \"./resend-invite-dialog.js\";\nimport { RevokeInviteDialog } from \"./revoke-invite-dialog.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface UserActionsDropdownProps {\n  user: Member;\n  children: React.ReactNode;\n}\n\ntype UserActionDialog =\n  | \"revoke-membership\"\n  | \"revoke-invite\"\n  | \"resend-invite\"\n  | \"edit-role\";\n\nexport const UserActionsDropdown = ({\n  user,\n  children,\n}: UserActionsDropdownProps) => {\n  const translate = useTranslation();\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { roles, multipleRolesEnabled: isMultipleRolesEnabled } =\n    rolesAndConfigQuery.data;\n  const [openDialog, setOpenDialog] = React.useState<UserActionDialog | null>(\n    null,\n  );\n\n  /**\n   * Assigns a key for each dialog based on its open state to ensure its\n   * internal state is cleared when it is closed.\n   */\n  function getDialogKey(dialog: UserActionDialog) {\n    return `${dialog}-${openDialog === dialog}-${user.id}`;\n  }\n\n  const { actions, items } = React.useMemo(() => {\n    const actions = new Set(user.actions);\n    const items: React.ReactElement[] = [];\n    if (actions.has(\"edit-role\")) {\n      items.push(\n        <DropdownMenu.Item\n          key=\"edit-role\"\n          onSelect={() => setOpenDialog(\"edit-role\")}\n          disabled={\n            rolesAndConfigQuery.isLoading ||\n            (rolesAndConfigQuery.isSuccess && roles.length <= 1)\n          }\n          title={\n            rolesAndConfigQuery.isSuccess && roles.length <= 1\n              ? translate({\n                  defaultMessage:\n                    \"You cannot update the role for this user as there is only one role available.\",\n                  id: \"rzvafM\",\n                  description:\n                    \"Tooltip explaining why role editing is disabled\",\n                })\n              : undefined\n          }\n        >\n          {isMultipleRolesEnabled ? (\n            <Translation\n              defaultMessage=\"Edit roles\"\n              id=\"yjbD6m\"\n              description=\"Menu option to edit user roles (plural)\"\n            />\n          ) : (\n            <Translation\n              defaultMessage=\"Edit role\"\n              id=\"NJqcnW\"\n              description=\"Menu option to edit user role (singular)\"\n            />\n          )}\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"resend-invite\")) {\n      items.push(\n        <DropdownMenu.Item\n          key=\"resend-invite\"\n          onSelect={() => setOpenDialog(\"resend-invite\")}\n        >\n          <Translation\n            defaultMessage=\"Resend invitation\"\n            id=\"1fzoWe\"\n            description=\"Menu option to resend user invitation\"\n          />\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"revoke-invite\")) {\n      items.push(\n        <DropdownMenu.Item\n          variant=\"destructive\"\n          key=\"revoke-invite\"\n          onSelect={() => setOpenDialog(\"revoke-invite\")}\n        >\n          <Translation\n            defaultMessage=\"Revoke invitation\"\n            id=\"0Ie4dM\"\n            description=\"Menu option to revoke user invitation\"\n          />\n        </DropdownMenu.Item>,\n      );\n    }\n    if (actions.has(\"revoke-membership\")) {\n      items.push(\n        <DropdownMenu.Item\n          variant=\"destructive\"\n          key=\"revoke-membership\"\n          onSelect={() => setOpenDialog(\"revoke-membership\")}\n        >\n          <Translation\n            defaultMessage=\"Remove user\"\n            id=\"qGSR1P\"\n            description=\"Menu option to remove user from organization\"\n          />\n        </DropdownMenu.Item>,\n      );\n    }\n    return {\n      actions,\n      items,\n    };\n  }, [\n    rolesAndConfigQuery,\n    user.actions,\n    isMultipleRolesEnabled,\n    roles,\n    translate,\n  ]);\n\n  if (user.isLoggedInUser || items.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>\n        <DropdownMenu.Content size=\"2\" align=\"end\">\n          {items}\n        </DropdownMenu.Content>\n      </DropdownMenu.Root>\n\n      {actions.has(\"edit-role\") && (\n        <EditUserRoleDialog\n          key={getDialogKey(\"edit-role\")}\n          user={user}\n          open={openDialog === \"edit-role\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"revoke-membership\") && (\n        <DeleteUserDialog\n          key={getDialogKey(\"revoke-membership\")}\n          user={user}\n          open={openDialog === \"revoke-membership\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"revoke-invite\") && (\n        <RevokeInviteDialog\n          key={getDialogKey(\"revoke-invite\")}\n          user={user}\n          open={openDialog === \"revoke-invite\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n\n      {actions.has(\"resend-invite\") && (\n        <ResendInviteDialog\n          key={getDialogKey(\"resend-invite\")}\n          user={user}\n          open={openDialog === \"resend-invite\"}\n          onOpenChange={(open) => !open && setOpenDialog(null)}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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","names":["actions","items"]}

package/dist/cjs/lib/user-profile.cjs

@@ -31,6 +31,7 @@ var import_edit_user_profile_dialog = require("./edit-user-profile-dialog.js");
 var import_utils = require("./utils.js");
 var import_oauth_icons = require("./oauth-icons.js");
 var import_generic_error = require("./generic-error.js");
+var import_translation = require("./i18n/translation.js");
 const UserProfile = ({
   userData: user,
   ...domProps
@@ -39,7 +40,14 @@ const UserProfile = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Root, { children: [
     user.profilePictureUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { align: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: "Profile picture" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_translation.Translation,
+          {
+            defaultMessage: "Profile picture",
+            description: "Label for the user's avatar",
+            id: "RvLqCQ"
+          }
+        ) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_elements.Avatar,
           {
@@ -52,7 +60,14 @@ const UserProfile = ({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListSeparator, {})
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: "Full name" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Full name",
+          id: "kkBScm",
+          description: "Label for user's full name field"
+        }
+      ) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_themes.Flex,
         {
@@ -66,23 +81,51 @@ const UserProfile = ({
               {
                 color: "gray",
                 style: { color: "var(--gray-10)", cursor: "default" },
-                children: "Not set"
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_translation.Translation,
+                  {
+                    defaultMessage: "Not set",
+                    id: "i4vzAY",
+                    description: "Placeholder text when user's name is not set"
+                  }
+                )
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_edit_user_profile_dialog.EditUserProfileDialog, { user, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: "Edit" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_edit_user_profile_dialog.EditUserProfileDialog, { user, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Edit",
+                id: "5bhXUz",
+                description: "Button text to edit user profile"
+              }
+            ) }) })
           ]
         }
       ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListSeparator, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: "Email address" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Email address",
+          id: "nLk5pa",
+          description: "Label for user's email address field"
+        }
+      ) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: user.email }) }) })
     ] }),
     oauthAccounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListSeparator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: "Connected accounts" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_translation.Translation,
+          {
+            defaultMessage: "Connected accounts",
+            id: "AW/A69",
+            description: "Label for user's connected OAuth accounts"
+          }
+        ) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { direction: "column", gap: "2", children: oauthAccounts.map(([account, data]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           OAuthAccount,
           {
@@ -98,7 +141,14 @@ const UserProfile = ({
 const UserProfileLoading = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Full name" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { minWidth: "220px", highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Full name",
+          id: "nc7fru",
+          description: "Loading placeholder for full name label"
+        }
+      ) }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_themes.Flex,
         {
@@ -106,14 +156,35 @@ const UserProfileLoading = (props) => {
           justify: "between",
           width: "100%",
           minHeight: "var(--space-6)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Full name" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Full name",
+              id: "6GcWa2",
+              description: "Loading placeholder for full name value"
+            }
+          ) }) })
         }
       ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListSeparator, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DataList.Item, { align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Email address" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Email address" }) }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Label, { highContrast: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Email address",
+          id: "gjqw+H",
+          description: "Loading placeholder for email address label"
+        }
+      ) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DataList.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { align: "center", minHeight: "var(--space-6)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Email address",
+          id: "75F+g5",
+          description: "Loading placeholder for email address value"
+        }
+      ) }) }) }) })
     ] })
   ] }) });
 };

package/dist/cjs/lib/user-profile.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  DataList,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, Button, Skeleton } from \"./elements.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\";\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      <DataList.Root>\n        {user.profilePictureUrl && (\n          <>\n            <DataList.Item align=\"center\">\n              <DataList.Label minWidth=\"220px\" highContrast>\n                <Strong>Profile picture</Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </DataList.Value>\n            </DataList.Item>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>Full name</Strong>\n          </DataList.Label>\n          <DataList.Value>\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                    Not set\n                  </Text>\n                )}\n              </Text>\n\n              <EditUserProfileDialog user={user}>\n                <Button variant=\"secondary\">Edit</Button>\n              </EditUserProfileDialog>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>Email address</Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">{user.email}</Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <DataList.Item>\n              <DataList.Label highContrast>\n                <Strong>Connected accounts</Strong>\n              </DataList.Label>\n              <DataList.Value>\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              </DataList.Value>\n            </DataList.Item>\n          </>\n        )}\n      </DataList.Root>\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      <DataList.Root>\n        <DataList.Item align=\"center\">\n          <DataList.Label minWidth=\"220px\" highContrast>\n            <Strong>\n              <Skeleton>Full name</Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex\n              align=\"center\"\n              justify=\"between\"\n              width=\"100%\"\n              minHeight=\"var(--space-6)\"\n            >\n              <Text size=\"2\">\n                <Skeleton>Full name</Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Skeleton>Email address</Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">\n                <Skeleton>Email address</Skeleton>\n              </Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\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 ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\">\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          <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    <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\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  DataList,\n  Flex,\n  Inset,\n  Separator,\n  Strong,\n  Text,\n} from \"@radix-ui/themes\";\nimport { Avatar, Button, Skeleton } from \"./elements.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      <DataList.Root>\n        {user.profilePictureUrl && (\n          <>\n            <DataList.Item align=\"center\">\n              <DataList.Label minWidth=\"220px\" highContrast>\n                <Strong>\n                  <Translation\n                    defaultMessage=\"Profile picture\"\n                    description=\"Label for the user's avatar\"\n                    id=\"RvLqCQ\"\n                  />\n                </Strong>\n              </DataList.Label>\n              <DataList.Value>\n                <Avatar\n                  size=\"2\"\n                  fallback={<FallbackUserIcon />}\n                  src={user.profilePictureUrl}\n                />\n              </DataList.Value>\n            </DataList.Item>\n\n            <ListSeparator />\n          </>\n        )}\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Translation\n                defaultMessage=\"Full name\"\n                id=\"kkBScm\"\n                description=\"Label for user's full name field\"\n              />\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\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          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Translation\n                defaultMessage=\"Email address\"\n                id=\"nLk5pa\"\n                description=\"Label for user's email address field\"\n              />\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\n            <Flex align=\"center\" minHeight=\"var(--space-6)\">\n              <Text size=\"2\">{user.email}</Text>\n            </Flex>\n          </DataList.Value>\n        </DataList.Item>\n\n        {oauthAccounts.length > 0 && (\n          <>\n            <ListSeparator />\n\n            <DataList.Item>\n              <DataList.Label highContrast>\n                <Strong>\n                  <Translation\n                    defaultMessage=\"Connected accounts\"\n                    id=\"AW/A69\"\n                    description=\"Label for user's connected OAuth accounts\"\n                  />\n                </Strong>\n              </DataList.Label>\n              <DataList.Value>\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              </DataList.Value>\n            </DataList.Item>\n          </>\n        )}\n      </DataList.Root>\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      <DataList.Root>\n        <DataList.Item align=\"center\">\n          <DataList.Label minWidth=\"220px\" highContrast>\n            <Strong>\n              <Skeleton>\n                <Translation\n                  defaultMessage=\"Full name\"\n                  id=\"nc7fru\"\n                  description=\"Loading placeholder for full name label\"\n                />\n              </Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\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          </DataList.Value>\n        </DataList.Item>\n\n        <ListSeparator />\n\n        <DataList.Item align=\"center\">\n          <DataList.Label highContrast>\n            <Strong>\n              <Skeleton>\n                <Translation\n                  defaultMessage=\"Email address\"\n                  id=\"gjqw+H\"\n                  description=\"Loading placeholder for email address label\"\n                />\n              </Skeleton>\n            </Strong>\n          </DataList.Label>\n          <DataList.Value>\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          </DataList.Value>\n        </DataList.Item>\n      </DataList.Root>\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 ListSeparator = () => (\n  <Box asChild gridColumn=\"span 2\">\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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CU;AAzCV,oBASO;AACP,sBAAyC;AAEzC,sCAAsC;AACtC,mBAKO;AACP,yBAA2D;AAC3D,2BAA6B;AAC7B,yBAA4B;AAM5B,MAAM,cAA0C,CAAC;AAAA,EAC/C,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB,KAAK,gBACtB,OAAO,QAAQ,KAAK,aAAa,IAIlC,CAAC;AACL,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,YAAY,QAAQ,GAC3D,uDAAC,uBAAS,MAAT,EACE;AAAA,SAAK,qBACJ,4EACE;AAAA,mDAAC,uBAAS,MAAT,EAAc,OAAM,UACnB;AAAA,oDAAC,uBAAS,OAAT,EAAe,UAAS,SAAQ,cAAY,MAC3C,sDAAC,wBACC;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,aAAY;AAAA,YACZ,IAAG;AAAA;AAAA,QACL,GACF,GACF;AAAA,QACA,4CAAC,uBAAS,OAAT,EACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAU,4CAAC,oBAAiB;AAAA,YAC5B,KAAK,KAAK;AAAA;AAAA,QACZ,GACF;AAAA,SACF;AAAA,MAEA,4CAAC,iBAAc;AAAA,OACjB;AAAA,IAGF,6CAAC,uBAAS,MAAT,EAAc,OAAM,UACnB;AAAA,kDAAC,uBAAS,OAAT,EAAe,cAAY,MAC1B,sDAAC,wBACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF;AAAA,MACA,4CAAC,uBAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAU;AAAA,UAEV;AAAA,wDAAC,sBAAK,MAAK,KACR,wCAAY,IAAI,KACf;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAO,EAAE,OAAO,kBAAkB,QAAQ,UAAU;AAAA,gBAEpD;AAAA,kBAAC;AAAA;AAAA,oBACC,gBAAe;AAAA,oBACf,IAAG;AAAA,oBACH,aAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF,GAEJ;AAAA,YAEA,4CAAC,yDAAsB,MACrB,sDAAC,0BAAO,SAAQ,aACd;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF,GACF;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEA,4CAAC,iBAAc;AAAA,IAEf,6CAAC,uBAAS,MAAT,EAAc,OAAM,UACnB;AAAA,kDAAC,uBAAS,OAAT,EAAe,cAAY,MAC1B,sDAAC,wBACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF;AAAA,MACA,4CAAC,uBAAS,OAAT,EACC,sDAAC,sBAAK,OAAM,UAAS,WAAU,kBAC7B,sDAAC,sBAAK,MAAK,KAAK,eAAK,OAAM,GAC7B,GACF;AAAA,OACF;AAAA,IAEC,cAAc,SAAS,KACtB,4EACE;AAAA,kDAAC,iBAAc;AAAA,MAEf,6CAAC,uBAAS,MAAT,EACC;AAAA,oDAAC,uBAAS,OAAT,EAAe,cAAY,MAC1B,sDAAC,wBACC;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA;AAAA,QACd,GACF,GACF;AAAA,QACA,4CAAC,uBAAS,OAAT,EACC,sDAAC,sBAAK,WAAU,UAAS,KAAI,KAC1B,wBAAc,IAAI,CAAC,CAAC,SAAS,IAAI,MAChC;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA,OAAO,MAAM;AAAA;AAAA,UAFR;AAAA,QAGP,CACD,GACH,GACF;AAAA,SACF;AAAA,OACF;AAAA,KAEJ,GACF;AAEJ;AAIA,MAAM,qBAAwD,CAAC,UAAU;AACvE,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,WAAW,KAAK,GACvD,uDAAC,uBAAS,MAAT,EACC;AAAA,iDAAC,uBAAS,MAAT,EAAc,OAAM,UACnB;AAAA,kDAAC,uBAAS,OAAT,EAAe,UAAS,SAAQ,cAAY,MAC3C,sDAAC,wBACC,sDAAC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF,GACF;AAAA,MACA,4CAAC,uBAAS,OAAT,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAU;AAAA,UAEV,sDAAC,sBAAK,MAAK,KACT,sDAAC,4BACC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF,GACF;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,IAEA,4CAAC,iBAAc;AAAA,IAEf,6CAAC,uBAAS,MAAT,EAAc,OAAM,UACnB;AAAA,kDAAC,uBAAS,OAAT,EAAe,cAAY,MAC1B,sDAAC,wBACC,sDAAC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF,GACF;AAAA,MACA,4CAAC,uBAAS,OAAT,EACC,sDAAC,sBAAK,OAAM,UAAS,WAAU,kBAC7B,sDAAC,sBAAK,MAAK,KACT,sDAAC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF,GACF,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAMA,MAAM,mBAAoD,CAAC;AAAA,EACzD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,SAAS,QAAQ,GACxD,sDAAC,qCAAa,OAAc,GAC9B;AAEJ;AAEA,MAAM,gBAAgB,MACpB,4CAAC,qBAAI,SAAO,MAAC,YAAW,UACtB,sDAAC,uBAAM,MAAK,KACV,sDAAC,2BAAU,MAAK,KAAI,GACtB,GACF;AAGF,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,WAAO,iCAAa,OAAO;AACjC,SACE,6CAAC,sBAAK,OAAM,UAAS,KAAI,KACvB;AAAA,gDAAC,gCAAU,SAAkB;AAAA,IAC7B,4CAAC,sBAAK,MAAK,KAAI,IAAG,KACf,gBACH;AAAA,IACC,SACC,6CAAC,qBAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,WAAW,GAE9C;AAAA,kDAAC,sBAAK,MAAK,KAAI,OAAM,QAAO,oBAE5B;AAAA,MACA,4CAAC,sBAAK,MAAK,KAAI,OAAM,QAClB,iBACH;AAAA,OACF;AAAA,KAEJ;AAEJ;AAEA,MAAM,mBAAmB,MACvB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,SAAQ;AAAA,IAGR;AAAA,kDAAC,WAAM,uBAAS;AAAA,MAChB,4CAAC,UAAK,GAAE,mPAAkP;AAAA;AAAA;AAC5P;AAGF,SAAS,sBACP,OACA,UACA;AACA,aAAO,0BAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

package/dist/cjs/lib/user-security.cjs

@@ -46,6 +46,8 @@ var import_reset_mfa_dialog = require("./reset-mfa-dialog.js");
 var CardList = __toESM(require("./card-list.js"), 1);
 var import_generic_error = require("./generic-error.js");
 var import_utils = require("./utils.js");
+var import_translation = require("./i18n/translation.js");
+var import_use_locale = require("./i18n/use-locale.js");
 const UserSecurity = ({
   settings,
   ...domProps
@@ -73,55 +75,155 @@ const UserSecurityLoading = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Password" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", size: "2", color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Set a password to access your account" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Password",
+          id: "z19aZa",
+          description: "Label for password security settings section"
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", size: "2", color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Set a password to access your account",
+          id: "leodiT",
+          description: "Description for setting up a password"
+        }
+      ) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_change_password_dialog.ChangePasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: "Change" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_change_password_dialog.ChangePasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Change",
+        id: "/ZV6cj",
+        description: "Button label to change password"
+      }
+    ) }) }) })
   ] }) });
 };
 function PasswordSettings({
   settings
 }) {
+  const locale = (0, import_use_locale.useLocale)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.LockClosedIcon, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: "Password" }),
-      settings.isSetUp ? settings.lastUsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", color: "gray", children: [
-        "Last used",
-        " ",
-        (0, import_utils.getComparativeReadableDate)(
-          /* @__PURE__ */ new Date(),
-          new Date(settings.lastUsed)
-        )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", size: "2", color: "gray", children: "Set a password to access your account" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Password",
+          id: "z19aZa",
+          description: "Label for password security settings section"
+        }
+      ) }),
+      settings.isSetUp ? settings.lastUsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Last used {time}",
+          id: "Jqn+r+",
+          description: "Label indicating when password was last used with time",
+          values: {
+            time: (0, import_utils.getComparativeReadableDate)(
+              /* @__PURE__ */ new Date(),
+              new Date(settings.lastUsed),
+              { locale }
+            )
+          }
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", size: "2", color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Set a password to access your account",
+          id: "leodiT",
+          description: "Description for setting up a password"
+        }
+      ) })
     ] }),
-    settings.isSetUp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_change_password_dialog.ChangePasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: "Change" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_set_password_dialog.SetPasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: "Set a password" }) })
+    settings.isSetUp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_change_password_dialog.ChangePasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Change",
+        id: "/ZV6cj",
+        description: "Button label to change password"
+      }
+    ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_set_password_dialog.SetPasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Set a password",
+        id: "zokPvK",
+        description: "Button label to set a new password"
+      }
+    ) }) })
   ] });
 }
 function MfaSettings({
   settings,
   isPasswordSet
 }) {
+  const locale = (0, import_use_locale.useLocale)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "auto 1fr auto", align: "center", gap: "4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ButtonIcon, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: "Multi-factor authentication" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Multi-factor authentication",
+          id: "f3uhhm",
+          description: "Label for multi-factor authentication settings section"
+        }
+      ) }),
       settings.isSetUp ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", children: [
-        "Authenticator app",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_translation.Translation,
+          {
+            defaultMessage: "Authenticator app",
+            id: "0p/a72",
+            description: "Label indicating MFA is set up with an authenticator app"
+          }
+        ),
         settings.lastUsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", mx: "1", children: "\u2219" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", color: "gray", children: [
-            "Last used",
-            " ",
-            (0, import_utils.getComparativeReadableDate)(
-              /* @__PURE__ */ new Date(),
-              new Date(settings.lastUsed)
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Last used {time}",
+              id: "h3R6gY",
+              description: "Label indicating when MFA was last used with time",
+              values: {
+                time: (0, import_utils.getComparativeReadableDate)(
+                  /* @__PURE__ */ new Date(),
+                  new Date(settings.lastUsed),
+                  { locale }
+                )
+              }
+            }
+          ) })
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", size: "2", color: "gray", children: "Secure your account with an extra verification step" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", size: "2", color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Secure your account with an extra verification step",
+          id: "xZFdkq",
+          description: "Description for setting up multi-factor authentication"
+        }
+      ) })
     ] }),
-    settings.isSetUp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reset_mfa_dialog.ResetMfaDialog, { isPasswordSet, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: "Disable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_add_mfa_dialog.AddMfaDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: "Set up authenticator app" }) })
+    settings.isSetUp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reset_mfa_dialog.ResetMfaDialog, { isPasswordSet, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Disable",
+        id: "4flMgv",
+        description: "Button label to disable multi-factor authentication"
+      }
+    ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_add_mfa_dialog.AddMfaDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Set up authenticator app",
+        id: "oLNIQv",
+        description: "Button label to set up multi-factor authentication with an authenticator app"
+      }
+    ) }) })
   ] });
 }
 function getWidgetRootDomProps(state, domProps) {