@workos-inc/widgets 1.4.2 → 1.5.1

package/dist/esm/lib/set-password-dialog.js

@@ -1,54 +1,137 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Callout, Dialog, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
 import * as React from "react";
-import { DialogContent, Label, PasswordField, PrimaryButton, SecondaryButton, } from "./elements.js";
+import {
+  DialogContent,
+  Label,
+  PasswordField,
+  PrimaryButton,
+  SecondaryButton
+} from "./elements.js";
 import * as Form from "@radix-ui/react-form";
 import { useCreatePassword } from "../api/endpoint.js";
 import { useSecuritySettings } from "./use-security-settings.js";
 import { ElevatedAccess } from "./elevated-access.js";
 import { SaveButton } from "./save-button.js";
 import { useDialogClose } from "./use-dialog-close.js";
-export function SetPasswordDialog({ children, ...props }) {
-    const [open, setOpen] = React.useState(false);
-    const handleClose = React.useCallback(() => {
-        setOpen(false);
-    }, []);
-    return (_jsxs(Dialog.Root, { ...props, open: open, onOpenChange: setOpen, children: [_jsx(Dialog.Trigger, { children: children }), _jsx(DialogContent, { maxWidth: "480px", children: _jsx(ElevatedAccess, { children: _jsx(Content, { onClose: handleClose }) }) })] }));
+function SetPasswordDialog({
+  children,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+  return /* @__PURE__ */ jsxs(Dialog.Root, { ...props, open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { children }),
+    /* @__PURE__ */ jsx(DialogContent, { maxWidth: "480px", children: /* @__PURE__ */ jsx(ElevatedAccess, { children: /* @__PURE__ */ jsx(Content, { onClose: handleClose }) }) })
+  ] });
 }
 function Content({ onClose }) {
-    const setPassword = useCreatePassword();
-    const securitySettings = useSecuritySettings();
-    const [disableSubmit, setDisableSubmit] = React.useState(true);
-    const handleSubmit = async (event) => {
-        event.preventDefault();
-        const formData = new FormData(event.currentTarget);
-        const password = formData.get("password")?.toString();
-        if (!password) {
-            return;
-        }
-        setPassword.mutate({ data: { password } });
-    };
-    useDialogClose(setPassword.isSuccess, () => {
-        securitySettings.update("Password", true);
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(Dialog.Title, { mb: "5", children: "Set New Password" }), _jsx(VisuallyHidden, { children: _jsx(Dialog.Description, { children: "Set a new password for your account" }) }), setPassword.error ? (_jsx(Callout.Root, { color: "red", my: "-2", children: _jsx(Callout.Text, { children: getMutationErrorMessage(setPassword.error) }) })) : null, _jsxs(Form.Root, { onSubmit: handleSubmit, onChange: (event) => {
-                    const formData = new FormData(event.currentTarget);
-                    const password = formData.get("password")?.toString();
-                    const confirmPassword = formData.get("confirmPassword")?.toString();
-                    setDisableSubmit(password === "" || confirmPassword === "");
-                }, children: [_jsxs(Flex, { mt: "5", direction: "column", gap: "4", children: [_jsx(Form.Field, { name: "password", asChild: true, children: _jsxs(Flex, { direction: "column", gap: "2", children: [_jsx(Form.Label, { asChild: true, children: _jsx(Label, { children: "Enter a new password" }) }), _jsx(Form.Control, { asChild: true, children: _jsx(PasswordField, { autoFocus: true, required: true, autoComplete: "new-password", placeholder: "New password", disabled: setPassword.isPending || setPassword.isSuccess }) }), _jsx(Form.Message, { match: "valueMissing", asChild: true, children: _jsx(Text, { size: "2", color: "red", children: "Please enter a new password" }) }), _jsx(Form.Message, { match: (value) => value.length < 8, asChild: true, children: _jsx(Text, { size: "2", color: "red", children: "Password must be at least 8 characters" }) })] }) }), _jsx(Form.Field, { name: "confirmPassword", asChild: true, children: _jsxs(Flex, { direction: "column", gap: "2", children: [_jsx(Form.Label, { asChild: true, children: _jsx(Label, { children: "Confirm your new password" }) }), _jsx(Form.Control, { asChild: true, children: _jsx(PasswordField, { required: true, autoComplete: "new-password", placeholder: "Confirm new password", disabled: setPassword.isPending || setPassword.isSuccess }) }), _jsx(Form.Message, { match: "valueMissing", asChild: true, children: _jsx(Text, { size: "2", color: "red", children: "Please confirm your new password" }) }), _jsx(Form.Message, { match: (value, formData) => value !== formData.get("password"), asChild: true, children: _jsx(Text, { size: "2", color: "red", children: "The passwords you entered don\u2019t match." }) })] }) })] }), _jsxs(Flex, { mt: "5", gap: "3", justify: "end", children: [_jsx(Dialog.Close, { children: _jsx(SecondaryButton, { disabled: setPassword.isPending || setPassword.isSuccess, children: "Cancel" }) }), _jsx(SaveButton, { asChild: true, loading: setPassword.isPending, done: setPassword.isSuccess, onDone: onClose, children: _jsx(PrimaryButton, { type: "submit", disabled: disableSubmit, children: "Set password" }) })] }), _jsx(VisuallyHidden, { asChild: true, children: _jsx("section", { "aria-live": "polite", children: getMutationErrorMessage(setPassword.error) }) })] })] }));
+  const setPassword = useCreatePassword();
+  const securitySettings = useSecuritySettings();
+  const [disableSubmit, setDisableSubmit] = React.useState(true);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const password = formData.get("password")?.toString();
+    if (!password) {
+      return;
+    }
+    setPassword.mutate({ data: { password } });
+  };
+  useDialogClose(setPassword.isSuccess, () => {
+    securitySettings.update("Password", true);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dialog.Title, { mb: "5", children: "Set New Password" }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Dialog.Description, { children: "Set a new password for your account" }) }),
+    setPassword.error ? /* @__PURE__ */ jsx(Callout.Root, { color: "red", my: "-2", children: /* @__PURE__ */ jsx(Callout.Text, { children: getMutationErrorMessage(setPassword.error) }) }) : null,
+    /* @__PURE__ */ jsxs(
+      Form.Root,
+      {
+        onSubmit: handleSubmit,
+        onChange: (event) => {
+          const formData = new FormData(event.currentTarget);
+          const password = formData.get("password")?.toString();
+          const confirmPassword = formData.get("confirmPassword")?.toString();
+          setDisableSubmit(password === "" || confirmPassword === "");
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { mt: "5", direction: "column", gap: "4", children: [
+            /* @__PURE__ */ jsx(Form.Field, { name: "password", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: "Enter a new password" }) }),
+              /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+                PasswordField,
+                {
+                  autoFocus: true,
+                  required: true,
+                  autoComplete: "new-password",
+                  placeholder: "New password",
+                  disabled: setPassword.isPending || setPassword.isSuccess
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Form.Message, { match: "valueMissing", asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: "Please enter a new password" }) }),
+              /* @__PURE__ */ jsx(Form.Message, { match: (value) => value.length < 8, asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: "Password must be at least 8 characters" }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(Form.Field, { name: "confirmPassword", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+              /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { children: "Confirm your new password" }) }),
+              /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+                PasswordField,
+                {
+                  required: true,
+                  autoComplete: "new-password",
+                  placeholder: "Confirm new password",
+                  disabled: setPassword.isPending || setPassword.isSuccess
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Form.Message, { match: "valueMissing", asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: "Please confirm your new password" }) }),
+              /* @__PURE__ */ jsx(
+                Form.Message,
+                {
+                  match: (value, formData) => value !== formData.get("password"),
+                  asChild: true,
+                  children: /* @__PURE__ */ jsx(Text, { size: "2", color: "red", children: "The passwords you entered don\u2019t match." })
+                }
+              )
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { mt: "5", gap: "3", justify: "end", children: [
+            /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(
+              SecondaryButton,
+              {
+                disabled: setPassword.isPending || setPassword.isSuccess,
+                children: "Cancel"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              SaveButton,
+              {
+                asChild: true,
+                loading: setPassword.isPending,
+                done: setPassword.isSuccess,
+                onDone: onClose,
+                children: /* @__PURE__ */ jsx(PrimaryButton, { type: "submit", disabled: disableSubmit, children: "Set password" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("section", { "aria-live": "polite", children: getMutationErrorMessage(setPassword.error) }) })
+        ]
+      }
+    )
+  ] });
 }
 function getMutationErrorMessage(error) {
-    if (error instanceof Error) {
-        return error.message;
-    }
-    if (typeof error === "object" &&
-        error !== null &&
-        "message" in error &&
-        typeof error.message === "string") {
-        return error.message;
-    }
-    return "Something went wrong. Please try again.";
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === "object" && error !== null && "message" in error && typeof error.message === "string") {
+    return error.message;
+  }
+  return "Something went wrong. Please try again.";
 }
+export {
+  SetPasswordDialog
+};
 //# sourceMappingURL=set-password-dialog.js.map

package/dist/esm/lib/set-password-dialog.js.map

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

package/dist/esm/lib/status.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
-import { MarginProps } from "@radix-ui/themes/props";
-export declare const getStatusColor: (state: "success" | "waiting" | "error") => "green" | "gray" | "red";
-export interface StatusProps extends Omit<React.ComponentPropsWithoutRef<"span">, "color">, MarginProps {
+import * as React from 'react';
+import { MarginProps } from '@radix-ui/themes/props';
+
+declare const getStatusColor: (state: "success" | "waiting" | "error") => "green" | "gray" | "red";
+interface StatusProps extends Omit<React.ComponentPropsWithoutRef<"span">, "color">, MarginProps {
     children?: React.ReactNode;
     state: "success" | "waiting" | "error";
 }
 declare const Status: React.ForwardRefExoticComponent<StatusProps & React.RefAttributes<HTMLSpanElement>>;
-export { Status };
-//# sourceMappingURL=status.d.ts.map
+
+export { Status, type StatusProps, getStatusColor };

package/dist/esm/lib/status.js

@@ -1,18 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as React from "react";
 import { Spinner, Text } from "@radix-ui/themes";
-export const getStatusColor = (state) => {
-    switch (state) {
-        case "success":
-            return "green";
-        case "waiting":
-            return "gray";
-        case "error":
-            return "red";
-    }
+const getStatusColor = (state) => {
+  switch (state) {
+    case "success":
+      return "green";
+    case "waiting":
+      return "gray";
+    case "error":
+      return "red";
+  }
 };
-const Status = React.forwardRef(({ className, ...props }, forwardedRef) => (_jsxs(Text, { ref: forwardedRef, className: clsx(className, "woswidgets-status"), "data-state": props.state, ...props, size: "2", color: getStatusColor(props.state), children: [props.state === "waiting" && _jsx(Spinner, {}), props.children] })));
+const Status = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => /* @__PURE__ */ jsxs(
+    Text,
+    {
+      ref: forwardedRef,
+      className: clsx(className, "woswidgets-status"),
+      "data-state": props.state,
+      ...props,
+      size: "2",
+      color: getStatusColor(props.state),
+      children: [
+        props.state === "waiting" && /* @__PURE__ */ jsx(Spinner, {}),
+        props.children
+      ]
+    }
+  )
+);
 Status.displayName = "Status";
-export { Status };
+export {
+  Status,
+  getStatusColor
+};
 //# sourceMappingURL=status.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../src/lib/status.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAsC,EACZ,EAAE;IAC5B,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,SAAS;YACZ,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;YACZ,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC,CAAC;AASF,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,CAAC,CACzC,MAAC,IAAI,IACH,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,mBAAmB,CAAC,gBACnC,KAAK,CAAC,KAAK,KACnB,KAAK,EACT,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,aAEjC,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,OAAO,KAAG,EACxC,KAAK,CAAC,QAAQ,IACV,CACR,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"sources":["../../../src/lib/status.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport * as React from \"react\";\nimport { MarginProps } from \"@radix-ui/themes/props\";\nimport { Spinner, Text } from \"@radix-ui/themes\";\n\nexport const getStatusColor = (\n  state: \"success\" | \"waiting\" | \"error\",\n): \"green\" | \"gray\" | \"red\" => {\n  switch (state) {\n    case \"success\":\n      return \"green\";\n    case \"waiting\":\n      return \"gray\";\n    case \"error\":\n      return \"red\";\n  }\n};\n\nexport interface StatusProps\n  extends Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">,\n    MarginProps {\n  children?: React.ReactNode;\n  state: \"success\" | \"waiting\" | \"error\";\n}\n\nconst Status = React.forwardRef<HTMLSpanElement, StatusProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <Text\n      ref={forwardedRef}\n      className={clsx(className, \"woswidgets-status\")}\n      data-state={props.state}\n      {...props}\n      size=\"2\"\n      color={getStatusColor(props.state)}\n    >\n      {props.state === \"waiting\" && <Spinner />}\n      {props.children}\n    </Text>\n  ),\n);\n\nStatus.displayName = \"Status\";\n\nexport { Status };\n"],"mappings":"AA2BI,SAQgC,KARhC;AA3BJ,OAAO,UAAU;AACjB,YAAY,WAAW;AAEvB,SAAS,SAAS,YAAY;AAEvB,MAAM,iBAAiB,CAC5B,UAC6B;AAC7B,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;AASA,MAAM,SAAS,MAAM;AAAA,EACnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,iBACxB;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,mBAAmB;AAAA,MAC9C,cAAY,MAAM;AAAA,MACjB,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,OAAO,eAAe,MAAM,KAAK;AAAA,MAEhC;AAAA,cAAM,UAAU,aAAa,oBAAC,WAAQ;AAAA,QACtC,MAAM;AAAA;AAAA;AAAA,EACT;AAEJ;AAEA,OAAO,cAAc;","names":[]}

package/dist/esm/lib/use-dialog-close.d.ts

@@ -1,2 +1,3 @@
-export declare function useDialogClose(enabled: boolean, callback: () => void): void;
-//# sourceMappingURL=use-dialog-close.d.ts.map
+declare function useDialogClose(enabled: boolean, callback: () => void): void;
+
+export { useDialogClose };

package/dist/esm/lib/use-dialog-close.js

@@ -1,17 +1,19 @@
 import * as React from "react";
-export function useDialogClose(enabled, callback) {
-    const callbackRef = React.useRef(callback);
-    const firstRenderRef = React.useRef(true);
-    React.useEffect(() => {
-        if (firstRenderRef.current) {
-            firstRenderRef.current = false;
-            return;
-        }
-        const cb = callbackRef.current;
-        return () => {
-            if (enabled)
-                cb();
-        };
-    }, [enabled]);
+function useDialogClose(enabled, callback) {
+  const callbackRef = React.useRef(callback);
+  const firstRenderRef = React.useRef(true);
+  React.useEffect(() => {
+    if (firstRenderRef.current) {
+      firstRenderRef.current = false;
+      return;
+    }
+    const cb = callbackRef.current;
+    return () => {
+      if (enabled) cb();
+    };
+  }, [enabled]);
 }
+export {
+  useDialogClose
+};
 //# sourceMappingURL=use-dialog-close.js.map

package/dist/esm/lib/use-dialog-close.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-dialog-close.js","sourceRoot":"","sources":["../../../src/lib/use-dialog-close.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,cAAc,CAAC,OAAgB,EAAE,QAAoB;IACnE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAE1C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YAC3B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC;QAE/B,OAAO,GAAG,EAAE;YACV,IAAI,OAAO;gBAAE,EAAE,EAAE,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAChB,CAAC"}
+{"version":3,"sources":["../../../src/lib/use-dialog-close.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport function useDialogClose(enabled: boolean, callback: () => void) {\n  const callbackRef = React.useRef(callback);\n  const firstRenderRef = React.useRef(true);\n\n  React.useEffect(() => {\n    if (firstRenderRef.current) {\n      firstRenderRef.current = false;\n      return;\n    }\n\n    const cb = callbackRef.current;\n\n    return () => {\n      if (enabled) cb();\n    };\n  }, [enabled]);\n}\n"],"mappings":"AAAA,YAAY,WAAW;AAEhB,SAAS,eAAe,SAAkB,UAAsB;AACrE,QAAM,cAAc,MAAM,OAAO,QAAQ;AACzC,QAAM,iBAAiB,MAAM,OAAO,IAAI;AAExC,QAAM,UAAU,MAAM;AACpB,QAAI,eAAe,SAAS;AAC1B,qBAAe,UAAU;AACzB;AAAA,IACF;AAEA,UAAM,KAAK,YAAY;AAEvB,WAAO,MAAM;AACX,UAAI,QAAS,IAAG;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}

package/dist/esm/lib/use-is-hydrated.d.ts

@@ -1,2 +1,3 @@
-export declare function useIsHydrated(): boolean;
-//# sourceMappingURL=use-is-hydrated.d.ts.map
+declare function useIsHydrated(): boolean;
+
+export { useIsHydrated };

package/dist/esm/lib/use-is-hydrated.js

@@ -1,8 +1,16 @@
 import * as React from "react";
 function subscribe() {
-    return () => { };
+  return () => {
+  };
 }
-export function useIsHydrated() {
-    return React.useSyncExternalStore(subscribe, () => true, () => false);
+function useIsHydrated() {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
 }
+export {
+  useIsHydrated
+};
 //# sourceMappingURL=use-is-hydrated.js.map

package/dist/esm/lib/use-is-hydrated.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-hydrated.js","sourceRoot":"","sources":["../../../src/lib/use-is-hydrated.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,SAAS,SAAS;IAChB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,OAAO,KAAK,CAAC,oBAAoB,CAC/B,SAAS,EACT,GAAG,EAAE,CAAC,IAAI,EACV,GAAG,EAAE,CAAC,KAAK,CACZ,CAAC;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/lib/use-is-hydrated.ts"],"sourcesContent":["import * as React from \"react\";\n\nfunction subscribe() {\n  return () => {};\n}\n\nexport function useIsHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n"],"mappings":"AAAA,YAAY,WAAW;AAEvB,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,gBAAgB;AAC9B,SAAO,MAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;","names":[]}

package/dist/esm/lib/use-layout-effect.d.ts

@@ -1,4 +1,5 @@
-import { useLayoutEffect } from "react";
+import { useLayoutEffect } from 'react';
+
 declare const useIsoLayoutEffect: typeof useLayoutEffect;
+
 export { useIsoLayoutEffect as useLayoutEffect };
-//# sourceMappingURL=use-layout-effect.d.ts.map

package/dist/esm/lib/use-layout-effect.js

@@ -1,5 +1,7 @@
 import { useLayoutEffect } from "react";
 import { canUseDOM } from "./utils.js";
 const useIsoLayoutEffect = canUseDOM ? useLayoutEffect : () => void 0;
-export { useIsoLayoutEffect as useLayoutEffect };
+export {
+  useIsoLayoutEffect as useLayoutEffect
+};
 //# sourceMappingURL=use-layout-effect.js.map

package/dist/esm/lib/use-layout-effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-layout-effect.js","sourceRoot":"","sources":["../../../src/lib/use-layout-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,kBAAkB,GAAG,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AAEtE,OAAO,EAAE,kBAAkB,IAAI,eAAe,EAAE,CAAC"}
+{"version":3,"sources":["../../../src/lib/use-layout-effect.ts"],"sourcesContent":["import { useLayoutEffect } from \"react\";\nimport { canUseDOM } from \"./utils.js\";\n\nconst useIsoLayoutEffect = canUseDOM ? useLayoutEffect : () => void 0;\n\nexport { useIsoLayoutEffect as useLayoutEffect };\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAE1B,MAAM,qBAAqB,YAAY,kBAAkB,MAAM;","names":[]}

package/dist/esm/lib/use-permissions.d.ts

@@ -1,4 +1,6 @@
-type WidgetScope = "widgets:users-table:manage";
-export declare function usePermissions(scope: WidgetScope, authToken: null | string | Promise<string>): import("@tanstack/react-query").UseQueryResult<boolean, Error>;
-export {};
-//# sourceMappingURL=use-permissions.d.ts.map
+import * as _tanstack_react_query from '@tanstack/react-query';
+
+type WidgetScope = "widgets:users-table:manage" | "widgets:api-keys:manage";
+declare function usePermissions(scope: WidgetScope): _tanstack_react_query.UseQueryResult<boolean, Error>;
+
+export { usePermissions };

package/dist/esm/lib/use-permissions.js

@@ -1,31 +1,24 @@
-import { useQuery } from "@tanstack/react-query";
+import { skipToken, useQuery } from "@tanstack/react-query";
+import { getClaims } from "../api/utils.js";
 import { IncorrectPermissionsError, NoAuthTokenError } from "./errors.js";
-export function usePermissions(scope, authToken) {
-    return useQuery({
-        queryKey: ["permission", scope, authToken],
-        queryFn: async () => {
-            if (!authToken) {
-                throw new NoAuthTokenError();
-            }
-            const { permissions } = parseJwt(await authToken);
-            // When the permissions is not present in the token
-            if (!permissions || !Array.isArray(permissions)) {
-                throw new NoAuthTokenError();
-            }
-            // When the scope is not present in the permissions
-            if (!permissions.includes(scope)) {
-                throw new IncorrectPermissionsError();
-            }
-            return true;
-        },
-    });
-}
-function parseJwt(token) {
-    try {
-        return JSON.parse(atob(token.split(".")[1]));
-    }
-    catch {
-        return {};
-    }
+import { useApi } from "../api/api-provider.js";
+function usePermissions(scope) {
+  const { authToken } = useApi();
+  return useQuery({
+    queryKey: ["permission", scope, authToken],
+    queryFn: authToken ? async () => {
+      const { permissions } = getClaims(authToken);
+      if (!permissions || !Array.isArray(permissions)) {
+        throw new NoAuthTokenError();
+      }
+      if (!permissions.includes(scope)) {
+        throw new IncorrectPermissionsError();
+      }
+      return true;
+    } : skipToken
+  });
 }
+export {
+  usePermissions
+};
 //# sourceMappingURL=use-permissions.js.map

package/dist/esm/lib/use-permissions.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-permissions.js","sourceRoot":"","sources":["../../../src/lib/use-permissions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK1E,MAAM,UAAU,cAAc,CAC5B,KAAkB,EAClB,SAA0C;IAE1C,OAAO,QAAQ,CAAC;QACd,QAAQ,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,SAAS,CAAC;QAC1C,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,MAAM,IAAI,gBAAgB,EAAE,CAAC;YAC/B,CAAC;YAED,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC,MAAM,SAAS,CAAC,CAAC;YAElD,mDAAmD;YACnD,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;gBAChD,MAAM,IAAI,gBAAgB,EAAE,CAAC;YAC/B,CAAC;YAED,mDAAmD;YACnD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gBACjC,MAAM,IAAI,yBAAyB,EAAE,CAAC;YACxC,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC;KACF,CAAC,CAAC;AACL,CAAC;AAED,SAAS,QAAQ,CAAC,KAAa;IAC7B,IAAI,CAAC;QACH,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,EAAE,CAAC;IACZ,CAAC;AACH,CAAC"}
+{"version":3,"sources":["../../../src/lib/use-permissions.ts"],"sourcesContent":["import { skipToken, useQuery } from \"@tanstack/react-query\";\nimport { getClaims } from \"../api/utils.js\";\nimport { IncorrectPermissionsError, NoAuthTokenError } from \"./errors.js\";\nimport { useApi } from \"../api/api-provider.js\";\n\n// TODO find a way to reuse the same type in the @workos-inc/node package\ntype WidgetScope = \"widgets:users-table:manage\" | \"widgets:api-keys:manage\";\n\nexport function usePermissions(scope: WidgetScope) {\n  const { authToken } = useApi();\n\n  return useQuery({\n    queryKey: [\"permission\", scope, authToken],\n    queryFn: authToken\n      ? async () => {\n          const { permissions } = getClaims(authToken);\n\n          // When the permissions is not present in the token\n          if (!permissions || !Array.isArray(permissions)) {\n            throw new NoAuthTokenError();\n          }\n\n          // When the scope is not present in the permissions\n          if (!permissions.includes(scope)) {\n            throw new IncorrectPermissionsError();\n          }\n\n          return true;\n        }\n      : skipToken,\n  });\n}\n"],"mappings":"AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B,wBAAwB;AAC5D,SAAS,cAAc;AAKhB,SAAS,eAAe,OAAoB;AACjD,QAAM,EAAE,UAAU,IAAI,OAAO;AAE7B,SAAO,SAAS;AAAA,IACd,UAAU,CAAC,cAAc,OAAO,SAAS;AAAA,IACzC,SAAS,YACL,YAAY;AACV,YAAM,EAAE,YAAY,IAAI,UAAU,SAAS;AAG3C,UAAI,CAAC,eAAe,CAAC,MAAM,QAAQ,WAAW,GAAG;AAC/C,cAAM,IAAI,iBAAiB;AAAA,MAC7B;AAGA,UAAI,CAAC,YAAY,SAAS,KAAK,GAAG;AAChC,cAAM,IAAI,0BAA0B;AAAA,MACtC;AAEA,aAAO;AAAA,IACT,IACA;AAAA,EACN,CAAC;AACH;","names":[]}

package/dist/esm/lib/use-security-settings.d.ts

@@ -4,8 +4,8 @@ type Methods = "Password" | "Mfa" | "Passkey";
  * Allows optimistically updating verification method status (password, MFA, passkey)
  * while also triggering a server revalidation.
  */
-export declare function useSecuritySettings(): {
+declare function useSecuritySettings(): {
     update: (method: Methods, isSetUp: boolean) => void;
 };
-export {};
-//# sourceMappingURL=use-security-settings.d.ts.map
+
+export { useSecuritySettings };

package/dist/esm/lib/use-security-settings.js

@@ -1,36 +1,37 @@
-import { getAuthenticationInformationQueryKey, } from "../api/endpoint.js";
+import {
+  getAuthenticationInformationQueryKey
+} from "../api/endpoint.js";
 import { useQueryClient } from "@tanstack/react-query";
-/**
- * A hook that provides utilities for managing security settings.
- * Allows optimistically updating verification method status (password, MFA, passkey)
- * while also triggering a server revalidation.
- */
-export function useSecuritySettings() {
-    const client = useQueryClient();
-    const update = (method, isSetUp) => {
-        const queryKey = getAuthenticationInformationQueryKey();
-        // Optimistic update
-        client.setQueriesData({ queryKey, exact: false }, (data) => {
-            if (!data) {
-                return data;
+function useSecuritySettings() {
+  const client = useQueryClient();
+  const update = (method, isSetUp) => {
+    const queryKey = getAuthenticationInformationQueryKey();
+    client.setQueriesData(
+      { queryKey, exact: false },
+      (data) => {
+        if (!data) {
+          return data;
+        }
+        return {
+          ...data,
+          data: {
+            ...data.data,
+            verificationMethods: {
+              ...data.data.verificationMethods,
+              [method]: { ...data.data.verificationMethods[method], isSetUp }
             }
-            return {
-                ...data,
-                data: {
-                    ...data.data,
-                    verificationMethods: {
-                        ...data.data.verificationMethods,
-                        [method]: { ...data.data.verificationMethods[method], isSetUp },
-                    },
-                },
-            };
-        });
-        // Also validate it with the server
-        client.invalidateQueries({
-            queryKey: getAuthenticationInformationQueryKey(),
-            exact: false,
-        });
-    };
-    return { update };
+          }
+        };
+      }
+    );
+    client.invalidateQueries({
+      queryKey: getAuthenticationInformationQueryKey(),
+      exact: false
+    });
+  };
+  return { update };
 }
+export {
+  useSecuritySettings
+};
 //# sourceMappingURL=use-security-settings.js.map