@workos-inc/widgets 1.4.2 → 1.5.1

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

@@ -0,0 +1,277 @@
+"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 invite_user_dialog_exports = {};
+__export(invite_user_dialog_exports, {
+  InviteUserDialog: () => InviteUserDialog
+});
+module.exports = __toCommonJS(invite_user_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_elements = require("./elements.js");
+var import_elements2 = require("./elements.js");
+var import_utils = require("./utils.js");
+var import_user = require("./api/user.js");
+var import_endpoint = require("../api/endpoint.js");
+const PLACEHOLDER_ROLE = "_rolePlaceholder";
+function InviteUserDialog({ children }) {
+  const [open, setOpen] = React.useState(false);
+  const dialogId = toId("invite-user", React.useId());
+  const formId = toId(dialogId, "form");
+  const inviteUser = (0, import_user.useInviteUser)();
+  const rolesQuery = (0, import_endpoint.useRoles)({
+    query: { initialData: [] }
+  });
+  const roles = rolesQuery.data;
+  const [selectedRole, setSelectedRole] = React.useState(
+    () => getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE
+  );
+  React.useEffect(() => {
+    setSelectedRole((selectedRole2) => {
+      if (roles.find((role) => role.slug === selectedRole2)) {
+        return selectedRole2;
+      }
+      return getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE;
+    });
+  }, [roles]);
+  const onSubmitForm = (data) => {
+    if (inviteUser.isPending || rolesQuery.status !== "success") {
+      return;
+    }
+    inviteUser.mutate(
+      { data },
+      {
+        onSuccess: () => {
+          setOpen(false);
+        }
+      }
+    );
+  };
+  const formErrors = getFormErrors(inviteUser.error);
+  useFormFieldFocusOnError(dialogId, inviteUser.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Root, { open, onOpenChange: setOpen, children: [
+    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Trigger, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DialogContent, { maxWidth: "480px", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Title, { children: "Invite user" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Description, { children: "An invitation will be sent to this email address with a link to complete their account." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { direction: "column", gap: "4", mt: "5", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          id: formId,
+          onSubmit: async (event) => {
+            event.preventDefault();
+            onSubmitForm({
+              email: event.currentTarget.email.value,
+              roles: [selectedRole]
+            });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              FormField,
+              {
+                rootId: dialogId,
+                name: "email",
+                label: "Email address",
+                error: formErrors.fields.email,
+                required: true,
+                control: (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_elements.TextField,
+                  {
+                    ...props,
+                    "data-1p-ignore": "true",
+                    "data-lpignore": "true",
+                    type: "email",
+                    autoComplete: "off",
+                    placeholder: "Enter an email address"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              FormField,
+              {
+                rootId: dialogId,
+                name: "role",
+                label: "Role",
+                error: formErrors.fields.role,
+                disabled: rolesQuery.isPending || roles.length <= 1,
+                info: roles.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  "New users will be invited with the",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: roles[0].name }),
+                  " role, as it is the only one available."
+                ] }) : void 0,
+                control: ({
+                  id,
+                  "aria-invalid": ariaInvalid,
+                  "aria-describedby": ariaDescribedBy,
+                  ...props
+                }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_themes.Select.Root,
+                  {
+                    ...props,
+                    value: selectedRole,
+                    onValueChange: setSelectedRole,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_elements.SelectTrigger,
+                        {
+                          id,
+                          "aria-invalid": ariaInvalid,
+                          "aria-describedby": ariaDescribedBy
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.SelectContent, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { value: PLACEHOLDER_ROLE, disabled: true, children: "Select a role" }),
+                        roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SelectItem, { value: role.slug, children: role.name }, role.slug))
+                      ] })
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ) }),
+      formErrors.form ? /* @__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: formErrors.form }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { mt: "5", gap: "3", justify: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.SecondaryButton, { disabled: inviteUser.isPending, children: "Cancel" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_elements.PrimaryButton,
+          {
+            form: formId,
+            loading: inviteUser.isPending,
+            disabled: rolesQuery.isPending || void 0,
+            children: "Invite"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { "aria-live": "polite", children: formErrors.form }) })
+    ] }, String(open))
+  ] });
+}
+function FormField({
+  rootId,
+  name,
+  label,
+  error,
+  info,
+  control,
+  required,
+  disabled
+}) {
+  const fieldId = toId(rootId, name);
+  const errorId = toId(rootId, name, "error");
+  const infoId = toId(rootId, name, "info");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements2.Label, { htmlFor: fieldId, children: label }),
+    control({
+      id: fieldId,
+      name,
+      "aria-describedby": (() => {
+        const tags = [];
+        if (error) {
+          tags.push(errorId);
+        }
+        if (info) {
+          tags.push(infoId);
+        }
+        if (tags.length === 0) {
+          return void 0;
+        }
+        return tags.join(" ");
+      })(),
+      "aria-invalid": !!error || void 0,
+      required: required || void 0,
+      disabled: disabled || void 0
+    }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "red", size: "2", id: errorId, children: error }) : null,
+    info ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "gray", size: "2", id: infoId, mt: "1", children: info }) : null
+  ] });
+}
+function toId(...parts) {
+  return parts.join("-");
+}
+function getFormErrors(queryError) {
+  const formErrors = {
+    form: null,
+    fields: {
+      email: null,
+      role: null
+    }
+  };
+  if (queryError) {
+    if (!(0, import_utils.isErrorLike)(queryError)) {
+      return {
+        ...formErrors,
+        form: "An unexpected error occurred. Please try again."
+      };
+    }
+    switch (queryError.message.toLowerCase()) {
+      case "user already exists":
+      case "user already invited":
+      case "invalid email":
+        formErrors.fields.email = queryError.message;
+        break;
+      case "invalid role":
+        formErrors.fields.role = queryError.message;
+        break;
+      default:
+        formErrors.form = "There was an error inviting this user. Please refresh the page and try again.";
+        break;
+    }
+  }
+  return formErrors;
+}
+function useFormFieldFocusOnError(dialogId, queryError) {
+  React.useEffect(() => {
+    const fieldErrors = getFormErrors(queryError).fields;
+    for (const [name, error] of Object.entries(fieldErrors)) {
+      if (error) {
+        const fieldElement = document.getElementById(toId(dialogId, name));
+        if (fieldElement) {
+          fieldElement?.focus();
+          if ("select" in fieldElement) {
+            fieldElement.select();
+          }
+        }
+        break;
+      }
+    }
+  }, [dialogId, queryError]);
+}
+function getDefaultRole(roles) {
+  return roles.find((role) => role.default) || roles[0];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InviteUserDialog
+});
+//# sourceMappingURL=invite-user-dialog.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/invite-user-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Callout,\n  Dialog,\n  Flex,\n  Select,\n  Text,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport {\n  DialogContent,\n  PrimaryButton,\n  SecondaryButton,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  TextField,\n} from \"./elements.js\";\nimport { Label } from \"./elements.js\";\nimport { isErrorLike } from \"./utils.js\";\nimport { useInviteUser } from \"./api/user.js\";\nimport { InviteMemberInput, MemberRole, useRoles } from \"../api/endpoint.js\";\n\n/**\n * Used to stub a fake value for the role select. It will be selected by default\n * before the role query resolves, or if the query results in an error. We do\n * this because we need to provide _any_ value to the select to avoid\n * controlled/uncontrolled bugs.\n */\nconst PLACEHOLDER_ROLE = \"_rolePlaceholder\";\n\ninterface InviteUserDialogProps {\n  children?: React.ReactNode;\n}\n\nexport function InviteUserDialog({ children }: InviteUserDialogProps) {\n  const [open, setOpen] = React.useState(false);\n  const dialogId = toId(\"invite-user\", React.useId());\n  const formId = toId(dialogId, \"form\");\n\n  const inviteUser = useInviteUser();\n  const rolesQuery = useRoles({\n    query: { initialData: [] },\n  });\n  const roles = rolesQuery.data;\n  const [selectedRole, setSelectedRole] = React.useState(\n    () => getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE,\n  );\n  React.useEffect(() => {\n    // Update the selected role if it's not in the list (eg if the list was\n    // previously empty and the query resolved)\n    setSelectedRole((selectedRole) => {\n      if (roles.find((role) => role.slug === selectedRole)) {\n        // if current selected role is in the new list, don't change it\n        return selectedRole;\n      }\n      return getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE;\n    });\n  }, [roles]);\n\n  const onSubmitForm = (data: InviteMemberInput) => {\n    if (inviteUser.isPending || rolesQuery.status !== \"success\") {\n      return;\n    }\n    inviteUser.mutate(\n      { data },\n      {\n        onSuccess: () => {\n          setOpen(false);\n        },\n      },\n    );\n  };\n\n  const formErrors = getFormErrors(inviteUser.error);\n  useFormFieldFocusOnError(dialogId, inviteUser.error);\n\n  return (\n    <Dialog.Root open={open} onOpenChange={setOpen}>\n      {children && <Dialog.Trigger>{children}</Dialog.Trigger>}\n      <DialogContent maxWidth=\"480px\" key={String(open)}>\n        <Dialog.Title>Invite user</Dialog.Title>\n        <Dialog.Description>\n          An invitation will be sent to this email address with a link to\n          complete their account.\n        </Dialog.Description>\n        <Flex direction=\"column\" gap=\"4\" mt=\"5\" asChild>\n          <form\n            id={formId}\n            onSubmit={async (event) => {\n              event.preventDefault();\n              onSubmitForm({\n                email: event.currentTarget.email.value,\n                roles: [selectedRole],\n              });\n            }}\n          >\n            <FormField\n              rootId={dialogId}\n              name=\"email\"\n              label=\"Email address\"\n              error={formErrors.fields.email}\n              required\n              control={(props) => (\n                <TextField\n                  {...props}\n                  data-1p-ignore=\"true\"\n                  data-lpignore=\"true\"\n                  type=\"email\"\n                  autoComplete=\"off\"\n                  placeholder=\"Enter an email address\"\n                />\n              )}\n            />\n\n            <FormField\n              rootId={dialogId}\n              name=\"role\"\n              label=\"Role\"\n              error={formErrors.fields.role}\n              disabled={rolesQuery.isPending || roles.length <= 1}\n              info={\n                roles.length === 1 ? (\n                  <>\n                    New users will be invited with the{\" \"}\n                    <Text weight=\"bold\">{roles[0].name}</Text> role, as it is\n                    the only one available.\n                  </>\n                ) : undefined\n              }\n              control={({\n                id,\n                \"aria-invalid\": ariaInvalid,\n                \"aria-describedby\": ariaDescribedBy,\n                ...props\n              }) => (\n                <Select.Root\n                  {...props}\n                  value={selectedRole}\n                  onValueChange={setSelectedRole}\n                >\n                  <SelectTrigger\n                    id={id}\n                    aria-invalid={ariaInvalid}\n                    aria-describedby={ariaDescribedBy}\n                  />\n                  <SelectContent>\n                    <SelectItem value={PLACEHOLDER_ROLE} disabled>\n                      Select a role\n                    </SelectItem>\n                    {roles.map((role) => (\n                      <SelectItem key={role.slug} value={role.slug}>\n                        {role.name}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select.Root>\n              )}\n            />\n          </form>\n        </Flex>\n\n        {formErrors.form ? (\n          <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n            <Callout.Text>{formErrors.form}</Callout.Text>\n          </Callout.Root>\n        ) : null}\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <SecondaryButton disabled={inviteUser.isPending}>\n              Cancel\n            </SecondaryButton>\n          </Dialog.Close>\n          <PrimaryButton\n            form={formId}\n            loading={inviteUser.isPending}\n            disabled={rolesQuery.isPending || undefined}\n          >\n            Invite\n          </PrimaryButton>\n        </Flex>\n        {/* mirror errors in a live region */}\n        <VisuallyHidden asChild>\n          <section aria-live=\"polite\">{formErrors.form}</section>\n        </VisuallyHidden>\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n\ninterface FormControlRenderProps {\n  id: string;\n  name: string;\n  \"aria-describedby\": string | undefined;\n  \"aria-invalid\"?: boolean;\n  required: boolean | undefined;\n  disabled: boolean | undefined;\n}\n\nfunction FormField({\n  rootId,\n  name,\n  label,\n  error,\n  info,\n  control,\n  required,\n  disabled,\n}: {\n  rootId: string;\n  name: string;\n  label: string;\n  error?: React.ReactNode;\n  info?: React.ReactNode;\n  control: (props: FormControlRenderProps) => React.ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n}) {\n  const fieldId = toId(rootId, name);\n  const errorId = toId(rootId, name, \"error\");\n  const infoId = toId(rootId, name, \"info\");\n  return (\n    <Flex direction=\"column\" gap=\"1\">\n      <Label htmlFor={fieldId}>{label}</Label>\n      {control({\n        id: fieldId,\n        name,\n        \"aria-describedby\": (() => {\n          const tags: string[] = [];\n          if (error) {\n            tags.push(errorId);\n          }\n          if (info) {\n            tags.push(infoId);\n          }\n          if (tags.length === 0) {\n            return undefined;\n          }\n          return tags.join(\" \");\n        })(),\n        \"aria-invalid\": !!error || undefined,\n        required: required || undefined,\n        disabled: disabled || undefined,\n      })}\n\n      {error ? (\n        <Text color=\"red\" size=\"2\" id={errorId}>\n          {error}\n        </Text>\n      ) : null}\n      {info ? (\n        <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n          {info}\n        </Text>\n      ) : null}\n    </Flex>\n  );\n}\n\nfunction toId(...parts: string[]) {\n  return parts.join(\"-\");\n}\n\nfunction getFormErrors(queryError: unknown) {\n  const formErrors = {\n    form: null as string | null,\n    fields: {\n      email: null as string | null,\n      role: null as string | null,\n    },\n  };\n\n  if (queryError) {\n    if (!isErrorLike(queryError)) {\n      return {\n        ...formErrors,\n        form: \"An unexpected error occurred. Please try again.\",\n      };\n    }\n\n    switch (queryError.message.toLowerCase()) {\n      case \"user already exists\":\n      case \"user already invited\":\n      case \"invalid email\":\n        formErrors.fields.email = queryError.message;\n        break;\n      case \"invalid role\":\n        formErrors.fields.role = queryError.message;\n        break;\n      default:\n        // TODO handle more cases for various server errors\n        formErrors.form =\n          \"There was an error inviting this user. Please refresh the page and try again.\";\n        break;\n    }\n  }\n\n  return formErrors;\n}\n\nfunction useFormFieldFocusOnError(dialogId: string, queryError: unknown) {\n  React.useEffect(() => {\n    const fieldErrors = getFormErrors(queryError).fields;\n    for (const [name, error] of Object.entries(fieldErrors)) {\n      if (error) {\n        const fieldElement = document.getElementById(toId(dialogId, name)) as\n          | HTMLInputElement\n          | HTMLButtonElement\n          | null;\n        if (fieldElement) {\n          fieldElement?.focus();\n          if (\"select\" in fieldElement) {\n            fieldElement.select();\n          }\n        }\n        break;\n      }\n    }\n  }, [dialogId, queryError]);\n}\n\nfunction getDefaultRole(roles: MemberRole[]) {\n  return roles.find((role) => role.default) || roles[0];\n}\n"],"mappings":"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","names":["import_elements","selectedRole"]}

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

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface InviteUserDialogProps {
+    children?: React.ReactNode;
+}
+declare function InviteUserDialog({ children }: InviteUserDialogProps): react_jsx_runtime.JSX.Element;
+
+export { InviteUserDialog };

package/dist/cjs/lib/logout-all-sessions-dialog.cjs

@@ -0,0 +1,97 @@
+"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 logout_all_sessions_dialog_exports = {};
+__export(logout_all_sessions_dialog_exports, {
+  LogoutAllSessionsDialog: () => LogoutAllSessionsDialog
+});
+module.exports = __toCommonJS(logout_all_sessions_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_react_query = require("@tanstack/react-query");
+var import_save_button = require("./save-button.js");
+function LogoutAllSessionsDialog({
+  open,
+  onOpenChange,
+  children,
+  currentSessionId,
+  ...props
+}) {
+  const client = (0, import_react_query.useQueryClient)();
+  const revokeAllSessions = (0, import_endpoint.useRevokeAllSessions)();
+  const onSubmitForm = () => {
+    revokeAllSessions.mutate({ data: { currentSessionId } });
+  };
+  const handleDone = React.useCallback(() => {
+    onOpenChange?.(false);
+    client.invalidateQueries({
+      queryKey: (0, import_endpoint.getSessionsQueryKey)()
+    });
+  }, [client, onOpenChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Root, { open, onOpenChange, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialogContent, { maxWidth: "480px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Title, { children: "Sign out of all other devices?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Description, { children: "You will be logged out of all other active sessions on other devices, except this one." }),
+    /* @__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: revokeAllSessions.isPending || revokeAllSessions.isSuccess,
+              children: "Cancel"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_save_button.SaveButton,
+            {
+              asChild: true,
+              loading: revokeAllSessions.isPending,
+              done: revokeAllSessions.isSuccess,
+              onDone: handleDone,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveButton, { type: "submit", children: "Sign out" })
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LogoutAllSessionsDialog
+});
+//# sourceMappingURL=logout-all-sessions-dialog.cjs.map

package/dist/cjs/lib/logout-all-sessions-dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/logout-all-sessions-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 { getSessionsQueryKey, useRevokeAllSessions } from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { SaveButton } from \"./save-button.js\";\n\ninterface LogoutAllSessionsDialogProps extends AlertDialog.RootProps {\n  children?: ReactNode;\n  currentSessionId: string;\n}\n\nexport function LogoutAllSessionsDialog({\n  open,\n  onOpenChange,\n  children,\n  currentSessionId,\n  ...props\n}: LogoutAllSessionsDialogProps) {\n  const client = useQueryClient();\n\n  const revokeAllSessions = useRevokeAllSessions();\n\n  const onSubmitForm = () => {\n    revokeAllSessions.mutate({ data: { currentSessionId } });\n  };\n\n  const handleDone = React.useCallback(() => {\n    onOpenChange?.(false);\n\n    client.invalidateQueries({\n      queryKey: getSessionsQueryKey(),\n    });\n  }, [client, onOpenChange]);\n\n  return (\n    <AlertDialog.Root open={open} onOpenChange={onOpenChange} {...props}>\n      <AlertDialogContent maxWidth=\"480px\">\n        <AlertDialog.Title>Sign out of all other devices?</AlertDialog.Title>\n        <AlertDialog.Description>\n          You will be logged out of all other active sessions on other devices,\n          except this one.\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={\n                  revokeAllSessions.isPending || revokeAllSessions.isSuccess\n                }\n              >\n                Cancel\n              </SecondaryButton>\n            </AlertDialog.Cancel>\n\n            <SaveButton\n              asChild\n              loading={revokeAllSessions.isPending}\n              done={revokeAllSessions.isSuccess}\n              onDone={handleDone}\n            >\n              <DestructiveButton type=\"submit\">Sign out</DestructiveButton>\n            </SaveButton>\n          </form>\n        </Flex>\n      </AlertDialogContent>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CQ;AA3CR,YAAuB;AACvB,oBAAkC;AAElC,sBAIO;AACP,sBAA0D;AAC1D,yBAA+B;AAC/B,yBAA2B;AAOpB,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,QAAM,aAAS,mCAAe;AAE9B,QAAM,wBAAoB,sCAAqB;AAE/C,QAAM,eAAe,MAAM;AACzB,sBAAkB,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;AAAA,EACzD;AAEA,QAAM,aAAa,MAAM,YAAY,MAAM;AACzC,mBAAe,KAAK;AAEpB,WAAO,kBAAkB;AAAA,MACvB,cAAU,qCAAoB;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACE,4CAAC,0BAAY,MAAZ,EAAiB,MAAY,cAA6B,GAAG,OAC5D,uDAAC,sCAAmB,UAAS,SAC3B;AAAA,gDAAC,0BAAY,OAAZ,EAAkB,4CAA8B;AAAA,IACjD,4CAAC,0BAAY,aAAZ,EAAwB,oGAGzB;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,UACE,kBAAkB,aAAa,kBAAkB;AAAA,cAEpD;AAAA;AAAA,UAED,GACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,SAAO;AAAA,cACP,SAAS,kBAAkB;AAAA,cAC3B,MAAM,kBAAkB;AAAA,cACxB,QAAQ;AAAA,cAER,sDAAC,qCAAkB,MAAK,UAAS,sBAAQ;AAAA;AAAA,UAC3C;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/cjs/lib/logout-all-sessions-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 LogoutAllSessionsDialogProps extends AlertDialog.RootProps {
+    children?: ReactNode;
+    currentSessionId: string;
+}
+declare function LogoutAllSessionsDialog({ open, onOpenChange, children, currentSessionId, ...props }: LogoutAllSessionsDialogProps): react_jsx_runtime.JSX.Element;
+
+export { LogoutAllSessionsDialog };

package/dist/cjs/lib/logout-dialog.cjs

@@ -0,0 +1,109 @@
+"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 logout_dialog_exports = {};
+__export(logout_dialog_exports, {
+  LogoutDialog: () => LogoutDialog
+});
+module.exports = __toCommonJS(logout_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_react_query = require("@tanstack/react-query");
+var import_save_button = require("./save-button.js");
+var import_utils = require("./utils.js");
+function LogoutDialog({
+  children,
+  session,
+  open,
+  onOpenChange,
+  ...props
+}) {
+  const client = (0, import_react_query.useQueryClient)();
+  const userAgent = (0, import_utils.parseUserAgent)(session.userAgent);
+  const device = userAgent.pretty;
+  const revokeSession = (0, import_endpoint.useRevokeSession)();
+  const handleDone = React.useCallback(() => {
+    onOpenChange?.(false);
+    client.invalidateQueries({
+      queryKey: (0, import_endpoint.getSessionsQueryKey)(),
+      exact: false
+    });
+  }, [onOpenChange, client]);
+  const onSubmitForm = () => {
+    revokeSession.mutate({
+      sessionId: session.id
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Root, { open, onOpenChange, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialogContent, { maxWidth: "480px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.AlertDialog.Title, { children: "Sign out of device?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.AlertDialog.Description, { children: [
+      "You will be signed out of ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Strong, { children: [
+        device,
+        "."
+      ] })
+    ] }),
+    /* @__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: revokeSession.isPending || revokeSession.isSuccess,
+              children: "Cancel"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_save_button.SaveButton,
+            {
+              asChild: true,
+              loading: revokeSession.isPending,
+              done: revokeSession.isSuccess,
+              onDone: handleDone,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DestructiveButton, { type: "submit", children: "Sign out" })
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LogoutDialog
+});
+//# sourceMappingURL=logout-dialog.cjs.map

package/dist/cjs/lib/logout-dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/logout-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog, Flex, Strong } from \"@radix-ui/themes\";\nimport { type ReactNode } from \"react\";\nimport {\n  AlertDialogContent,\n  DestructiveButton,\n  SecondaryButton,\n} from \"./elements.js\";\nimport {\n  ActiveSession,\n  getSessionsQueryKey,\n  useRevokeSession,\n} from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { SaveButton } from \"./save-button.js\";\nimport { parseUserAgent } from \"./utils.js\";\n\ninterface LogoutDialogProps extends AlertDialog.RootProps {\n  children?: ReactNode;\n  session: ActiveSession;\n}\n\nexport function LogoutDialog({\n  children,\n  session,\n  open,\n  onOpenChange,\n  ...props\n}: LogoutDialogProps) {\n  const client = useQueryClient();\n  const userAgent = parseUserAgent(session.userAgent);\n  const device = userAgent.pretty;\n\n  const revokeSession = useRevokeSession();\n\n  const handleDone = React.useCallback(() => {\n    onOpenChange?.(false);\n\n    client.invalidateQueries({\n      queryKey: getSessionsQueryKey(),\n      exact: false,\n    });\n  }, [onOpenChange, client]);\n\n  const onSubmitForm = () => {\n    revokeSession.mutate({\n      sessionId: session.id,\n    });\n  };\n\n  return (\n    <AlertDialog.Root open={open} onOpenChange={onOpenChange} {...props}>\n      <AlertDialogContent maxWidth=\"480px\">\n        <AlertDialog.Title>Sign out of device?</AlertDialog.Title>\n        <AlertDialog.Description>\n          You will be signed out of <Strong>{device}.</Strong>\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={revokeSession.isPending || revokeSession.isSuccess}\n              >\n                Cancel\n              </SecondaryButton>\n            </AlertDialog.Cancel>\n\n            <SaveButton\n              asChild\n              loading={revokeSession.isPending}\n              done={revokeSession.isSuccess}\n              onDone={handleDone}\n            >\n              <DestructiveButton type=\"submit\">Sign out</DestructiveButton>\n            </SaveButton>\n          </form>\n        </Flex>\n      </AlertDialogContent>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuDQ;AArDR,YAAuB;AACvB,oBAA0C;AAE1C,sBAIO;AACP,sBAIO;AACP,yBAA+B;AAC/B,yBAA2B;AAC3B,mBAA+B;AAOxB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,aAAS,mCAAe;AAC9B,QAAM,gBAAY,6BAAe,QAAQ,SAAS;AAClD,QAAM,SAAS,UAAU;AAEzB,QAAM,oBAAgB,kCAAiB;AAEvC,QAAM,aAAa,MAAM,YAAY,MAAM;AACzC,mBAAe,KAAK;AAEpB,WAAO,kBAAkB;AAAA,MACvB,cAAU,qCAAoB;AAAA,MAC9B,OAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,QAAM,eAAe,MAAM;AACzB,kBAAc,OAAO;AAAA,MACnB,WAAW,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAEA,SACE,4CAAC,0BAAY,MAAZ,EAAiB,MAAY,cAA6B,GAAG,OAC5D,uDAAC,sCAAmB,UAAS,SAC3B;AAAA,gDAAC,0BAAY,OAAZ,EAAkB,iCAAmB;AAAA,IACtC,6CAAC,0BAAY,aAAZ,EAAwB;AAAA;AAAA,MACG,6CAAC,wBAAQ;AAAA;AAAA,QAAO;AAAA,SAAC;AAAA,OAC7C;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,cAAc,aAAa,cAAc;AAAA,cACpD;AAAA;AAAA,UAED,GACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,SAAO;AAAA,cACP,SAAS,cAAc;AAAA,cACvB,MAAM,cAAc;AAAA,cACpB,QAAQ;AAAA,cAER,sDAAC,qCAAkB,MAAK,UAAS,sBAAQ;AAAA;AAAA,UAC3C;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/cjs/lib/logout-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 { ActiveSession } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface LogoutDialogProps extends AlertDialog.RootProps {
+    children?: ReactNode;
+    session: ActiveSession;
+}
+declare function LogoutDialog({ children, session, open, onOpenChange, ...props }: LogoutDialogProps): react_jsx_runtime.JSX.Element;
+
+export { LogoutDialog };

package/dist/cjs/lib/marker.cjs

@@ -0,0 +1,56 @@
+"use strict";
+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 marker_exports = {};
+__export(marker_exports, {
+  Marker: () => Marker
+});
+module.exports = __toCommonJS(marker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_themes = require("@radix-ui/themes");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_utils = require("./utils.js");
+const Marker = React.forwardRef(
+  function Marker2({ children, className, highContrast, ...props }, forwardedRef) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Text,
+      {
+        ref: forwardedRef,
+        className: (0, import_clsx.default)(className, (0, import_utils.namespaceClassNames)("marker")),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.namespaceClassNames)("marker-circle"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.namespaceClassNames)("marker-content"), children }) })
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Marker
+});
+//# sourceMappingURL=marker.cjs.map

package/dist/cjs/lib/marker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/marker.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Text } from \"@radix-ui/themes\";\nimport { MarginProps } from \"@radix-ui/themes/props\";\nimport clsx from \"clsx\";\nimport { namespaceClassNames } from \"./utils.js\";\n\ntype TextProps = React.ComponentPropsWithoutRef<typeof Text>;\n\ntype MarkerOwnProps = {\n  color?: \"gray\" | \"purple\" | \"blue\" | \"green\" | \"yellow\" | \"red\";\n  highContrast?: boolean;\n  size?: TextProps[\"size\"];\n};\n\ninterface MarkerProps\n  extends Omit<React.ComponentPropsWithRef<\"span\">, \"color\">,\n    MarkerOwnProps,\n    MarginProps {}\n\nexport const Marker = React.forwardRef<HTMLSpanElement, MarkerProps>(\n  function Marker(\n    { children, className, highContrast, ...props },\n    forwardedRef,\n  ) {\n    return (\n      <Text\n        ref={forwardedRef}\n        className={clsx(className, namespaceClassNames(\"marker\"))}\n        {...props}\n      >\n        <span className={namespaceClassNames(\"marker-circle\")}>\n          <span className={namespaceClassNames(\"marker-content\")}>\n            {children}\n          </span>\n        </span>\n      </Text>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BU;AA/BV,YAAuB;AACvB,oBAAqB;AAErB,kBAAiB;AACjB,mBAAoC;AAe7B,MAAM,SAAS,MAAM;AAAA,EAC1B,SAASA,QACP,EAAE,UAAU,WAAW,cAAc,GAAG,MAAM,GAC9C,cACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAW,YAAAC,SAAK,eAAW,kCAAoB,QAAQ,CAAC;AAAA,QACvD,GAAG;AAAA,QAEJ,sDAAC,UAAK,eAAW,kCAAoB,eAAe,GAClD,sDAAC,UAAK,eAAW,kCAAoB,gBAAgB,GAClD,UACH,GACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["Marker","clsx"]}