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

package/dist/cjs/lib/otp-input.d.cts

@@ -2,6 +2,14 @@ import { Grid } from '@radix-ui/themes';
 import * as React from 'react';
 import { TextField } from './elements.cjs';
 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';
 
 type OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {
     onValueChange?: (value: string) => void;

package/dist/cjs/lib/pipes.cjs

@@ -64,17 +64,15 @@ function ConnectIntegrationButton({
 }) {
   const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_themes.Button,
+    import_elements.Button,
     {
+      variant: "secondary",
       onClick: async () => {
         try {
           await eventHandler();
         } catch {
         }
       },
-      variant: "outline",
-      size: "2",
-      color: "gray",
       children: "Connect"
     }
   );
@@ -88,7 +86,7 @@ function SharedCredentialsConnectIntegrationButton({
   const logo = settings.data?.logoDarkPath ?? settings.data?.logoLightPath;
   const appName = settings.data?.teamName ?? "This application";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Content, { maxWidth: "430px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Dialog.Content, { maxWidth: "430px", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "center", align: "center", gap: "2", mt: "2", children: [
         logo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -123,7 +121,7 @@ function SharedCredentialsConnectIntegrationButton({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { color: "panel", style: { width: "48px", height: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { size: "2", provider: integration.integrationType }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Title, { size: "2", mt: "5", mb: "5", weight: "bold", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Dialog.Title, { size: "2", mt: "5", mb: "5", weight: "bold", align: "center", children: [
         appName,
         " uses WorkOS to connect to ",
         integration.name,
@@ -164,10 +162,11 @@ function SharedCredentialsConnectIntegrationButton({
         ] })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "end", gap: "3", mt: "5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { children: "Cancel" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: "Cancel" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_elements.PrimaryButton,
+          import_elements.Button,
           {
+            type: "button",
             onClick: async () => {
               try {
                 await eventHandler();
@@ -177,22 +176,13 @@ function SharedCredentialsConnectIntegrationButton({
             },
             children: [
               "Connect ",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ExternalLinkIcon, {})
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ExternalLinkIcon, { "aria-hidden": true })
             ]
           }
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_themes.Button,
-      {
-        onClick: () => setOpen(true),
-        variant: "outline",
-        size: "2",
-        color: "gray",
-        children: "Connect"
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", onClick: () => setOpen(true), children: "Connect" })
   ] });
 }
 function ProviderStatus({ integration }) {
@@ -218,20 +208,11 @@ function ProviderStatus({ integration }) {
             children: text
           }
         ),
-        /* @__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_themes.IconButton,
-            {
-              radius: "full",
-              variant: "ghost",
-              color: "gray",
-              title: "Pipe actions",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {})
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DropdownMenu.Content, { align: "end", children: [
+        /* @__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.IconButton, { "aria-label": "Pipe actions", title: "Pipe actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {}) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DropdownMenu.Content, { align: "end", children: [
             integration.installation.state === import_endpoint.DataInstallationState.needs_reauthorization && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_themes.DropdownMenu.Item,
+              import_elements.DropdownMenu.Item,
               {
                 onClick: async () => {
                   try {
@@ -241,11 +222,18 @@ function ProviderStatus({ integration }) {
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", width: "100%", justify: "between", align: "center", children: [
                   "Reauthorize",
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ExternalLinkIcon, {})
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ExternalLinkIcon, { "aria-hidden": true })
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveMenuItem, { onClick: () => setDisconnectOpen(true), children: "Disconnect account" })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_elements.DropdownMenu.Item,
+              {
+                variant: "destructive",
+                onClick: () => setDisconnectOpen(true),
+                children: "Disconnect account"
+              }
+            )
           ] })
         ] })
       ] })
@@ -283,10 +271,10 @@ function DisconnectAccountDialog({
       reset();
     }
   }, [open, reset]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Content, { style: { width: "80vw", maxWidth: "520px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Title, { children: "Disconnect account" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Content, { style: { width: "80vw", maxWidth: "520px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Title, { children: "Disconnect account" }),
     error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { my: "5", color: "red", role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: "An error occurred while disconnecting your account. Please refresh the page and try again." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Description, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Description, { children: [
       "Are you sure you want to disconnect your",
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "span", weight: "bold", children: integration.name }),
@@ -294,10 +282,11 @@ function DisconnectAccountDialog({
       "account?"
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "3", justify: "end", mt: "5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: "Cancel" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_elements.DestructiveButton,
+        import_elements.Button,
         {
+          variant: "destructive",
           disabled: isPending,
           loading: isPending,
           onClick: () => deleteDataInstallation({ installationId: installation.id }),
@@ -310,10 +299,10 @@ function DisconnectAccountDialog({
 const PipesLoading = ({ count, ...domProps }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("loading", domProps), children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { provider: "google" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", weight: "bold", children: "Google Drive" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { provider: "google" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", weight: "bold", children: "Google Drive" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Button, { disabled: true, children: "Connect" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", disabled: true, children: "Connect" }) })
   ] }) }, index)) });
 };
 const Pipes = ({ integrations, ...domProps }) => {

package/dist/cjs/lib/pipes.cjs.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        <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\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        </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            <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/cjs/lib/pipes.d.cts

@@ -2,6 +2,18 @@ import { DataIntegration } 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 PipesProps extends WidgetRootDomProps {
     integrations: DataIntegration[];

package/dist/cjs/lib/resend-invite-dialog.cjs

@@ -57,10 +57,10 @@ function ResendInviteDialog({
     );
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Root, { ...props, children: [
-      children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Trigger, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Root, { ...props, children: [
+      children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Trigger, { children }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_elements.AlertDialogContent,
+        import_elements.AlertDialog.Content,
         {
           maxWidth: "480px",
           onOpenAutoFocus: () => {
@@ -69,8 +69,8 @@ function ResendInviteDialog({
             });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Title, { children: "Resend invite?" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { mb: "4", direction: "column", gap: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Description, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Title, { children: "Resend invite?" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { mb: "4", direction: "column", gap: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Description, { children: [
               "Are you sure you want to resend the invite to",
               " ",
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: user.email }),
@@ -85,15 +85,25 @@ function ResendInviteDialog({
                   onSubmitForm();
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_elements.SecondaryButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_elements.Button,
                     {
+                      type: "button",
+                      variant: "secondary",
                       ref: cancelButtonRef,
                       disabled: resendInvite.isPending,
                       children: "Cancel"
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveButton, { type: "submit", loading: resendInvite.isPending, children: "Resend" })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_elements.Button,
+                    {
+                      variant: "destructive",
+                      type: "submit",
+                      loading: resendInvite.isPending,
+                      children: "Resend"
+                    }
+                  )
                 ]
               }
             ) })
@@ -103,7 +113,7 @@ function ResendInviteDialog({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { "aria-live": "polite", children: getMutationErrorMessage(resendInvite.error) }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_themes.Dialog.Root,
+      import_elements.Dialog.Root,
       {
         open: successDialogIsOpen,
         onOpenChange: (isOpen) => {
@@ -113,7 +123,7 @@ function ResendInviteDialog({
           setSuccessDialogIsOpen(isOpen);
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_elements.DialogContent,
+          import_elements.Dialog.Content,
           {
             maxWidth: "360px",
             onOpenAutoFocus: () => {
@@ -122,13 +132,13 @@ function ResendInviteDialog({
               });
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Title, { children: "Invite sent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Description, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Title, { children: "Invite sent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Dialog.Description, { children: [
                 "The invite email has been resent to",
                 " ",
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: user.email })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { ref: successButtonRef, children: "Close" }) }) })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { gap: "3", justify: "end", mt: "5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { ref: successButtonRef, children: "Close" }) }) })
             ]
           }
         )

package/dist/cjs/lib/resend-invite-dialog.cjs.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/cjs/lib/resend-invite-dialog.d.cts

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

package/dist/cjs/lib/reset-mfa-dialog.cjs

@@ -50,9 +50,9 @@ function ResetMfaDialog({
   const handleClose = React.useCallback(() => {
     setOpen(false);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Root, { ...props, open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Trigger, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialogContent, { maxWidth: "480px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elevated_access.ElevatedAccess, { type: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { onClose: handleClose, isPasswordSet }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Root, { ...props, open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Trigger, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Content, { maxWidth: "480px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elevated_access.ElevatedAccess, { type: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { onClose: handleClose, isPasswordSet }) }) })
   ] });
 }
 function Content({
@@ -68,8 +68,8 @@ function Content({
     securitySettings.update("Mfa", false);
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Title, { children: "Disable multi-factor authentication?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Description, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Title, { children: "Disable multi-factor authentication?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Description, { children: [
       "Turning off MFA will remove the additional layer of security on your account.",
       " ",
       isPasswordSet ? "We will only ask for your password during sign-in." : "We will not ask for additional verification during sign-in."
@@ -82,9 +82,10 @@ function Content({
           onSubmitForm();
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_elements.SecondaryButton,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_elements.Button,
             {
+              variant: "secondary",
               disabled: resetMfa.isPending || resetMfa.isSuccess,
               children: "Cancel"
             }
@@ -96,7 +97,7 @@ function Content({
               loading: resetMfa.isPending,
               done: resetMfa.isSuccess,
               onDone: onClose,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveButton, { type: "submit", children: "Disable" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "destructive", type: "submit", children: "Disable" })
             }
           )
         ]

package/dist/cjs/lib/reset-mfa-dialog.cjs.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCI;AA/BJ,YAAuB;AACvB,oBAAkC;AAElC,sBAIO;AACP,sBAAqC;AACrC,mCAAoC;AACpC,6BAA+B;AAC/B,yBAA2B;AAC3B,8BAA+B;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,6CAAC,0BAAY,MAAZ,EAAkB,GAAG,OAAO,MAAY,cAAc,SACrD;AAAA,gDAAC,0BAAY,SAAZ,EAAqB,UAAS;AAAA,IAE/B,4CAAC,sCAAmB,UAAS,SAC3B,sDAAC,yCAAe,MAAK,SACnB,sDAAC,WAAQ,SAAS,aAAa,eAA8B,GAC/D,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AACF,GAGG;AACD,QAAM,uBAAmB,kDAAoB;AAC7C,QAAM,eAAW,sCAAqB;AAEtC,QAAM,eAAe,MAAM;AACzB,aAAS,OAAO;AAAA,EAClB;AAEA,8CAAe,SAAS,WAAW,MAAM;AACvC,qBAAiB,OAAO,OAAO,KAAK;AAAA,EACtC,CAAC;AAED,SACE,4EACE;AAAA,gDAAC,0BAAY,OAAZ,EAAkB,kDAEnB;AAAA,IACA,6CAAC,0BAAY,aAAZ,EAAwB;AAAA;AAAA,MAEd;AAAA,MACR,gBACG,uDACA;AAAA,OACN;AAAA,IAEA,4CAAC,sBAAK,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,sDAAC,0BAAY,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,sDAAC,qCAAkB,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BI;AA3BJ,YAAuB;AACvB,oBAAqB;AAErB,sBAAoC;AACpC,sBAAqC;AACrC,mCAAoC;AACpC,6BAA+B;AAC/B,yBAA2B;AAC3B,8BAA+B;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,6CAAC,4BAAY,MAAZ,EAAkB,GAAG,OAAO,MAAY,cAAc,SACrD;AAAA,gDAAC,4BAAY,SAAZ,EAAqB,UAAS;AAAA,IAE/B,4CAAC,4BAAY,SAAZ,EAAoB,UAAS,SAC5B,sDAAC,yCAAe,MAAK,SACnB,sDAAC,WAAQ,SAAS,aAAa,eAA8B,GAC/D,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AACF,GAGG;AACD,QAAM,uBAAmB,kDAAoB;AAC7C,QAAM,eAAW,sCAAqB;AAEtC,QAAM,eAAe,MAAM;AACzB,aAAS,OAAO;AAAA,EAClB;AAEA,8CAAe,SAAS,WAAW,MAAM;AACvC,qBAAiB,OAAO,OAAO,KAAK;AAAA,EACtC,CAAC;AAED,SACE,4EACE;AAAA,gDAAC,4BAAY,OAAZ,EAAkB,kDAEnB;AAAA,IACA,6CAAC,4BAAY,aAAZ,EAAwB;AAAA;AAAA,MAEd;AAAA,MACR,gBACG,uDACA;AAAA,OACN;AAAA,IAEA,4CAAC,sBAAK,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,sDAAC,4BAAY,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,sDAAC,0BAAO,SAAQ,eAAc,MAAK,UAAS,qBAE5C;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/cjs/lib/reset-mfa-dialog.d.cts

@@ -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/cjs/lib/revoke-invite-dialog.cjs

@@ -44,10 +44,10 @@ function RevokeInviteDialog({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Root, { ...props, children: [
-    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Trigger, { children }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Root, { ...props, children: [
+    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Trigger, { children }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_elements.AlertDialogContent,
+      import_elements.AlertDialog.Content,
       {
         maxWidth: "480px",
         onOpenAutoFocus: () => {
@@ -56,8 +56,8 @@ function RevokeInviteDialog({
           });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Title, { children: "Revoke invite?" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { mb: "4", direction: "column", gap: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Description, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Title, { children: "Revoke invite?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { mb: "4", direction: "column", gap: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Description, { children: [
             "Are you sure you want to revoke the invite to",
             " ",
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: user.email }),
@@ -72,15 +72,24 @@ function RevokeInviteDialog({
                 onSubmitForm();
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_elements.SecondaryButton,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_elements.Button,
                   {
+                    variant: "secondary",
                     ref: cancelButtonRef,
                     disabled: revokeInvite.isPending,
                     children: "Cancel"
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveButton, { type: "submit", loading: revokeInvite.isPending, children: "Revoke" })
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_elements.Button,
+                  {
+                    variant: "destructive",
+                    type: "submit",
+                    loading: revokeInvite.isPending,
+                    children: "Revoke"
+                  }
+                )
               ]
             }
           ) })