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

package/dist/esm/lib/pipes.js

@@ -1,17 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  AlertDialog,
-  Button,
-  Callout,
-  Card,
-  Dialog,
-  DropdownMenu,
-  Flex,
-  IconButton,
-  Skeleton,
-  Text
-} from "@radix-ui/themes";
+import { Callout, Card, Flex, Text } from "@radix-ui/themes";
 import { useCallback, useEffect, useState } from "react";
 import * as CardList from "./card-list.js";
 import { ProviderIcon } from "./provider-icon.js";
@@ -22,10 +11,12 @@ import {
   LockClosedIcon
 } from "@radix-ui/react-icons";
 import {
-  DestructiveButton,
-  DestructiveMenuItem,
-  PrimaryButton,
-  SecondaryButton
+  AlertDialog,
+  Button,
+  Dialog,
+  DropdownMenu,
+  IconButton,
+  Skeleton
 } from "./elements.js";
 import { IconPanel } from "./icon-panel.js";
 import { Status } from "./status.js";
@@ -58,15 +49,13 @@ function ConnectIntegrationButton({
   return /* @__PURE__ */ jsx(
     Button,
     {
+      variant: "secondary",
       onClick: async () => {
         try {
           await eventHandler();
         } catch {
         }
       },
-      variant: "outline",
-      size: "2",
-      color: "gray",
       children: "Connect"
     }
   );
@@ -156,10 +145,11 @@ function SharedCredentialsConnectIntegrationButton({
         ] })
       ] }) }),
       /* @__PURE__ */ jsxs(Flex, { justify: "end", gap: "3", mt: "5", children: [
-        /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(SecondaryButton, { children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Cancel" }) }),
         /* @__PURE__ */ jsxs(
-          PrimaryButton,
+          Button,
           {
+            type: "button",
             onClick: async () => {
               try {
                 await eventHandler();
@@ -169,22 +159,13 @@ function SharedCredentialsConnectIntegrationButton({
             },
             children: [
               "Connect ",
-              /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+              /* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": true })
             ]
           }
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: () => setOpen(true),
-        variant: "outline",
-        size: "2",
-        color: "gray",
-        children: "Connect"
-      }
-    )
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setOpen(true), children: "Connect" })
   ] });
 }
 function ProviderStatus({ integration }) {
@@ -202,41 +183,41 @@ function ProviderStatus({ integration }) {
           onOpenChange: setDisconnectOpen
         }
       ),
-      /* @__PURE__ */ jsx(
-        Status,
-        {
-          state: integration.installation.state === DataInstallationState.connected ? "success" : "error",
-          children: text
-        }
-      ),
-      /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(
-          IconButton,
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
+        /* @__PURE__ */ jsx(
+          Status,
           {
-            radius: "full",
-            variant: "ghost",
-            color: "gray",
-            title: "Pipe actions",
-            children: /* @__PURE__ */ jsx(DotsHorizontalIcon, {})
+            state: integration.installation.state === DataInstallationState.connected ? "success" : "error",
+            children: text
           }
-        ) }),
-        /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
-          integration.installation.state === DataInstallationState.needs_reauthorization && /* @__PURE__ */ jsx(
-            DropdownMenu.Item,
-            {
-              onClick: async () => {
-                try {
-                  await authorizeEventHandler();
-                } catch {
-                }
-              },
-              children: /* @__PURE__ */ jsxs(Flex, { gap: "4", width: "100%", justify: "between", align: "center", children: [
-                "Reauthorize",
-                /* @__PURE__ */ jsx(ExternalLinkIcon, {})
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(DestructiveMenuItem, { onClick: () => setDisconnectOpen(true), children: "Disconnect account" })
+        ),
+        /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "Pipe actions", title: "Pipe actions", children: /* @__PURE__ */ jsx(DotsHorizontalIcon, {}) }) }),
+          /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
+            integration.installation.state === DataInstallationState.needs_reauthorization && /* @__PURE__ */ jsx(
+              DropdownMenu.Item,
+              {
+                onClick: async () => {
+                  try {
+                    await authorizeEventHandler();
+                  } catch {
+                  }
+                },
+                children: /* @__PURE__ */ jsxs(Flex, { gap: "4", width: "100%", justify: "between", align: "center", children: [
+                  "Reauthorize",
+                  /* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": true })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DropdownMenu.Item,
+              {
+                variant: "destructive",
+                onClick: () => setDisconnectOpen(true),
+                children: "Disconnect account"
+              }
+            )
+          ] })
         ] })
       ] })
     ] });
@@ -284,10 +265,11 @@ function DisconnectAccountDialog({
       "account?"
     ] }),
     /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", mt: "5", children: [
-      /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(SecondaryButton, { children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Cancel" }) }),
       /* @__PURE__ */ jsx(
-        DestructiveButton,
+        Button,
         {
+          variant: "destructive",
           disabled: isPending,
           loading: isPending,
           onClick: () => deleteDataInstallation({ installationId: installation.id }),
@@ -303,7 +285,7 @@ const PipesLoading = ({ count, ...domProps }) => {
       /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, { children: /* @__PURE__ */ jsx(ProviderIcon, { provider: "google" }) }) }),
       /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: "Google Drive" }) })
     ] }),
-    /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Button, { disabled: true, children: "Connect" }) })
+    /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: true, children: "Connect" }) })
   ] }) }, index)) });
 };
 const Pipes = ({ integrations, ...domProps }) => {

package/dist/esm/lib/pipes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/pipes.tsx"],"sourcesContent":["\"use client\";\nimport {\n  AlertDialog,\n  Button,\n  Callout,\n  Card,\n  Dialog,\n  DropdownMenu,\n  Flex,\n  IconButton,\n  Skeleton,\n  Text,\n} from \"@radix-ui/themes\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport * as CardList from \"./card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  DotsHorizontalIcon,\n  ExternalLinkIcon,\n  GlobeIcon,\n  LockClosedIcon,\n} from \"@radix-ui/react-icons\";\nimport {\n  DestructiveButton,\n  DestructiveMenuItem,\n  PrimaryButton,\n  SecondaryButton,\n} from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { Status } from \"./status.js\";\nimport {\n  DataIntegration,\n  DataInstallation,\n  useDeleteDataInstallation,\n  useGetDataIntegrationAuthorizeUrlHook,\n  getMyDataIntegrationsQueryKey,\n  DataInstallationState,\n  useSettings,\n} from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { GenericError } from \"./generic-error.js\";\nimport { getDomProps, WidgetRootDomProps, WidgetRootState } from \"./utils.js\";\n\ninterface PipesProps extends WidgetRootDomProps {\n  integrations: DataIntegration[];\n}\n\nconst useOpenDataIntegrationAuthorizeUrl = (integration: DataIntegration) => {\n  const getDataIntegrationAuthorizeUrl =\n    useGetDataIntegrationAuthorizeUrlHook();\n  const settings = useSettings();\n  const baseUrl = settings.data?.authkitOrigin ?? \"\";\n\n  return useCallback(async () => {\n    // need to do this synchronously in the event handler to avoid popup blocker notifications\n    const win = window.open(`${baseUrl}/pipes/redirecting`, \"_blank\");\n    // caller will catch\n    const { url } = await getDataIntegrationAuthorizeUrl(integration.slug);\n    if (win) {\n      win.location = url;\n    }\n  }, [getDataIntegrationAuthorizeUrl, integration.slug, baseUrl]);\n};\n\nfunction ConnectIntegrationButton({\n  integration,\n}: {\n  integration: DataIntegration;\n}) {\n  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  return (\n    <Button\n      onClick={async () => {\n        try {\n          await eventHandler();\n        } catch {\n          // pass - error displayed in new tab\n        }\n      }}\n      variant=\"outline\"\n      size=\"2\"\n      color=\"gray\"\n    >\n      Connect\n    </Button>\n  );\n}\n\nfunction SharedCredentialsConnectIntegrationButton({\n  integration,\n}: {\n  integration: DataIntegration;\n}) {\n  const settings = useSettings();\n  const [open, setOpen] = useState(false);\n  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  const logo = settings.data?.logoDarkPath ?? settings.data?.logoLightPath;\n  const appName = settings.data?.teamName ?? \"This application\";\n\n  return (\n    <>\n      <Dialog.Root open={open} onOpenChange={setOpen}>\n        <Dialog.Content maxWidth=\"430px\">\n          <Flex justify=\"center\" align=\"center\" gap=\"2\" mt=\"2\">\n            {logo && (\n              <>\n                <IconPanel\n                  color=\"panel\"\n                  style={{ width: \"48px\", height: \"48px\" }}\n                >\n                  <ProviderIcon\n                    size=\"2\"\n                    provider=\"workos\"\n                    style={{ backgroundImage: `url(${logo})` }}\n                  />\n                </IconPanel>\n                <DotsHorizontalIcon />\n              </>\n            )}\n            <IconPanel\n              color=\"panel\"\n              style={{\n                ...(logo ? { borderWidth: 0 } : undefined),\n                width: \"48px\",\n                height: \"48px\",\n              }}\n            >\n              <ProviderIcon size=\"2\" provider=\"workos\" />\n            </IconPanel>\n            <DotsHorizontalIcon />\n            <IconPanel color=\"panel\" style={{ width: \"48px\", height: \"48px\" }}>\n              <ProviderIcon size=\"2\" provider={integration.integrationType} />\n            </IconPanel>\n          </Flex>\n          <Dialog.Title size=\"2\" mt=\"5\" mb=\"5\" weight={\"bold\"} align=\"center\">\n            {appName} uses WorkOS to connect to {integration.name}.\n          </Dialog.Title>\n          <Card>\n            <Flex direction=\"column\" gap=\"4\">\n              <Flex gap=\"2\" align=\"center\">\n                <IconPanel\n                  color=\"gray\"\n                  style={{ width: \"32px\", height: \"32px\" }}\n                >\n                  <GlobeIcon />\n                </IconPanel>\n                <Flex direction=\"column\">\n                  <Text size=\"1\" weight=\"bold\">\n                    You&apos;ll be redirected to sign in with {integration.name}\n                    .\n                  </Text>\n                  <Text size=\"1\">\n                    Authorize access to connect your account.\n                  </Text>\n                </Flex>\n              </Flex>\n              <Flex gap=\"2\" align=\"center\">\n                <IconPanel\n                  color=\"gray\"\n                  style={{ width: \"32px\", height: \"32px\" }}\n                >\n                  <LockClosedIcon />\n                </IconPanel>\n                <Flex direction=\"column\">\n                  <Text size=\"1\" weight=\"bold\">\n                    Your credentials remain secure.\n                  </Text>\n                  <Text size=\"1\">WorkOS never sees your credentials.</Text>\n                </Flex>\n              </Flex>\n            </Flex>\n          </Card>\n          <Flex justify=\"end\" gap=\"3\" mt=\"5\">\n            <Dialog.Close>\n              <SecondaryButton>Cancel</SecondaryButton>\n            </Dialog.Close>\n            <PrimaryButton\n              onClick={async () => {\n                try {\n                  await eventHandler();\n                  setOpen(false);\n                } catch {\n                  // pass - error displayed in new tab\n                }\n              }}\n            >\n              Connect <ExternalLinkIcon />\n            </PrimaryButton>\n          </Flex>\n        </Dialog.Content>\n      </Dialog.Root>\n      <Button\n        onClick={() => setOpen(true)}\n        variant=\"outline\"\n        size=\"2\"\n        color=\"gray\"\n      >\n        Connect\n      </Button>\n    </>\n  );\n}\n\nfunction ProviderStatus({ integration }: { integration: DataIntegration }) {\n  const [disconnectOpen, setDisconnectOpen] = useState(false);\n  const authorizeEventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  if (integration.installation) {\n    const text =\n      integration.installation.state === DataInstallationState.connected\n        ? \"Connected\"\n        : \"Requires reauthorization\";\n\n    return (\n      <>\n        <DisconnectAccountDialog\n          integration={integration}\n          installation={integration.installation}\n          open={disconnectOpen}\n          onOpenChange={setDisconnectOpen}\n        />\n        <Status\n          state={\n            integration.installation.state === DataInstallationState.connected\n              ? \"success\"\n              : \"error\"\n          }\n        >\n          {text}\n        </Status>\n        <DropdownMenu.Root>\n          <DropdownMenu.Trigger>\n            <IconButton\n              radius=\"full\"\n              variant=\"ghost\"\n              color=\"gray\"\n              title=\"Pipe actions\"\n            >\n              <DotsHorizontalIcon />\n            </IconButton>\n          </DropdownMenu.Trigger>\n          <DropdownMenu.Content align=\"end\">\n            {integration.installation.state ===\n              DataInstallationState.needs_reauthorization && (\n              <DropdownMenu.Item\n                onClick={async () => {\n                  try {\n                    await authorizeEventHandler();\n                  } catch {\n                    // pass - error displayed in new tab\n                  }\n                }}\n              >\n                <Flex gap=\"4\" width=\"100%\" justify=\"between\" align=\"center\">\n                  Reauthorize\n                  <ExternalLinkIcon />\n                </Flex>\n              </DropdownMenu.Item>\n            )}\n            <DestructiveMenuItem onClick={() => setDisconnectOpen(true)}>\n              Disconnect account\n            </DestructiveMenuItem>\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </>\n    );\n  }\n\n  if (integration.credentialsType === \"shared\") {\n    return (\n      <SharedCredentialsConnectIntegrationButton integration={integration} />\n    );\n  }\n\n  return <ConnectIntegrationButton integration={integration} />;\n}\n\nfunction DisconnectAccountDialog({\n  integration,\n  installation,\n  open,\n  onOpenChange,\n}: {\n  integration: DataIntegration;\n  installation: DataInstallation;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) {\n  const queryClient = useQueryClient();\n  const {\n    mutate: deleteDataInstallation,\n    error,\n    reset,\n    isPending,\n  } = useDeleteDataInstallation({\n    mutation: {\n      onSuccess: () => {\n        onOpenChange(false);\n        queryClient.invalidateQueries({\n          queryKey: getMyDataIntegrationsQueryKey(),\n        });\n      },\n    },\n  });\n\n  useEffect(() => {\n    if (open) {\n      reset();\n    }\n  }, [open, reset]);\n\n  return (\n    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>\n      <AlertDialog.Content style={{ width: \"80vw\", maxWidth: \"520px\" }}>\n        <AlertDialog.Title>Disconnect account</AlertDialog.Title>\n        {error && (\n          <Callout.Root my=\"5\" color=\"red\" role=\"alert\">\n            <Callout.Text>\n              An error occurred while disconnecting your account. Please refresh\n              the page and try again.\n            </Callout.Text>\n          </Callout.Root>\n        )}\n        <AlertDialog.Description>\n          Are you sure you want to disconnect your{\" \"}\n          <Text as=\"span\" weight=\"bold\">\n            {integration.name}\n          </Text>{\" \"}\n          account?\n        </AlertDialog.Description>\n        <Flex gap=\"3\" justify=\"end\" mt=\"5\">\n          <AlertDialog.Cancel>\n            <SecondaryButton>Cancel</SecondaryButton>\n          </AlertDialog.Cancel>\n          <DestructiveButton\n            disabled={isPending}\n            loading={isPending}\n            onClick={() =>\n              deleteDataInstallation({ installationId: installation.id })\n            }\n          >\n            Disconnect\n          </DestructiveButton>\n        </Flex>\n      </AlertDialog.Content>\n    </AlertDialog.Root>\n  );\n}\n\ninterface PipesLoadingProps extends WidgetRootDomProps {\n  count: number;\n}\n\nconst PipesLoading: React.FC<PipesLoadingProps> = ({ count, ...domProps }) => {\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"loading\", domProps)}>\n      {Array.from({ length: count }).map((_, index) => (\n        <CardList.Item key={index}>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            <Flex gap=\"4\" align=\"center\">\n              <Skeleton>\n                <IconPanel>\n                  <ProviderIcon provider=\"google\" />\n                </IconPanel>\n              </Skeleton>\n              <Skeleton>\n                <Text size=\"2\" weight=\"bold\">\n                  Google Drive\n                </Text>\n              </Skeleton>\n            </Flex>\n            <Skeleton>\n              <Button disabled>Connect</Button>\n            </Skeleton>\n          </Flex>\n        </CardList.Item>\n      ))}\n    </CardList.Root>\n  );\n};\n\nconst Pipes: React.FC<PipesProps> = ({ integrations, ...domProps }) => {\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      {integrations.map((integration) => (\n        <CardList.Item key={integration.id}>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            <Flex gap=\"4\" align=\"center\">\n              <IconPanel color=\"panel\">\n                <ProviderIcon provider={integration.integrationType} />\n              </IconPanel>\n              <Text size=\"2\" weight=\"bold\">\n                {integration.name}\n              </Text>\n            </Flex>\n            <ProviderStatus integration={integration} />\n          </Flex>\n        </CardList.Item>\n      ))}\n    </CardList.Root>\n  );\n};\n\ninterface PipesErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst PipesError: React.FC<PipesErrorProps> = ({ error, ...domProps }) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"pipes\",\n    widgetState: state,\n  });\n}\n\nexport type { PipesProps, PipesLoadingProps, PipesErrorProps };\nexport { Pipes, PipesLoading, PipesError };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/pipes.tsx"],"sourcesContent":["\"use client\";\nimport { Callout, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport * as CardList from \"./card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  DotsHorizontalIcon,\n  ExternalLinkIcon,\n  GlobeIcon,\n  LockClosedIcon,\n} from \"@radix-ui/react-icons\";\nimport {\n  AlertDialog,\n  Button,\n  Dialog,\n  DropdownMenu,\n  IconButton,\n  Skeleton,\n} from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { Status } from \"./status.js\";\nimport {\n  DataIntegration,\n  DataInstallation,\n  useDeleteDataInstallation,\n  useGetDataIntegrationAuthorizeUrlHook,\n  getMyDataIntegrationsQueryKey,\n  DataInstallationState,\n  useSettings,\n} from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { GenericError } from \"./generic-error.js\";\nimport { getDomProps, WidgetRootDomProps, WidgetRootState } from \"./utils.js\";\n\ninterface PipesProps extends WidgetRootDomProps {\n  integrations: DataIntegration[];\n}\n\nconst useOpenDataIntegrationAuthorizeUrl = (integration: DataIntegration) => {\n  const getDataIntegrationAuthorizeUrl =\n    useGetDataIntegrationAuthorizeUrlHook();\n  const settings = useSettings();\n  const baseUrl = settings.data?.authkitOrigin ?? \"\";\n\n  return useCallback(async () => {\n    // need to do this synchronously in the event handler to avoid popup blocker notifications\n    const win = window.open(`${baseUrl}/pipes/redirecting`, \"_blank\");\n    // caller will catch\n    const { url } = await getDataIntegrationAuthorizeUrl(integration.slug);\n    if (win) {\n      win.location = url;\n    }\n  }, [getDataIntegrationAuthorizeUrl, integration.slug, baseUrl]);\n};\n\nfunction ConnectIntegrationButton({\n  integration,\n}: {\n  integration: DataIntegration;\n}) {\n  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  return (\n    <Button\n      variant=\"secondary\"\n      onClick={async () => {\n        try {\n          await eventHandler();\n        } catch {\n          // pass - error displayed in new tab\n        }\n      }}\n    >\n      Connect\n    </Button>\n  );\n}\n\nfunction SharedCredentialsConnectIntegrationButton({\n  integration,\n}: {\n  integration: DataIntegration;\n}) {\n  const settings = useSettings();\n  const [open, setOpen] = useState(false);\n  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  const logo = settings.data?.logoDarkPath ?? settings.data?.logoLightPath;\n  const appName = settings.data?.teamName ?? \"This application\";\n\n  return (\n    <>\n      <Dialog.Root open={open} onOpenChange={setOpen}>\n        <Dialog.Content maxWidth=\"430px\">\n          <Flex justify=\"center\" align=\"center\" gap=\"2\" mt=\"2\">\n            {logo && (\n              <>\n                <IconPanel\n                  color=\"panel\"\n                  style={{ width: \"48px\", height: \"48px\" }}\n                >\n                  <ProviderIcon\n                    size=\"2\"\n                    provider=\"workos\"\n                    style={{ backgroundImage: `url(${logo})` }}\n                  />\n                </IconPanel>\n                <DotsHorizontalIcon />\n              </>\n            )}\n            <IconPanel\n              color=\"panel\"\n              style={{\n                ...(logo ? { borderWidth: 0 } : undefined),\n                width: \"48px\",\n                height: \"48px\",\n              }}\n            >\n              <ProviderIcon size=\"2\" provider=\"workos\" />\n            </IconPanel>\n            <DotsHorizontalIcon />\n            <IconPanel color=\"panel\" style={{ width: \"48px\", height: \"48px\" }}>\n              <ProviderIcon size=\"2\" provider={integration.integrationType} />\n            </IconPanel>\n          </Flex>\n          <Dialog.Title size=\"2\" mt=\"5\" mb=\"5\" weight={\"bold\"} align=\"center\">\n            {appName} uses WorkOS to connect to {integration.name}.\n          </Dialog.Title>\n          <Card>\n            <Flex direction=\"column\" gap=\"4\">\n              <Flex gap=\"2\" align=\"center\">\n                <IconPanel\n                  color=\"gray\"\n                  style={{ width: \"32px\", height: \"32px\" }}\n                >\n                  <GlobeIcon />\n                </IconPanel>\n                <Flex direction=\"column\">\n                  <Text size=\"1\" weight=\"bold\">\n                    You&apos;ll be redirected to sign in with {integration.name}\n                    .\n                  </Text>\n                  <Text size=\"1\">\n                    Authorize access to connect your account.\n                  </Text>\n                </Flex>\n              </Flex>\n              <Flex gap=\"2\" align=\"center\">\n                <IconPanel\n                  color=\"gray\"\n                  style={{ width: \"32px\", height: \"32px\" }}\n                >\n                  <LockClosedIcon />\n                </IconPanel>\n                <Flex direction=\"column\">\n                  <Text size=\"1\" weight=\"bold\">\n                    Your credentials remain secure.\n                  </Text>\n                  <Text size=\"1\">WorkOS never sees your credentials.</Text>\n                </Flex>\n              </Flex>\n            </Flex>\n          </Card>\n          <Flex justify=\"end\" gap=\"3\" mt=\"5\">\n            <Dialog.Close>\n              <Button variant=\"secondary\">Cancel</Button>\n            </Dialog.Close>\n            <Button\n              type=\"button\"\n              onClick={async () => {\n                try {\n                  await eventHandler();\n                  setOpen(false);\n                } catch {\n                  // pass - error displayed in new tab\n                }\n              }}\n            >\n              Connect <ExternalLinkIcon aria-hidden />\n            </Button>\n          </Flex>\n        </Dialog.Content>\n      </Dialog.Root>\n      <Button variant=\"secondary\" onClick={() => setOpen(true)}>\n        Connect\n      </Button>\n    </>\n  );\n}\n\nfunction ProviderStatus({ integration }: { integration: DataIntegration }) {\n  const [disconnectOpen, setDisconnectOpen] = useState(false);\n  const authorizeEventHandler = useOpenDataIntegrationAuthorizeUrl(integration);\n\n  if (integration.installation) {\n    const text =\n      integration.installation.state === DataInstallationState.connected\n        ? \"Connected\"\n        : \"Requires reauthorization\";\n\n    return (\n      <>\n        <DisconnectAccountDialog\n          integration={integration}\n          installation={integration.installation}\n          open={disconnectOpen}\n          onOpenChange={setDisconnectOpen}\n        />\n        <Flex align=\"center\" gap=\"4\">\n          <Status\n            state={\n              integration.installation.state === DataInstallationState.connected\n                ? \"success\"\n                : \"error\"\n            }\n          >\n            {text}\n          </Status>\n          <DropdownMenu.Root>\n            <DropdownMenu.Trigger>\n              <IconButton aria-label=\"Pipe actions\" title=\"Pipe actions\">\n                <DotsHorizontalIcon />\n              </IconButton>\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content align=\"end\">\n              {integration.installation.state ===\n                DataInstallationState.needs_reauthorization && (\n                <DropdownMenu.Item\n                  onClick={async () => {\n                    try {\n                      await authorizeEventHandler();\n                    } catch {\n                      // pass - error displayed in new tab\n                    }\n                  }}\n                >\n                  <Flex gap=\"4\" width=\"100%\" justify=\"between\" align=\"center\">\n                    Reauthorize\n                    <ExternalLinkIcon aria-hidden />\n                  </Flex>\n                </DropdownMenu.Item>\n              )}\n              <DropdownMenu.Item\n                variant=\"destructive\"\n                onClick={() => setDisconnectOpen(true)}\n              >\n                Disconnect account\n              </DropdownMenu.Item>\n            </DropdownMenu.Content>\n          </DropdownMenu.Root>\n        </Flex>\n      </>\n    );\n  }\n\n  if (integration.credentialsType === \"shared\") {\n    return (\n      <SharedCredentialsConnectIntegrationButton integration={integration} />\n    );\n  }\n\n  return <ConnectIntegrationButton integration={integration} />;\n}\n\nfunction DisconnectAccountDialog({\n  integration,\n  installation,\n  open,\n  onOpenChange,\n}: {\n  integration: DataIntegration;\n  installation: DataInstallation;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) {\n  const queryClient = useQueryClient();\n  const {\n    mutate: deleteDataInstallation,\n    error,\n    reset,\n    isPending,\n  } = useDeleteDataInstallation({\n    mutation: {\n      onSuccess: () => {\n        onOpenChange(false);\n        queryClient.invalidateQueries({\n          queryKey: getMyDataIntegrationsQueryKey(),\n        });\n      },\n    },\n  });\n\n  useEffect(() => {\n    if (open) {\n      reset();\n    }\n  }, [open, reset]);\n\n  return (\n    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>\n      <AlertDialog.Content style={{ width: \"80vw\", maxWidth: \"520px\" }}>\n        <AlertDialog.Title>Disconnect account</AlertDialog.Title>\n        {error && (\n          <Callout.Root my=\"5\" color=\"red\" role=\"alert\">\n            <Callout.Text>\n              An error occurred while disconnecting your account. Please refresh\n              the page and try again.\n            </Callout.Text>\n          </Callout.Root>\n        )}\n        <AlertDialog.Description>\n          Are you sure you want to disconnect your{\" \"}\n          <Text as=\"span\" weight=\"bold\">\n            {integration.name}\n          </Text>{\" \"}\n          account?\n        </AlertDialog.Description>\n        <Flex gap=\"3\" justify=\"end\" mt=\"5\">\n          <AlertDialog.Cancel>\n            <Button variant=\"secondary\">Cancel</Button>\n          </AlertDialog.Cancel>\n          <Button\n            variant=\"destructive\"\n            disabled={isPending}\n            loading={isPending}\n            onClick={() =>\n              deleteDataInstallation({ installationId: installation.id })\n            }\n          >\n            Disconnect\n          </Button>\n        </Flex>\n      </AlertDialog.Content>\n    </AlertDialog.Root>\n  );\n}\n\ninterface PipesLoadingProps extends WidgetRootDomProps {\n  count: number;\n}\n\nconst PipesLoading: React.FC<PipesLoadingProps> = ({ count, ...domProps }) => {\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"loading\", domProps)}>\n      {Array.from({ length: count }).map((_, index) => (\n        <CardList.Item key={index}>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            <Flex gap=\"4\" align=\"center\">\n              <Skeleton>\n                <IconPanel>\n                  <ProviderIcon provider=\"google\" />\n                </IconPanel>\n              </Skeleton>\n              <Skeleton>\n                <Text size=\"2\" weight=\"bold\">\n                  Google Drive\n                </Text>\n              </Skeleton>\n            </Flex>\n            <Skeleton>\n              <Button variant=\"secondary\" disabled>\n                Connect\n              </Button>\n            </Skeleton>\n          </Flex>\n        </CardList.Item>\n      ))}\n    </CardList.Root>\n  );\n};\n\nconst Pipes: React.FC<PipesProps> = ({ integrations, ...domProps }) => {\n  return (\n    <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      {integrations.map((integration) => (\n        <CardList.Item key={integration.id}>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            <Flex gap=\"4\" align=\"center\">\n              <IconPanel color=\"panel\">\n                <ProviderIcon provider={integration.integrationType} />\n              </IconPanel>\n              <Text size=\"2\" weight=\"bold\">\n                {integration.name}\n              </Text>\n            </Flex>\n            <ProviderStatus integration={integration} />\n          </Flex>\n        </CardList.Item>\n      ))}\n    </CardList.Root>\n  );\n};\n\ninterface PipesErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst PipesError: React.FC<PipesErrorProps> = ({ error, ...domProps }) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"pipes\",\n    widgetState: state,\n  });\n}\n\nexport type { PipesProps, PipesLoadingProps, PipesErrorProps };\nexport { Pipes, PipesLoading, PipesError };\n"],"mappings":"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","names":[]}

package/dist/esm/lib/resend-invite-dialog.d.ts

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

package/dist/esm/lib/resend-invite-dialog.js

@@ -1,22 +1,9 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  AlertDialog,
-  Callout,
-  Dialog,
-  Flex,
-  Text,
-  VisuallyHidden
-} from "@radix-ui/themes";
+import { Callout, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
 import * as React from "react";
 import { useResendUserInvite } from "./api/user.js";
-import {
-  AlertDialogContent,
-  DestructiveButton,
-  DialogContent,
-  PrimaryButton,
-  SecondaryButton
-} from "./elements.js";
+import { AlertDialog, Button, Dialog } from "./elements.js";
 function ResendInviteDialog({
   children,
   user,
@@ -40,7 +27,7 @@ function ResendInviteDialog({
     /* @__PURE__ */ jsxs(AlertDialog.Root, { ...props, children: [
       children && /* @__PURE__ */ jsx(AlertDialog.Trigger, { children }),
       /* @__PURE__ */ jsxs(
-        AlertDialogContent,
+        AlertDialog.Content,
         {
           maxWidth: "480px",
           onOpenAutoFocus: () => {
@@ -66,14 +53,24 @@ function ResendInviteDialog({
                 },
                 children: [
                   /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(
-                    SecondaryButton,
+                    Button,
                     {
+                      type: "button",
+                      variant: "secondary",
                       ref: cancelButtonRef,
                       disabled: resendInvite.isPending,
                       children: "Cancel"
                     }
                   ) }),
-                  /* @__PURE__ */ jsx(DestructiveButton, { type: "submit", loading: resendInvite.isPending, children: "Resend" })
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "destructive",
+                      type: "submit",
+                      loading: resendInvite.isPending,
+                      children: "Resend"
+                    }
+                  )
                 ]
               }
             ) })
@@ -93,7 +90,7 @@ function ResendInviteDialog({
           setSuccessDialogIsOpen(isOpen);
         },
         children: /* @__PURE__ */ jsxs(
-          DialogContent,
+          Dialog.Content,
           {
             maxWidth: "360px",
             onOpenAutoFocus: () => {
@@ -108,7 +105,7 @@ function ResendInviteDialog({
                 " ",
                 /* @__PURE__ */ jsx(Text, { weight: "bold", children: user.email })
               ] }),
-              /* @__PURE__ */ jsx(Flex, { gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(PrimaryButton, { ref: successButtonRef, children: "Close" }) }) })
+              /* @__PURE__ */ jsx(Flex, { gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { ref: successButtonRef, children: "Close" }) }) })
             ]
           }
         )

package/dist/esm/lib/resend-invite-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/resend-invite-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  AlertDialog,\n  Callout,\n  Dialog,\n  Flex,\n  Text,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { useResendUserInvite } from \"./api/user.js\";\nimport {\n  AlertDialogContent,\n  DestructiveButton,\n  DialogContent,\n  PrimaryButton,\n  SecondaryButton,\n} from \"./elements.js\";\nimport { Member } from \"../api/endpoint.js\";\n\ninterface ResendInviteDialogProps extends AlertDialog.RootProps {\n  user: Member;\n  children?: React.ReactNode;\n}\n\nexport function ResendInviteDialog({\n  children,\n  user,\n  ...props\n}: ResendInviteDialogProps) {\n  const resendInvite = useResendUserInvite();\n  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);\n  const successButtonRef = React.useRef<HTMLButtonElement>(null);\n  const [successDialogIsOpen, setSuccessDialogIsOpen] = React.useState(false);\n\n  const onSubmitForm = () => {\n    resendInvite.mutate(\n      { userId: user.id },\n      {\n        onSuccess: () => {\n          setSuccessDialogIsOpen(true);\n        },\n      },\n    );\n  };\n\n  return (\n    <>\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>Resend invite?</AlertDialog.Title>\n          <Flex mb=\"4\" direction=\"column\" gap=\"3\">\n            <AlertDialog.Description>\n              Are you sure you want to resend the invite to{\" \"}\n              <Text weight=\"bold\">{user.email}</Text>?\n            </AlertDialog.Description>\n          </Flex>\n\n          {resendInvite.error ? (\n            <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n              <Callout.Text>\n                {getMutationErrorMessage(resendInvite.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={resendInvite.isPending}\n                >\n                  Cancel\n                </SecondaryButton>\n              </AlertDialog.Cancel>\n              <DestructiveButton type=\"submit\" loading={resendInvite.isPending}>\n                Resend\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(resendInvite.error)}\n          </section>\n        </VisuallyHidden>\n      </AlertDialog.Root>\n      <Dialog.Root\n        open={successDialogIsOpen}\n        onOpenChange={(isOpen) => {\n          if (!isOpen) {\n            props.onOpenChange?.(false);\n          }\n          setSuccessDialogIsOpen(isOpen);\n        }}\n      >\n        <DialogContent\n          maxWidth=\"360px\"\n          onOpenAutoFocus={() => {\n            requestAnimationFrame(() => {\n              successButtonRef.current?.focus();\n            });\n          }}\n        >\n          <Dialog.Title>Invite sent</Dialog.Title>\n          <Dialog.Description>\n            The invite email has been resent to{\" \"}\n            <Text weight=\"bold\">{user.email}</Text>\n          </Dialog.Description>\n          <Flex gap=\"3\" justify=\"end\" mt=\"5\">\n            <Dialog.Close>\n              <PrimaryButton ref={successButtonRef}>Close</PrimaryButton>\n            </Dialog.Close>\n          </Flex>\n        </DialogContent>\n      </Dialog.Root>\n    </>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return \"\";\n  }\n  // TODO Handle server errors\n  return \"There was an error sending the invite. Please try again.\";\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/resend-invite-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { useResendUserInvite } from \"./api/user.js\";\nimport { AlertDialog, Button, Dialog } from \"./elements.js\";\nimport { Member } from \"../api/endpoint.js\";\n\ninterface ResendInviteDialogProps extends AlertDialog.RootProps {\n  user: Member;\n  children?: React.ReactNode;\n}\n\nexport function ResendInviteDialog({\n  children,\n  user,\n  ...props\n}: ResendInviteDialogProps) {\n  const resendInvite = useResendUserInvite();\n  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);\n  const successButtonRef = React.useRef<HTMLButtonElement>(null);\n  const [successDialogIsOpen, setSuccessDialogIsOpen] = React.useState(false);\n\n  const onSubmitForm = () => {\n    resendInvite.mutate(\n      { userId: user.id },\n      {\n        onSuccess: () => {\n          setSuccessDialogIsOpen(true);\n        },\n      },\n    );\n  };\n\n  return (\n    <>\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>Resend invite?</AlertDialog.Title>\n          <Flex mb=\"4\" direction=\"column\" gap=\"3\">\n            <AlertDialog.Description>\n              Are you sure you want to resend the invite to{\" \"}\n              <Text weight=\"bold\">{user.email}</Text>?\n            </AlertDialog.Description>\n          </Flex>\n\n          {resendInvite.error ? (\n            <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n              <Callout.Text>\n                {getMutationErrorMessage(resendInvite.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                  type=\"button\"\n                  variant=\"secondary\"\n                  ref={cancelButtonRef}\n                  disabled={resendInvite.isPending}\n                >\n                  Cancel\n                </Button>\n              </AlertDialog.Cancel>\n              <Button\n                variant=\"destructive\"\n                type=\"submit\"\n                loading={resendInvite.isPending}\n              >\n                Resend\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(resendInvite.error)}\n          </section>\n        </VisuallyHidden>\n      </AlertDialog.Root>\n      <Dialog.Root\n        open={successDialogIsOpen}\n        onOpenChange={(isOpen) => {\n          if (!isOpen) {\n            props.onOpenChange?.(false);\n          }\n          setSuccessDialogIsOpen(isOpen);\n        }}\n      >\n        <Dialog.Content\n          maxWidth=\"360px\"\n          onOpenAutoFocus={() => {\n            requestAnimationFrame(() => {\n              successButtonRef.current?.focus();\n            });\n          }}\n        >\n          <Dialog.Title>Invite sent</Dialog.Title>\n          <Dialog.Description>\n            The invite email has been resent to{\" \"}\n            <Text weight=\"bold\">{user.email}</Text>\n          </Dialog.Description>\n          <Flex gap=\"3\" justify=\"end\" mt=\"5\">\n            <Dialog.Close>\n              <Button ref={successButtonRef}>Close</Button>\n            </Dialog.Close>\n          </Flex>\n        </Dialog.Content>\n      </Dialog.Root>\n    </>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return \"\";\n  }\n  // TODO Handle server errors\n  return \"There was an error sending the invite. Please try again.\";\n}\n"],"mappings":"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","names":[]}

package/dist/esm/lib/reset-mfa-dialog.d.ts

@@ -1,8 +1,8 @@
 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';
 
-interface ResetMfaDialogProps extends AlertDialog.RootProps {
+interface ResetMfaDialogProps extends RootProps {
     children?: ReactNode;
     isPasswordSet: boolean;
 }

package/dist/esm/lib/reset-mfa-dialog.js

@@ -1,12 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { AlertDialog, Flex } from "@radix-ui/themes";
-import {
-  AlertDialogContent,
-  DestructiveButton,
-  SecondaryButton
-} from "./elements.js";
+import { Flex } from "@radix-ui/themes";
+import { AlertDialog, Button } from "./elements.js";
 import { useDeleteTotpFactors } from "../api/endpoint.js";
 import { useSecuritySettings } from "./use-security-settings.js";
 import { ElevatedAccess } from "./elevated-access.js";
@@ -23,7 +19,7 @@ function ResetMfaDialog({
   }, []);
   return /* @__PURE__ */ jsxs(AlertDialog.Root, { ...props, open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(AlertDialog.Trigger, { children }),
-    /* @__PURE__ */ jsx(AlertDialogContent, { maxWidth: "480px", children: /* @__PURE__ */ jsx(ElevatedAccess, { type: "alert", children: /* @__PURE__ */ jsx(Content, { onClose: handleClose, isPasswordSet }) }) })
+    /* @__PURE__ */ jsx(AlertDialog.Content, { maxWidth: "480px", children: /* @__PURE__ */ jsx(ElevatedAccess, { type: "alert", children: /* @__PURE__ */ jsx(Content, { onClose: handleClose, isPasswordSet }) }) })
   ] });
 }
 function Content({
@@ -54,8 +50,9 @@ function Content({
         },
         children: [
           /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(
-            SecondaryButton,
+            Button,
             {
+              variant: "secondary",
               disabled: resetMfa.isPending || resetMfa.isSuccess,
               children: "Cancel"
             }
@@ -67,7 +64,7 @@ function Content({
               loading: resetMfa.isPending,
               done: resetMfa.isSuccess,
               onDone: onClose,
-              children: /* @__PURE__ */ jsx(DestructiveButton, { type: "submit", children: "Disable" })
+              children: /* @__PURE__ */ jsx(Button, { variant: "destructive", type: "submit", children: "Disable" })
             }
           )
         ]

package/dist/esm/lib/reset-mfa-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/reset-mfa-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog, Flex } from \"@radix-ui/themes\";\nimport { type ReactNode } from \"react\";\nimport {\n  AlertDialogContent,\n  DestructiveButton,\n  SecondaryButton,\n} from \"./elements.js\";\nimport { useDeleteTotpFactors } 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 ResetMfaDialogProps extends AlertDialog.RootProps {\n  children?: ReactNode;\n  isPasswordSet: boolean;\n}\n\nexport function ResetMfaDialog({\n  children,\n  isPasswordSet,\n  ...props\n}: ResetMfaDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <AlertDialog.Root {...props} open={open} onOpenChange={setOpen}>\n      <AlertDialog.Trigger>{children}</AlertDialog.Trigger>\n\n      <AlertDialogContent maxWidth=\"480px\">\n        <ElevatedAccess type=\"alert\">\n          <Content onClose={handleClose} isPasswordSet={isPasswordSet} />\n        </ElevatedAccess>\n      </AlertDialogContent>\n    </AlertDialog.Root>\n  );\n}\n\nfunction Content({\n  onClose,\n  isPasswordSet,\n}: {\n  onClose: () => void;\n  isPasswordSet: boolean;\n}) {\n  const securitySettings = useSecuritySettings();\n  const resetMfa = useDeleteTotpFactors();\n\n  const onSubmitForm = () => {\n    resetMfa.mutate();\n  };\n\n  useDialogClose(resetMfa.isSuccess, () => {\n    securitySettings.update(\"Mfa\", false);\n  });\n\n  return (\n    <>\n      <AlertDialog.Title>\n        Disable multi-factor authentication?\n      </AlertDialog.Title>\n      <AlertDialog.Description>\n        Turning off MFA will remove the additional layer of security on your\n        account.{\" \"}\n        {isPasswordSet\n          ? \"We will only ask for your password during sign-in.\"\n          : \"We will not ask for additional verification during sign-in.\"}\n      </AlertDialog.Description>\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              disabled={resetMfa.isPending || resetMfa.isSuccess}\n            >\n              Cancel\n            </SecondaryButton>\n          </AlertDialog.Cancel>\n\n          <SaveButton\n            asChild\n            loading={resetMfa.isPending}\n            done={resetMfa.isSuccess}\n            onDone={onClose}\n          >\n            <DestructiveButton type=\"submit\">Disable</DestructiveButton>\n          </SaveButton>\n        </form>\n      </Flex>\n    </>\n  );\n}\n"],"mappings":";AAiCI,SA+BA,UA9BE,KADF;AA/BJ,YAAY,WAAW;AACvB,SAAS,aAAa,YAAY;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAOxB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,QAAM,cAAc,MAAM,YAAY,MAAM;AAC1C,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,YAAY,MAAZ,EAAkB,GAAG,OAAO,MAAY,cAAc,SACrD;AAAA,wBAAC,YAAY,SAAZ,EAAqB,UAAS;AAAA,IAE/B,oBAAC,sBAAmB,UAAS,SAC3B,8BAAC,kBAAe,MAAK,SACnB,8BAAC,WAAQ,SAAS,aAAa,eAA8B,GAC/D,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AACF,GAGG;AACD,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,WAAW,qBAAqB;AAEtC,QAAM,eAAe,MAAM;AACzB,aAAS,OAAO;AAAA,EAClB;AAEA,iBAAe,SAAS,WAAW,MAAM;AACvC,qBAAiB,OAAO,OAAO,KAAK;AAAA,EACtC,CAAC;AAED,SACE,iCACE;AAAA,wBAAC,YAAY,OAAZ,EAAkB,kDAEnB;AAAA,IACA,qBAAC,YAAY,aAAZ,EAAwB;AAAA;AAAA,MAEd;AAAA,MACR,gBACG,uDACA;AAAA,OACN;AAAA,IAEA,oBAAC,QAAK,KAAI,KAAI,SAAQ,OAAM,IAAG,KAAI,SAAO,MACxC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,CAAC,UAAU;AACnB,gBAAM,eAAe;AACrB,uBAAa;AAAA,QACf;AAAA,QAEA;AAAA,8BAAC,YAAY,QAAZ,EACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,SAAS,aAAa,SAAS;AAAA,cAC1C;AAAA;AAAA,UAED,GACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,SAAO;AAAA,cACP,SAAS,SAAS;AAAA,cAClB,MAAM,SAAS;AAAA,cACf,QAAQ;AAAA,cAER,8BAAC,qBAAkB,MAAK,UAAS,qBAAO;AAAA;AAAA,UAC1C;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/lib/reset-mfa-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Flex } from \"@radix-ui/themes\";\nimport { type ReactNode } from \"react\";\nimport { AlertDialog, Button } from \"./elements.js\";\nimport { useDeleteTotpFactors } 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 ResetMfaDialogProps extends AlertDialog.RootProps {\n  children?: ReactNode;\n  isPasswordSet: boolean;\n}\n\nexport function ResetMfaDialog({\n  children,\n  isPasswordSet,\n  ...props\n}: ResetMfaDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <AlertDialog.Root {...props} open={open} onOpenChange={setOpen}>\n      <AlertDialog.Trigger>{children}</AlertDialog.Trigger>\n\n      <AlertDialog.Content maxWidth=\"480px\">\n        <ElevatedAccess type=\"alert\">\n          <Content onClose={handleClose} isPasswordSet={isPasswordSet} />\n        </ElevatedAccess>\n      </AlertDialog.Content>\n    </AlertDialog.Root>\n  );\n}\n\nfunction Content({\n  onClose,\n  isPasswordSet,\n}: {\n  onClose: () => void;\n  isPasswordSet: boolean;\n}) {\n  const securitySettings = useSecuritySettings();\n  const resetMfa = useDeleteTotpFactors();\n\n  const onSubmitForm = () => {\n    resetMfa.mutate();\n  };\n\n  useDialogClose(resetMfa.isSuccess, () => {\n    securitySettings.update(\"Mfa\", false);\n  });\n\n  return (\n    <>\n      <AlertDialog.Title>\n        Disable multi-factor authentication?\n      </AlertDialog.Title>\n      <AlertDialog.Description>\n        Turning off MFA will remove the additional layer of security on your\n        account.{\" \"}\n        {isPasswordSet\n          ? \"We will only ask for your password during sign-in.\"\n          : \"We will not ask for additional verification during sign-in.\"}\n      </AlertDialog.Description>\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              disabled={resetMfa.isPending || resetMfa.isSuccess}\n            >\n              Cancel\n            </Button>\n          </AlertDialog.Cancel>\n\n          <SaveButton\n            asChild\n            loading={resetMfa.isPending}\n            done={resetMfa.isSuccess}\n            onDone={onClose}\n          >\n            <Button variant=\"destructive\" type=\"submit\">\n              Disable\n            </Button>\n          </SaveButton>\n        </form>\n      </Flex>\n    </>\n  );\n}\n"],"mappings":";AA6BI,SA+BA,UA9BE,KADF;AA3BJ,YAAY,WAAW;AACvB,SAAS,YAAY;AAErB,SAAS,aAAa,cAAc;AACpC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAOxB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,QAAM,cAAc,MAAM,YAAY,MAAM;AAC1C,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,YAAY,MAAZ,EAAkB,GAAG,OAAO,MAAY,cAAc,SACrD;AAAA,wBAAC,YAAY,SAAZ,EAAqB,UAAS;AAAA,IAE/B,oBAAC,YAAY,SAAZ,EAAoB,UAAS,SAC5B,8BAAC,kBAAe,MAAK,SACnB,8BAAC,WAAQ,SAAS,aAAa,eAA8B,GAC/D,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AACF,GAGG;AACD,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,WAAW,qBAAqB;AAEtC,QAAM,eAAe,MAAM;AACzB,aAAS,OAAO;AAAA,EAClB;AAEA,iBAAe,SAAS,WAAW,MAAM;AACvC,qBAAiB,OAAO,OAAO,KAAK;AAAA,EACtC,CAAC;AAED,SACE,iCACE;AAAA,wBAAC,YAAY,OAAZ,EAAkB,kDAEnB;AAAA,IACA,qBAAC,YAAY,aAAZ,EAAwB;AAAA;AAAA,MAEd;AAAA,MACR,gBACG,uDACA;AAAA,OACN;AAAA,IAEA,oBAAC,QAAK,KAAI,KAAI,SAAQ,OAAM,IAAG,KAAI,SAAO,MACxC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,CAAC,UAAU;AACnB,gBAAM,eAAe;AACrB,uBAAa;AAAA,QACf;AAAA,QAEA;AAAA,8BAAC,YAAY,QAAZ,EACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,UAAU,SAAS,aAAa,SAAS;AAAA,cAC1C;AAAA;AAAA,UAED,GACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,SAAO;AAAA,cACP,SAAS,SAAS;AAAA,cAClB,MAAM,SAAS;AAAA,cACf,QAAQ;AAAA,cAER,8BAAC,UAAO,SAAQ,eAAc,MAAK,UAAS,qBAE5C;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/lib/revoke-invite-dialog.d.ts

@@ -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.js';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.js';
 
-interface RevokeInviteDialogProps extends AlertDialog.RootProps {
+interface RevokeInviteDialogProps extends RootProps {
     user: Member;
     children?: ReactNode;
 }

package/dist/esm/lib/revoke-invite-dialog.js

@@ -1,19 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  AlertDialog,
-  Callout,
-  Flex,
-  Text,
-  VisuallyHidden
-} from "@radix-ui/themes";
+import { Callout, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
 import { useRef } from "react";
 import { useRevokeUserInvite } from "./api/user.js";
-import {
-  AlertDialogContent,
-  DestructiveButton,
-  SecondaryButton
-} from "./elements.js";
+import { AlertDialog, Button } from "./elements.js";
 function RevokeInviteDialog({
   children,
   user,
@@ -34,7 +24,7 @@ function RevokeInviteDialog({
   return /* @__PURE__ */ jsxs(AlertDialog.Root, { ...props, children: [
     children && /* @__PURE__ */ jsx(AlertDialog.Trigger, { children }),
     /* @__PURE__ */ jsxs(
-      AlertDialogContent,
+      AlertDialog.Content,
       {
         maxWidth: "480px",
         onOpenAutoFocus: () => {
@@ -60,14 +50,23 @@ function RevokeInviteDialog({
               },
               children: [
                 /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(
-                  SecondaryButton,
+                  Button,
                   {
+                    variant: "secondary",
                     ref: cancelButtonRef,
                     disabled: revokeInvite.isPending,
                     children: "Cancel"
                   }
                 ) }),
-                /* @__PURE__ */ jsx(DestructiveButton, { type: "submit", loading: revokeInvite.isPending, children: "Revoke" })
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "destructive",
+                    type: "submit",
+                    loading: revokeInvite.isPending,
+                    children: "Revoke"
+                  }
+                )
               ]
             }
           ) })

package/dist/esm/lib/revoke-invite-dialog.js.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":";AA4CmB,cAYT,YAZS;AA1CnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAyB,cAAc;AACvC,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQA,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,eAAe,oBAAoB;AACzC,QAAM,kBAAkB,OAA0B,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,qBAAC,YAAY,MAAZ,EAAkB,GAAG,OACnB;AAAA,gBAAY,oBAAC,YAAY,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,8BAAC,YAAY,OAAZ,EAAkB,4BAAc;AAAA,UACjC,oBAAC,QAAK,IAAG,KAAI,WAAU,UAAS,KAAI,KAClC,+BAAC,YAAY,aAAZ,EAAwB;AAAA;AAAA,YACuB;AAAA,YAC9C,oBAAC,QAAK,QAAO,QAAQ,eAAK,OAAM;AAAA,YAAO;AAAA,aAEzC,GACF;AAAA,UAEC,aAAa,QACZ,oBAAC,QAAQ,MAAR,EAAa,OAAM,OAAM,IAAG,KAAI,IAAG,MAClC,8BAAC,QAAQ,MAAR,EACE,kCAAwB,aAAa,KAAK,GAC7C,GACF,IACE;AAAA,UAEJ,oBAAC,QAAK,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,oCAAC,YAAY,QAAZ,EACC;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL,UAAU,aAAa;AAAA,oBACxB;AAAA;AAAA,gBAED,GACF;AAAA,gBAEA,oBAAC,qBAAkB,MAAK,UAAS,SAAS,aAAa,WAAW,oBAElE;AAAA;AAAA;AAAA,UACF,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IAGA,oBAAC,kBAAe,SAAO,MACrB,8BAAC,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":";AAkCmB,cAYT,YAZS;AAhCnB,SAAS,SAAS,MAAM,MAAM,sBAAsB;AACpD,SAAyB,cAAc;AACvC,SAAS,2BAA2B;AACpC,SAAS,aAAa,cAAc;AAQ7B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,eAAe,oBAAoB;AACzC,QAAM,kBAAkB,OAA0B,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,qBAAC,YAAY,MAAZ,EAAkB,GAAG,OACnB;AAAA,gBAAY,oBAAC,YAAY,SAAZ,EAAqB,UAAS;AAAA,IAE5C;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC,UAAS;AAAA,QACT,iBAAiB,MAAM;AACrB,gCAAsB,MAAM;AAC1B,4BAAgB,SAAS,MAAM;AAAA,UACjC,CAAC;AAAA,QACH;AAAA,QAEA;AAAA,8BAAC,YAAY,OAAZ,EAAkB,4BAAc;AAAA,UACjC,oBAAC,QAAK,IAAG,KAAI,WAAU,UAAS,KAAI,KAClC,+BAAC,YAAY,aAAZ,EAAwB;AAAA;AAAA,YACuB;AAAA,YAC9C,oBAAC,QAAK,QAAO,QAAQ,eAAK,OAAM;AAAA,YAAO;AAAA,aAEzC,GACF;AAAA,UAEC,aAAa,QACZ,oBAAC,QAAQ,MAAR,EAAa,OAAM,OAAM,IAAG,KAAI,IAAG,MAClC,8BAAC,QAAQ,MAAR,EACE,kCAAwB,aAAa,KAAK,GAC7C,GACF,IACE;AAAA,UAEJ,oBAAC,QAAK,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,oCAAC,YAAY,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,oBAAC,kBAAe,SAAO,MACrB,8BAAC,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/esm/lib/save-button.d.ts

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