@workos-inc/widgets 1.6.1 → 1.7.0-pre.0

package/dist/cjs/lib/revoke-invite-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/revoke-invite-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  AlertDialog,\n  Callout,\n  Flex,\n  Text,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport { type ReactNode, useRef } from \"react\";\nimport { useRevokeUserInvite } from \"./api/user.js\";\nimport {\n  AlertDialogContent,\n  DestructiveButton,\n  SecondaryButton,\n} from \"./elements.js\";\nimport { Member } from \"../api/endpoint.js\";\n\ninterface RevokeInviteDialogProps extends AlertDialog.RootProps {\n  user: Member;\n  children?: ReactNode;\n}\n\nexport function RevokeInviteDialog({\n  children,\n  user,\n  ...props\n}: RevokeInviteDialogProps) {\n  const revokeInvite = useRevokeUserInvite();\n  const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n  const onSubmitForm = () => {\n    revokeInvite.mutate(\n      { userId: user.id },\n      {\n        onSuccess: () => {\n          props.onOpenChange?.(false);\n        },\n      },\n    );\n  };\n\n  return (\n    <AlertDialog.Root {...props}>\n      {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}\n\n      <AlertDialogContent\n        maxWidth=\"480px\"\n        onOpenAutoFocus={() => {\n          requestAnimationFrame(() => {\n            cancelButtonRef.current?.focus();\n          });\n        }}\n      >\n        <AlertDialog.Title>Revoke invite?</AlertDialog.Title>\n        <Flex mb=\"4\" direction=\"column\" gap=\"3\">\n          <AlertDialog.Description>\n            Are you sure you want to revoke the invite to{\" \"}\n            <Text weight=\"bold\">{user.email}</Text>? This action is immediate\n            and cannot be undone.\n          </AlertDialog.Description>\n        </Flex>\n\n        {revokeInvite.error ? (\n          <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n            <Callout.Text>\n              {getMutationErrorMessage(revokeInvite.error)}\n            </Callout.Text>\n          </Callout.Root>\n        ) : null}\n\n        <Flex gap=\"3\" justify=\"end\" mt=\"5\" asChild>\n          <form\n            onSubmit={(event) => {\n              event.preventDefault();\n              onSubmitForm();\n            }}\n          >\n            <AlertDialog.Cancel>\n              <SecondaryButton\n                ref={cancelButtonRef}\n                disabled={revokeInvite.isPending}\n              >\n                Cancel\n              </SecondaryButton>\n            </AlertDialog.Cancel>\n\n            <DestructiveButton type=\"submit\" loading={revokeInvite.isPending}>\n              Revoke\n            </DestructiveButton>\n          </form>\n        </Flex>\n      </AlertDialogContent>\n\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(revokeInvite.error)}\n        </section>\n      </VisuallyHidden>\n    </AlertDialog.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error revoking the invite. Please try again.\";\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CmB;AA1CnB,oBAMO;AACP,mBAAuC;AACvC,kBAAoC;AACpC,sBAIO;AAQA,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,mBAAe,iCAAoB;AACzC,QAAM,sBAAkB,qBAA0B,IAAI;AAEtD,QAAM,eAAe,MAAM;AACzB,iBAAa;AAAA,MACX,EAAE,QAAQ,KAAK,GAAG;AAAA,MAClB;AAAA,QACE,WAAW,MAAM;AACf,gBAAM,eAAe,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE,6CAAC,0BAAY,MAAZ,EAAkB,GAAG,OACnB;AAAA,gBAAY,4CAAC,0BAAY,SAAZ,EAAqB,UAAS;AAAA,IAE5C;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,iBAAiB,MAAM;AACrB,gCAAsB,MAAM;AAC1B,4BAAgB,SAAS,MAAM;AAAA,UACjC,CAAC;AAAA,QACH;AAAA,QAEA;AAAA,sDAAC,0BAAY,OAAZ,EAAkB,4BAAc;AAAA,UACjC,4CAAC,sBAAK,IAAG,KAAI,WAAU,UAAS,KAAI,KAClC,uDAAC,0BAAY,aAAZ,EAAwB;AAAA;AAAA,YACuB;AAAA,YAC9C,4CAAC,sBAAK,QAAO,QAAQ,eAAK,OAAM;AAAA,YAAO;AAAA,aAEzC,GACF;AAAA,UAEC,aAAa,QACZ,4CAAC,sBAAQ,MAAR,EAAa,OAAM,OAAM,IAAG,KAAI,IAAG,MAClC,sDAAC,sBAAQ,MAAR,EACE,kCAAwB,aAAa,KAAK,GAC7C,GACF,IACE;AAAA,UAEJ,4CAAC,sBAAK,KAAI,KAAI,SAAQ,OAAM,IAAG,KAAI,SAAO,MACxC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,CAAC,UAAU;AACnB,sBAAM,eAAe;AACrB,6BAAa;AAAA,cACf;AAAA,cAEA;AAAA,4DAAC,0BAAY,QAAZ,EACC;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL,UAAU,aAAa;AAAA,oBACxB;AAAA;AAAA,gBAED,GACF;AAAA,gBAEA,4CAAC,qCAAkB,MAAK,UAAS,SAAS,aAAa,WAAW,oBAElE;AAAA;AAAA;AAAA,UACF,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IAGA,4CAAC,gCAAe,SAAO,MACrB,sDAAC,aAAQ,aAAU,UAChB,kCAAwB,aAAa,KAAK,GAC7C,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,wBAAwB,OAAgB;AAC/C,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/lib/revoke-invite-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport { type ReactNode, useRef } from \"react\";\nimport { useRevokeUserInvite } from \"./api/user.js\";\nimport { AlertDialog, Button } from \"./elements.js\";\nimport { Member } from \"../api/endpoint.js\";\n\ninterface RevokeInviteDialogProps extends AlertDialog.RootProps {\n  user: Member;\n  children?: ReactNode;\n}\n\nexport function RevokeInviteDialog({\n  children,\n  user,\n  ...props\n}: RevokeInviteDialogProps) {\n  const revokeInvite = useRevokeUserInvite();\n  const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n  const onSubmitForm = () => {\n    revokeInvite.mutate(\n      { userId: user.id },\n      {\n        onSuccess: () => {\n          props.onOpenChange?.(false);\n        },\n      },\n    );\n  };\n\n  return (\n    <AlertDialog.Root {...props}>\n      {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}\n\n      <AlertDialog.Content\n        maxWidth=\"480px\"\n        onOpenAutoFocus={() => {\n          requestAnimationFrame(() => {\n            cancelButtonRef.current?.focus();\n          });\n        }}\n      >\n        <AlertDialog.Title>Revoke invite?</AlertDialog.Title>\n        <Flex mb=\"4\" direction=\"column\" gap=\"3\">\n          <AlertDialog.Description>\n            Are you sure you want to revoke the invite to{\" \"}\n            <Text weight=\"bold\">{user.email}</Text>? This action is immediate\n            and cannot be undone.\n          </AlertDialog.Description>\n        </Flex>\n\n        {revokeInvite.error ? (\n          <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n            <Callout.Text>\n              {getMutationErrorMessage(revokeInvite.error)}\n            </Callout.Text>\n          </Callout.Root>\n        ) : null}\n\n        <Flex gap=\"3\" justify=\"end\" mt=\"5\" asChild>\n          <form\n            onSubmit={(event) => {\n              event.preventDefault();\n              onSubmitForm();\n            }}\n          >\n            <AlertDialog.Cancel>\n              <Button\n                variant=\"secondary\"\n                ref={cancelButtonRef}\n                disabled={revokeInvite.isPending}\n              >\n                Cancel\n              </Button>\n            </AlertDialog.Cancel>\n\n            <Button\n              variant=\"destructive\"\n              type=\"submit\"\n              loading={revokeInvite.isPending}\n            >\n              Revoke\n            </Button>\n          </form>\n        </Flex>\n      </AlertDialog.Content>\n\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(revokeInvite.error)}\n        </section>\n      </VisuallyHidden>\n    </AlertDialog.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error revoking the invite. Please try again.\";\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCmB;AAhCnB,oBAAoD;AACpD,mBAAuC;AACvC,kBAAoC;AACpC,sBAAoC;AAQ7B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,mBAAe,iCAAoB;AACzC,QAAM,sBAAkB,qBAA0B,IAAI;AAEtD,QAAM,eAAe,MAAM;AACzB,iBAAa;AAAA,MACX,EAAE,QAAQ,KAAK,GAAG;AAAA,MAClB;AAAA,QACE,WAAW,MAAM;AACf,gBAAM,eAAe,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE,6CAAC,4BAAY,MAAZ,EAAkB,GAAG,OACnB;AAAA,gBAAY,4CAAC,4BAAY,SAAZ,EAAqB,UAAS;AAAA,IAE5C;AAAA,MAAC,4BAAY;AAAA,MAAZ;AAAA,QACC,UAAS;AAAA,QACT,iBAAiB,MAAM;AACrB,gCAAsB,MAAM;AAC1B,4BAAgB,SAAS,MAAM;AAAA,UACjC,CAAC;AAAA,QACH;AAAA,QAEA;AAAA,sDAAC,4BAAY,OAAZ,EAAkB,4BAAc;AAAA,UACjC,4CAAC,sBAAK,IAAG,KAAI,WAAU,UAAS,KAAI,KAClC,uDAAC,4BAAY,aAAZ,EAAwB;AAAA;AAAA,YACuB;AAAA,YAC9C,4CAAC,sBAAK,QAAO,QAAQ,eAAK,OAAM;AAAA,YAAO;AAAA,aAEzC,GACF;AAAA,UAEC,aAAa,QACZ,4CAAC,sBAAQ,MAAR,EAAa,OAAM,OAAM,IAAG,KAAI,IAAG,MAClC,sDAAC,sBAAQ,MAAR,EACE,kCAAwB,aAAa,KAAK,GAC7C,GACF,IACE;AAAA,UAEJ,4CAAC,sBAAK,KAAI,KAAI,SAAQ,OAAM,IAAG,KAAI,SAAO,MACxC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,CAAC,UAAU;AACnB,sBAAM,eAAe;AACrB,6BAAa;AAAA,cACf;AAAA,cAEA;AAAA,4DAAC,4BAAY,QAAZ,EACC;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,KAAK;AAAA,oBACL,UAAU,aAAa;AAAA,oBACxB;AAAA;AAAA,gBAED,GACF;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,SAAS,aAAa;AAAA,oBACvB;AAAA;AAAA,gBAED;AAAA;AAAA;AAAA,UACF,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IAGA,4CAAC,gCAAe,SAAO,MACrB,sDAAC,aAAQ,aAAU,UAChB,kCAAwB,aAAa,KAAK,GAC7C,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,wBAAwB,OAAgB;AAC/C,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}

package/dist/cjs/lib/revoke-invite-dialog.d.cts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AlertDialog } from '@radix-ui/themes';
 import { ReactNode } from 'react';
+import { RootProps } from '@radix-ui/themes/components/alert-dialog';
 import { Member } from '../api/endpoint.cjs';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.cjs';
 
-interface RevokeInviteDialogProps extends AlertDialog.RootProps {
+interface RevokeInviteDialogProps extends RootProps {
     user: Member;
     children?: ReactNode;
 }

package/dist/cjs/lib/save-button.cjs

@@ -26,6 +26,7 @@ var import_themes = require("@radix-ui/themes");
 var import_react_icons = require("@radix-ui/react-icons");
 var import_react = require("react");
 var import_utils = require("./utils.js");
+var import_elements = require("./elements.js");
 const DONE_TIMEOUT_MS = 1500;
 const SAVING_TIMEOUT_MS = 600;
 function SaveButton({
@@ -40,7 +41,7 @@ function SaveButton({
     loading ? "loading" : done ? "done" : "idle"
   );
   const loadingStartTime = (0, import_react.useRef)(null);
-  const Button = asChild ? import_themes.Slot : "button";
+  const ButtonComponent = asChild ? import_themes.Slot : import_elements.Button;
   (0, import_react.useEffect)(() => {
     if (loading) {
       setState("loading");
@@ -67,7 +68,7 @@ function SaveButton({
     }
   }, [loading, done, onDone]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    Button,
+    ButtonComponent,
     {
       ...props,
       className: (0, import_utils.namespaceClassNames)("save-button"),

package/dist/cjs/lib/save-button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/save-button.tsx"],"sourcesContent":["import {\n  ButtonProps,\n  Flex,\n  Slot,\n  Slottable,\n  Spinner,\n  Text,\n} from \"@radix-ui/themes\";\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { namespaceClassNames } from \"./utils.js\";\n\nconst DONE_TIMEOUT_MS = 1500;\nconst SAVING_TIMEOUT_MS = 600;\n\ninterface SaveButtonProps extends ButtonProps {\n  asChild?: boolean;\n  children: React.ReactNode;\n  loading?: boolean;\n  done?: boolean;\n  onDone?: () => void;\n}\n\nexport function SaveButton({\n  asChild = false,\n  children,\n  loading,\n  done,\n  onDone,\n  ...props\n}: SaveButtonProps) {\n  const [state, setState] = useState<\"idle\" | \"loading\" | \"done\">(\n    loading ? \"loading\" : done ? \"done\" : \"idle\",\n  );\n  const loadingStartTime = useRef<number | null>(null);\n  const Button = asChild ? Slot : \"button\";\n\n  useEffect(() => {\n    if (loading) {\n      // FIXME: This should be refactored\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setState(\"loading\");\n      loadingStartTime.current = Date.now();\n    } else if (done) {\n      const currentTime = Date.now();\n      const loadingDuration = loadingStartTime.current\n        ? currentTime - loadingStartTime.current\n        : 0;\n\n      // If loading lasted less than 500 ms, wait for the remaining time\n      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);\n\n      let doneTimer: number | null = null;\n      const savedTimer = window.setTimeout(() => {\n        setState(\"done\");\n\n        doneTimer = window.setTimeout(() => {\n          onDone?.();\n        }, DONE_TIMEOUT_MS);\n      }, remainingDelay);\n\n      return () => {\n        window.clearTimeout(savedTimer);\n        if (doneTimer !== null) {\n          window.clearTimeout(doneTimer);\n        }\n      };\n    } else if (!loading && !done) {\n      setState(\"idle\");\n    }\n  }, [loading, done, onDone]);\n\n  return (\n    <Button\n      {...props}\n      className={namespaceClassNames(\"save-button\")}\n      data-save-state={state}\n    >\n      <Slottable>{children}</Slottable>\n\n      {state === \"loading\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n        >\n          <Spinner size=\"1\" />\n        </Flex>\n      )}\n\n      {state === \"done\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n          gap=\"1\"\n        >\n          <CheckIcon\n            width=\"18px\"\n            height=\"18px\"\n            style={{ marginLeft: \"-4px\" }}\n            className={namespaceClassNames(\"save-button__done-icon\")}\n          />\n          <Text className={namespaceClassNames(\"save-button__done-text\")}>\n            Done\n          </Text>\n        </Flex>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8EM;AA9EN,oBAOO;AACP,yBAA0B;AAC1B,mBAA4C;AAC5C,mBAAoC;AAEpC,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAUnB,SAAS,WAAW;AAAA,EACzB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IACxB,UAAU,YAAY,OAAO,SAAS;AAAA,EACxC;AACA,QAAM,uBAAmB,qBAAsB,IAAI;AACnD,QAAM,SAAS,UAAU,qBAAO;AAEhC,8BAAU,MAAM;AACd,QAAI,SAAS;AAGX,eAAS,SAAS;AAClB,uBAAiB,UAAU,KAAK,IAAI;AAAA,IACtC,WAAW,MAAM;AACf,YAAM,cAAc,KAAK,IAAI;AAC7B,YAAM,kBAAkB,iBAAiB,UACrC,cAAc,iBAAiB,UAC/B;AAGJ,YAAM,iBAAiB,KAAK,IAAI,GAAG,oBAAoB,eAAe;AAEtE,UAAI,YAA2B;AAC/B,YAAM,aAAa,OAAO,WAAW,MAAM;AACzC,iBAAS,MAAM;AAEf,oBAAY,OAAO,WAAW,MAAM;AAClC,mBAAS;AAAA,QACX,GAAG,eAAe;AAAA,MACpB,GAAG,cAAc;AAEjB,aAAO,MAAM;AACX,eAAO,aAAa,UAAU;AAC9B,YAAI,cAAc,MAAM;AACtB,iBAAO,aAAa,SAAS;AAAA,QAC/B;AAAA,MACF;AAAA,IACF,WAAW,CAAC,WAAW,CAAC,MAAM;AAC5B,eAAS,MAAM;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,kCAAoB,aAAa;AAAA,MAC5C,mBAAiB;AAAA,MAEjB;AAAA,oDAAC,2BAAW,UAAS;AAAA,QAEpB,UAAU,aACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,OAAM;AAAA,YAEN,sDAAC,yBAAQ,MAAK,KAAI;AAAA;AAAA,QACpB;AAAA,QAGD,UAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,OAAM;AAAA,YACN,KAAI;AAAA,YAEJ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,OAAO,EAAE,YAAY,OAAO;AAAA,kBAC5B,eAAW,kCAAoB,wBAAwB;AAAA;AAAA,cACzD;AAAA,cACA,4CAAC,sBAAK,eAAW,kCAAoB,wBAAwB,GAAG,kBAEhE;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/lib/save-button.tsx"],"sourcesContent":["import { Flex, Slot, Slottable, Spinner, Text } from \"@radix-ui/themes\";\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { namespaceClassNames } from \"./utils.js\";\nimport { Button, type ButtonProps } from \"./elements.js\";\n\nconst DONE_TIMEOUT_MS = 1500;\nconst SAVING_TIMEOUT_MS = 600;\n\ninterface SaveButtonProps extends ButtonProps {\n  asChild?: boolean;\n  children: React.ReactNode;\n  loading?: boolean;\n  done?: boolean;\n  onDone?: () => void;\n}\n\nexport function SaveButton({\n  asChild = false,\n  children,\n  loading,\n  done,\n  onDone,\n  ...props\n}: SaveButtonProps) {\n  const [state, setState] = useState<\"idle\" | \"loading\" | \"done\">(\n    loading ? \"loading\" : done ? \"done\" : \"idle\",\n  );\n  const loadingStartTime = useRef<number | null>(null);\n  const ButtonComponent = asChild ? Slot : Button;\n\n  useEffect(() => {\n    if (loading) {\n      // FIXME: This should be refactored\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setState(\"loading\");\n      loadingStartTime.current = Date.now();\n    } else if (done) {\n      const currentTime = Date.now();\n      const loadingDuration = loadingStartTime.current\n        ? currentTime - loadingStartTime.current\n        : 0;\n\n      // If loading lasted less than 500 ms, wait for the remaining time\n      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);\n\n      let doneTimer: number | null = null;\n      const savedTimer = window.setTimeout(() => {\n        setState(\"done\");\n\n        doneTimer = window.setTimeout(() => {\n          onDone?.();\n        }, DONE_TIMEOUT_MS);\n      }, remainingDelay);\n\n      return () => {\n        window.clearTimeout(savedTimer);\n        if (doneTimer !== null) {\n          window.clearTimeout(doneTimer);\n        }\n      };\n    } else if (!loading && !done) {\n      setState(\"idle\");\n    }\n  }, [loading, done, onDone]);\n\n  return (\n    <ButtonComponent\n      {...props}\n      className={namespaceClassNames(\"save-button\")}\n      data-save-state={state}\n    >\n      <Slottable>{children}</Slottable>\n      {state === \"loading\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n        >\n          <Spinner size=\"1\" />\n        </Flex>\n      )}\n\n      {state === \"done\" && (\n        <Flex\n          as=\"span\"\n          align=\"center\"\n          justify=\"center\"\n          position=\"absolute\"\n          inset=\"0\"\n          gap=\"1\"\n        >\n          <CheckIcon\n            width=\"18px\"\n            height=\"18px\"\n            style={{ marginLeft: \"-4px\" }}\n            className={namespaceClassNames(\"save-button__done-icon\")}\n          />\n          <Text className={namespaceClassNames(\"save-button__done-text\")}>\n            Done\n          </Text>\n        </Flex>\n      )}\n    </ButtonComponent>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwEM;AAxEN,oBAAqD;AACrD,yBAA0B;AAC1B,mBAA4C;AAC5C,mBAAoC;AACpC,sBAAyC;AAEzC,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAUnB,SAAS,WAAW;AAAA,EACzB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IACxB,UAAU,YAAY,OAAO,SAAS;AAAA,EACxC;AACA,QAAM,uBAAmB,qBAAsB,IAAI;AACnD,QAAM,kBAAkB,UAAU,qBAAO;AAEzC,8BAAU,MAAM;AACd,QAAI,SAAS;AAGX,eAAS,SAAS;AAClB,uBAAiB,UAAU,KAAK,IAAI;AAAA,IACtC,WAAW,MAAM;AACf,YAAM,cAAc,KAAK,IAAI;AAC7B,YAAM,kBAAkB,iBAAiB,UACrC,cAAc,iBAAiB,UAC/B;AAGJ,YAAM,iBAAiB,KAAK,IAAI,GAAG,oBAAoB,eAAe;AAEtE,UAAI,YAA2B;AAC/B,YAAM,aAAa,OAAO,WAAW,MAAM;AACzC,iBAAS,MAAM;AAEf,oBAAY,OAAO,WAAW,MAAM;AAClC,mBAAS;AAAA,QACX,GAAG,eAAe;AAAA,MACpB,GAAG,cAAc;AAEjB,aAAO,MAAM;AACX,eAAO,aAAa,UAAU;AAC9B,YAAI,cAAc,MAAM;AACtB,iBAAO,aAAa,SAAS;AAAA,QAC/B;AAAA,MACF;AAAA,IACF,WAAW,CAAC,WAAW,CAAC,MAAM;AAC5B,eAAS,MAAM;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,kCAAoB,aAAa;AAAA,MAC5C,mBAAiB;AAAA,MAEjB;AAAA,oDAAC,2BAAW,UAAS;AAAA,QACpB,UAAU,aACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,OAAM;AAAA,YAEN,sDAAC,yBAAQ,MAAK,KAAI;AAAA;AAAA,QACpB;AAAA,QAGD,UAAU,UACT;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,UAAS;AAAA,YACT,OAAM;AAAA,YACN,KAAI;AAAA,YAEJ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,OAAO,EAAE,YAAY,OAAO;AAAA,kBAC5B,eAAW,kCAAoB,wBAAwB;AAAA;AAAA,cACzD;AAAA,cACA,4CAAC,sBAAK,eAAW,kCAAoB,wBAAwB,GAAG,kBAEhE;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/cjs/lib/save-button.d.cts

@@ -1,5 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from '@radix-ui/themes';
+import { ButtonProps } from './elements.cjs';
+import 'react';
+import '@radix-ui/themes';
+import '@radix-ui/themes/props';
+import '../dialog-C15qCLN3.cjs';
+import '@radix-ui/themes/components/dialog';
+import '../alert-dialog-BlG3_awx.cjs';
+import '@radix-ui/themes/components/alert-dialog';
+import '../dropdown-menu-BQ5LtvdR.cjs';
+import '@radix-ui/themes/components/dropdown-menu';
+import '../select-KR89Qnvm.cjs';
+import '@radix-ui/themes/components/select';
 
 interface SaveButtonProps extends ButtonProps {
     asChild?: boolean;

package/dist/cjs/lib/set-password-dialog.cjs

@@ -50,9 +50,9 @@ function SetPasswordDialog({
   const handleClose = React.useCallback(() => {
     setOpen(false);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Root, { ...props, open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Trigger, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DialogContent, { maxWidth: "480px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elevated_access.ElevatedAccess, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { onClose: handleClose }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Dialog.Root, { ...props, open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Trigger, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Content, { maxWidth: "480px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elevated_access.ElevatedAccess, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { onClose: handleClose }) }) })
   ] });
 }
 function Content({ onClose }) {
@@ -72,8 +72,8 @@ function Content({ onClose }) {
     securitySettings.update("Password", true);
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Title, { mb: "5", children: "Set New Password" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Description, { children: "Set a new password for your account" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Title, { mb: "5", children: "Set New Password" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Description, { children: "Set a new password for your account" }) }),
     setPassword.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { color: "red", my: "-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: getMutationErrorMessage(setPassword.error) }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Form.Root,
@@ -125,9 +125,10 @@ function Content({ onClose }) {
             ] }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { mt: "5", gap: "3", justify: "end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_elements.SecondaryButton,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_elements.Button,
               {
+                variant: "secondary",
                 disabled: setPassword.isPending || setPassword.isSuccess,
                 children: "Cancel"
               }
@@ -135,11 +136,12 @@ function Content({ onClose }) {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_save_button.SaveButton,
               {
-                asChild: true,
                 loading: setPassword.isPending,
                 done: setPassword.isSuccess,
                 onDone: onClose,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { type: "submit", disabled: disableSubmit, children: "Set password" })
+                type: "submit",
+                disabled: disableSubmit || void 0,
+                children: "Set password"
               }
             )
           ] }),

package/dist/cjs/lib/set-password-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/set-password-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Dialog, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport {\n  DialogContent,\n  Label,\n  PasswordField,\n  PrimaryButton,\n  SecondaryButton,\n} from \"./elements.js\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { useCreatePassword } from \"../api/endpoint.js\";\nimport { useSecuritySettings } from \"./use-security-settings.js\";\nimport { ElevatedAccess } from \"./elevated-access.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { useDialogClose } from \"./use-dialog-close.js\";\n\ninterface SetPasswordDialogProps extends Dialog.RootProps {\n  children?: ReactNode;\n}\n\nexport function SetPasswordDialog({\n  children,\n  ...props\n}: SetPasswordDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root {...props} open={open} onOpenChange={setOpen}>\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n\n      <DialogContent maxWidth=\"480px\">\n        <ElevatedAccess>\n          <Content onClose={handleClose} />\n        </ElevatedAccess>\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps {\n  onClose: () => void;\n}\n\nfunction Content({ onClose }: ContentProps) {\n  const setPassword = useCreatePassword();\n  const securitySettings = useSecuritySettings();\n  const [disableSubmit, setDisableSubmit] = React.useState(true);\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const password = formData.get(\"password\")?.toString();\n\n    if (!password) {\n      return;\n    }\n\n    setPassword.mutate({ data: { password } });\n  };\n\n  useDialogClose(setPassword.isSuccess, () => {\n    securitySettings.update(\"Password\", true);\n  });\n\n  return (\n    <>\n      <Dialog.Title mb=\"5\">Set New Password</Dialog.Title>\n      <VisuallyHidden>\n        <Dialog.Description>\n          Set a new password for your account\n        </Dialog.Description>\n      </VisuallyHidden>\n\n      {setPassword.error ? (\n        <Callout.Root color=\"red\" my=\"-2\">\n          <Callout.Text>\n            {getMutationErrorMessage(setPassword.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Form.Root\n        onSubmit={handleSubmit}\n        onChange={(event) => {\n          const formData = new FormData(event.currentTarget);\n          const password = formData.get(\"password\")?.toString();\n          const confirmPassword = formData.get(\"confirmPassword\")?.toString();\n          setDisableSubmit(password === \"\" || confirmPassword === \"\");\n        }}\n      >\n        <Flex mt=\"5\" direction=\"column\" gap=\"4\">\n          <Form.Field name=\"password\" asChild>\n            <Flex direction=\"column\" gap=\"2\">\n              <Form.Label asChild>\n                <Label>Enter a new password</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <PasswordField\n                  autoFocus\n                  required\n                  autoComplete=\"new-password\"\n                  placeholder=\"New password\"\n                  disabled={setPassword.isPending || setPassword.isSuccess}\n                />\n              </Form.Control>\n              <Form.Message match=\"valueMissing\" asChild>\n                <Text size=\"2\" color=\"red\">\n                  Please enter a new password\n                </Text>\n              </Form.Message>\n              <Form.Message match={(value) => value.length < 8} asChild>\n                <Text size=\"2\" color=\"red\">\n                  Password must be at least 8 characters\n                </Text>\n              </Form.Message>\n            </Flex>\n          </Form.Field>\n\n          <Form.Field name=\"confirmPassword\" asChild>\n            <Flex direction=\"column\" gap=\"2\">\n              <Form.Label asChild>\n                <Label>Confirm your new password</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <PasswordField\n                  required\n                  autoComplete=\"new-password\"\n                  placeholder=\"Confirm new password\"\n                  disabled={setPassword.isPending || setPassword.isSuccess}\n                />\n              </Form.Control>\n              <Form.Message match=\"valueMissing\" asChild>\n                <Text size=\"2\" color=\"red\">\n                  Please confirm your new password\n                </Text>\n              </Form.Message>\n              <Form.Message\n                match={(value, formData) => value !== formData.get(\"password\")}\n                asChild\n              >\n                <Text size=\"2\" color=\"red\">\n                  The passwords you entered don’t match.\n                </Text>\n              </Form.Message>\n            </Flex>\n          </Form.Field>\n        </Flex>\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <SecondaryButton\n              disabled={setPassword.isPending || setPassword.isSuccess}\n            >\n              Cancel\n            </SecondaryButton>\n          </Dialog.Close>\n\n          <SaveButton\n            asChild\n            loading={setPassword.isPending}\n            done={setPassword.isSuccess}\n            onDone={onClose}\n          >\n            <PrimaryButton type=\"submit\" disabled={disableSubmit}>\n              Set password\n            </PrimaryButton>\n          </SaveButton>\n        </Flex>\n\n        {/* mirror errors in a live region */}\n        <VisuallyHidden asChild>\n          <section aria-live=\"polite\">\n            {getMutationErrorMessage(setPassword.error)}\n          </section>\n        </VisuallyHidden>\n      </Form.Root>\n    </>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (error instanceof Error) {\n    return error.message;\n  }\n\n  if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    return error.message;\n  }\n\n  return \"Something went wrong. Please try again.\";\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/set-password-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport { Dialog, Label, PasswordField, Button } from \"./elements.js\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { useCreatePassword } from \"../api/endpoint.js\";\nimport { useSecuritySettings } from \"./use-security-settings.js\";\nimport { ElevatedAccess } from \"./elevated-access.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { useDialogClose } from \"./use-dialog-close.js\";\n\ninterface SetPasswordDialogProps extends Dialog.RootProps {\n  children?: ReactNode;\n}\n\nexport function SetPasswordDialog({\n  children,\n  ...props\n}: SetPasswordDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root {...props} open={open} onOpenChange={setOpen}>\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n\n      <Dialog.Content maxWidth=\"480px\">\n        <ElevatedAccess>\n          <Content onClose={handleClose} />\n        </ElevatedAccess>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps {\n  onClose: () => void;\n}\n\nfunction Content({ onClose }: ContentProps) {\n  const setPassword = useCreatePassword();\n  const securitySettings = useSecuritySettings();\n  const [disableSubmit, setDisableSubmit] = React.useState(true);\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const password = formData.get(\"password\")?.toString();\n\n    if (!password) {\n      return;\n    }\n\n    setPassword.mutate({ data: { password } });\n  };\n\n  useDialogClose(setPassword.isSuccess, () => {\n    securitySettings.update(\"Password\", true);\n  });\n\n  return (\n    <>\n      <Dialog.Title mb=\"5\">Set New Password</Dialog.Title>\n      <VisuallyHidden>\n        <Dialog.Description>\n          Set a new password for your account\n        </Dialog.Description>\n      </VisuallyHidden>\n\n      {setPassword.error ? (\n        <Callout.Root color=\"red\" my=\"-2\">\n          <Callout.Text>\n            {getMutationErrorMessage(setPassword.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Form.Root\n        onSubmit={handleSubmit}\n        onChange={(event) => {\n          const formData = new FormData(event.currentTarget);\n          const password = formData.get(\"password\")?.toString();\n          const confirmPassword = formData.get(\"confirmPassword\")?.toString();\n          setDisableSubmit(password === \"\" || confirmPassword === \"\");\n        }}\n      >\n        <Flex mt=\"5\" direction=\"column\" gap=\"4\">\n          <Form.Field name=\"password\" asChild>\n            <Flex direction=\"column\" gap=\"2\">\n              <Form.Label asChild>\n                <Label>Enter a new password</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <PasswordField\n                  autoFocus\n                  required\n                  autoComplete=\"new-password\"\n                  placeholder=\"New password\"\n                  disabled={setPassword.isPending || setPassword.isSuccess}\n                />\n              </Form.Control>\n              <Form.Message match=\"valueMissing\" asChild>\n                <Text size=\"2\" color=\"red\">\n                  Please enter a new password\n                </Text>\n              </Form.Message>\n              <Form.Message match={(value) => value.length < 8} asChild>\n                <Text size=\"2\" color=\"red\">\n                  Password must be at least 8 characters\n                </Text>\n              </Form.Message>\n            </Flex>\n          </Form.Field>\n\n          <Form.Field name=\"confirmPassword\" asChild>\n            <Flex direction=\"column\" gap=\"2\">\n              <Form.Label asChild>\n                <Label>Confirm your new password</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <PasswordField\n                  required\n                  autoComplete=\"new-password\"\n                  placeholder=\"Confirm new password\"\n                  disabled={setPassword.isPending || setPassword.isSuccess}\n                />\n              </Form.Control>\n              <Form.Message match=\"valueMissing\" asChild>\n                <Text size=\"2\" color=\"red\">\n                  Please confirm your new password\n                </Text>\n              </Form.Message>\n              <Form.Message\n                match={(value, formData) => value !== formData.get(\"password\")}\n                asChild\n              >\n                <Text size=\"2\" color=\"red\">\n                  The passwords you entered don’t match.\n                </Text>\n              </Form.Message>\n            </Flex>\n          </Form.Field>\n        </Flex>\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <Button\n              variant=\"secondary\"\n              disabled={setPassword.isPending || setPassword.isSuccess}\n            >\n              Cancel\n            </Button>\n          </Dialog.Close>\n\n          <SaveButton\n            loading={setPassword.isPending}\n            done={setPassword.isSuccess}\n            onDone={onClose}\n            type=\"submit\"\n            disabled={disableSubmit || undefined}\n          >\n            Set password\n          </SaveButton>\n        </Flex>\n\n        {/* mirror errors in a live region */}\n        <VisuallyHidden asChild>\n          <section aria-live=\"polite\">\n            {getMutationErrorMessage(setPassword.error)}\n          </section>\n        </VisuallyHidden>\n      </Form.Root>\n    </>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (error instanceof Error) {\n    return error.message;\n  }\n\n  if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    return error.message;\n  }\n\n  return \"Something went wrong. Please try again.\";\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/lib/set-password-dialog.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Dialog } from '@radix-ui/themes';
 import { ReactNode } from 'react';
+import { RootProps } from '@radix-ui/themes/components/dialog';
 
-interface SetPasswordDialogProps extends Dialog.RootProps {
+interface SetPasswordDialogProps extends RootProps {
     children?: ReactNode;
 }
 declare function SetPasswordDialog({ children, ...props }: SetPasswordDialogProps): react_jsx_runtime.JSX.Element;

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

@@ -33,7 +33,6 @@ __export(user_actions_dropdown_exports, {
 });
 module.exports = __toCommonJS(user_actions_dropdown_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_themes = require("@radix-ui/themes");
 var React = __toESM(require("react"), 1);
 var import_endpoint = require("../api/endpoint.js");
 var import_delete_user_dialog = require("./delete-user-dialog.js");
@@ -63,7 +62,7 @@ const UserActionsDropdown = ({
     if (actions2.has("edit-role")) {
       items2.push(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_elements.PrimaryMenuItem,
+          import_elements.DropdownMenu.Item,
           {
             onSelect: () => setOpenDialog("edit-role"),
             disabled: rolesAndConfigQuery.isLoading || rolesAndConfigQuery.isSuccess && roles.length <= 1,
@@ -77,7 +76,7 @@ const UserActionsDropdown = ({
     if (actions2.has("resend-invite")) {
       items2.push(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_elements.PrimaryMenuItem,
+          import_elements.DropdownMenu.Item,
           {
             onSelect: () => setOpenDialog("resend-invite"),
             children: "Resend invitation"
@@ -89,8 +88,9 @@ const UserActionsDropdown = ({
     if (actions2.has("revoke-invite")) {
       items2.push(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_elements.DestructiveMenuItem,
+          import_elements.DropdownMenu.Item,
           {
+            variant: "destructive",
             onSelect: () => setOpenDialog("revoke-invite"),
             children: "Revoke invitation"
           },
@@ -101,8 +101,9 @@ const UserActionsDropdown = ({
     if (actions2.has("revoke-membership")) {
       items2.push(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_elements.DestructiveMenuItem,
+          import_elements.DropdownMenu.Item,
           {
+            variant: "destructive",
             onSelect: () => setOpenDialog("revoke-membership"),
             children: "Remove user"
           },
@@ -119,9 +120,9 @@ const UserActionsDropdown = ({
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DropdownMenu.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DropdownMenu.Trigger, { children }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenuContent, { size: "2", align: "end", children: items })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DropdownMenu.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Trigger, { children }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Content, { size: "2", align: "end", children: items })
     ] }),
     actions.has("edit-role") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_edit_user_role_dialog.EditUserRoleDialog,

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 { DropdownMenu } from \"@radix-ui/themes\";\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 {\n  DestructiveMenuItem,\n  DropdownMenuContent,\n  PrimaryMenuItem,\n} 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        <PrimaryMenuItem\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        </PrimaryMenuItem>,\n      );\n    }\n    if (actions.has(\"resend-invite\")) {\n      items.push(\n        <PrimaryMenuItem\n          key=\"resend-invite\"\n          onSelect={() => setOpenDialog(\"resend-invite\")}\n        >\n          Resend invitation\n        </PrimaryMenuItem>,\n      );\n    }\n    if (actions.has(\"revoke-invite\")) {\n      items.push(\n        <DestructiveMenuItem\n          key=\"revoke-invite\"\n          onSelect={() => setOpenDialog(\"revoke-invite\")}\n        >\n          Revoke invitation\n        </DestructiveMenuItem>,\n      );\n    }\n    if (actions.has(\"revoke-membership\")) {\n      items.push(\n        <DestructiveMenuItem\n          key=\"revoke-membership\"\n          onSelect={() => setOpenDialog(\"revoke-membership\")}\n        >\n          Remove user\n        </DestructiveMenuItem>,\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        <DropdownMenuContent size=\"2\" align=\"end\">\n          {items}\n        </DropdownMenuContent>\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\";\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"]}

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

@@ -69,7 +69,7 @@ const UserProfile = ({
                 children: "Not set"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_edit_user_profile_dialog.EditUserProfileDialog, { user, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { 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: "Edit" }) })
           ]
         }
       ) })

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, SecondaryButton, 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                <SecondaryButton>Edit</SecondaryButton>\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\";\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":[]}

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

@@ -3,6 +3,17 @@ import { Me } from '../api/endpoint.cjs';
 import { WidgetRootDomProps } from './utils.cjs';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.cjs';
+import './elements.cjs';
+import '@radix-ui/themes';
+import '@radix-ui/themes/props';
+import '../dialog-C15qCLN3.cjs';
+import '@radix-ui/themes/components/dialog';
+import '../alert-dialog-BlG3_awx.cjs';
+import '@radix-ui/themes/components/alert-dialog';
+import '../dropdown-menu-BQ5LtvdR.cjs';
+import '@radix-ui/themes/components/dropdown-menu';
+import '../select-KR89Qnvm.cjs';
+import '@radix-ui/themes/components/select';
 
 interface UserProfileProps extends WidgetRootDomProps {
     userData: Me;

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

@@ -76,7 +76,7 @@ const UserSecurityLoading = (props) => {
       /* @__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_change_password_dialog.ChangePasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { 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: "Change" }) }) })
   ] }) });
 };
 function PasswordSettings({
@@ -95,7 +95,7 @@ function PasswordSettings({
         )
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", size: "2", color: "gray", children: "Set a password to access your account" })
     ] }),
-    settings.isSetUp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_change_password_dialog.ChangePasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { children: "Change" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_set_password_dialog.SetPasswordDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { 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: "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" }) })
   ] });
 }
 function MfaSettings({
@@ -121,7 +121,7 @@ function MfaSettings({
         ] })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", size: "2", color: "gray", children: "Secure your account with an extra verification step" })
     ] }),
-    settings.isSetUp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reset_mfa_dialog.ResetMfaDialog, { isPasswordSet, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { children: "Disable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_add_mfa_dialog.AddMfaDialog, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { 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: "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" }) })
   ] });
 }
 function getWidgetRootDomProps(state, domProps) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport { SecondaryButton, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"./card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  type WidgetRootDomProps,\n  type WidgetRootState,\n} from \"./utils.js\";\n\ninterface UserSecurityProps extends WidgetRootDomProps {\n  settings: AuthenticationSettings;\n}\n\nconst UserSecurity: React.FC<UserSecurityProps> = ({\n  settings,\n  ...domProps\n}) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\ninterface UserSecurityErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSecurityError: React.FC<UserSecurityErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\ninterface UserSecurityLoadingProps extends WidgetRootDomProps {}\n\nconst UserSecurityLoading: React.FC<UserSecurityLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Password</Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>Set a password to access your account</Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <SecondaryButton>Change</SecondaryButton>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Password\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              Last used{\" \"}\n              {getComparativeReadableDate(\n                new Date(),\n                new Date(settings.lastUsed),\n              )}\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Set a password to access your account\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <SecondaryButton>Change</SecondaryButton>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <SecondaryButton>Set a password</SecondaryButton>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Multi-factor authentication\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            Authenticator app\n            {settings.lastUsed && (\n              <>\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  Last used{\" \"}\n                  {getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                  )}\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Secure your account with an extra verification step\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <SecondaryButton>Disable</SecondaryButton>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <SecondaryButton>Set up authenticator app</SecondaryButton>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-security\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserSecurityProps,\n  UserSecurityLoadingProps,\n  UserSecurityErrorProps,\n};\nexport { UserSecurity, UserSecurityLoading, UserSecurityError };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport { Button, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"./card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  type WidgetRootDomProps,\n  type WidgetRootState,\n} from \"./utils.js\";\n\ninterface UserSecurityProps extends WidgetRootDomProps {\n  settings: AuthenticationSettings;\n}\n\nconst UserSecurity: React.FC<UserSecurityProps> = ({\n  settings,\n  ...domProps\n}) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\ninterface UserSecurityErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSecurityError: React.FC<UserSecurityErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\ninterface UserSecurityLoadingProps extends WidgetRootDomProps {}\n\nconst UserSecurityLoading: React.FC<UserSecurityLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Password</Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>Set a password to access your account</Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <Button variant=\"secondary\">Change</Button>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Password\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              Last used{\" \"}\n              {getComparativeReadableDate(\n                new Date(),\n                new Date(settings.lastUsed),\n              )}\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Set a password to access your account\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <Button variant=\"secondary\">Change</Button>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <Button variant=\"secondary\">Set a password</Button>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Multi-factor authentication\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            Authenticator app\n            {settings.lastUsed && (\n              <>\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  Last used{\" \"}\n                  {getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                  )}\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Secure your account with an extra verification step\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <Button variant=\"secondary\">Disable</Button>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <Button variant=\"secondary\">Set up authenticator app</Button>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-security\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  UserSecurityProps,\n  UserSecurityLoadingProps,\n  UserSecurityErrorProps,\n};\nexport { UserSecurity, UserSecurityLoading, UserSecurityError };\n"],"mappings":"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","names":[]}

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

@@ -2,6 +2,18 @@ import { AuthenticationInformationResponseData } from '../api/endpoint.cjs';
 import { WidgetRootDomProps } from './utils.cjs';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.cjs';
+import './elements.cjs';
+import 'react';
+import '@radix-ui/themes';
+import '@radix-ui/themes/props';
+import '../dialog-C15qCLN3.cjs';
+import '@radix-ui/themes/components/dialog';
+import '../alert-dialog-BlG3_awx.cjs';
+import '@radix-ui/themes/components/alert-dialog';
+import '../dropdown-menu-BQ5LtvdR.cjs';
+import '@radix-ui/themes/components/dropdown-menu';
+import '../select-KR89Qnvm.cjs';
+import '@radix-ui/themes/components/select';
 
 interface UserSecurityProps extends WidgetRootDomProps {
     settings: AuthenticationInformationResponseData;

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

@@ -85,8 +85,9 @@ const UserSessions = ({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", as: "p", children: "Remove access from all devices except this one" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_elements.SecondaryButton,
+            import_elements.Button,
             {
+              variant: "secondary",
               onClick: () => {
                 setOpenLogoutAllSessionsDialog(true);
               },
@@ -159,16 +160,7 @@ const UserSession = ({
         ] })
       ] })
     ] }),
-    !isCurrentSession && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { ml: "auto", mr: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_themes.Button,
-      {
-        variant: "ghost",
-        onClick: () => {
-          onSignOut?.(session);
-        },
-        children: "Sign out"
-      }
-    ) })
+    !isCurrentSession && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { ml: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", onClick: () => onSignOut?.(session), children: "Sign out" }) })
   ] });
 };
 function getWidgetRootDomProps(state, domProps) {