alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/dashboard/app/pages/UsersPage.js

@@ -1,18 +1,10 @@
-import "../../../chunks/chunk-NUFRM6SI.js";
 import {
-  useAtom,
   useAtomValueRaw,
   useSetAtom
 } from "../../../chunks/chunk-D6UJHBJJ.js";
 import {
   atom
 } from "../../../chunks/chunk-CFNRVI3Y.js";
-import {
-  $232f8dea1b0a4f2f$export$762f73dccccd255d
-} from "../../../chunks/chunk-NIVGVRDS.js";
-import "../../../chunks/chunk-IYAQC63Y.js";
-import "../../../chunks/chunk-AC4U3IMS.js";
-import "../../../chunks/chunk-SJBZFMQ2.js";
 import {
   dist_default
 } from "../../../chunks/chunk-I4OYYAX5.js";
@@ -20,145 +12,108 @@ import "../../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/pages/UsersPage.tsx
 import {
+  Alert,
+  Badge,
+  AlertDescription,
+  AppShell,
+  AppShellContent,
   Button,
-  Cell,
-  Column,
+  Dialog,
   DialogTrigger,
-  Icon,
-  Menu,
-  MenuItem,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   MultipleSelect,
+  NavRail,
+  NavRailContent,
+  NavRailFooter,
+  NavRailItem,
+  Page as PageLayout,
+  PageHeader,
+  PageTitle,
   MultipleSelectItem,
-  ProgressCircle,
-  Row,
   SearchField,
   Table,
-  TableBody,
-  TableHeader,
-  Tag,
-  TextField
+  TableCell,
+  TableRow,
+  Text,
+  TextField,
+  useDialog
 } from "alinea/components";
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { clientAtom, configAtom } from "../../atoms/core.js";
 import { page, routeAtom } from "../../atoms/nav.js";
-import { IcRoundAdd, IcRoundArrowBack, IcRoundMoreHoriz } from "../../icons.js";
+import {
+  IcBaselineErrorOutline,
+  IcRoundAdd,
+  IcRoundArrowBack,
+  IcRoundMoreHoriz,
+  IcRoundSearch
+} from "../../icons.js";
 import { ActivityStatus } from "../ActivityStatus.js";
-import { AppShell, AppShellContent, AppShellInner } from "../AppShell.js";
-import { Badge } from "../Badge.js";
 import {
   DashboardModal,
   DashboardModalContent,
   DashboardModalDialog,
-  DashboardModalFooter,
-  useDashboardModal
+  DashboardModalFooter
 } from "../ui/DashboardModal.js";
-import { SidebarHeader } from "../ui/Sidebar.js";
 
 // src/dashboard/app/pages/UsersPage.module.css
 var UsersPage_default = {
-  "UsersPageSidebar-nav": "alinea-UsersPageSidebar-nav",
-  "UsersPageSidebarNav": "alinea-UsersPageSidebar-nav",
-  "UsersPageSidebar": "alinea-UsersPageSidebar",
   "UsersPage-header": "alinea-UsersPage-header",
   "UsersPageHeader": "alinea-UsersPage-header",
-  "UsersPage-header-title": "alinea-UsersPage-header-title",
-  "UsersPageHeaderTitle": "alinea-UsersPage-header-title",
-  "UsersPage-rolesCell": "alinea-UsersPage-rolesCell",
-  "UsersPageRolesCell": "alinea-UsersPage-rolesCell",
-  "UsersPage-status": "alinea-UsersPage-status",
-  "UsersPageStatus": "alinea-UsersPage-status",
-  "UsersPage-roles": "alinea-UsersPage-roles",
-  "UsersPageRoles": "alinea-UsersPage-roles",
-  "UsersPage": "alinea-UsersPage",
-  "UsersPage-empty": "alinea-UsersPage-empty",
-  "UsersPageEmpty": "alinea-UsersPage-empty",
-  "UsersPage-form-error": "alinea-UsersPage-form-error",
-  "UsersPageFormError": "alinea-UsersPage-form-error",
-  "UsersPage-confirmation": "alinea-UsersPage-confirmation",
-  "UsersPageConfirmation": "alinea-UsersPage-confirmation",
-  "UsersPage-noRoles": "alinea-UsersPage-noRoles",
-  "UsersPageNoRoles": "alinea-UsersPage-noRoles",
-  "UsersPage-identity-title": "alinea-UsersPage-identity-title",
-  "UsersPageIdentityTitle": "alinea-UsersPage-identity-title",
-  "UsersPageSidebar-icon": "alinea-UsersPageSidebar-icon",
-  "UsersPageSidebarIcon": "alinea-UsersPageSidebar-icon",
-  "UsersPage-status-text": "alinea-UsersPage-status-text",
-  "UsersPageStatusText": "alinea-UsersPage-status-text",
-  "UsersPageSidebar-footer": "alinea-UsersPageSidebar-footer",
-  "UsersPageSidebarFooter": "alinea-UsersPageSidebar-footer",
-  "UsersPageSidebar-item": "alinea-UsersPageSidebar-item",
-  "UsersPageSidebarItem": "alinea-UsersPageSidebar-item",
-  "UsersPage-content": "alinea-UsersPage-content",
-  "UsersPageContent": "alinea-UsersPage-content",
-  "UsersPage-identity-email": "alinea-UsersPage-identity-email",
-  "UsersPageIdentityEmail": "alinea-UsersPage-identity-email",
   "UsersPage-form-fields": "alinea-UsersPage-form-fields",
   "UsersPageFormFields": "alinea-UsersPage-form-fields",
-  "UsersPage-identity-text": "alinea-UsersPage-identity-text",
-  "UsersPageIdentityText": "alinea-UsersPage-identity-text",
-  "UsersPage-identity": "alinea-UsersPage-identity",
-  "UsersPageIdentity": "alinea-UsersPage-identity",
-  "UsersPage-table": "alinea-UsersPage-table",
-  "UsersPageTable": "alinea-UsersPage-table",
+  "UsersPage": "alinea-UsersPage",
   "UsersPage-createButton": "alinea-UsersPage-createButton",
   "UsersPageCreateButton": "alinea-UsersPage-createButton",
+  "UsersPage-table": "alinea-UsersPage-table",
+  "UsersPageTable": "alinea-UsersPage-table",
+  "UsersPage-roles": "alinea-UsersPage-roles",
+  "UsersPageRoles": "alinea-UsersPage-roles",
+  "UsersPage-content": "alinea-UsersPage-content",
+  "UsersPageContent": "alinea-UsersPage-content",
   "UsersPage-search": "alinea-UsersPage-search",
-  "UsersPageSearch": "alinea-UsersPage-search"
+  "UsersPageSearch": "alinea-UsersPage-search",
+  "UsersPage-status": "alinea-UsersPage-status",
+  "UsersPageStatus": "alinea-UsersPage-status",
+  "UsersPage-identity": "alinea-UsersPage-identity",
+  "UsersPageIdentity": "alinea-UsersPage-identity"
 };
 
 // src/dashboard/app/pages/UsersPage.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(UsersPage_default);
 var userColumns = [
-  { id: "user", name: "User", isRowHeader: true },
-  { id: "roles", name: "Roles" }
+  { id: "user", header: "User", minWidth: 200 },
+  { id: "roles", header: "Roles", minWidth: 160 },
+  { id: "actions", header: null, width: 52, align: "end" }
 ];
-var usersStateAtom = atom({
-  status: "loading",
-  users: []
+var usersPageOpenAtom = atom((get) => get(routeAtom).page === "users");
+var visitUsersAtom = atom((get) => {
+  if (!get(usersPageOpenAtom)) return void 0;
+  return atom(get(clientAtom).listUsers());
 });
 var usersAtom = atom(
-  (get) => get(usersStateAtom),
+  async (get) => {
+    const users = get(visitUsersAtom);
+    return users ? get(users) : [];
+  },
   async (get, set, action) => {
     const client = get(clientAtom);
-    if (action.type === "load") {
-      const current = get(usersStateAtom);
-      set(usersStateAtom, { ...current, error: void 0, status: "loading" });
-      try {
-        const users = await client.listUsers();
-        set(usersStateAtom, { status: "loaded", users });
-      } catch (cause) {
-        set(usersStateAtom, {
-          error: cause instanceof Error ? cause.message : String(cause),
-          status: "error",
-          users: current.users
-        });
-      }
-      return void 0;
-    }
+    let update;
     if (action.type === "remove") {
       await client.removeUser(action.email);
-      set(usersStateAtom, (current) => {
-        return {
-          status: "loaded",
-          users: removeUser(current.users, action.email)
-        };
-      });
-      return void 0;
+      update = (users2) => removeUser(users2, action.email);
+    } else {
+      const saved = action.type === "create" ? await client.createUser(action.user) : await client.updateUser(action.user);
+      update = (users2) => upsertUser(users2, saved);
     }
-    const saved = action.type === "create" ? await client.createUser(action.user) : await client.updateUser(action.user);
-    set(usersStateAtom, (current) => {
-      return {
-        status: "loaded",
-        users: upsertUser(current.users, saved)
-      };
-    });
-    return saved;
+    const users = get(visitUsersAtom);
+    if (users) set(users, async (current) => update(await current));
   }
 );
-usersAtom.onMount = (dispatch) => {
-  void dispatch({ type: "load" });
-};
 function upsertUser(users, user) {
   const existing = users.findIndex(
     (item) => item.email?.toLowerCase() === user.email?.toLowerCase()
@@ -172,19 +127,24 @@ function removeUser(users, email) {
   const normalized = email.toLowerCase();
   return users.filter((user) => user.email?.toLowerCase() !== normalized);
 }
-var usersPage = page((page2) => {
-  return /* @__PURE__ */ jsx(AppShell, { children: /* @__PURE__ */ jsxs(AppShellInner, { children: [
+var usersPage = page(async (page2, get) => {
+  let users = [];
+  let error;
+  try {
+    users = await get(usersAtom);
+  } catch (cause) {
+    error = cause instanceof Error ? cause.message : String(cause);
+  }
+  return /* @__PURE__ */ jsxs(AppShell, { children: [
     /* @__PURE__ */ jsx(UsersPageSidebar, { page: page2 }),
-    /* @__PURE__ */ jsx(AppShellContent, { children: /* @__PURE__ */ jsx(UsersPage, {}) })
-  ] }) });
+    /* @__PURE__ */ jsx(AppShellContent, { children: /* @__PURE__ */ jsx(UsersPage, { users, error }) })
+  ] });
 });
-function UsersPage() {
+function UsersPage({ users, error }) {
   const config = useAtomValueRaw(configAtom);
-  const [usersState] = useAtom(usersAtom);
   const [query, setQuery] = useState("");
   const [editingUser, setEditingUser] = useState();
   const [deletingUser, setDeletingUser] = useState();
-  const users = usersState.users;
   const filteredUsers = useMemo(() => {
     const normalized = query.trim().toLowerCase();
     const filtered = normalized ? users.filter((user) => {
@@ -192,25 +152,25 @@ function UsersPage() {
     }) : users;
     return filtered.toSorted(compareUsers);
   }, [config.roles, query, users]);
-  return /* @__PURE__ */ jsxs("div", { className: styles.UsersPage(), children: [
-    /* @__PURE__ */ jsxs(SidebarHeader, { className: styles.UsersPage.header(), children: [
-      /* @__PURE__ */ jsx("div", { className: styles.UsersPage.header.title(), children: "Manage users" }),
+  return /* @__PURE__ */ jsxs(PageLayout, { className: styles.UsersPage(), children: [
+    /* @__PURE__ */ jsxs(PageHeader, { className: styles.UsersPage.header(), children: [
+      /* @__PURE__ */ jsx(PageTitle, { children: "Manage users" }),
       /* @__PURE__ */ jsx(
         SearchField,
         {
           "aria-label": "Search users",
           placeholder: "Search users",
-          hasIcon: true,
+          icon: IcRoundSearch,
           value: query,
-          onChange: setQuery,
+          onValueChange: setQuery,
           className: styles.UsersPage.search()
         }
       ),
-      /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+      /* @__PURE__ */ jsxs(Dialog, { children: [
         /* @__PURE__ */ jsx(
-          Button,
+          DialogTrigger,
           {
-            intent: "primary",
+            color: "primary",
             icon: IcRoundAdd,
             className: styles.UsersPage.createButton(),
             children: "Create user"
@@ -219,7 +179,7 @@ function UsersPage() {
         /* @__PURE__ */ jsx(DashboardModal, { children: /* @__PURE__ */ jsx(UserModal, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: styles.UsersPage.content(), children: usersState.status === "loading" ? /* @__PURE__ */ jsx(UsersPageStatus, { label: "Loading users", pending: true }) : usersState.status === "error" ? /* @__PURE__ */ jsx(UsersPageStatus, { label: usersState.error ?? "Failed to load users" }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles.UsersPage.content(), children: error !== void 0 ? /* @__PURE__ */ jsx(UsersPageStatus, { label: error || "Failed to load users" }) : /* @__PURE__ */ jsx(
       UsersTable,
       {
         users: filteredUsers,
@@ -231,7 +191,7 @@ function UsersPage() {
     /* @__PURE__ */ jsx(
       DashboardModal,
       {
-        isOpen: editingUser !== void 0,
+        open: editingUser !== void 0,
         onOpenChange: (isOpen) => {
           if (!isOpen) setEditingUser(void 0);
         },
@@ -241,7 +201,7 @@ function UsersPage() {
     /* @__PURE__ */ jsx(
       DashboardModal,
       {
-        isOpen: deletingUser !== void 0,
+        open: deletingUser !== void 0,
         onOpenChange: (isOpen) => {
           if (!isOpen) setDeletingUser(void 0);
         },
@@ -259,111 +219,90 @@ function UsersPageSidebar({ page: page2 }) {
       root: page2.root ?? void 0
     });
   }
-  return /* @__PURE__ */ jsxs("aside", { className: styles.UsersPageSidebar(), "aria-label": "Users", children: [
-    /* @__PURE__ */ jsx("nav", { className: styles.UsersPageSidebar.nav(), children: /* @__PURE__ */ jsx(
-      Button,
+  return /* @__PURE__ */ jsxs(NavRail, { "aria-label": "Users", children: [
+    /* @__PURE__ */ jsx(NavRailContent, { children: /* @__PURE__ */ jsx(
+      NavRailItem,
       {
-        "aria-label": "Back to app",
-        appearance: "plain",
-        className: styles.UsersPageSidebar.item(),
-        size: "icon-nav",
-        onPress: handleBack,
-        children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            icon: IcRoundArrowBack,
-            className: styles.UsersPageSidebar.icon()
-          }
-        )
+        icon: IcRoundArrowBack,
+        label: "Back to app",
+        onClick: handleBack
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: styles.UsersPageSidebar.footer(), children: /* @__PURE__ */ jsx(ActivityStatus, { mobilePlacement: "bottom right" }) })
+    /* @__PURE__ */ jsx(NavRailFooter, { children: /* @__PURE__ */ jsx(ActivityStatus, { mobileSide: "bottom", mobileAlign: "end" }) })
   ] });
 }
-function UsersPageStatus({ label, pending }) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.UsersPage.status(), children: [
-    pending && /* @__PURE__ */ jsx(ProgressCircle, { isIndeterminate: true, "aria-label": label }),
-    /* @__PURE__ */ jsx("p", { className: styles.UsersPage.status.text(), children: label })
-  ] });
+function UsersPageStatus({ label }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.UsersPage.status(), children: /* @__PURE__ */ jsx(Text, { as: "p", children: label }) });
 }
 function UsersTable({ onDeactivate, onEdit, users, roleLabel }) {
-  return /* @__PURE__ */ jsxs(Table, { "aria-label": "Users", className: styles.UsersPage.table(), children: [
-    /* @__PURE__ */ jsx(TableHeader, { columns: userColumns, children: (column) => /* @__PURE__ */ jsx(Column, { id: column.id, isRowHeader: column.isRowHeader, children: column.name }) }),
-    /* @__PURE__ */ jsx(
-      TableBody,
-      {
-        items: users,
-        renderEmptyState: () => /* @__PURE__ */ jsx("span", { className: styles.UsersPage.empty(), children: "No users found" }),
-        children: (user) => /* @__PURE__ */ jsx(Row, { id: user.email ?? user.sub, columns: userColumns, children: (column) => /* @__PURE__ */ jsx(Cell, { children: renderUserCell(
-          user,
-          column.id,
-          roleLabel,
-          onEdit,
-          onDeactivate
-        ) }) })
-      }
-    )
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      "aria-label": "Users",
+      items: users,
+      columns: userColumns,
+      rowHeight: 56,
+      className: styles.UsersPage.table(),
+      dependencies: [roleLabel, onEdit, onDeactivate],
+      renderEmptyState: () => /* @__PURE__ */ jsx(Text, { color: "muted", children: "No users found" }),
+      children: (user) => /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          id: user.email ?? user.sub,
+          textValue: [user.name, user.email || user.sub].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(UserIdentity, { user }) }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(UserRoles, { user, roleLabel }) }),
+            /* @__PURE__ */ jsx(TableCell, { align: "end", children: /* @__PURE__ */ jsx(
+              UserActionsMenu,
+              {
+                user,
+                onEdit,
+                onDeactivate
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+function UserIdentity({ user }) {
+  return /* @__PURE__ */ jsxs("span", { className: styles.UsersPage.identity(), children: [
+    user.name && /* @__PURE__ */ jsx(Text, { weight: "semibold", truncate: true, children: user.name }),
+    /* @__PURE__ */ jsx(Text, { color: "muted", truncate: true, children: user.email || user.sub })
   ] });
 }
-function renderUserCell(user, column, roleLabel, onEdit, onDeactivate) {
-  if (column === "user") {
-    return /* @__PURE__ */ jsx("span", { className: styles.UsersPage.identity(), children: /* @__PURE__ */ jsxs("span", { className: styles.UsersPage.identity.text(), children: [
-      user.name && /* @__PURE__ */ jsx("span", { className: styles.UsersPage.identity.title(), children: user.name }),
-      /* @__PURE__ */ jsx("span", { className: styles.UsersPage.identity.email(), children: user.email || user.sub })
-    ] }) });
-  }
+function UserRoles({ user, roleLabel }) {
   const roles = (user.roles ?? []).map((role) => {
     const label = roleLabel(role);
     return label ? { id: role, label } : void 0;
   }).filter((role) => Boolean(role));
-  return /* @__PURE__ */ jsxs("span", { className: styles.UsersPage.rolesCell(), children: [
-    roles.length === 0 ? /* @__PURE__ */ jsx("span", { className: styles.UsersPage.noRoles(), children: "No roles" }) : /* @__PURE__ */ jsx("span", { className: styles.UsersPage.roles(), children: roles.map((role) => /* @__PURE__ */ jsx(Badge, { size: "small", children: role.label }, role.id)) }),
-    /* @__PURE__ */ jsx(
-      UserActionsMenu,
-      {
-        user,
-        onEdit,
-        onDeactivate
-      }
-    )
-  ] });
+  if (roles.length === 0) return /* @__PURE__ */ jsx(Text, { color: "muted", children: "No roles" });
+  return /* @__PURE__ */ jsx("span", { className: styles.UsersPage.roles(), children: roles.map((role) => /* @__PURE__ */ jsx(Badge, { size: "sm", children: role.label }, role.id)) });
 }
 function UserActionsMenu({ user, onDeactivate, onEdit }) {
   const email = user.email;
   const label = user.name || user.email || user.sub;
-  function handleAction(key) {
-    if (key === "edit") {
-      onEdit(user);
-      return;
-    }
-    if (key !== "deactivate" || !email) return;
-    onDeactivate(user);
-  }
-  return /* @__PURE__ */ jsxs(
-    Menu,
-    {
-      "aria-label": `Actions for ${label}`,
-      label: /* @__PURE__ */ jsx(
-        Button,
-        {
-          "aria-label": `Actions for ${label}`,
-          appearance: "plain",
-          size: "icon-small",
-          icon: IcRoundMoreHoriz
-        }
-      ),
-      disabledKeys: email ? void 0 : ["deactivate"],
-      onAction: handleAction,
-      children: [
-        /* @__PURE__ */ jsx(MenuItem, { id: "edit", children: "Edit" }),
-        /* @__PURE__ */ jsx(MenuItem, { id: "deactivate", children: "Deactivate account" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        "aria-label": `Actions for ${label}`,
+        variant: "ghost",
+        size: "icon-sm",
+        icon: IcRoundMoreHoriz
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { "aria-label": `Actions for ${label}`, align: "end", children: [
+      /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: () => onEdit(user), children: "Edit" }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: !email, onSelect: () => onDeactivate(user), children: "Deactivate account" })
+    ] })
+  ] });
 }
 function DeactivateUserModal({ user }) {
   const saveUser = useSetAtom(usersAtom);
-  const modal = useDashboardModal();
+  const modal = useDialog();
   const [isPending, setIsPending] = useState(false);
   const [error, setError] = useState();
   const email = user.email;
@@ -383,21 +322,21 @@ function DeactivateUserModal({ user }) {
   }
   return /* @__PURE__ */ jsxs(DashboardModalDialog, { label: "Deactivate account", children: [
     /* @__PURE__ */ jsx(DashboardModalContent, { children: /* @__PURE__ */ jsxs("div", { className: styles.UsersPage.form.fields(), children: [
-      /* @__PURE__ */ jsxs("p", { className: styles.UsersPage.confirmation(), children: [
+      /* @__PURE__ */ jsxs(Text, { as: "p", children: [
         "Are you sure you want to deactivate ",
         label,
         "? This will remove the user account and role assignments."
       ] }),
-      error && /* @__PURE__ */ jsx("p", { className: styles.UsersPage.form.error(), role: "alert", children: error })
+      error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", icon: IcBaselineErrorOutline, children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) })
     ] }) }),
     /* @__PURE__ */ jsxs(DashboardModalFooter, { children: [
       /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
-          appearance: "outline",
-          intent: "secondary",
-          onPress: modal.close,
+          variant: "outline",
+          color: "secondary",
+          onClick: modal.close,
           children: "Cancel"
         }
       ),
@@ -405,10 +344,10 @@ function DeactivateUserModal({ user }) {
         Button,
         {
           type: "button",
-          intent: "danger",
-          isDisabled: !email,
-          isPending,
-          onPress: handleDeactivate,
+          color: "destructive",
+          disabled: !email,
+          loading: isPending,
+          onClick: handleDeactivate,
           children: "Deactivate account"
         }
       )
@@ -418,7 +357,8 @@ function DeactivateUserModal({ user }) {
 function UserModal({ user }) {
   const config = useAtomValueRaw(configAtom);
   const saveUser = useSetAtom(usersAtom);
-  const modal = useDashboardModal();
+  const modal = useDialog();
+  const formId = useId();
   const isEditing = user !== void 0;
   const [email, setEmail] = useState(user?.email ?? "");
   const [name, setName] = useState(user?.name ?? "");
@@ -429,9 +369,9 @@ function UserModal({ user }) {
       return { id, name: role.label ?? id };
     });
   }, [config.roles]);
-  const selectedRoles = $232f8dea1b0a4f2f$export$762f73dccccd255d({
-    initialItems: (user?.roles ?? []).map((role) => roleItems.find((item) => item.id === role)).filter((item) => Boolean(item))
-  });
+  const [selectedRoles, setSelectedRoles] = useState(
+    () => (user?.roles ?? []).filter((role) => roleItems.some((item) => item.id === role))
+  );
   async function handleSubmit(event) {
     event.preventDefault();
     const userEmail = email.trim();
@@ -446,7 +386,7 @@ function UserModal({ user }) {
       const request = {
         email: userEmail,
         name: userName || void 0,
-        roles: selectedRoles.items.map((item) => String(item.id))
+        roles: selectedRoles
       };
       await saveUser({
         type: isEditing ? "update" : "create",
@@ -460,21 +400,19 @@ function UserModal({ user }) {
     }
   }
   return /* @__PURE__ */ jsxs(DashboardModalDialog, { label: isEditing ? "Edit user" : "Create user", children: [
-    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, id: "submit", children: /* @__PURE__ */ jsx(DashboardModalContent, { children: /* @__PURE__ */ jsxs("div", { className: styles.UsersPage.form.fields(), children: [
+    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, id: formId, children: /* @__PURE__ */ jsx(DashboardModalContent, { children: /* @__PURE__ */ jsxs("div", { className: styles.UsersPage.form.fields(), children: [
       /* @__PURE__ */ jsx(
         TextField,
         {
           label: "Email",
           type: "email",
           value: email,
-          onChange: setEmail,
-          isRequired: true,
-          isDisabled: isEditing,
+          onValueChange: setEmail,
+          required: true,
+          disabled: isEditing,
           autoFocus: !isEditing,
-          inputProps: {
-            autoComplete: "off",
-            "data-1p-ignore": "true"
-          }
+          autoComplete: "off",
+          inputProps: { "data-1p-ignore": "true" }
         }
       ),
       /* @__PURE__ */ jsx(
@@ -482,12 +420,10 @@ function UserModal({ user }) {
         {
           label: "Name",
           value: name,
-          onChange: setName,
+          onValueChange: setName,
           autoFocus: isEditing,
-          inputProps: {
-            autoComplete: "off",
-            "data-1p-ignore": "true"
-          }
+          autoComplete: "off",
+          inputProps: { "data-1p-ignore": "true" }
         }
       ),
       /* @__PURE__ */ jsx(
@@ -495,36 +431,26 @@ function UserModal({ user }) {
         {
           label: "Roles",
           placeholder: "Select roles",
-          items: roleItems,
-          selectedItems: selectedRoles,
-          tag: (item) => /* @__PURE__ */ jsx(Tag, { "data-shape": "circle", children: item.name }),
-          renderEmptyState: () => "No roles",
-          children: (item) => /* @__PURE__ */ jsx(MultipleSelectItem, { id: item.id, textValue: item.name, children: item.name })
+          value: selectedRoles,
+          onValueChange: setSelectedRoles,
+          emptyMessage: "No roles",
+          children: roleItems.map((item) => /* @__PURE__ */ jsx(MultipleSelectItem, { value: item.id, children: item.name }, item.id))
         }
       ),
-      error && /* @__PURE__ */ jsx("p", { className: styles.UsersPage.form.error(), role: "alert", children: error })
+      error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", icon: IcBaselineErrorOutline, children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) })
     ] }) }) }),
     /* @__PURE__ */ jsxs(DashboardModalFooter, { children: [
       /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
-          appearance: "outline",
-          intent: "secondary",
-          onPress: modal.close,
+          variant: "outline",
+          color: "secondary",
+          onClick: modal.close,
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "submit",
-          intent: "primary",
-          isPending,
-          form: "submit",
-          children: isEditing ? "Save changes" : "Create user"
-        }
-      )
+      /* @__PURE__ */ jsx(Button, { type: "submit", color: "primary", loading: isPending, form: formId, children: isEditing ? "Save changes" : "Create user" })
     ] })
   ] });
 }
@@ -548,5 +474,6 @@ function compareUsers(a, b) {
 export {
   UsersPage,
   UsersPageSidebar,
+  usersAtom,
   usersPage
 };