@workos-inc/widgets 1.5.1 → 1.6.0

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

@@ -47,13 +47,13 @@ var import_users_search = require("./users-search.js");
 var import_utils = require("./utils.js");
 var import_constants = require("./constants.js");
 var import_users_management_context = require("./users-management-context.js");
-var import_clsx = __toESM(require("clsx"), 1);
 var import_generic_error = require("./generic-error.js");
 const UsersManagement = ({
   userData,
   rolesData,
   isPending,
-  disableRolesFilter
+  disableRolesFilter,
+  ...domProps
 }) => {
   const users = userData?.data ?? [];
   const usersCount = users?.length ?? 0;
@@ -75,237 +75,237 @@ const UsersManagement = ({
     }
   }, [isPending]);
   const showPagination = !!(pagination.before || pagination.after);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_search_provider.SearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(UsersManagementRoot, { 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_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_users_search.UsersSearch, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_users_filter.UsersFilter,
-          {
-            roles: rolesData.roles,
-            disabled: disableRolesFilter
-          }
-        ) })
-      ] }),
-      /* @__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.PrimaryButton, { children: "Invite user" }) }) })
-    ] }),
-    /* @__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: "28px" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_themes.Table.Body,
-        {
-          style: {
-            transition: `opacity 0.2s ease-out ${isPending ? "0.2s" : "0s"}`,
-            opacity: isPending && usersCount > 0 ? 0.5 : 1
-          },
-          children: users.length > 0 ? users.map((user) => {
-            const userDisplayName = (0, import_utils.getBestName)(user);
-            const dimText = user.status === "InviteRevoked" || user.status === "InviteExpired";
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.RowHeaderCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_themes.Flex,
-                {
-                  align: "center",
-                  gap: "3",
-                  overflow: "hidden",
-                  height: "var(--space-7)",
-                  children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_search_provider.SearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Flex,
+    {
+      direction: "column",
+      gap: "3",
+      ...getWidgetRootDomProps("resolved", domProps),
+      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_themes.Box, { flexBasis: "380px", flexGrow: "0", flexShrink: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_users_search.UsersSearch, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { flexGrow: "0", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_users_filter.UsersFilter,
+              {
+                roles: rolesData.roles,
+                disabled: disableRolesFilter
+              }
+            ) })
+          ] }),
+          /* @__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.PrimaryButton, { children: "Invite user" }) }) })
+        ] }),
+        /* @__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: "28px" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_themes.Table.Body,
+            {
+              style: {
+                transition: `opacity 0.2s ease-out ${isPending ? "0.2s" : "0s"}`,
+                opacity: isPending && usersCount > 0 ? 0.5 : 1
+              },
+              children: users.length > 0 ? users.map((user) => {
+                const userDisplayName = (0, import_utils.getBestName)(user);
+                const dimText = user.status === "InviteRevoked" || user.status === "InviteExpired";
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Table.Row, { align: "center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.RowHeaderCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_themes.Flex,
+                    {
+                      align: "center",
+                      gap: "3",
+                      overflow: "hidden",
+                      height: "var(--space-7)",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_elements.Avatar,
+                          {
+                            size: "2",
+                            fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackUserIcon, {}),
+                            src: user.profilePictureUrl ?? void 0,
+                            dim: dimText
+                          }
+                        ),
+                        userDisplayName ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          import_themes.Flex,
+                          {
+                            direction: "column",
+                            align: "start",
+                            height: "var(--space-7)",
+                            justify: "center",
+                            overflow: "hidden",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", minWidth: "0", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: userDisplayName }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserBadge, { user })
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                TableCellText,
+                                {
+                                  level: "secondary",
+                                  title: user.email,
+                                  dim: dimText,
+                                  children: user.email
+                                }
+                              )
+                            ]
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", minWidth: "0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, title: user.email, children: user.email }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserBadge, { user })
+                        ] })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    UserRolesCellContent,
+                    {
+                      user,
+                      isMultipleRolesEnabled,
+                      dimText
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LastActive, { user, isHydrated }) }),
+                  /* @__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.jsxs)(import_elements.IconButton, { title: "User actions", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "User actions" }),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_elements.Avatar,
+                      "svg",
                       {
-                        size: "2",
-                        fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackUserIcon, {}),
-                        src: user.profilePictureUrl ?? void 0,
-                        dim: dimText
-                      }
-                    ),
-                    userDisplayName ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                      import_themes.Flex,
-                      {
-                        direction: "column",
-                        align: "start",
-                        height: "var(--space-7)",
-                        justify: "center",
-                        overflow: "hidden",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", minWidth: "0", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: userDisplayName }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserBadge, { user })
-                          ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            TableCellText,
-                            {
-                              level: "secondary",
-                              title: user.email,
-                              dim: dimText,
-                              children: user.email
-                            }
-                          )
-                        ]
-                      }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", align: "center", minWidth: "0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, title: user.email, children: user.email }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserBadge, { user })
-                    ] })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                UserRolesCellContent,
-                {
-                  user,
-                  isMultipleRolesEnabled,
-                  dimText
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LastActive, { user, isHydrated }) }),
-              /* @__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.jsxs)(import_elements.IconButton, { title: "User actions", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: "User actions" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    width: "16",
-                    height: "16",
-                    strokeWidth: 1.5,
-                    stroke: "currentColor",
-                    "aria-hidden": true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        d: "M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+                        xmlns: "http://www.w3.org/2000/svg",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        width: "16",
+                        height: "16",
+                        strokeWidth: 1.5,
+                        stroke: "currentColor",
+                        "aria-hidden": true,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            d: "M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+                          }
+                        )
                       }
                     )
-                  }
-                )
-              ] }) }) })
-            ] }, user.id);
-          }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Row, { align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { colSpan: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsersManagementEmptyState, { isPending }) }) })
-        }
-      )
-    ] }),
-    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_elements.SecondaryButton,
-        {
-          size: "1",
-          disabled: !pagination.after || isPending || void 0,
-          loading: deferredLoading,
-          onClick: () => {
-            if (pagination.after) {
-              dispatch({
-                type: "SET_PAGINATION",
-                pagination: { after: pagination.after }
-              });
+                  ] }) }) })
+                ] }, user.id);
+              }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Row, { align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { colSpan: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsersManagementEmptyState, { isPending }) }) })
             }
-          },
-          children: "Previous"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_elements.SecondaryButton,
-        {
-          size: "1",
-          disabled: !pagination.before || isPending || void 0,
-          loading: deferredLoading,
-          onClick: () => {
-            if (pagination.before) {
-              dispatch({
-                type: "SET_PAGINATION",
-                pagination: { before: pagination.before }
-              });
+          )
+        ] }),
+        showPagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_elements.SecondaryButton,
+            {
+              size: "1",
+              disabled: !pagination.after || isPending || void 0,
+              loading: deferredLoading,
+              onClick: () => {
+                if (pagination.after) {
+                  dispatch({
+                    type: "SET_PAGINATION",
+                    pagination: { after: pagination.after }
+                  });
+                }
+              },
+              children: "Previous"
             }
-          },
-          children: "Next"
-        }
-      )
-    ] }) : null
-  ] }) });
-};
-const UsersManagementLoading = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(UsersManagementRoot, { 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_themes.Select.Root, { value: "all", onValueChange: () => void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectTrigger, { children: "All" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { 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, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { children: "Invite user" }) }) })
-    ] }),
-    /* @__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: "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: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.RowHeaderCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Avatar, { size: "2", fallback: "F" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_themes.Flex,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_elements.SecondaryButton,
             {
-              direction: "column",
-              height: "var(--space-7)",
-              justify: "center",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "180px", height: "var(--space-4)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "90px", height: "var(--space-3)", mt: "1" })
-              ]
+              size: "1",
+              disabled: !pagination.before || isPending || void 0,
+              loading: deferredLoading,
+              onClick: () => {
+                if (pagination.before) {
+                  dispatch({
+                    type: "SET_PAGINATION",
+                    pagination: { before: pagination.before }
+                  });
+                }
+              },
+              children: "Next"
             }
           )
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { wrap: "wrap", gap: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "75px", height: "var(--space-4)" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "120px", height: "var(--space-4)" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end" })
-      ] }, 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.SecondaryButton, { size: "1", children: "Previous" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { size: "1", children: "Next" }) })
-    ] })
-  ] });
+        ] }) : null
+      ]
+    }
+  ) });
 };
-function UsersManagementError({ error }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    UsersManagementRoot,
+const UsersManagementLoading = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Flex,
     {
-      direction: "row",
-      justify: "center",
-      align: "center",
-      minHeight: "676px",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error })
+      direction: "column",
+      gap: "3",
+      ...getWidgetRootDomProps("loading", 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_themes.Select.Root, { value: "all", onValueChange: () => void 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectTrigger, { children: "All" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { 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, { flexGrow: "0", flexShrink: "0", style: { placeSelf: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { children: "Invite user" }) }) })
+        ] }),
+        /* @__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: "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: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.RowHeaderCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Avatar, { size: "2", fallback: "F" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_themes.Flex,
+                {
+                  direction: "column",
+                  height: "var(--space-7)",
+                  justify: "center",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "180px", height: "var(--space-4)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "90px", height: "var(--space-3)", mt: "1" })
+                  ]
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { wrap: "wrap", gap: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "75px", height: "var(--space-4)" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { width: "120px", height: "var(--space-4)" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Table.Cell, { justify: "end" })
+          ] }, 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.SecondaryButton, { size: "1", children: "Previous" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { loading: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { size: "1", children: "Next" }) })
+        ] })
+      ]
     }
   );
-}
-function UsersManagementRoot({
-  className,
-  children,
-  ...props
-}) {
+};
+const UsersManagementError = ({
+  error,
+  ...domProps
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_themes.Flex,
+    import_generic_error.GenericError,
     {
-      className: (0, import_clsx.default)("woswidgets-widget", className),
-      "data-woswidgets-widget-id": "users-management",
-      direction: "column",
-      gap: "3",
-      ...props,
-      children
+      error,
+      minHeight: "676px",
+      ...getWidgetRootDomProps("error", domProps)
     }
   );
-}
+};
 function UserBadge({ user }) {
   if (user.isLoggedInUser) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Badge, { color: "gray", style: { userSelect: "none" }, children: "You" });
@@ -476,6 +476,14 @@ function UserRolesCellContent({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellText, { dim: dimText, children: user.roles?.[0]?.name });
 }
+function getWidgetRootDomProps(state, domProps) {
+  return (0, import_utils.getDomProps)({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "users-management",
+    widgetState: state
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   UsersManagement,