@workos-inc/widgets 1.4.0 → 1.4.1

package/dist/cjs/lib/{provider-icon.d.ts → provider-icon.d.cts}

@@ -1,10 +1,11 @@
-import { MarginProps } from "@radix-ui/themes/props";
-import * as React from "react";
-import { type IdentityProvider } from "./identity-providers.js";
+import { MarginProps } from '@radix-ui/themes/props';
+import * as React from 'react';
+import { IdentityProvider } from './identity-providers.cjs';
+
 interface ProviderIconProps extends React.ComponentPropsWithRef<"div">, MarginProps {
     provider: IdentityProvider;
     size?: "1" | "2" | "3" | "4";
 }
 declare const ProviderIcon: React.ForwardRefExoticComponent<Omit<ProviderIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
 export { ProviderIcon };
-//# sourceMappingURL=provider-icon.d.ts.map

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

@@ -0,0 +1,149 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var resend_invite_dialog_exports = {};
+__export(resend_invite_dialog_exports, {
+  ResendInviteDialog: () => ResendInviteDialog
+});
+module.exports = __toCommonJS(resend_invite_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var React = __toESM(require("react"), 1);
+var import_user = require("./api/user.js");
+var import_elements = require("./elements.js");
+function ResendInviteDialog({
+  children,
+  user,
+  ...props
+}) {
+  const resendInvite = (0, import_user.useResendUserInvite)();
+  const cancelButtonRef = React.useRef(null);
+  const successButtonRef = React.useRef(null);
+  const [successDialogIsOpen, setSuccessDialogIsOpen] = React.useState(false);
+  const onSubmitForm = () => {
+    resendInvite.mutate(
+      { userId: user.id },
+      {
+        onSuccess: () => {
+          setSuccessDialogIsOpen(true);
+        }
+      }
+    );
+  };
+  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.AlertDialogContent,
+        {
+          maxWidth: "480px",
+          onOpenAutoFocus: () => {
+            requestAnimationFrame(() => {
+              cancelButtonRef.current?.focus();
+            });
+          },
+          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: [
+              "Are you sure you want to resend the invite to",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: user.email }),
+              "?"
+            ] }) }),
+            resendInvite.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { color: "red", mt: "4", mb: "-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: getMutationErrorMessage(resendInvite.error) }) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { gap: "3", justify: "end", mt: "5", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "form",
+              {
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  onSubmitForm();
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_elements.SecondaryButton,
+                    {
+                      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_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,
+      {
+        open: successDialogIsOpen,
+        onOpenChange: (isOpen) => {
+          if (!isOpen) {
+            props.onOpenChange?.(false);
+          }
+          setSuccessDialogIsOpen(isOpen);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_elements.DialogContent,
+          {
+            maxWidth: "360px",
+            onOpenAutoFocus: () => {
+              requestAnimationFrame(() => {
+                successButtonRef.current?.focus();
+              });
+            },
+            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: [
+                "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" }) }) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function getMutationErrorMessage(error) {
+  if (!error) {
+    return "";
+  }
+  return "There was an error sending the invite. Please try again.";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResendInviteDialog
+});
+//# sourceMappingURL=resend-invite-dialog.cjs.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AlertDialog } from '@radix-ui/themes';
+import * as React from 'react';
+import { Member } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface ResendInviteDialogProps extends AlertDialog.RootProps {
+    user: Member;
+    children?: React.ReactNode;
+}
+declare function ResendInviteDialog({ children, user, ...props }: ResendInviteDialogProps): react_jsx_runtime.JSX.Element;
+
+export { ResendInviteDialog };

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

@@ -0,0 +1,111 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var reset_mfa_dialog_exports = {};
+__export(reset_mfa_dialog_exports, {
+  ResetMfaDialog: () => ResetMfaDialog
+});
+module.exports = __toCommonJS(reset_mfa_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_themes = require("@radix-ui/themes");
+var import_elements = require("./elements.js");
+var import_endpoint = require("../api/endpoint.js");
+var import_use_security_settings = require("./use-security-settings.js");
+var import_elevated_access = require("./elevated-access.js");
+var import_save_button = require("./save-button.js");
+var import_use_dialog_close = require("./use-dialog-close.js");
+function ResetMfaDialog({
+  children,
+  isPasswordSet,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  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 }) }) })
+  ] });
+}
+function Content({
+  onClose,
+  isPasswordSet
+}) {
+  const securitySettings = (0, import_use_security_settings.useSecuritySettings)();
+  const resetMfa = (0, import_endpoint.useDeleteTotpFactors)();
+  const onSubmitForm = () => {
+    resetMfa.mutate();
+  };
+  (0, import_use_dialog_close.useDialogClose)(resetMfa.isSuccess, () => {
+    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: [
+      "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."
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { gap: "3", justify: "end", mt: "5", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        onSubmit: (event) => {
+          event.preventDefault();
+          onSubmitForm();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_elements.SecondaryButton,
+            {
+              disabled: resetMfa.isPending || resetMfa.isSuccess,
+              children: "Cancel"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_save_button.SaveButton,
+            {
+              asChild: true,
+              loading: resetMfa.isPending,
+              done: resetMfa.isSuccess,
+              onDone: onClose,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveButton, { type: "submit", children: "Disable" })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResetMfaDialog
+});
+//# sourceMappingURL=reset-mfa-dialog.cjs.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AlertDialog } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+
+interface ResetMfaDialogProps extends AlertDialog.RootProps {
+    children?: ReactNode;
+    isPasswordSet: boolean;
+}
+declare function ResetMfaDialog({ children, isPasswordSet, ...props }: ResetMfaDialogProps): react_jsx_runtime.JSX.Element;
+
+export { ResetMfaDialog };

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

@@ -0,0 +1,103 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var revoke_invite_dialog_exports = {};
+__export(revoke_invite_dialog_exports, {
+  RevokeInviteDialog: () => RevokeInviteDialog
+});
+module.exports = __toCommonJS(revoke_invite_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_react = require("react");
+var import_user = require("./api/user.js");
+var import_elements = require("./elements.js");
+function RevokeInviteDialog({
+  children,
+  user,
+  ...props
+}) {
+  const revokeInvite = (0, import_user.useRevokeUserInvite)();
+  const cancelButtonRef = (0, import_react.useRef)(null);
+  const onSubmitForm = () => {
+    revokeInvite.mutate(
+      { userId: user.id },
+      {
+        onSuccess: () => {
+          props.onOpenChange?.(false);
+        }
+      }
+    );
+  };
+  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 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_elements.AlertDialogContent,
+      {
+        maxWidth: "480px",
+        onOpenAutoFocus: () => {
+          requestAnimationFrame(() => {
+            cancelButtonRef.current?.focus();
+          });
+        },
+        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: [
+            "Are you sure you want to revoke the invite to",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: user.email }),
+            "? This action is immediate and cannot be undone."
+          ] }) }),
+          revokeInvite.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { color: "red", mt: "4", mb: "-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: getMutationErrorMessage(revokeInvite.error) }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { gap: "3", justify: "end", mt: "5", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "form",
+            {
+              onSubmit: (event) => {
+                event.preventDefault();
+                onSubmitForm();
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_elements.SecondaryButton,
+                  {
+                    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_themes.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { "aria-live": "polite", children: getMutationErrorMessage(revokeInvite.error) }) })
+  ] });
+}
+function getMutationErrorMessage(error) {
+  if (!error) {
+    return null;
+  }
+  return "There was an error revoking the invite. Please try again.";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RevokeInviteDialog
+});
+//# sourceMappingURL=revoke-invite-dialog.cjs.map

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

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

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AlertDialog } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+import { Member } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface RevokeInviteDialogProps extends AlertDialog.RootProps {
+    user: Member;
+    children?: ReactNode;
+}
+declare function RevokeInviteDialog({ children, user, ...props }: RevokeInviteDialogProps): react_jsx_runtime.JSX.Element;
+
+export { RevokeInviteDialog };

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

@@ -0,0 +1,119 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var save_button_exports = {};
+__export(save_button_exports, {
+  SaveButton: () => SaveButton
+});
+module.exports = __toCommonJS(save_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_react_icons = require("@radix-ui/react-icons");
+var import_react = require("react");
+var import_utils = require("./utils.js");
+const DONE_TIMEOUT_MS = 1500;
+const SAVING_TIMEOUT_MS = 600;
+function SaveButton({
+  asChild = false,
+  children,
+  loading,
+  done,
+  onDone,
+  ...props
+}) {
+  const [state, setState] = (0, import_react.useState)(
+    loading ? "loading" : done ? "done" : "idle"
+  );
+  const loadingStartTime = (0, import_react.useRef)(null);
+  const Button = asChild ? import_themes.Slot : "button";
+  (0, import_react.useEffect)(() => {
+    if (loading) {
+      setState("loading");
+      loadingStartTime.current = Date.now();
+    } else if (done) {
+      const currentTime = Date.now();
+      const loadingDuration = loadingStartTime.current ? currentTime - loadingStartTime.current : 0;
+      const remainingDelay = Math.max(0, SAVING_TIMEOUT_MS - loadingDuration);
+      let doneTimer = null;
+      const savedTimer = setTimeout(() => {
+        setState("done");
+        doneTimer = setTimeout(() => {
+          onDone?.();
+        }, DONE_TIMEOUT_MS);
+      }, remainingDelay);
+      return () => {
+        clearTimeout(savedTimer);
+        if (doneTimer) {
+          clearTimeout(doneTimer);
+        }
+      };
+    } else if (!loading && !done) {
+      setState("idle");
+    }
+  }, [loading, done, onDone]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Button,
+    {
+      ...props,
+      className: (0, import_utils.namespaceClassNames)("save-button"),
+      "data-save-state": state,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Slottable, { children }),
+        state === "loading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_themes.Flex,
+          {
+            as: "span",
+            align: "center",
+            justify: "center",
+            position: "absolute",
+            inset: "0",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Spinner, { size: "1" })
+          }
+        ),
+        state === "done" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_themes.Flex,
+          {
+            as: "span",
+            align: "center",
+            justify: "center",
+            position: "absolute",
+            inset: "0",
+            gap: "1",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react_icons.CheckIcon,
+                {
+                  width: "18px",
+                  height: "18px",
+                  style: { marginLeft: "-4px" },
+                  className: (0, import_utils.namespaceClassNames)("save-button__done-icon")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { className: (0, import_utils.namespaceClassNames)("save-button__done-text"), children: "Done" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SaveButton
+});
+//# sourceMappingURL=save-button.cjs.map

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

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

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@radix-ui/themes';
+
+interface SaveButtonProps extends ButtonProps {
+    asChild?: boolean;
+    children: React.ReactNode;
+    loading?: boolean;
+    done?: boolean;
+    onDone?: () => void;
+}
+declare function SaveButton({ asChild, children, loading, done, onDone, ...props }: SaveButtonProps): react_jsx_runtime.JSX.Element;
+
+export { SaveButton };