synapse-react-client 4.0.40 → 4.0.42

package/dist/components/AclEditor/AclEditor.js

@@ -5,8 +5,8 @@ import { AclEditorSkeleton as r } from "./AclEditorSkeleton.js";
 import { ResourceAccessItem as i } from "./ResourceAccessItem.js";
 import "react";
 import { noop as a } from "lodash-es";
-import { TransitionGroup as o } from "react-transition-group";
-import { Box as s, Button as c, Checkbox as l, Collapse as u, FormControlLabel as d, Tooltip as f, Typography as p } from "@mui/material";
+import { Box as o, Button as s, Checkbox as c, Collapse as l, FormControlLabel as u, Tooltip as d, Typography as f } from "@mui/material";
+import { TransitionGroup as p } from "react-transition-group";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/AclEditor/AclEditor.tsx
 var g = "Add a user or team", _ = "Make Public", v = "Remove Public Access", y = "Notify people via email";
@@ -38,19 +38,19 @@ function b(g) {
 			L && E(Number(L)), I && E(Number(I));
 		}
 	};
-	return /* @__PURE__ */ h(s, { children: [
-		/* @__PURE__ */ h(s, {
+	return /* @__PURE__ */ h(o, { children: [
+		/* @__PURE__ */ h(o, {
 			sx: { mb: "30px" },
-			children: [/* @__PURE__ */ m(p, {
+			children: [/* @__PURE__ */ m(f, {
 				variant: "headline3",
 				sx: { mb: "10px" },
 				children: "Users and Teams with Permissions"
-			}), y.length === 0 ? /* @__PURE__ */ m(p, {
+			}), y.length === 0 ? /* @__PURE__ */ m(f, {
 				variant: "body1Italic",
 				children: T
-			}) : /* @__PURE__ */ m(o, { children: y.map((e) => {
+			}) : /* @__PURE__ */ m(p, { children: y.map((e) => {
 				let t = typeof x == "function" ? x(e) : x, n = typeof C == "function" ? C(e) : C;
-				return /* @__PURE__ */ m(u, { children: /* @__PURE__ */ m(i, {
+				return /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(i, {
 					resourceAccess: e,
 					availablePermissionLevels: b,
 					canChangePermission: t,
@@ -61,13 +61,13 @@ function b(g) {
 				}) }, e.principalId);
 			}) })]
 		}),
-		x && /* @__PURE__ */ h(s, { children: [
-			/* @__PURE__ */ m(p, {
+		x && /* @__PURE__ */ h(o, { children: [
+			/* @__PURE__ */ m(f, {
 				variant: "headline3",
 				sx: { mb: "10px" },
 				children: "Add More"
 			}),
-			/* @__PURE__ */ m(p, {
+			/* @__PURE__ */ m(f, {
 				sx: {
 					mb: "20px",
 					variant: "body1",
@@ -77,9 +77,9 @@ function b(g) {
 				},
 				children: "Search for a username or team to add. You can search by username, first or last names, or team name."
 			}),
-			/* @__PURE__ */ h(s, {
+			/* @__PURE__ */ h(o, {
 				sx: { mb: 1 },
-				children: [/* @__PURE__ */ m(p, {
+				children: [/* @__PURE__ */ m(f, {
 					component: "label",
 					variant: "smallText2",
 					htmlFor: "reviewer-search",
@@ -94,25 +94,25 @@ function b(g) {
 					}
 				})]
 			}),
-			/* @__PURE__ */ h(s, {
+			/* @__PURE__ */ h(o, {
 				sx: {
 					display: "flex",
 					justifyContent: "space-between",
 					gap: 2
 				},
-				children: [/* @__PURE__ */ m(s, { children: k && /* @__PURE__ */ m(c, {
+				children: [/* @__PURE__ */ m(o, { children: k && /* @__PURE__ */ m(s, {
 					size: "small",
 					variant: "outlined",
 					...B
-				}) }), A && /* @__PURE__ */ m(f, {
+				}) }), A && /* @__PURE__ */ m(d, {
 					title: "Select to notify newly added people that this item has been shared with them",
-					children: /* @__PURE__ */ m(d, {
+					children: /* @__PURE__ */ m(u, {
 						sx: { mr: 0 },
-						control: /* @__PURE__ */ m(l, {
+						control: /* @__PURE__ */ m(c, {
 							value: j,
 							onChange: () => M(!j)
 						}),
-						label: /* @__PURE__ */ m(p, {
+						label: /* @__PURE__ */ m(f, {
 							variant: "smallText1",
 							children: "Notify people via email"
 						})
@@ -120,7 +120,7 @@ function b(g) {
 				})]
 			})
 		] }),
-		!x && !S && /* @__PURE__ */ m(p, {
+		!x && !S && /* @__PURE__ */ m(f, {
 			variant: "body1",
 			children: "You do not have sufficient privileges to modify the sharing settings."
 		})

package/dist/components/Aridhia/AridhiaAccessStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AridhiaAccessStatus.d.ts","sourceRoot":"","sources":["../../../src/components/Aridhia/AridhiaAccessStatus.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB,+FAA+F;IAC/F,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CA4J1E"}
+{"version":3,"file":"AridhiaAccessStatus.d.ts","sourceRoot":"","sources":["../../../src/components/Aridhia/AridhiaAccessStatus.tsx"],"names":[],"mappings":"AAoBA,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB,+FAA+F;IAC/F,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAkK1E"}

package/dist/components/Aridhia/AridhiaAccessStatus.js

@@ -1,30 +1,33 @@
 import { SRC_SIGN_IN_CLASS as e } from "../../utils/SynapseConstants.js";
 import { useSynapseContext as t } from "../../utils/context/SynapseContext.js";
 import "../../utils/index.js";
-import { DialogBase as n } from "../DialogBase.js";
-import r, { RestrictionUiType as i } from "../HasAccess/AccessIcon.js";
-import { findRequestForDataset as a, getRestrictionUiTypeFromAridhiaRequest as o } from "./aridhiaAccessStatusUtils.js";
-import { getAridhiaFairPortalDatasetUrl as s } from "./aridhiaFairPortalUrls.js";
-import { useGetAridhiaRequests as c } from "../../aridhia-queries/useGetAridhiaRequests.js";
+import { useGetFeatureFlag as n } from "../../synapse-queries/featureflags/useGetFeatureFlag.js";
+import "../../synapse-queries/index.js";
+import { DialogBase as r } from "../DialogBase.js";
+import i, { RestrictionUiType as a } from "../HasAccess/AccessIcon.js";
+import { FeatureFlagEnum as o } from "../../utils/featureflag/FeatureFlags.js";
+import { findRequestForDataset as s, getRestrictionUiTypeFromAridhiaRequest as c } from "./aridhiaAccessStatusUtils.js";
+import { getAridhiaFairPortalDatasetUrl as l } from "./aridhiaFairPortalUrls.js";
+import { useGetAridhiaRequests as u } from "../../aridhia-queries/useGetAridhiaRequests.js";
 import "../../aridhia-queries/index.js";
-import l from "./AridhiaDarStatusPopover.js";
-import u from "./RdcaDapEligibilityDialog.js";
-import { useAridhiaDarWizardParts as d } from "./DarWizard/AridhiaDarWizard.js";
-import { useState as f } from "react";
-import { Button as p } from "@mui/material";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import d from "./AridhiaDarStatusPopover.js";
+import f from "./RdcaDapEligibilityDialog.js";
+import { useAridhiaDarWizardParts as p } from "./DarWizard/AridhiaDarWizard.js";
+import { useState as m } from "react";
+import { Button as h } from "@mui/material";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/Aridhia/AridhiaAccessStatus.tsx
-var _ = {
+var y = {
 	p: "0px",
 	minWidth: "unset"
 };
-function v(v) {
-	let { datasetCode: y, fairPortalUrl: b } = v, { isAuthenticated: x } = t(), { data: S, isLoading: C, isError: w, error: T } = c(), [E, D] = f(null), [O, k] = f(!1), [A, j] = f(!1), { content: M, actions: N } = d({ datasetCode: y }, {
-		enabled: A,
-		onClose: () => j(!1)
+function b(b) {
+	let { datasetCode: x, fairPortalUrl: S } = b, { isAuthenticated: C } = t(), w = n(o.AMPALS_RDCA_DAP_FORM_ENABLED), { data: T, isLoading: E, isError: D, error: O } = u(), [k, A] = m(null), [j, M] = m(!1), [N, P] = m(!1), { content: F, actions: I } = p({ datasetCode: x }, {
+		enabled: N,
+		onClose: () => P(!1)
 	});
-	if (!x) return /* @__PURE__ */ h(p, {
-		sx: _,
+	if (!C) return /* @__PURE__ */ _(h, {
+		sx: y,
 		className: e,
 		onClick: (e) => {
 			if (e.isTrusted) {
@@ -32,53 +35,53 @@ function v(v) {
 				e.currentTarget.dispatchEvent(t);
 			}
 		},
-		children: /* @__PURE__ */ h(r, { restrictionUiType: i.AccessBlockedToAnonymous })
+		children: /* @__PURE__ */ _(i, { restrictionUiType: a.AccessBlockedToAnonymous })
 	});
-	let P = null;
-	if (!C) if (w && T.isEligibilityFailure) P = /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(p, {
-		sx: _,
-		onClick: () => k(!0),
+	let L = null;
+	if (!E) if (D && O.isEligibilityFailure) L = /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(h, {
+		sx: y,
+		onClick: () => M(!0),
 		"aria-label": "Link your RDCA-DAP account",
-		children: /* @__PURE__ */ h(r, { restrictionUiType: i.AccessBlockedByRDCADAPAccountNotLinked })
-	}), /* @__PURE__ */ h(u, {
-		open: O,
-		onClose: () => k(!1)
+		children: /* @__PURE__ */ _(i, { restrictionUiType: a.AccessBlockedByRDCADAPAccountNotLinked })
+	}), /* @__PURE__ */ _(f, {
+		open: j,
+		onClose: () => M(!1)
 	})] });
 	else {
-		let e = a(S?.items ?? [], y), t = o(e), n = /* @__PURE__ */ h(r, { restrictionUiType: t });
-		P = t === i.AccessibleOnRDCADAP ? b ? /* @__PURE__ */ h("a", {
-			href: s(b, y),
+		let e = s(T?.items ?? [], x), t = c(e), n = /* @__PURE__ */ _(i, { restrictionUiType: t });
+		t === a.AccessibleOnRDCADAP || !e && !w ? L = S ? /* @__PURE__ */ _("a", {
+			href: l(S, x),
 			target: "_blank",
 			rel: "noopener noreferrer",
 			children: n
-		}) : n : e ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(p, {
-			sx: _,
-			onClick: (e) => D(e.currentTarget),
+		}) : n : e ? L = /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(h, {
+			sx: y,
+			onClick: (e) => A(e.currentTarget),
 			"aria-label": "View data access request status",
 			children: n
-		}), /* @__PURE__ */ h(l, {
-			open: !!E,
-			anchorEl: E,
-			onClose: () => D(null),
+		}), /* @__PURE__ */ _(d, {
+			open: !!k,
+			anchorEl: k,
+			onClose: () => A(null),
 			request: e,
-			fairPortalUrl: b
-		})] }) : /* @__PURE__ */ h(p, {
-			sx: _,
-			onClick: () => j(!0),
+			fairPortalUrl: S
+		})] }) : w && (L = /* @__PURE__ */ _(h, {
+			sx: y,
+			onClick: () => P(!0),
 			"aria-label": "Request data access",
 			children: n
-		});
+		}));
 	}
-	return /* @__PURE__ */ g(m, { children: [P, /* @__PURE__ */ h(n, {
-		open: A,
-		onCancel: () => j(!1),
+	return /* @__PURE__ */ v(g, { children: [L, /* @__PURE__ */ _(r, {
+		open: N,
+		onCancel: () => P(!1),
 		maxWidth: "md",
 		title: "Request Data Access",
-		content: M,
-		actions: N
+		content: F,
+		actions: I
 	})] });
 }
 //#endregion
-export { v as default };
+export { b as default };
 
 //# sourceMappingURL=AridhiaAccessStatus.js.map

package/dist/components/Aridhia/AridhiaAccessStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"AridhiaAccessStatus.js","names":[],"sources":["../../../src/components/Aridhia/AridhiaAccessStatus.tsx"],"sourcesContent":["import { ReactNode, useState } from 'react'\nimport { useGetAridhiaRequests } from '@/aridhia-queries'\nimport { useSynapseContext } from '@/utils'\nimport { SRC_SIGN_IN_CLASS } from '@/utils/SynapseConstants'\nimport { Button } from '@mui/material'\nimport { DialogBase } from '../DialogBase'\nimport AccessIcon, { RestrictionUiType } from '../HasAccess/AccessIcon'\nimport {\n  findRequestForDataset,\n  getRestrictionUiTypeFromAridhiaRequest,\n} from './aridhiaAccessStatusUtils'\nimport { getAridhiaFairPortalDatasetUrl } from './aridhiaFairPortalUrls'\nimport AridhiaDarStatusPopover from './AridhiaDarStatusPopover'\nimport { useAridhiaDarWizardParts } from './DarWizard/AridhiaDarWizard'\nimport RdcaDapEligibilityDialog from './RdcaDapEligibilityDialog'\n\nconst buttonSx = { p: '0px', minWidth: 'unset' }\n\nexport type AridhiaAccessStatusProps = {\n  /**\n   * dataset code\n   */\n  datasetCode: string\n  /** Base URL of the RDCA-DAP FAIR portal's browsable UI, e.g. `https://fair.dap.c-path.org`. */\n  fairPortalUrl?: string\n}\n\n/**\n * Component that displays the Aridhia data access request status.\n * If the user is not authenticated with Aridhia, shows a sign-in button.\n * Otherwise, shows the access status based on the data access requests.\n */\nexport default function AridhiaAccessStatus(props: AridhiaAccessStatusProps) {\n  const { datasetCode, fairPortalUrl } = props\n  const { isAuthenticated } = useSynapseContext()\n\n  const {\n    data: requestsResponse,\n    isLoading,\n    isError,\n    error,\n  } = useGetAridhiaRequests()\n  const [popoverAnchorEl, setPopoverAnchorEl] = useState<HTMLElement | null>(\n    null,\n  )\n  const [eligibilityDialogOpen, setEligibilityDialogOpen] = useState(false)\n  const [requestDialogOpen, setRequestDialogOpen] = useState(false)\n  const { content: wizardContent, actions: wizardActions } =\n    useAridhiaDarWizardParts(\n      { datasetCode },\n      {\n        enabled: requestDialogOpen,\n        onClose: () => setRequestDialogOpen(false),\n      },\n    )\n\n  if (!isAuthenticated) {\n    return (\n      <Button\n        sx={buttonSx}\n        className={SRC_SIGN_IN_CLASS}\n        onClick={ev => {\n          if (ev.isTrusted) {\n            /*\n                There is a tricky problem - \n                The portals listens to click events for buttons with the class SRC_SIGN_IN_CLASS set, it listens to this event\n                so that it can display the login modal.\n\n                This button has an svg inside of it which is problematic because more often than not clicking this button will \n                instead click that svg. The event listener in the portals will break as a result.\n\n                Though the svg may get the actual click event, because of event bubbling this button will get its onClick called.\n                Once onClick is called we can manually dispatch an event off of this button. This does pose a problem, we end up in a \n                infinite loop because this button keeps dispatching click events, so we can use the isTrusted to recognize if onClick was\n                triggered programmatically or by user click. Lastly, using { bubbles: true } ensures the event bubbles up to the document level.\n\n              */\n            const clickEvent = new MouseEvent('click', { bubbles: true })\n            ev.currentTarget.dispatchEvent(clickEvent)\n          }\n        }}\n      >\n        <AccessIcon\n          restrictionUiType={RestrictionUiType.AccessBlockedToAnonymous}\n        />\n      </Button>\n    )\n  }\n\n  let content: ReactNode = null\n  if (isLoading) {\n    // Show loading state — nothing to render yet.\n  } else if (isError && error.isEligibilityFailure) {\n    // The token exchange (or any other request) failed because this user has no linked\n    // RDCA-DAP account yet — the DAR wizard is unreachable until that's resolved.\n    content = (\n      <>\n        <Button\n          sx={buttonSx}\n          onClick={() => setEligibilityDialogOpen(true)}\n          aria-label=\"Link your RDCA-DAP account\"\n        >\n          <AccessIcon\n            restrictionUiType={\n              RestrictionUiType.AccessBlockedByRDCADAPAccountNotLinked\n            }\n          />\n        </Button>\n        <RdcaDapEligibilityDialog\n          open={eligibilityDialogOpen}\n          onClose={() => setEligibilityDialogOpen(false)}\n        />\n      </>\n    )\n  } else {\n    // Check if there's a request for this dataset\n    const entityRequest = findRequestForDataset(\n      requestsResponse?.items ?? [],\n      datasetCode,\n    )\n    const restrictionUiType =\n      getRestrictionUiTypeFromAridhiaRequest(entityRequest)\n    const icon = <AccessIcon restrictionUiType={restrictionUiType} />\n\n    if (restrictionUiType === RestrictionUiType.AccessibleOnRDCADAP) {\n      // Approved, or the RDCA-DAP request form is not yet enabled — keep the existing\n      // link-out to RDCA-DAP to access or request the data.\n      content = fairPortalUrl ? (\n        <a\n          href={getAridhiaFairPortalDatasetUrl(fairPortalUrl, datasetCode)}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {icon}\n        </a>\n      ) : (\n        icon\n      )\n    } else if (entityRequest) {\n      // Pending or denied — click opens the status popover.\n      content = (\n        <>\n          <Button\n            sx={buttonSx}\n            onClick={ev => setPopoverAnchorEl(ev.currentTarget)}\n            aria-label=\"View data access request status\"\n          >\n            {icon}\n          </Button>\n          <AridhiaDarStatusPopover\n            open={!!popoverAnchorEl}\n            anchorEl={popoverAnchorEl}\n            onClose={() => setPopoverAnchorEl(null)}\n            request={entityRequest}\n            fairPortalUrl={fairPortalUrl}\n          />\n        </>\n      )\n    } else {\n      // No request yet — the icon opens the request wizard in a dialog. The same wizard also\n      // renders at the route-based, non-modal `AridhiaDarWizard` page for a full-page entry\n      // point.\n      content = (\n        <Button\n          sx={buttonSx}\n          onClick={() => setRequestDialogOpen(true)}\n          aria-label=\"Request data access\"\n        >\n          {icon}\n        </Button>\n      )\n    }\n  }\n\n  return (\n    <>\n      {content}\n      {/*  Ensure all authenticated return paths render the wizard dialog to prevent flicker as the DAR state changes (e.g. on the confirmation screen). */}\n      <DialogBase\n        open={requestDialogOpen}\n        onCancel={() => setRequestDialogOpen(false)}\n        maxWidth=\"md\"\n        title=\"Request Data Access\"\n        content={wizardContent}\n        actions={wizardActions}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAM,IAAW;CAAE,GAAG;CAAO,UAAU;AAAQ;AAgB/C,SAAwB,EAAoB,GAAiC;CAC3E,IAAM,EAAE,gBAAa,qBAAkB,GACjC,EAAE,uBAAoB,EAAkB,GAExC,EACJ,MAAM,GACN,cACA,YACA,aACE,EAAsB,GACpB,CAAC,GAAiB,KAAsB,EAC5C,IACF,GACM,CAAC,GAAuB,KAA4B,EAAS,EAAK,GAClE,CAAC,GAAmB,KAAwB,EAAS,EAAK,GAC1D,EAAE,SAAS,GAAe,SAAS,MACvC,EACE,EAAE,eAAY,GACd;EACE,SAAS;EACT,eAAe,EAAqB,EAAK;CAC3C,CACF;CAEF,IAAI,CAAC,GACH,OACE,kBAAC,GAAD;EACE,IAAI;EACJ,WAAW;EACX,UAAS,MAAM;GACb,IAAI,EAAG,WAAW;IAehB,IAAM,IAAa,IAAI,WAAW,SAAS,EAAE,SAAS,GAAK,CAAC;IAC5D,EAAG,cAAc,cAAc,CAAU;GAC3C;EACF;YAEA,kBAAC,GAAD,EACE,mBAAmB,EAAkB,yBACtC,CAAA;CACK,CAAA;CAIZ,IAAI,IAAqB;CACzB,IAAI,IAEG,IAAI,KAAW,EAAM,sBAG1B,IACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,IAAI;EACJ,eAAe,EAAyB,EAAI;EAC5C,cAAW;YAEX,kBAAC,GAAD,EACE,mBACE,EAAkB,uCAErB,CAAA;CACK,CAAA,GACR,kBAAC,GAAD;EACE,MAAM;EACN,eAAe,EAAyB,EAAK;CAC9C,CAAA,CACD,EAAA,CAAA;MAEC;EAEL,IAAM,IAAgB,EACpB,GAAkB,SAAS,CAAC,GAC5B,CACF,GACM,IACJ,EAAuC,CAAa,GAChD,IAAO,kBAAC,GAAD,EAA+B,qBAAoB,CAAA;EAEhE,AAsCE,IAtCE,MAAsB,EAAkB,sBAGhC,IACR,kBAAC,KAAD;GACE,MAAM,EAA+B,GAAe,CAAW;GAC/D,QAAO;GACP,KAAI;aAEH;EACA,CAAA,IAEH,IAEO,IAGP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,IAAI;GACJ,UAAS,MAAM,EAAmB,EAAG,aAAa;GAClD,cAAW;aAEV;EACK,CAAA,GACR,kBAAC,GAAD;GACE,MAAM,CAAC,CAAC;GACR,UAAU;GACV,eAAe,EAAmB,IAAI;GACtC,SAAS;GACM;EAChB,CAAA,CACD,EAAA,CAAA,IAOF,kBAAC,GAAD;GACE,IAAI;GACJ,eAAe,EAAqB,EAAI;GACxC,cAAW;aAEV;EACK,CAAA;CAGd;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,GAED,kBAAC,GAAD;EACE,MAAM;EACN,gBAAgB,EAAqB,EAAK;EAC1C,UAAS;EACT,OAAM;EACN,SAAS;EACT,SAAS;CACV,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"AridhiaAccessStatus.js","names":[],"sources":["../../../src/components/Aridhia/AridhiaAccessStatus.tsx"],"sourcesContent":["import { ReactNode, useState } from 'react'\nimport { useGetAridhiaRequests } from '@/aridhia-queries'\nimport { useGetFeatureFlag } from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils'\nimport { FeatureFlagEnum } from '@/utils/featureflag/FeatureFlags'\nimport { SRC_SIGN_IN_CLASS } from '@/utils/SynapseConstants'\nimport { Button } from '@mui/material'\nimport { DialogBase } from '../DialogBase'\nimport AccessIcon, { RestrictionUiType } from '../HasAccess/AccessIcon'\nimport {\n  findRequestForDataset,\n  getRestrictionUiTypeFromAridhiaRequest,\n} from './aridhiaAccessStatusUtils'\nimport { getAridhiaFairPortalDatasetUrl } from './aridhiaFairPortalUrls'\nimport AridhiaDarStatusPopover from './AridhiaDarStatusPopover'\nimport { useAridhiaDarWizardParts } from './DarWizard/AridhiaDarWizard'\nimport RdcaDapEligibilityDialog from './RdcaDapEligibilityDialog'\n\nconst buttonSx = { p: '0px', minWidth: 'unset' }\n\nexport type AridhiaAccessStatusProps = {\n  /**\n   * dataset code\n   */\n  datasetCode: string\n  /** Base URL of the RDCA-DAP FAIR portal's browsable UI, e.g. `https://fair.dap.c-path.org`. */\n  fairPortalUrl?: string\n}\n\n/**\n * Component that displays the Aridhia data access request status.\n * If the user is not authenticated with Aridhia, shows a sign-in button.\n * Otherwise, shows the access status based on the data access requests.\n */\nexport default function AridhiaAccessStatus(props: AridhiaAccessStatusProps) {\n  const { datasetCode, fairPortalUrl } = props\n  const { isAuthenticated } = useSynapseContext()\n  const isDarFormEnabled = useGetFeatureFlag(\n    FeatureFlagEnum.AMPALS_RDCA_DAP_FORM_ENABLED,\n  )\n\n  const {\n    data: requestsResponse,\n    isLoading,\n    isError,\n    error,\n  } = useGetAridhiaRequests()\n  const [popoverAnchorEl, setPopoverAnchorEl] = useState<HTMLElement | null>(\n    null,\n  )\n  const [eligibilityDialogOpen, setEligibilityDialogOpen] = useState(false)\n  const [requestDialogOpen, setRequestDialogOpen] = useState(false)\n  const { content: wizardContent, actions: wizardActions } =\n    useAridhiaDarWizardParts(\n      { datasetCode },\n      {\n        enabled: requestDialogOpen,\n        onClose: () => setRequestDialogOpen(false),\n      },\n    )\n\n  if (!isAuthenticated) {\n    return (\n      <Button\n        sx={buttonSx}\n        className={SRC_SIGN_IN_CLASS}\n        onClick={ev => {\n          if (ev.isTrusted) {\n            /*\n                There is a tricky problem - \n                The portals listens to click events for buttons with the class SRC_SIGN_IN_CLASS set, it listens to this event\n                so that it can display the login modal.\n\n                This button has an svg inside of it which is problematic because more often than not clicking this button will \n                instead click that svg. The event listener in the portals will break as a result.\n\n                Though the svg may get the actual click event, because of event bubbling this button will get its onClick called.\n                Once onClick is called we can manually dispatch an event off of this button. This does pose a problem, we end up in a \n                infinite loop because this button keeps dispatching click events, so we can use the isTrusted to recognize if onClick was\n                triggered programmatically or by user click. Lastly, using { bubbles: true } ensures the event bubbles up to the document level.\n\n              */\n            const clickEvent = new MouseEvent('click', { bubbles: true })\n            ev.currentTarget.dispatchEvent(clickEvent)\n          }\n        }}\n      >\n        <AccessIcon\n          restrictionUiType={RestrictionUiType.AccessBlockedToAnonymous}\n        />\n      </Button>\n    )\n  }\n\n  let content: ReactNode = null\n  if (isLoading) {\n    // Show loading state — nothing to render yet.\n  } else if (isError && error.isEligibilityFailure) {\n    // The token exchange (or any other request) failed because this user has no linked\n    // RDCA-DAP account yet — the DAR wizard is unreachable until that's resolved.\n    content = (\n      <>\n        <Button\n          sx={buttonSx}\n          onClick={() => setEligibilityDialogOpen(true)}\n          aria-label=\"Link your RDCA-DAP account\"\n        >\n          <AccessIcon\n            restrictionUiType={\n              RestrictionUiType.AccessBlockedByRDCADAPAccountNotLinked\n            }\n          />\n        </Button>\n        <RdcaDapEligibilityDialog\n          open={eligibilityDialogOpen}\n          onClose={() => setEligibilityDialogOpen(false)}\n        />\n      </>\n    )\n  } else {\n    // Check if there's a request for this dataset\n    const entityRequest = findRequestForDataset(\n      requestsResponse?.items ?? [],\n      datasetCode,\n    )\n    const restrictionUiType =\n      getRestrictionUiTypeFromAridhiaRequest(entityRequest)\n    const icon = <AccessIcon restrictionUiType={restrictionUiType} />\n\n    if (\n      restrictionUiType === RestrictionUiType.AccessibleOnRDCADAP ||\n      (!entityRequest && !isDarFormEnabled)\n    ) {\n      // Approved, or no request yet with the in-app request form not enabled — keep the\n      // existing link-out to RDCA-DAP to access or request the data.\n      content = fairPortalUrl ? (\n        <a\n          href={getAridhiaFairPortalDatasetUrl(fairPortalUrl, datasetCode)}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {icon}\n        </a>\n      ) : (\n        icon\n      )\n    } else if (entityRequest) {\n      // Pending or denied — click opens the status popover.\n      content = (\n        <>\n          <Button\n            sx={buttonSx}\n            onClick={ev => setPopoverAnchorEl(ev.currentTarget)}\n            aria-label=\"View data access request status\"\n          >\n            {icon}\n          </Button>\n          <AridhiaDarStatusPopover\n            open={!!popoverAnchorEl}\n            anchorEl={popoverAnchorEl}\n            onClose={() => setPopoverAnchorEl(null)}\n            request={entityRequest}\n            fairPortalUrl={fairPortalUrl}\n          />\n        </>\n      )\n    } else if (isDarFormEnabled) {\n      // No request yet, and the in-app request form is enabled — the icon opens the request\n      // wizard in a dialog. The same wizard also renders at the route-based, non-modal\n      // `AridhiaDarWizard` page for a full-page entry point.\n      content = (\n        <Button\n          sx={buttonSx}\n          onClick={() => setRequestDialogOpen(true)}\n          aria-label=\"Request data access\"\n        >\n          {icon}\n        </Button>\n      )\n    }\n  }\n\n  return (\n    <>\n      {content}\n      {/*  Ensure all authenticated return paths render the wizard dialog to prevent flicker as the DAR state changes (e.g. on the confirmation screen). */}\n      <DialogBase\n        open={requestDialogOpen}\n        onCancel={() => setRequestDialogOpen(false)}\n        maxWidth=\"md\"\n        title=\"Request Data Access\"\n        content={wizardContent}\n        actions={wizardActions}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,IAAM,IAAW;CAAE,GAAG;CAAO,UAAU;AAAQ;AAgB/C,SAAwB,EAAoB,GAAiC;CAC3E,IAAM,EAAE,gBAAa,qBAAkB,GACjC,EAAE,uBAAoB,EAAkB,GACxC,IAAmB,EACvB,EAAgB,4BAClB,GAEM,EACJ,MAAM,GACN,cACA,YACA,aACE,EAAsB,GACpB,CAAC,GAAiB,KAAsB,EAC5C,IACF,GACM,CAAC,GAAuB,KAA4B,EAAS,EAAK,GAClE,CAAC,GAAmB,KAAwB,EAAS,EAAK,GAC1D,EAAE,SAAS,GAAe,SAAS,MACvC,EACE,EAAE,eAAY,GACd;EACE,SAAS;EACT,eAAe,EAAqB,EAAK;CAC3C,CACF;CAEF,IAAI,CAAC,GACH,OACE,kBAAC,GAAD;EACE,IAAI;EACJ,WAAW;EACX,UAAS,MAAM;GACb,IAAI,EAAG,WAAW;IAehB,IAAM,IAAa,IAAI,WAAW,SAAS,EAAE,SAAS,GAAK,CAAC;IAC5D,EAAG,cAAc,cAAc,CAAU;GAC3C;EACF;YAEA,kBAAC,GAAD,EACE,mBAAmB,EAAkB,yBACtC,CAAA;CACK,CAAA;CAIZ,IAAI,IAAqB;CACzB,IAAI,IAEG,IAAI,KAAW,EAAM,sBAG1B,IACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,IAAI;EACJ,eAAe,EAAyB,EAAI;EAC5C,cAAW;YAEX,kBAAC,GAAD,EACE,mBACE,EAAkB,uCAErB,CAAA;CACK,CAAA,GACR,kBAAC,GAAD;EACE,MAAM;EACN,eAAe,EAAyB,EAAK;CAC9C,CAAA,CACD,EAAA,CAAA;MAEC;EAEL,IAAM,IAAgB,EACpB,GAAkB,SAAS,CAAC,GAC5B,CACF,GACM,IACJ,EAAuC,CAAa,GAChD,IAAO,kBAAC,GAAD,EAA+B,qBAAoB,CAAA;EAEhE,AACE,MAAsB,EAAkB,uBACvC,CAAC,KAAiB,CAAC,IAIpB,IAAU,IACR,kBAAC,KAAD;GACE,MAAM,EAA+B,GAAe,CAAW;GAC/D,QAAO;GACP,KAAI;aAEH;EACA,CAAA,IAEH,IAEO,IAET,IACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,IAAI;GACJ,UAAS,MAAM,EAAmB,EAAG,aAAa;GAClD,cAAW;aAEV;EACK,CAAA,GACR,kBAAC,GAAD;GACE,MAAM,CAAC,CAAC;GACR,UAAU;GACV,eAAe,EAAmB,IAAI;GACtC,SAAS;GACM;EAChB,CAAA,CACD,EAAA,CAAA,IAEK,MAIT,IACE,kBAAC,GAAD;GACE,IAAI;GACJ,eAAe,EAAqB,EAAI;GACxC,cAAW;aAEV;EACK,CAAA;CAGd;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,GAED,kBAAC,GAAD;EACE,MAAM;EACN,gBAAgB,EAAqB,EAAK;EAC1C,UAAS;EACT,OAAM;EACN,SAAS;EACT,SAAS;CACV,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/Authentication/Constants.d.ts

@@ -1,4 +1,8 @@
 export declare const TOTP_GUIDANCE_TEXT = "Enter the 6-digit, time-based verification code provided by your authenticator app.";
 export declare const RECOVERY_CODE_GUIDANCE_TEXT_SHORT = "Enter a one-time backup code. Your backup code is a 16 digit code, with groups of 4 letters or numbers separated by hyphens.";
 export declare const TOTP_CLOCK_SKEW_ERROR_APPENDAGE = "Please ensure automatic date and time is enabled in your device settings and try again.";
+export declare const NUMERIC_CODE_HTML_INPUT_PROPS: {
+    readonly inputMode: "numeric";
+    readonly pattern: "[0-9]*";
+};
 //# sourceMappingURL=Constants.d.ts.map

package/dist/components/Authentication/Constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Constants.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/Constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,wFACwD,CAAA;AAEvF,eAAO,MAAM,iCAAiC,iIACkF,CAAA;AAEhI,eAAO,MAAM,+BAA+B,4FAC+C,CAAA"}
+{"version":3,"file":"Constants.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/Constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,wFACwD,CAAA;AAEvF,eAAO,MAAM,iCAAiC,iIACkF,CAAA;AAEhI,eAAO,MAAM,+BAA+B,4FAC+C,CAAA;AAE3F,eAAO,MAAM,6BAA6B;;;CAGsB,CAAA"}

package/dist/components/Authentication/Constants.js

@@ -1,6 +1,9 @@
 //#region src/components/Authentication/Constants.ts
-var e = "Enter the 6-digit, time-based verification code provided by your authenticator app.", t = "Enter a one-time backup code. Your backup code is a 16 digit code, with groups of 4 letters or numbers separated by hyphens.", n = "Please ensure automatic date and time is enabled in your device settings and try again.";
+var e = "Enter the 6-digit, time-based verification code provided by your authenticator app.", t = "Enter a one-time backup code. Your backup code is a 16 digit code, with groups of 4 letters or numbers separated by hyphens.", n = "Please ensure automatic date and time is enabled in your device settings and try again.", r = {
+	inputMode: "numeric",
+	pattern: "[0-9]*"
+};
 //#endregion
-export { t as RECOVERY_CODE_GUIDANCE_TEXT_SHORT, n as TOTP_CLOCK_SKEW_ERROR_APPENDAGE, e as TOTP_GUIDANCE_TEXT };
+export { r as NUMERIC_CODE_HTML_INPUT_PROPS, t as RECOVERY_CODE_GUIDANCE_TEXT_SHORT, n as TOTP_CLOCK_SKEW_ERROR_APPENDAGE, e as TOTP_GUIDANCE_TEXT };
 
 //# sourceMappingURL=Constants.js.map

package/dist/components/Authentication/Constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Constants.js","names":[],"sources":["../../../src/components/Authentication/Constants.ts"],"sourcesContent":["export const TOTP_GUIDANCE_TEXT =\n  'Enter the 6-digit, time-based verification code provided by your authenticator app.'\n\nexport const RECOVERY_CODE_GUIDANCE_TEXT_SHORT =\n  'Enter a one-time backup code. Your backup code is a 16 digit code, with groups of 4 letters or numbers separated by hyphens.'\n\nexport const TOTP_CLOCK_SKEW_ERROR_APPENDAGE =\n  'Please ensure automatic date and time is enabled in your device settings and try again.'\n"],"mappings":";AAAA,IAAa,IACX,uFAEW,IACX,gIAEW,IACX"}
+{"version":3,"file":"Constants.js","names":[],"sources":["../../../src/components/Authentication/Constants.ts"],"sourcesContent":["export const TOTP_GUIDANCE_TEXT =\n  'Enter the 6-digit, time-based verification code provided by your authenticator app.'\n\nexport const RECOVERY_CODE_GUIDANCE_TEXT_SHORT =\n  'Enter a one-time backup code. Your backup code is a 16 digit code, with groups of 4 letters or numbers separated by hyphens.'\n\nexport const TOTP_CLOCK_SKEW_ERROR_APPENDAGE =\n  'Please ensure automatic date and time is enabled in your device settings and try again.'\n\nexport const NUMERIC_CODE_HTML_INPUT_PROPS = {\n  inputMode: 'numeric',\n  pattern: '[0-9]*',\n} as const satisfies React.InputHTMLAttributes<HTMLInputElement>\n"],"mappings":";AAAA,IAAa,IACX,uFAEW,IACX,gIAEW,IACX,2FAEW,IAAgC;CAC3C,WAAW;CACX,SAAS;AACX"}

package/dist/components/Authentication/RecoveryCodeGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecoveryCodeGrid.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/RecoveryCodeGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAA;AAU5E,KAAK,qBAAqB,GAAG;IAC3B,aAAa,CAAC,EAAE,0BAA0B,CAAA;CAC3C,CAAA;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAoC5D"}
+{"version":3,"file":"RecoveryCodeGrid.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/RecoveryCodeGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAA;AAU5E,KAAK,qBAAqB,GAAG;IAC3B,aAAa,CAAC,EAAE,0BAA0B,CAAA;CAC3C,CAAA;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAqC5D"}

package/dist/components/Authentication/RecoveryCodeGrid.js

@@ -9,7 +9,14 @@ function a(a) {
 	return /* @__PURE__ */ n(t, {
 		sx: {
 			display: "grid",
-			gridTemplateColumns: "47.5% 47.5%",
+			gridTemplateColumns: {
+				xs: "max-content",
+				md: "47.5% 47.5%"
+			},
+			justifyContent: {
+				xs: "center",
+				md: "stretch"
+			},
 			columnGap: "5%",
 			gridTemplateRows: "repeat(5, 1fr)",
 			fontFamily: "Menlo, Courier New, Courier, monospace",

package/dist/components/Authentication/RecoveryCodeGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecoveryCodeGrid.js","names":[],"sources":["../../../src/components/Authentication/RecoveryCodeGrid.tsx"],"sourcesContent":["import ConditionalWrapper from '@/components/utils/ConditionalWrapper'\nimport { Box } from '@mui/material'\nimport Skeleton from '@mui/material/Skeleton'\nimport { TwoFactorAuthRecoveryCodes } from '@sage-bionetworks/synapse-types'\n\nconst DEFAULT_RECOVERY_CODE_COUNT = 10\n\n// Placeholder codes used to render skeletons while loading\nconst PLACEHOLDER_RECOVERY_CODE = '1234-5678-9012-3456'\nconst PLACEHOLDER_RECOVERY_CODES = Array(DEFAULT_RECOVERY_CODE_COUNT).fill(\n  PLACEHOLDER_RECOVERY_CODE,\n)\n\ntype RecoveryCodeGridProps = {\n  recoveryCodes?: TwoFactorAuthRecoveryCodes\n}\n\nexport function RecoveryCodeGrid(props: RecoveryCodeGridProps) {\n  const { recoveryCodes } = props\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: '47.5% 47.5%',\n        columnGap: '5%',\n        gridTemplateRows: 'repeat(5, 1fr)',\n        fontFamily: 'Menlo, Courier New, Courier, monospace',\n        my: 2,\n      }}\n    >\n      {(recoveryCodes?.codes ?? PLACEHOLDER_RECOVERY_CODES).map(\n        (code, index) => {\n          return (\n            <ConditionalWrapper\n              key={index}\n              condition={!recoveryCodes}\n              wrapper={Skeleton}\n              wrapperProps={{ width: '100%', height: '100%' }}\n            >\n              <Box\n                sx={{\n                  my: 1,\n                  fontSize: '13px',\n                }}\n              >\n                {code}\n              </Box>\n            </ConditionalWrapper>\n          )\n        },\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AASA,IAAM,IAA6B,MAAM,EAA2B,EAAE,KACpE,qBACF;AAMA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,qBAAkB;CAC1B,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,qBAAqB;GACrB,WAAW;GACX,kBAAkB;GAClB,YAAY;GACZ,IAAI;EACN;aAEE,GAAe,SAAS,GAA4B,KACnD,GAAM,MAEH,kBAAC,GAAD;GAEE,WAAW,CAAC;GACZ,SAAS;GACT,cAAc;IAAE,OAAO;IAAQ,QAAQ;GAAO;aAE9C,kBAAC,GAAD;IACE,IAAI;KACF,IAAI;KACJ,UAAU;IACZ;cAEC;GACE,CAAA;EACa,GAbb,CAaa,CAG1B;CACG,CAAA;AAET"}
+{"version":3,"file":"RecoveryCodeGrid.js","names":[],"sources":["../../../src/components/Authentication/RecoveryCodeGrid.tsx"],"sourcesContent":["import ConditionalWrapper from '@/components/utils/ConditionalWrapper'\nimport { Box } from '@mui/material'\nimport Skeleton from '@mui/material/Skeleton'\nimport { TwoFactorAuthRecoveryCodes } from '@sage-bionetworks/synapse-types'\n\nconst DEFAULT_RECOVERY_CODE_COUNT = 10\n\n// Placeholder codes used to render skeletons while loading\nconst PLACEHOLDER_RECOVERY_CODE = '1234-5678-9012-3456'\nconst PLACEHOLDER_RECOVERY_CODES = Array(DEFAULT_RECOVERY_CODE_COUNT).fill(\n  PLACEHOLDER_RECOVERY_CODE,\n)\n\ntype RecoveryCodeGridProps = {\n  recoveryCodes?: TwoFactorAuthRecoveryCodes\n}\n\nexport function RecoveryCodeGrid(props: RecoveryCodeGridProps) {\n  const { recoveryCodes } = props\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: { xs: 'max-content', md: '47.5% 47.5%' },\n        justifyContent: { xs: 'center', md: 'stretch' },\n        columnGap: '5%',\n        gridTemplateRows: 'repeat(5, 1fr)',\n        fontFamily: 'Menlo, Courier New, Courier, monospace',\n        my: 2,\n      }}\n    >\n      {(recoveryCodes?.codes ?? PLACEHOLDER_RECOVERY_CODES).map(\n        (code, index) => {\n          return (\n            <ConditionalWrapper\n              key={index}\n              condition={!recoveryCodes}\n              wrapper={Skeleton}\n              wrapperProps={{ width: '100%', height: '100%' }}\n            >\n              <Box\n                sx={{\n                  my: 1,\n                  fontSize: '13px',\n                }}\n              >\n                {code}\n              </Box>\n            </ConditionalWrapper>\n          )\n        },\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AASA,IAAM,IAA6B,MAAM,EAA2B,EAAE,KACpE,qBACF;AAMA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,qBAAkB;CAC1B,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,qBAAqB;IAAE,IAAI;IAAe,IAAI;GAAc;GAC5D,gBAAgB;IAAE,IAAI;IAAU,IAAI;GAAU;GAC9C,WAAW;GACX,kBAAkB;GAClB,YAAY;GACZ,IAAI;EACN;aAEE,GAAe,SAAS,GAA4B,KACnD,GAAM,MAEH,kBAAC,GAAD;GAEE,WAAW,CAAC;GACZ,SAAS;GACT,cAAc;IAAE,OAAO;IAAQ,QAAQ;GAAO;aAE9C,kBAAC,GAAD;IACE,IAAI;KACF,IAAI;KACJ,UAAU;IACZ;cAEC;GACE,CAAA;EACa,GAbb,CAaa,CAG1B;CACG,CAAA;AAET"}

package/dist/components/Authentication/RegenerateBackupCodesWarning.js

@@ -8,7 +8,10 @@ function l(l) {
 		sx: {
 			m: "auto",
 			maxWidth: "500px",
-			p: 8
+			p: {
+				xs: "20px",
+				md: 8
+			}
 		},
 		children: [
 			/* @__PURE__ */ s(t, {

package/dist/components/Authentication/RegenerateBackupCodesWarning.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegenerateBackupCodesWarning.js","names":[],"sources":["../../../src/components/Authentication/RegenerateBackupCodesWarning.tsx"],"sourcesContent":["import FrontHand from '@/assets/icons/FrontHand'\nimport { Avatar, Box, Button, Paper, Typography, useTheme } from '@mui/material'\n\ntype RegenerateBackupCodesWarningProps = {\n  onConfirm: () => void\n  onCancel: () => void\n}\n\nexport function RegenerateBackupCodesWarning(\n  props: RegenerateBackupCodesWarningProps,\n) {\n  const { onConfirm, onCancel } = props\n  const theme = useTheme()\n  return (\n    <Paper sx={{ m: 'auto', maxWidth: '500px', p: 8 }}>\n      <Avatar\n        sx={{\n          bgcolor: theme.palette.primary.main,\n          height: '100px',\n          width: '100px',\n        }}\n      >\n        <FrontHand sx={{ height: '54px', width: '54px' }} />\n      </Avatar>\n      <Box sx={{ my: 5 }}>\n        <Typography variant={'headline1'} sx={{ mb: 2 }}>\n          Really regenerate backup codes?\n        </Typography>\n        <Typography variant={'body1'} sx={{ my: 1 }}>\n          This will invalidate your old backup codes\n        </Typography>\n        <Typography variant={'body1'} sx={{ my: 1 }}>\n          If you click “yes”, below, we will generate 10 new backup codes,\n          replacing your old ones, which will no longer function.\n        </Typography>\n      </Box>\n      <Button\n        fullWidth\n        variant=\"contained\"\n        onClick={onConfirm}\n        sx={{ height: '50px', my: 1 }}\n      >\n        Yes, regenerate backup codes\n      </Button>\n      <Button\n        fullWidth\n        variant=\"text\"\n        onClick={onCancel}\n        sx={{ height: '50px', my: 1 }}\n      >\n        Nevermind\n      </Button>\n    </Paper>\n  )\n}\n"],"mappings":";;;;AAQA,SAAgB,EACd,GACA;CACA,IAAM,EAAE,cAAW,gBAAa;CAEhC,OACE,kBAAC,GAAD;EAAO,IAAI;GAAE,GAAG;GAAQ,UAAU;GAAS,GAAG;EAAE;YAAhD;GACE,kBAAC,GAAD;IACE,IAAI;KACF,SALM,EAKG,EAAM,QAAQ,QAAQ;KAC/B,QAAQ;KACR,OAAO;IACT;cAEA,kBAAC,GAAD,EAAW,IAAI;KAAE,QAAQ;KAAQ,OAAO;IAAO,EAAI,CAAA;GAC7C,CAAA;GACR,kBAAC,GAAD;IAAK,IAAI,EAAE,IAAI,EAAE;cAAjB;KACE,kBAAC,GAAD;MAAY,SAAS;MAAa,IAAI,EAAE,IAAI,EAAE;gBAAG;KAErC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAS;MAAS,IAAI,EAAE,IAAI,EAAE;gBAAG;KAEjC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAS;MAAS,IAAI,EAAE,IAAI,EAAE;gBAAG;KAGjC,CAAA;IACT;;GACL,kBAAC,GAAD;IACE,WAAA;IACA,SAAQ;IACR,SAAS;IACT,IAAI;KAAE,QAAQ;KAAQ,IAAI;IAAE;cAC7B;GAEO,CAAA;GACR,kBAAC,GAAD;IACE,WAAA;IACA,SAAQ;IACR,SAAS;IACT,IAAI;KAAE,QAAQ;KAAQ,IAAI;IAAE;cAC7B;GAEO,CAAA;EACH;;AAEX"}
+{"version":3,"file":"RegenerateBackupCodesWarning.js","names":[],"sources":["../../../src/components/Authentication/RegenerateBackupCodesWarning.tsx"],"sourcesContent":["import FrontHand from '@/assets/icons/FrontHand'\nimport { Avatar, Box, Button, Paper, Typography, useTheme } from '@mui/material'\n\ntype RegenerateBackupCodesWarningProps = {\n  onConfirm: () => void\n  onCancel: () => void\n}\n\nexport function RegenerateBackupCodesWarning(\n  props: RegenerateBackupCodesWarningProps,\n) {\n  const { onConfirm, onCancel } = props\n  const theme = useTheme()\n  return (\n    <Paper sx={{ m: 'auto', maxWidth: '500px', p: { xs: '20px', md: 8 } }}>\n      <Avatar\n        sx={{\n          bgcolor: theme.palette.primary.main,\n          height: '100px',\n          width: '100px',\n        }}\n      >\n        <FrontHand sx={{ height: '54px', width: '54px' }} />\n      </Avatar>\n      <Box sx={{ my: 5 }}>\n        <Typography variant={'headline1'} sx={{ mb: 2 }}>\n          Really regenerate backup codes?\n        </Typography>\n        <Typography variant={'body1'} sx={{ my: 1 }}>\n          This will invalidate your old backup codes\n        </Typography>\n        <Typography variant={'body1'} sx={{ my: 1 }}>\n          If you click “yes”, below, we will generate 10 new backup codes,\n          replacing your old ones, which will no longer function.\n        </Typography>\n      </Box>\n      <Button\n        fullWidth\n        variant=\"contained\"\n        onClick={onConfirm}\n        sx={{ height: '50px', my: 1 }}\n      >\n        Yes, regenerate backup codes\n      </Button>\n      <Button\n        fullWidth\n        variant=\"text\"\n        onClick={onCancel}\n        sx={{ height: '50px', my: 1 }}\n      >\n        Nevermind\n      </Button>\n    </Paper>\n  )\n}\n"],"mappings":";;;;AAQA,SAAgB,EACd,GACA;CACA,IAAM,EAAE,cAAW,gBAAa;CAEhC,OACE,kBAAC,GAAD;EAAO,IAAI;GAAE,GAAG;GAAQ,UAAU;GAAS,GAAG;IAAE,IAAI;IAAQ,IAAI;GAAE;EAAE;YAApE;GACE,kBAAC,GAAD;IACE,IAAI;KACF,SALM,EAKG,EAAM,QAAQ,QAAQ;KAC/B,QAAQ;KACR,OAAO;IACT;cAEA,kBAAC,GAAD,EAAW,IAAI;KAAE,QAAQ;KAAQ,OAAO;IAAO,EAAI,CAAA;GAC7C,CAAA;GACR,kBAAC,GAAD;IAAK,IAAI,EAAE,IAAI,EAAE;cAAjB;KACE,kBAAC,GAAD;MAAY,SAAS;MAAa,IAAI,EAAE,IAAI,EAAE;gBAAG;KAErC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAS;MAAS,IAAI,EAAE,IAAI,EAAE;gBAAG;KAEjC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAS;MAAS,IAAI,EAAE,IAAI,EAAE;gBAAG;KAGjC,CAAA;IACT;;GACL,kBAAC,GAAD;IACE,WAAA;IACA,SAAQ;IACR,SAAS;IACT,IAAI;KAAE,QAAQ;KAAQ,IAAI;IAAE;cAC7B;GAEO,CAAA;GACR,kBAAC,GAAD;IACE,WAAA;IACA,SAAQ;IACR,SAAS;IACT,IAAI;KAAE,QAAQ;KAAQ,IAAI;IAAE;cAC7B;GAEO,CAAA;EACH;;AAEX"}

package/dist/components/Authentication/TOTPForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TOTPForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TOTPForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAQ9C,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CACjD,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAwDpD"}
+{"version":3,"file":"TOTPForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TOTPForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAS9C,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CACjD,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA6DpD"}

package/dist/components/Authentication/TOTPForm.js

@@ -1,9 +1,10 @@
-import { useState as e } from "react";
-import { Box as t, Button as n } from "@mui/material";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { MuiOtpInput as a } from "mui-one-time-password-input";
+import { NUMERIC_CODE_HTML_INPUT_PROPS as e } from "./Constants.js";
+import { useState as t } from "react";
+import { Box as n, Button as r } from "@mui/material";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { MuiOtpInput as o } from "mui-one-time-password-input";
 //#region src/components/Authentication/TOTPForm.tsx
-var o = 6, s = [
+var s = 6, c = [
 	"0",
 	"1",
 	"2",
@@ -15,15 +16,16 @@ var o = 6, s = [
 	"8",
 	"9"
 ];
-function c(c) {
-	let { onSubmit: l, loginIsPending: u } = c, [d, f] = e("");
-	return /* @__PURE__ */ i(t, { children: [/* @__PURE__ */ r(a, {
+function l(l) {
+	let { onSubmit: u, loginIsPending: d } = l, [f, p] = t("");
+	return /* @__PURE__ */ a(n, { children: [/* @__PURE__ */ i(o, {
 		autoFocus: !0,
-		length: o,
-		value: d,
-		onChange: f,
-		onComplete: l,
-		validateChar: (e) => s.includes(e) || e === "",
+		length: s,
+		TextFieldsProps: { slotProps: { htmlInput: e } },
+		value: f,
+		onChange: p,
+		onComplete: u,
+		validateChar: (e) => c.includes(e) || e === "",
 		gap: "2px",
 		sx: {
 			mx: "auto",
@@ -42,7 +44,7 @@ function c(c) {
 			},
 			".MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root": { borderRadius: 0 }
 		}
-	}), /* @__PURE__ */ r(n, {
+	}), /* @__PURE__ */ i(r, {
 		fullWidth: !0,
 		type: "submit",
 		color: "primary",
@@ -52,14 +54,14 @@ function c(c) {
 			mt: 4,
 			mb: 2
 		},
-		disabled: d.length !== o || u,
+		disabled: f.length !== s || d,
 		onClick: (e) => {
-			e.preventDefault(), l(d);
+			e.preventDefault(), u(f);
 		},
-		children: u ? "Verifying..." : "Submit"
+		children: d ? "Verifying..." : "Submit"
 	})] });
 }
 //#endregion
-export { c as default };
+export { l as default };
 
 //# sourceMappingURL=TOTPForm.js.map

package/dist/components/Authentication/TOTPForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TOTPForm.js","names":[],"sources":["../../../src/components/Authentication/TOTPForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { Box, Button } from '@mui/material'\nimport { MuiOtpInput } from 'mui-one-time-password-input'\nimport { useState } from 'react'\n\nconst TOTP_LENGTH = 6\nconst DIGIT_CHARACTERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']\n\ntype TOTPFormProps = {\n  onSubmit: (value: string) => void\n  loginIsPending: UseLoginReturn['loginIsPending']\n}\n\nexport default function TOTPForm(props: TOTPFormProps) {\n  const { onSubmit, loginIsPending } = props\n  const [verificationCode, setVerificationCode] = useState('')\n  return (\n    <Box>\n      <MuiOtpInput\n        autoFocus\n        length={TOTP_LENGTH}\n        value={verificationCode}\n        onChange={setVerificationCode}\n        onComplete={onSubmit}\n        validateChar={(character: string) => {\n          return DIGIT_CHARACTERS.includes(character) || character === ''\n        }}\n        gap={'2px'}\n        sx={{\n          mx: 'auto',\n          maxWidth: '350px',\n          '.MuiInputBase-root': {\n            paddingLeft: '5px',\n            paddingRight: '5px',\n          },\n          '.MuiFormControl-root:first-of-type > .MuiInputBase-root': {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n          '.MuiFormControl-root:last-of-type > .MuiInputBase-root': {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n          },\n          '.MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root':\n            {\n              borderRadius: 0,\n            },\n        }}\n      />\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n        disabled={verificationCode.length !== TOTP_LENGTH || loginIsPending}\n        onClick={e => {\n          e.preventDefault()\n          onSubmit(verificationCode)\n        }}\n      >\n        {loginIsPending ? 'Verifying...' : 'Submit'}\n      </Button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAc,GACd,IAAmB;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAO1E,SAAwB,EAAS,GAAsB;CACrD,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAkB,KAAuB,EAAS,EAAE;CAC3D,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAA;EACA,QAAQ;EACR,OAAO;EACP,UAAU;EACV,YAAY;EACZ,eAAe,MACN,EAAiB,SAAS,CAAS,KAAK,MAAc;EAE/D,KAAK;EACL,IAAI;GACF,IAAI;GACJ,UAAU;GACV,sBAAsB;IACpB,aAAa;IACb,cAAc;GAChB;GACA,2DAA2D;IACzD,sBAAsB;IACtB,yBAAyB;GAC3B;GACA,0DAA0D;IACxD,qBAAqB;IACrB,wBAAwB;GAC1B;GACA,oFACE,EACE,cAAc,EAChB;EACJ;CACD,CAAA,GACD,kBAAC,GAAD;EACE,WAAA;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,IAAI;GACF,QAAQ;GACR,IAAI;GACJ,IAAI;EACN;EACA,UAAU,EAAiB,WAAW,KAAe;EACrD,UAAS,MAAK;GAEZ,AADA,EAAE,eAAe,GACjB,EAAS,CAAgB;EAC3B;YAEC,IAAiB,iBAAiB;CAC7B,CAAA,CACL,EAAA,CAAA;AAET"}
+{"version":3,"file":"TOTPForm.js","names":[],"sources":["../../../src/components/Authentication/TOTPForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { Box, Button } from '@mui/material'\nimport { MuiOtpInput } from 'mui-one-time-password-input'\nimport { useState } from 'react'\nimport { NUMERIC_CODE_HTML_INPUT_PROPS } from './Constants'\n\nconst TOTP_LENGTH = 6\nconst DIGIT_CHARACTERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']\n\ntype TOTPFormProps = {\n  onSubmit: (value: string) => void\n  loginIsPending: UseLoginReturn['loginIsPending']\n}\n\nexport default function TOTPForm(props: TOTPFormProps) {\n  const { onSubmit, loginIsPending } = props\n  const [verificationCode, setVerificationCode] = useState('')\n  return (\n    <Box>\n      <MuiOtpInput\n        autoFocus\n        length={TOTP_LENGTH}\n        TextFieldsProps={{\n          slotProps: {\n            htmlInput: NUMERIC_CODE_HTML_INPUT_PROPS,\n          },\n        }}\n        value={verificationCode}\n        onChange={setVerificationCode}\n        onComplete={onSubmit}\n        validateChar={(character: string) => {\n          return DIGIT_CHARACTERS.includes(character) || character === ''\n        }}\n        gap={'2px'}\n        sx={{\n          mx: 'auto',\n          maxWidth: '350px',\n          '.MuiInputBase-root': {\n            paddingLeft: '5px',\n            paddingRight: '5px',\n          },\n          '.MuiFormControl-root:first-of-type > .MuiInputBase-root': {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n          '.MuiFormControl-root:last-of-type > .MuiInputBase-root': {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n          },\n          '.MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root':\n            {\n              borderRadius: 0,\n            },\n        }}\n      />\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n        disabled={verificationCode.length !== TOTP_LENGTH || loginIsPending}\n        onClick={e => {\n          e.preventDefault()\n          onSubmit(verificationCode)\n        }}\n      >\n        {loginIsPending ? 'Verifying...' : 'Submit'}\n      </Button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,IAAc,GACd,IAAmB;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAO1E,SAAwB,EAAS,GAAsB;CACrD,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAkB,KAAuB,EAAS,EAAE;CAC3D,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAA;EACA,QAAQ;EACR,iBAAiB,EACf,WAAW,EACT,WAAW,EACb,EACF;EACA,OAAO;EACP,UAAU;EACV,YAAY;EACZ,eAAe,MACN,EAAiB,SAAS,CAAS,KAAK,MAAc;EAE/D,KAAK;EACL,IAAI;GACF,IAAI;GACJ,UAAU;GACV,sBAAsB;IACpB,aAAa;IACb,cAAc;GAChB;GACA,2DAA2D;IACzD,sBAAsB;IACtB,yBAAyB;GAC3B;GACA,0DAA0D;IACxD,qBAAqB;IACrB,wBAAwB;GAC1B;GACA,oFACE,EACE,cAAc,EAChB;EACJ;CACD,CAAA,GACD,kBAAC,GAAD;EACE,WAAA;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,IAAI;GACF,QAAQ;GACR,IAAI;GACJ,IAAI;EACN;EACA,UAAU,EAAiB,WAAW,KAAe;EACrD,UAAS,MAAK;GAEZ,AADA,EAAE,eAAe,GACjB,EAAS,CAAgB;EAC3B;YAEC,IAAiB,iBAAiB;CAC7B,CAAA,CACL,EAAA,CAAA;AAET"}

package/dist/components/Authentication/TwoFactorBackupCodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TwoFactorBackupCodes.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorBackupCodes.tsx"],"names":[],"mappings":"AAyBA,MAAM,MAAM,yBAAyB,GAAG;IAEtC,0BAA0B,CAAC,EAAE,OAAO,CAAA;IAEpC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAqK5E"}
+{"version":3,"file":"TwoFactorBackupCodes.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorBackupCodes.tsx"],"names":[],"mappings":"AAyBA,MAAM,MAAM,yBAAyB,GAAG;IAEtC,0BAA0B,CAAC,EAAE,OAAO,CAAA;IAEpC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAuL5E"}

package/dist/components/Authentication/TwoFactorBackupCodes.js

@@ -40,10 +40,15 @@ function S(S) {
 		className: M,
 		leftContent: /* @__PURE__ */ b(m, {
 			sx: {
-				py: 10,
-				px: 8,
-				height: "100%",
-				position: "relative"
+				py: {
+					xs: "10px",
+					md: 10
+				},
+				px: {
+					xs: "10px",
+					md: 8
+				},
+				height: "100%"
 			},
 			children: [
 				/* @__PURE__ */ y(g, {
@@ -52,8 +57,14 @@ function S(S) {
 					className: N,
 					sx: {
 						position: "absolute",
-						top: T.spacing(2),
-						left: T.spacing(2)
+						top: {
+							xs: 0,
+							md: T.spacing(2)
+						},
+						left: {
+							xs: 0,
+							md: T.spacing(2)
+						}
 					},
 					children: /* @__PURE__ */ y(i, {
 						icon: "arrowBack",
@@ -66,7 +77,10 @@ function S(S) {
 				}),
 				/* @__PURE__ */ y(_, {
 					variant: "headline1",
-					sx: { mt: 7 },
+					sx: { mt: {
+						xs: 0,
+						md: 7
+					} },
 					children: "Backup codes"
 				}),
 				C && /* @__PURE__ */ b(p, {
@@ -119,20 +133,35 @@ function S(S) {
 		}),
 		rightContent: /* @__PURE__ */ y(m, {
 			sx: {
-				py: 10,
+				padding: {
+					xs: "60px 0 0 0",
+					md: T.spacing(10, 0)
+				},
 				height: "100%",
-				background: "url(https://s3.amazonaws.com/static.synapse.org/images/twofactor-graphic.svg) no-repeat right bottom",
+				background: {
+					xs: "none",
+					md: "url(https://s3.amazonaws.com/static.synapse.org/images/twofactor-graphic.svg) no-repeat right bottom"
+				},
 				backgroundSize: "100%"
 			},
 			children: /* @__PURE__ */ b(m, {
 				sx: {
-					mt: 7,
-					px: 9
+					mt: {
+						xs: 0,
+						md: 7
+					},
+					px: {
+						xs: "10px",
+						md: 9
+					}
 				},
 				children: [
 					/* @__PURE__ */ y(_, {
 						variant: "headline1",
-						sx: { mb: 2.5 },
+						sx: (e) => ({
+							mb: 2.5,
+							[e.breakpoints.down("md")]: { fontSize: "18px" }
+						}),
 						children: "Save these codes"
 					}),
 					/* @__PURE__ */ y(_, {