npm - @workos-inc/widgets - Versions diffs - 1.7.2 → 1.8.1 - Mend

@workos-inc/widgets 1.7.2 → 1.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1500) hide show

package/dist/cjs/lib/users-management.cjs CHANGED Viewed

@@ -49,6 +49,9 @@ var import_constants = require("./constants.js");
 var import_users_management_context = require("./users-management-context.js");
 var import_generic_error = require("./generic-error.js");
 var import_react_icons = require("@radix-ui/react-icons");
+var import_translation = require("./i18n/translation.js");
+var import_use_translation = require("./i18n/use-translation.js");
+var import_use_locale = require("./i18n/use-locale.js");
 const UsersManagement = ({
   userData,
   rolesData,
@@ -62,6 +65,7 @@ const UsersManagement = ({
   const { listMetadata: pagination = {} } = userData;
   const { dispatch } = (0, import_users_management_context.useUsersManagementContext)();
   const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;
+  const translate = (0, import_use_translation.useTranslation)();
   const [deferredLoading, setDeferredLoading] = React.useState(false);
   React.useEffect(() => {
     if (isPending) {
@@ -94,13 +98,48 @@ const UsersManagement = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_invite_user_dialog.InviteUserDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { children: "Invite user" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_invite_user_dialog.InviteUserDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Invite user",
+              id: "NBXpRj",
+              description: "Button text to invite a new user to the organization"
+            }
+          ) }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: "User" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: `Role${isMultipleRolesEnabled ? "s" : ""}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: "Last active" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "User",
+                id: "BBh86k",
+                description: "Column header for user information in the users table"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: isMultipleRolesEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Roles",
+                id: "A1DuWM",
+                description: "Column header for user roles when multiple roles are enabled"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Role",
+                id: "nQbe+Y",
+                description: "Column header for user role when only single role is allowed"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Last active",
+                id: "oOwLGt",
+                description: "Column header showing when users were last active"
+              }
+            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "28px" })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -174,8 +213,11 @@ const UsersManagement = ({
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_actions_dropdown.UserActionsDropdown, { user, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_elements.IconButton,
                     {
-                      title: "User actions",
-                      "aria-label": "User actions",
+                      title: translate({
+                        defaultMessage: "User actions",
+                        id: "1nsmNS",
+                        description: "Button tooltip for opening user actions menu"
+                      }),
                       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {})
                     }
                   ) }) })
@@ -200,7 +242,14 @@ const UsersManagement = ({
                   });
                 }
               },
-              children: "Previous"
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_translation.Translation,
+                {
+                  defaultMessage: "Previous",
+                  id: "910Q6b",
+                  description: "Button text to navigate to the previous page of users"
+                }
+              )
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -218,7 +267,14 @@ const UsersManagement = ({
                   });
                 }
               },
-              children: "Next"
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_translation.Translation,
+                {
+                  defaultMessage: "Next",
+                  id: "UlAY08",
+                  description: "Button text to navigate to the next page of users"
+                }
+              )
             }
           )
         ] }) : null
@@ -227,6 +283,15 @@ const UsersManagement = ({
   ) });
 };
 const UsersManagementLoading = (props) => {
+  const translate = (0, import_use_translation.useTranslation)();
+  const placeholderText = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "All",
+      id: "l/Do9/",
+      description: "Filter option to show all users"
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_themes.Flex,
     {
@@ -236,19 +301,57 @@ const UsersManagementLoading = (props) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Grid, { columns: "1fr auto", gap: "2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextField, {}) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Select.Root, { value: "all", onValueChange: () => void 0, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Trigger, { children: "All" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Item, { value: "all", children: "All" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_elements.TextField,
+              {
+                disabled: true,
+                "aria-label": translate({
+                  defaultMessage: "User search",
+                  id: "lzPOKv",
+                  description: "Label for the user search input field"
+                })
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Select.Root, { disabled: true, value: "all", onValueChange: () => void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Trigger, { children: placeholderText }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Select.Item, { value: "all", children: placeholderText }) })
             ] }) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { children: "Invite user" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Invite user",
+              id: "NBXpRj",
+              description: "Button text to invite a new user to the organization"
+            }
+          ) }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Root, { variant: "ghost", size: "1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: "User" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Role" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Last active" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "260px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "User",
+                id: "BBh86k",
+                description: "Column header for user information in the users table"
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "100px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Role",
+                id: "FK7mP4",
+                description: "Column header for user role"
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "140px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Last active",
+                id: "oOwLGt",
+                description: "Column header showing when users were last active"
+              }
+            ) }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.ColumnHeaderCell, { width: "28px" })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Body, { children: Array.from({ length: import_constants.USER_ROW_LIMIT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { align: "center", children: [
@@ -273,8 +376,22 @@ const UsersManagementLoading = (props) => {
           ] }, index)) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", size: "1", children: "Previous" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", size: "1", children: "Next" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { disabled: true, variant: "secondary", size: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Previous",
+              id: "910Q6b",
+              description: "Button text to navigate to the previous page of users"
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { disabled: true, variant: "secondary", size: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Next",
+              id: "UlAY08",
+              description: "Button text to navigate to the next page of users"
+            }
+          ) }) })
         ] })
       ]
     }
@@ -295,24 +412,73 @@ const UsersManagementError = ({
 };
 function UserBadge({ user }) {
   if (user.isLoggedInUser) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Badge, { color: "gray", style: { userSelect: "none" }, children: "You" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Badge, { color: "gray", style: { userSelect: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "You",
+        id: "ER1Vmv",
+        description: "Badge indicating the current logged-in user"
+      }
+    ) });
   }
   if (user.status === "Invited") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "amber", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: " }),
-      "Invited"
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Status: ",
+          id: "E2o/+H",
+          description: "Prefix for status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Invited",
+          id: "byIkUu",
+          description: "Badge status indicating user has been invited but not yet accepted"
+        }
+      )
     ] });
   }
   if (user.status === "InviteExpired") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "red", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: Invite " }),
-      "Expired"
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Status: Invite ",
+          id: "BWvbwY",
+          description: "Prefix for invite status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Expired",
+          id: "+0sQaN",
+          description: "Badge status indicating user invitation has expired"
+        }
+      )
     ] });
   }
   if (user.status === "InviteRevoked") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Badge, { color: "red", style: { userSelect: "none" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Status: Invite " }),
-      "Revoked"
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Status: Invite ",
+          id: "BWvbwY",
+          description: "Prefix for invite status indicator in screen reader"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Revoked",
+          id: "NNBv+r",
+          description: "Badge status indicating user invitation has been revoked"
+        }
+      )
     ] });
   }
   return null;
@@ -320,7 +486,21 @@ function UserBadge({ user }) {
 function LastActive(props) {
   if (!props.user.lastActivityAt) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: props.user.status === "Active" ? "Never" : "Not active" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: props.user.status === "Active" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Never",
+          id: "0duvF4",
+          description: "Screen reader text indicating user has never been active"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Not active",
+          id: "hd2+kk",
+          description: "Screen reader text indicating user is not active"
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, {})
     ] });
   }
@@ -331,10 +511,11 @@ function LastActiveImpl({
   isHydrated,
   dim
 }) {
+  const locale = (0, import_use_locale.useLocale)();
   const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {
     const defaultTimeZone = "America/Los_Angeles";
     const lastActiveDate = new Date(date);
-    const lastActiveDateTime2 = lastActiveDate.toLocaleTimeString("en-US", {
+    const lastActiveDateTime2 = lastActiveDate.toLocaleTimeString(locale, {
       // hard-coded timezone before hydration to prevent server/client mismatch
       timeZone: isHydrated ? void 0 : defaultTimeZone,
       month: "long",
@@ -343,18 +524,28 @@ function LastActiveImpl({
       hour: "numeric",
       minute: "numeric"
     });
-    const lastActiveDisplay2 = isHydrated ? (0, import_utils.getComparativeReadableDate)(/* @__PURE__ */ new Date(), lastActiveDate) : lastActiveDate.toLocaleDateString("en-US", {
+    const lastActiveDisplay2 = isHydrated ? (0, import_utils.getComparativeReadableDate)(/* @__PURE__ */ new Date(), lastActiveDate, { locale }) : lastActiveDate.toLocaleDateString(locale, {
       // hard-coded timezone to prevent server/client mismatch
       timeZone: defaultTimeZone,
       month: "long",
       day: "numeric",
       year: "numeric"
     });
-    return { lastActiveDateTime: lastActiveDateTime2, lastActiveDisplay: lastActiveDisplay2 };
-  }, [isHydrated, date]);
+    return {
+      lastActiveDateTime: lastActiveDateTime2,
+      lastActiveDisplay: lastActiveDisplay2
+    };
+  }, [isHydrated, date, locale]);
   if (lastActiveDisplay === "Invalid Date") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "Unknown" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Unknown",
+          id: "UUigrK",
+          description: "Screen reader text indicating last active date is unknown"
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, {})
     ] });
   }
@@ -415,15 +606,17 @@ const UsersManagementEmptyState = ({ isPending }) => {
   }
   if (searchQuery || isClearing) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", justify: "center", py: "8", direction: "column", gap: "2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", children: [
-        "No users found for query",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { weight: "medium", children: [
-          "\u201C",
-          isClearing ? lastSearchQuery : searchQuery,
-          "\u201D"
-        ] })
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "No users found for query '{query}'",
+          id: "wrEZ8+",
+          description: "Message shown when no users match the search query",
+          values: {
+            query: isClearing ? lastSearchQuery : searchQuery
+          }
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_elements.Button,
         {
@@ -434,12 +627,26 @@ const UsersManagementEmptyState = ({ isPending }) => {
             clearSearch();
           },
           loading: isPending,
-          children: "Clear search"
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Clear search",
+              id: "Xv3fVI",
+              description: "Button text to clear the current search query"
+            }
+          )
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: "No users found" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { align: "center", justify: "center", py: "8", gap: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "No users found",
+      id: "MQ+LoA",
+      description: "Message shown when there are no users in the system"
+    }
+  ) }) });
 };
 function UserRolesCellContent({
   user,
@@ -448,19 +655,28 @@ function UserRolesCellContent({
 }) {
   if (!user.roles || user.roles.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "No roles assigned" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "No roles assigned",
+          id: "CVOVB0",
+          description: "Screen reader text indicating user has no roles assigned"
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, style: { userSelect: "none" }, children: "\u2013" })
     ] });
   }
   if (isMultipleRolesEnabled && user.roles.length > 1) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_themes.Tooltip,
+    const roleNames = user.roles?.map((role) => role.name).join(", ");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Tooltip, { content: roleNames, maxWidth: "250px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
       {
-        content: user.roles?.map((role) => role.name).join(", "),
-        maxWidth: "250px",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: (0, import_utils.pluralize)("role", user.roles.length) })
+        defaultMessage: "{count} roles",
+        id: "lWAmRC",
+        description: "Shows the number of roles assigned to a user (plural)",
+        values: { count: user.roles.length }
       }
-    );
+    ) }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: user.roles?.[0]?.name });
 }