synapse-react-client 4.0.17 → 4.0.19

package/dist/components/AccessTokenPage/CreateAccessTokenModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateAccessTokenModal.js","names":[],"sources":["../../../src/components/AccessTokenPage/CreateAccessTokenModal.tsx"],"sourcesContent":["import { useCreatePersonalAccessToken } from '@/synapse-queries/user/usePersonalAccessToken'\nimport { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'\nimport {\n  AccessTokenGenerationRequest,\n  scopeDescriptions,\n} from '@sage-bionetworks/synapse-types'\nimport { noop } from 'lodash-es'\nimport { ChangeEvent, useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { CopyToClipboardInput } from '../CopyToClipboardInput/CopyToClipboardInput'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport TextField from '../TextField/TextField'\n\nconst INVALID_INPUT_MSG =\n  'You must provide a token name and at least one permission.'\n\nexport type CreateAccessTokenModalProps = {\n  onClose?: () => void\n  onCreate?: () => void\n}\n\nexport function CreateAccessTokenModal(props: CreateAccessTokenModalProps) {\n  const { onClose = noop, onCreate = noop } = props\n  const [tokenName, setTokenName] = useState('')\n  const [viewAccess, setViewAccess] = useState(true)\n  const [downloadAccess, setDownloadAccess] = useState(false)\n  const [modifyAccess, setModifyAccess] = useState(false)\n\n  const [validationError, setValidationError] = useState<string | null>(null)\n\n  const {\n    mutate,\n    isPending: createIsPending,\n    error: mutationError,\n    data: createdTokenResponse,\n  } = useCreatePersonalAccessToken()\n\n  const handleTokenNameChange = (event: ChangeEvent) => {\n    setTokenName((event.target as HTMLInputElement).value)\n  }\n\n  const validateInput = (tokenName: string, access: boolean[]): boolean => {\n    return !!tokenName && access.some(x => x)\n  }\n\n  const onSubmit = () => {\n    if (validateInput(tokenName, [viewAccess, downloadAccess, modifyAccess])) {\n      setValidationError(null)\n\n      const request: AccessTokenGenerationRequest = {\n        scope: [],\n        name: tokenName,\n      }\n      if (viewAccess) request.scope.push('view')\n      if (downloadAccess) request.scope.push('download')\n      if (modifyAccess) request.scope.push('modify')\n\n      mutate(request)\n\n      onCreate()\n    } else {\n      setValidationError(INVALID_INPUT_MSG)\n    }\n  }\n\n  const dialogContent = createdTokenResponse ? (\n    <>\n      <Typography variant={'body1'}>\n        <Typography\n          variant={'body1'}\n          component={'span'}\n          sx={{\n            fontWeight: 700,\n          }}\n        >\n          This token will not be able to be retrieved again.\n        </Typography>{' '}\n        If needed, generate a new personal access token, and delete this one.\n      </Typography>\n      <div>\n        <CopyToClipboardInput\n          value={createdTokenResponse.token}\n          inputWidth={'350px'}\n        />\n      </div>\n      <Typography variant={'body1'}>\n        This token grants access to your account functions and should be treated\n        like a password.\n      </Typography>\n    </>\n  ) : (\n    <div>\n      <TextField\n        autoFocus\n        label=\"Token Name\"\n        value={tokenName}\n        onChange={handleTokenNameChange}\n        placeholder=\"e.g. Synapse command line access on my laptop\"\n        sx={{ mb: 2 }}\n      />\n      <Typography variant=\"label\">Token Permissions</Typography>\n      <Stack\n        sx={{\n          gap: 2,\n          my: 1,\n        }}\n      >\n        <div>\n          <FormControlLabel\n            control={<Checkbox />}\n            label={scopeDescriptions.view.displayName}\n            checked={viewAccess}\n            onChange={() => setViewAccess(!viewAccess)}\n          />\n          <Typography\n            variant={'smallText1'}\n            sx={{\n              color: 'grey.700',\n            }}\n          >\n            {scopeDescriptions.view.description}. Required to use Synapse\n            programmatic clients.\n          </Typography>\n        </div>\n        <div>\n          <FormControlLabel\n            control={<Checkbox />}\n            label={scopeDescriptions.download.displayName}\n            checked={downloadAccess}\n            onChange={() => setDownloadAccess(!downloadAccess)}\n          />\n          <Typography\n            variant={'smallText1'}\n            sx={{\n              color: 'grey.700',\n            }}\n          >\n            {scopeDescriptions.download.description}\n          </Typography>\n        </div>\n        <div>\n          <FormControlLabel\n            control={<Checkbox />}\n            label={scopeDescriptions.modify.displayName}\n            checked={modifyAccess}\n            onChange={() => setModifyAccess(!modifyAccess)}\n          />\n          <Typography\n            variant={'smallText1'}\n            sx={{\n              color: 'grey.700',\n            }}\n          >\n            {scopeDescriptions.modify.description}\n          </Typography>\n        </div>\n      </Stack>\n      {validationError && <ErrorBanner error={validationError} />}\n      {mutationError && <ErrorBanner error={mutationError.reason} />}\n    </div>\n  )\n\n  return (\n    <ConfirmationDialog\n      open={true}\n      title=\"Create New Personal Access Token\"\n      content={createIsPending ? loadingScreen : dialogContent}\n      confirmButtonProps={{\n        children: createdTokenResponse ? 'Close' : 'Create Token',\n        variant: createdTokenResponse ? 'outlined' : 'contained',\n      }}\n      hasCancelButton={!createdTokenResponse}\n      onCancel={onClose}\n      onConfirm={\n        createdTokenResponse\n          ? () => onClose()\n          : () => {\n              void onSubmit()\n            }\n      }\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CreateAccessTokenModal.js","names":[],"sources":["../../../src/components/AccessTokenPage/CreateAccessTokenModal.tsx"],"sourcesContent":["import { useCreatePersonalAccessToken } from '@/synapse-queries/user/usePersonalAccessToken'\nimport { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'\nimport {\n  AccessTokenGenerationRequest,\n  scopeDescriptions,\n} from '@sage-bionetworks/synapse-types'\nimport { noop } from 'lodash-es'\nimport { ChangeEvent, useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { CopyToClipboardInput } from '../CopyToClipboardInput/CopyToClipboardInput'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport TextField from '../TextField/TextField'\n\nconst INVALID_INPUT_MSG =\n  'You must provide a token name and at least one permission.'\n\nexport type CreateAccessTokenModalProps = {\n  onClose?: () => void\n  onCreate?: () => void\n}\n\nexport function CreateAccessTokenModal(props: CreateAccessTokenModalProps) {\n  const { onClose = noop, onCreate = noop } = props\n  const [tokenName, setTokenName] = useState('')\n  const [viewAccess, setViewAccess] = useState(true)\n  const [downloadAccess, setDownloadAccess] = useState(false)\n  const [modifyAccess, setModifyAccess] = useState(false)\n\n  const [validationError, setValidationError] = useState<string | null>(null)\n\n  const {\n    mutate,\n    isPending: createIsPending,\n    error: mutationError,\n    data: createdTokenResponse,\n  } = useCreatePersonalAccessToken()\n\n  const handleTokenNameChange = (event: ChangeEvent) => {\n    setTokenName((event.target as HTMLInputElement).value)\n  }\n\n  const validateInput = (tokenName: string, access: boolean[]): boolean => {\n    return !!tokenName && access.some(x => x)\n  }\n\n  const onSubmit = () => {\n    if (validateInput(tokenName, [viewAccess, downloadAccess, modifyAccess])) {\n      setValidationError(null)\n\n      const request: AccessTokenGenerationRequest = {\n        scope: [],\n        name: tokenName,\n      }\n      if (viewAccess) request.scope.push('view')\n      if (downloadAccess) request.scope.push('download')\n      if (modifyAccess) request.scope.push('modify')\n\n      mutate(request)\n\n      onCreate()\n    } else {\n      setValidationError(INVALID_INPUT_MSG)\n    }\n  }\n\n  const dialogContent = createdTokenResponse ? (\n    <>\n      <Typography variant={'body1'}>\n        <Typography\n          variant={'body1'}\n          component={'span'}\n          sx={{\n            fontWeight: 700,\n          }}\n        >\n          This token will not be able to be retrieved again.\n        </Typography>{' '}\n        If needed, generate a new personal access token, and delete this one.\n      </Typography>\n      <div>\n        <CopyToClipboardInput\n          value={createdTokenResponse.token}\n          inputWidth={'350px'}\n        />\n      </div>\n      <Typography variant={'body1'}>\n        This token grants access to your account functions and should be treated\n        like a password.\n      </Typography>\n    </>\n  ) : (\n    <Stack gap={2}>\n      <TextField\n        autoFocus\n        label=\"Token Name\"\n        value={tokenName}\n        onChange={handleTokenNameChange}\n        placeholder=\"e.g. Synapse command line access on my laptop\"\n        sx={{ mb: 2 }}\n      />\n      <div>\n        <Typography variant=\"label\">Token Permissions</Typography>\n        <Stack\n          sx={{\n            gap: 2,\n            my: 1,\n          }}\n        >\n          <div>\n            <FormControlLabel\n              control={<Checkbox />}\n              label={scopeDescriptions.view.displayName}\n              checked={viewAccess}\n              onChange={() => setViewAccess(!viewAccess)}\n            />\n            <Typography\n              variant={'smallText1'}\n              sx={{\n                color: 'grey.700',\n              }}\n            >\n              {scopeDescriptions.view.description}. Required to use Synapse\n              programmatic clients.\n            </Typography>\n          </div>\n          <div>\n            <FormControlLabel\n              control={<Checkbox />}\n              label={scopeDescriptions.download.displayName}\n              checked={downloadAccess}\n              onChange={() => setDownloadAccess(!downloadAccess)}\n            />\n            <Typography\n              variant={'smallText1'}\n              sx={{\n                color: 'grey.700',\n              }}\n            >\n              {scopeDescriptions.download.description}\n            </Typography>\n          </div>\n          <div>\n            <FormControlLabel\n              control={<Checkbox />}\n              label={scopeDescriptions.modify.displayName}\n              checked={modifyAccess}\n              onChange={() => setModifyAccess(!modifyAccess)}\n            />\n            <Typography\n              variant={'smallText1'}\n              sx={{\n                color: 'grey.700',\n              }}\n            >\n              {scopeDescriptions.modify.description}\n            </Typography>\n          </div>\n        </Stack>\n      </div>\n      {validationError && <ErrorBanner error={validationError} />}\n      {mutationError && <ErrorBanner error={mutationError.reason} />}\n    </Stack>\n  )\n\n  return (\n    <ConfirmationDialog\n      open={true}\n      title=\"Create New Personal Access Token\"\n      content={createIsPending ? loadingScreen : dialogContent}\n      confirmButtonProps={{\n        children: createdTokenResponse ? 'Close' : 'Create Token',\n        variant: createdTokenResponse ? 'outlined' : 'contained',\n      }}\n      hasCancelButton={!createdTokenResponse}\n      onCancel={onClose}\n      onConfirm={\n        createdTokenResponse\n          ? () => onClose()\n          : () => {\n              void onSubmit()\n            }\n      }\n    />\n  )\n}\n"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-import { TextFieldProps } from '@mui/material';
+import { TextFieldProps } from '../TextField';
 export default function PasswordField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PasswordField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/PasswordField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,cAAc,2CAY1D"}
+{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/PasswordField.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAExD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,cAAc,2CAY1D"}

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/Authentication/PasswordField.tsx"],"sourcesContent":["import TextField from '../TextField'\nimport { TextFieldProps } from '@mui/material'\n\nexport default function PasswordField(props: TextFieldProps) {\n  return (\n    <TextField\n      required\n      fullWidth\n      autoComplete=\"current-password\"\n      label=\"Password\"\n      id=\"current-password\"\n      type=\"password\"\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;AAGA,SAAwB,EAAc,GAAuB;AAC3D,QACE,kBAAC,GAAD;EACE,UAAA;EACA,WAAA;EACA,cAAa;EACb,OAAM;EACN,IAAG;EACH,MAAK;EACL,GAAI;EACJ,CAAA"}
+{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/Authentication/PasswordField.tsx"],"sourcesContent":["import TextField, { TextFieldProps } from '../TextField'\n\nexport default function PasswordField(props: TextFieldProps) {\n  return (\n    <TextField\n      required\n      fullWidth\n      autoComplete=\"current-password\"\n      label=\"Password\"\n      id=\"current-password\"\n      type=\"password\"\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;AAEA,SAAwB,EAAc,GAAuB;AAC3D,QACE,kBAAC,GAAD;EACE,UAAA;EACA,WAAA;EACA,cAAa;EACb,OAAM;EACN,IAAG;EACH,MAAK;EACL,GAAI;EACJ,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"TwoFactorEnrollmentForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAW5D;;;;GAIG;AACH,iBAAS,YAAY,CAAC,MAAM,EAAE,UAAU,UAEvC;AA6BD,eAAO,MAAM,oBAAoB,+HAC6F,CAAA;AAE9H,MAAM,MAAM,4BAA4B,GAAG;IACzC,UAAU,EAAE,UAAU,CAAA;IACtB,4BAA4B,EAAE,MAAM,IAAI,CAAA;IACxC,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAC7C,KAAK,EAAE,4BAA4B,2CAiOpC;AAED,eAAO,MAAM,yBAAyB;;CAAmB,CAAA"}
+{"version":3,"file":"TwoFactorEnrollmentForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAW5D;;;;GAIG;AACH,iBAAS,YAAY,CAAC,MAAM,EAAE,UAAU,UAEvC;AA6BD,eAAO,MAAM,oBAAoB,+HAC6F,CAAA;AAE9H,MAAM,MAAM,4BAA4B,GAAG;IACzC,UAAU,EAAE,UAAU,CAAA;IACtB,4BAA4B,EAAE,MAAM,IAAI,CAAA;IACxC,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAC7C,KAAK,EAAE,4BAA4B,2CAgOpC;AAED,eAAO,MAAM,yBAAyB;;CAAmB,CAAA"}

package/dist/components/Authentication/TwoFactorEnrollmentForm.js

@@ -188,9 +188,8 @@ function D(v) {
 						height: "48px"
 					},
 					children: [/* @__PURE__ */ y(i, {
-						noWrapInFormControl: !0,
 						autoFocus: !0,
-						inputProps: { maxLength: O?.digits },
+						slotProps: { htmlInput: { maxLength: O?.digits } },
 						value: k,
 						onChange: (e) => {
 							A(e.target.value);

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

@@ -1 +1 @@
-{"version":3,"file":"TwoFactorEnrollmentForm.js","names":[],"sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"sourcesContent":["import { StyledOuterContainer } from '@/components/styled/LeftRightPanel'\nimport { TOTP_CLOCK_SKEW_ERROR_APPENDAGE } from '@/components/Authentication/Constants'\nimport { useFinishTwoFactorEnrollment } from '@/synapse-queries/auth/useTwoFactorEnrollment'\nimport { StyledComponent } from '@emotion/styled'\nimport {\n  Box,\n  BoxProps,\n  Button,\n  Divider,\n  IconButton,\n  Link,\n  Paper,\n  Stack,\n  styled,\n  Typography,\n} from '@mui/material'\nimport { TotpSecret } from '@sage-bionetworks/synapse-types'\nimport * as qrcode from 'qrcode'\n// qrcode is CJS-only; use namespace import for Vite dev mode CJS interop.\nconst { toCanvas } = qrcode\nimport { useEffect, useRef, useState } from 'react'\nimport FullWidthAlert from '../FullWidthAlert/FullWidthAlert'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport TextField from '../TextField/TextField'\nimport TwoFactorSecretDialog from './TwoFactorSecretDialog'\n\n/**\n * Returns a URL that can be used to generate a QR code that 2FA authenticator apps can interpret.\n * This uses the username fro TotpSecret to create the friendly name for the account in the authenticator app.\n * @param secret\n */\nfunction toOtpAuthUrl(secret: TotpSecret) {\n  return `otpauth://totp/Synapse:${secret.username}?secret=${secret.secret}&issuer=Sage%20Bionetworks&algorithm=${secret.alg}&digits=${secret.digits}&period=${secret.period}`\n}\n\nconst Section: StyledComponent<BoxProps> = styled(\n  (props: BoxProps) => (\n    <Box\n      sx={{\n        my: 3,\n        ...props.sx,\n      }}\n      {...props}\n    />\n  ),\n  {\n    label: 'Section',\n  },\n)(() => ({}))\n\nconst SectionInnerGrid = styled(Box, { label: 'SectionInnerGrid' })(\n  ({ theme }) => ({\n    display: 'grid',\n    gridTemplateColumns: 'auto 200px',\n    columnGap: theme.spacing(5),\n    [theme.breakpoints.down('sm')]: {\n      gridTemplateColumns: '1fr',\n      gap: '18px',\n    },\n  }),\n)\n\nexport const TWO_FACTOR_DOCS_LINK =\n  'https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account'\n\nexport type TwoFactorEnrollmentFormProps = {\n  totpSecret: TotpSecret\n  onTwoFactorEnrollmentSuccess: () => void\n  onBackClicked: () => void\n}\n\nexport default function TwoFactorEnrollmentForm(\n  props: TwoFactorEnrollmentFormProps,\n) {\n  const { onTwoFactorEnrollmentSuccess, onBackClicked, totpSecret } = props\n\n  const [totp, setTotp] = useState('')\n  const [hasQrCode, setHasQrCode] = useState(false)\n  const [showSecretInModal, setShowSecretInModal] = useState(false)\n  const qrCodeCanvasElement = useRef<HTMLCanvasElement>(null)\n\n  const {\n    mutate: finishEnrollment,\n    isPending: isFinishingEnrollment,\n    error,\n  } = useFinishTwoFactorEnrollment({\n    onSuccess: onTwoFactorEnrollmentSuccess,\n  })\n\n  useEffect(() => {\n    async function createQrCode() {\n      if (totpSecret && qrCodeCanvasElement.current) {\n        await toCanvas(qrCodeCanvasElement.current, toOtpAuthUrl(totpSecret), {\n          version: 10,\n          margin: 0,\n          scale: 3.5,\n        })\n        setHasQrCode(true)\n      }\n    }\n    void createQrCode()\n  }, [totpSecret])\n\n  return (\n    <StyledOuterContainer>\n      <Paper\n        sx={{\n          position: 'relative',\n          width: { xs: '100%', md: '800px' },\n          py: 6.5,\n          px: 8,\n          mx: 'auto',\n        }}\n      >\n        {onBackClicked && (\n          <IconButton\n            type=\"button\"\n            onClick={() => {\n              onBackClicked()\n            }}\n            sx={theme => ({\n              position: 'absolute',\n              top: theme.spacing(2),\n              left: theme.spacing(2),\n            })}\n          >\n            <IconSvg\n              icon=\"arrowBack\"\n              wrap={false}\n              sx={{ height: '24px', width: '24px' }}\n            />\n          </IconButton>\n        )}\n        <Section>\n          <Typography variant=\"headline2\" sx={{ mb: 3 }}>\n            Activate Two-factor Authentication\n          </Typography>\n          <Typography variant=\"body1\">\n            After setting up 2FA, you’ll use an authenticator app as part of\n            your login process, in addition to your existing password. If you\n            log in using your Google\n            {/* eslint-disable-next-line no-constant-binary-expression -- Remove conditionality when NIH RAS login is supported */}\n            {false && ', NIH RAS,'} or ORCiD account, you may need to use 2FA as\n            part of\n            {/*those processes*/}\n            that process as well.{' '}\n            <Link href={TWO_FACTOR_DOCS_LINK}>Learn more about 2FA</Link>.\n          </Typography>\n        </Section>\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 1. Get one of these apps\n              </Typography>\n              <Typography variant=\"body1\">\n                Download and install one of these authentication apps to set up\n                2FA on your mobile device, tablet, or desktop. If you have one\n                of these apps already installed, you can skip this step.\n              </Typography>\n            </Box>\n            <Stack\n              sx={theme => ({\n                justifyContent: 'space-between',\n                flexShrink: 0,\n                [theme.breakpoints.down('sm')]: {\n                  gap: '20px',\n                },\n              })}\n            >\n              <Link href={'https://authy.com/download/'}>Authy</Link>\n              <Link\n                href={\n                  'https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app'\n                }\n              >\n                DUO Mobile\n              </Link>\n              <Link href={'https://googleauthenticator.net/'}>\n                Google Authenticator\n              </Link>\n              <Link\n                href={\n                  'https://www.microsoft.com/en-us/security/mobile-authenticator-app'\n                }\n              >\n                Microsoft Authenticator\n              </Link>\n            </Stack>\n          </SectionInnerGrid>\n        </Section>\n        <Divider />\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 2. Scan the QR Code\n              </Typography>\n              <Typography component=\"ol\" variant=\"body1\" sx={{ pl: 2, my: 1 }}>\n                <li>Open your authenticator app</li>\n                <li>Tap the &quot;+&quot; button</li>\n                <li>Use your camera to scan the image to the right</li>\n              </Typography>\n              <Link\n                onClick={() => {\n                  setShowSecretInModal(true)\n                }}\n              >\n                Can&apos;t use your camera?\n              </Link>\n              <TwoFactorSecretDialog\n                secret={totpSecret?.secret ?? ''}\n                open={showSecretInModal}\n                onClose={() => setShowSecretInModal(false)}\n              />\n            </Box>\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'middle',\n                height: 'auto',\n              }}\n            >\n              {!hasQrCode && <SynapseSpinner size={50} />}\n              <canvas\n                style={{ display: hasQrCode ? undefined : 'none' }}\n                ref={qrCodeCanvasElement}\n              />\n            </Box>\n          </SectionInnerGrid>\n        </Section>\n        <Divider />\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 3. Enter the Verification Code\n              </Typography>\n              <Typography variant=\"body1\">\n                After scanning in the QR code in step 2, your app will provide a\n                6-digit code. Enter it in in the field to the right.\n              </Typography>\n            </Box>\n            <form\n              onSubmit={e => {\n                e.preventDefault()\n                finishEnrollment({\n                  secretId: totpSecret.secretId,\n                  totp,\n                })\n              }}\n            >\n              <Stack\n                direction={'row'}\n                sx={{\n                  gap: 2,\n                  height: '48px',\n                }}\n              >\n                <TextField\n                  noWrapInFormControl\n                  autoFocus\n                  inputProps={{ maxLength: totpSecret?.digits }}\n                  value={totp}\n                  onChange={e => {\n                    setTotp(e.target.value)\n                  }}\n                />\n                <Button\n                  type={'submit'}\n                  variant={'contained'}\n                  sx={{ flexShrink: 0 }}\n                  disabled={\n                    isFinishingEnrollment || totp.length != totpSecret?.digits\n                  }\n                >\n                  Activate\n                </Button>\n              </Stack>\n            </form>\n          </SectionInnerGrid>\n        </Section>\n        {error && (\n          <FullWidthAlert\n            variant={'danger'}\n            isGlobal={false}\n            description={\n              error.reason.toLowerCase().includes('invalid totp code')\n                ? `${error.reason}. ${TOTP_CLOCK_SKEW_ERROR_APPENDAGE}`\n                : error.reason\n            }\n          />\n        )}\n      </Paper>\n    </StyledOuterContainer>\n  )\n}\n\nexport const EXPORTED_FOR_UNIT_TESTING = { toOtpAuthUrl }\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,EAAE,gBAAa;AAarB,SAAS,EAAa,GAAoB;AACxC,QAAO,0BAA0B,EAAO,SAAS,UAAU,EAAO,OAAO,uCAAuC,EAAO,IAAI,UAAU,EAAO,OAAO,UAAU,EAAO;;AAGtK,IAAM,IAAqC,GACxC,MACC,kBAAC,GAAD;CACE,IAAI;EACF,IAAI;EACJ,GAAG,EAAM;EACV;CACD,GAAI;CACJ,CAAA,EAEJ,EACE,OAAO,WACR,CACF,QAAQ,EAAE,EAAE,EAEP,IAAmB,EAAO,GAAK,EAAE,OAAO,oBAAoB,CAAC,EAChE,EAAE,gBAAa;CACd,SAAS;CACT,qBAAqB;CACrB,WAAW,EAAM,QAAQ,EAAE;EAC1B,EAAM,YAAY,KAAK,KAAK,GAAG;EAC9B,qBAAqB;EACrB,KAAK;EACN;CACF,EACF,EAEY,IACX;AAQF,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,iCAA8B,kBAAe,kBAAe,GAE9D,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAW,KAAgB,EAAS,GAAM,EAC3C,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,IAAsB,EAA0B,KAAK,EAErD,EACJ,QAAQ,GACR,WAAW,GACX,aACE,EAA6B,EAC/B,WAAW,GACZ,CAAC;AAgBF,QAdA,QAAgB;EACd,eAAe,IAAe;AAC5B,GAAI,KAAc,EAAoB,YACpC,MAAM,EAAS,EAAoB,SAAS,EAAa,EAAW,EAAE;IACpE,SAAS;IACT,QAAQ;IACR,OAAO;IACR,CAAC,EACF,EAAa,GAAK;;AAGjB,KAAc;IAClB,CAAC,EAAW,CAAC,EAGd,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,IAAI;GACF,UAAU;GACV,OAAO;IAAE,IAAI;IAAQ,IAAI;IAAS;GAClC,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;YAPH;GASG,KACC,kBAAC,GAAD;IACE,MAAK;IACL,eAAe;AACb,QAAe;;IAEjB,KAAI,OAAU;KACZ,UAAU;KACV,KAAK,EAAM,QAAQ,EAAE;KACrB,MAAM,EAAM,QAAQ,EAAE;KACvB;cAED,kBAAC,GAAD;KACE,MAAK;KACL,MAAM;KACN,IAAI;MAAE,QAAQ;MAAQ,OAAO;MAAQ;KACrC,CAAA;IACS,CAAA;GAEf,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAY,SAAQ;IAAY,IAAI,EAAE,IAAI,GAAG;cAAE;IAElC,CAAA,EACb,kBAAC,GAAD;IAAY,SAAQ;cAApB;KAA4B;KAKzB;KAAsB;KAEF;KACC;KACtB,kBAAC,GAAD;MAAM,MAAM;gBAAsB;MAA2B,CAAA;;KAClD;MACL,EAAA,CAAA;GACV,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAY,SAAQ;IAAQ,IAAI,EAAE,YAAY,KAAK;cAAE;IAExC,CAAA,EACb,kBAAC,GAAD;IAAY,SAAQ;cAAQ;IAIf,CAAA,CACT,EAAA,CAAA,EACN,kBAAC,GAAD;IACE,KAAI,OAAU;KACZ,gBAAgB;KAChB,YAAY;MACX,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,KAAK,QACN;KACF;cAPH;KASE,kBAAC,GAAD;MAAM,MAAM;gBAA+B;MAAY,CAAA;KACvD,kBAAC,GAAD;MACE,MACE;gBAEH;MAEM,CAAA;KACP,kBAAC,GAAD;MAAM,MAAM;gBAAoC;MAEzC,CAAA;KACP,kBAAC,GAAD;MACE,MACE;gBAEH;MAEM,CAAA;KACD;MACS,EAAA,CAAA,EACX,CAAA;GACV,kBAAC,GAAD,EAAW,CAAA;GACX,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA;IACE,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,YAAY,KAAK;eAAE;KAExC,CAAA;IACb,kBAAC,GAAD;KAAY,WAAU;KAAK,SAAQ;KAAQ,IAAI;MAAE,IAAI;MAAG,IAAI;MAAG;eAA/D;MACE,kBAAC,MAAD,EAAA,UAAI,+BAAgC,CAAA;MACpC,kBAAC,MAAD,EAAA,UAAI,wBAAiC,CAAA;MACrC,kBAAC,MAAD,EAAA,UAAI,kDAAmD,CAAA;MAC5C;;IACb,kBAAC,GAAD;KACE,eAAe;AACb,QAAqB,GAAK;;eAE7B;KAEM,CAAA;IACP,kBAAC,GAAD;KACE,QAAQ,GAAY,UAAU;KAC9B,MAAM;KACN,eAAe,EAAqB,GAAM;KAC1C,CAAA;IACE,EAAA,CAAA,EACN,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,YAAY;KACZ,QAAQ;KACT;cANH,CAQG,CAAC,KAAa,kBAAC,GAAD,EAAgB,MAAM,IAAM,CAAA,EAC3C,kBAAC,UAAD;KACE,OAAO,EAAE,SAAS,IAAY,KAAA,IAAY,QAAQ;KAClD,KAAK;KACL,CAAA,CACE;MACW,EAAA,CAAA,EACX,CAAA;GACV,kBAAC,GAAD,EAAW,CAAA;GACX,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAY,SAAQ;IAAQ,IAAI,EAAE,YAAY,KAAK;cAAE;IAExC,CAAA,EACb,kBAAC,GAAD;IAAY,SAAQ;cAAQ;IAGf,CAAA,CACT,EAAA,CAAA,EACN,kBAAC,QAAD;IACE,WAAU,MAAK;AAEb,KADA,EAAE,gBAAgB,EAClB,EAAiB;MACf,UAAU,EAAW;MACrB;MACD,CAAC;;cAGJ,kBAAC,GAAD;KACE,WAAW;KACX,IAAI;MACF,KAAK;MACL,QAAQ;MACT;eALH,CAOE,kBAAC,GAAD;MACE,qBAAA;MACA,WAAA;MACA,YAAY,EAAE,WAAW,GAAY,QAAQ;MAC7C,OAAO;MACP,WAAU,MAAK;AACb,SAAQ,EAAE,OAAO,MAAM;;MAEzB,CAAA,EACF,kBAAC,GAAD;MACE,MAAM;MACN,SAAS;MACT,IAAI,EAAE,YAAY,GAAG;MACrB,UACE,KAAyB,EAAK,UAAU,GAAY;gBAEvD;MAEQ,CAAA,CACH;;IACH,CAAA,CACU,EAAA,CAAA,EACX,CAAA;GACT,KACC,kBAAC,GAAD;IACE,SAAS;IACT,UAAU;IACV,aACE,EAAM,OAAO,aAAa,CAAC,SAAS,oBAAoB,GACpD,GAAG,EAAM,OAAO,6FAChB,EAAM;IAEZ,CAAA;GAEE;KACa,CAAA;;AAI3B,IAAa,IAA4B,EAAE,iBAAc"}
+{"version":3,"file":"TwoFactorEnrollmentForm.js","names":[],"sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"sourcesContent":["import { StyledOuterContainer } from '@/components/styled/LeftRightPanel'\nimport { TOTP_CLOCK_SKEW_ERROR_APPENDAGE } from '@/components/Authentication/Constants'\nimport { useFinishTwoFactorEnrollment } from '@/synapse-queries/auth/useTwoFactorEnrollment'\nimport { StyledComponent } from '@emotion/styled'\nimport {\n  Box,\n  BoxProps,\n  Button,\n  Divider,\n  IconButton,\n  Link,\n  Paper,\n  Stack,\n  styled,\n  Typography,\n} from '@mui/material'\nimport { TotpSecret } from '@sage-bionetworks/synapse-types'\nimport * as qrcode from 'qrcode'\n// qrcode is CJS-only; use namespace import for Vite dev mode CJS interop.\nconst { toCanvas } = qrcode\nimport { useEffect, useRef, useState } from 'react'\nimport FullWidthAlert from '../FullWidthAlert/FullWidthAlert'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport TextField from '../TextField/TextField'\nimport TwoFactorSecretDialog from './TwoFactorSecretDialog'\n\n/**\n * Returns a URL that can be used to generate a QR code that 2FA authenticator apps can interpret.\n * This uses the username fro TotpSecret to create the friendly name for the account in the authenticator app.\n * @param secret\n */\nfunction toOtpAuthUrl(secret: TotpSecret) {\n  return `otpauth://totp/Synapse:${secret.username}?secret=${secret.secret}&issuer=Sage%20Bionetworks&algorithm=${secret.alg}&digits=${secret.digits}&period=${secret.period}`\n}\n\nconst Section: StyledComponent<BoxProps> = styled(\n  (props: BoxProps) => (\n    <Box\n      sx={{\n        my: 3,\n        ...props.sx,\n      }}\n      {...props}\n    />\n  ),\n  {\n    label: 'Section',\n  },\n)(() => ({}))\n\nconst SectionInnerGrid = styled(Box, { label: 'SectionInnerGrid' })(\n  ({ theme }) => ({\n    display: 'grid',\n    gridTemplateColumns: 'auto 200px',\n    columnGap: theme.spacing(5),\n    [theme.breakpoints.down('sm')]: {\n      gridTemplateColumns: '1fr',\n      gap: '18px',\n    },\n  }),\n)\n\nexport const TWO_FACTOR_DOCS_LINK =\n  'https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account'\n\nexport type TwoFactorEnrollmentFormProps = {\n  totpSecret: TotpSecret\n  onTwoFactorEnrollmentSuccess: () => void\n  onBackClicked: () => void\n}\n\nexport default function TwoFactorEnrollmentForm(\n  props: TwoFactorEnrollmentFormProps,\n) {\n  const { onTwoFactorEnrollmentSuccess, onBackClicked, totpSecret } = props\n\n  const [totp, setTotp] = useState('')\n  const [hasQrCode, setHasQrCode] = useState(false)\n  const [showSecretInModal, setShowSecretInModal] = useState(false)\n  const qrCodeCanvasElement = useRef<HTMLCanvasElement>(null)\n\n  const {\n    mutate: finishEnrollment,\n    isPending: isFinishingEnrollment,\n    error,\n  } = useFinishTwoFactorEnrollment({\n    onSuccess: onTwoFactorEnrollmentSuccess,\n  })\n\n  useEffect(() => {\n    async function createQrCode() {\n      if (totpSecret && qrCodeCanvasElement.current) {\n        await toCanvas(qrCodeCanvasElement.current, toOtpAuthUrl(totpSecret), {\n          version: 10,\n          margin: 0,\n          scale: 3.5,\n        })\n        setHasQrCode(true)\n      }\n    }\n    void createQrCode()\n  }, [totpSecret])\n\n  return (\n    <StyledOuterContainer>\n      <Paper\n        sx={{\n          position: 'relative',\n          width: { xs: '100%', md: '800px' },\n          py: 6.5,\n          px: 8,\n          mx: 'auto',\n        }}\n      >\n        {onBackClicked && (\n          <IconButton\n            type=\"button\"\n            onClick={() => {\n              onBackClicked()\n            }}\n            sx={theme => ({\n              position: 'absolute',\n              top: theme.spacing(2),\n              left: theme.spacing(2),\n            })}\n          >\n            <IconSvg\n              icon=\"arrowBack\"\n              wrap={false}\n              sx={{ height: '24px', width: '24px' }}\n            />\n          </IconButton>\n        )}\n        <Section>\n          <Typography variant=\"headline2\" sx={{ mb: 3 }}>\n            Activate Two-factor Authentication\n          </Typography>\n          <Typography variant=\"body1\">\n            After setting up 2FA, you’ll use an authenticator app as part of\n            your login process, in addition to your existing password. If you\n            log in using your Google\n            {/* eslint-disable-next-line no-constant-binary-expression -- Remove conditionality when NIH RAS login is supported */}\n            {false && ', NIH RAS,'} or ORCiD account, you may need to use 2FA as\n            part of\n            {/*those processes*/}\n            that process as well.{' '}\n            <Link href={TWO_FACTOR_DOCS_LINK}>Learn more about 2FA</Link>.\n          </Typography>\n        </Section>\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 1. Get one of these apps\n              </Typography>\n              <Typography variant=\"body1\">\n                Download and install one of these authentication apps to set up\n                2FA on your mobile device, tablet, or desktop. If you have one\n                of these apps already installed, you can skip this step.\n              </Typography>\n            </Box>\n            <Stack\n              sx={theme => ({\n                justifyContent: 'space-between',\n                flexShrink: 0,\n                [theme.breakpoints.down('sm')]: {\n                  gap: '20px',\n                },\n              })}\n            >\n              <Link href={'https://authy.com/download/'}>Authy</Link>\n              <Link\n                href={\n                  'https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app'\n                }\n              >\n                DUO Mobile\n              </Link>\n              <Link href={'https://googleauthenticator.net/'}>\n                Google Authenticator\n              </Link>\n              <Link\n                href={\n                  'https://www.microsoft.com/en-us/security/mobile-authenticator-app'\n                }\n              >\n                Microsoft Authenticator\n              </Link>\n            </Stack>\n          </SectionInnerGrid>\n        </Section>\n        <Divider />\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 2. Scan the QR Code\n              </Typography>\n              <Typography component=\"ol\" variant=\"body1\" sx={{ pl: 2, my: 1 }}>\n                <li>Open your authenticator app</li>\n                <li>Tap the &quot;+&quot; button</li>\n                <li>Use your camera to scan the image to the right</li>\n              </Typography>\n              <Link\n                onClick={() => {\n                  setShowSecretInModal(true)\n                }}\n              >\n                Can&apos;t use your camera?\n              </Link>\n              <TwoFactorSecretDialog\n                secret={totpSecret?.secret ?? ''}\n                open={showSecretInModal}\n                onClose={() => setShowSecretInModal(false)}\n              />\n            </Box>\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'middle',\n                height: 'auto',\n              }}\n            >\n              {!hasQrCode && <SynapseSpinner size={50} />}\n              <canvas\n                style={{ display: hasQrCode ? undefined : 'none' }}\n                ref={qrCodeCanvasElement}\n              />\n            </Box>\n          </SectionInnerGrid>\n        </Section>\n        <Divider />\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 3. Enter the Verification Code\n              </Typography>\n              <Typography variant=\"body1\">\n                After scanning in the QR code in step 2, your app will provide a\n                6-digit code. Enter it in in the field to the right.\n              </Typography>\n            </Box>\n            <form\n              onSubmit={e => {\n                e.preventDefault()\n                finishEnrollment({\n                  secretId: totpSecret.secretId,\n                  totp,\n                })\n              }}\n            >\n              <Stack\n                direction={'row'}\n                sx={{\n                  gap: 2,\n                  height: '48px',\n                }}\n              >\n                <TextField\n                  autoFocus\n                  slotProps={{ htmlInput: { maxLength: totpSecret?.digits } }}\n                  value={totp}\n                  onChange={e => {\n                    setTotp(e.target.value)\n                  }}\n                />\n                <Button\n                  type={'submit'}\n                  variant={'contained'}\n                  sx={{ flexShrink: 0 }}\n                  disabled={\n                    isFinishingEnrollment || totp.length != totpSecret?.digits\n                  }\n                >\n                  Activate\n                </Button>\n              </Stack>\n            </form>\n          </SectionInnerGrid>\n        </Section>\n        {error && (\n          <FullWidthAlert\n            variant={'danger'}\n            isGlobal={false}\n            description={\n              error.reason.toLowerCase().includes('invalid totp code')\n                ? `${error.reason}. ${TOTP_CLOCK_SKEW_ERROR_APPENDAGE}`\n                : error.reason\n            }\n          />\n        )}\n      </Paper>\n    </StyledOuterContainer>\n  )\n}\n\nexport const EXPORTED_FOR_UNIT_TESTING = { toOtpAuthUrl }\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"UsernamePasswordForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/UsernamePasswordForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAO9C,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAChD,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CA+D5E"}
+{"version":3,"file":"UsernamePasswordForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/UsernamePasswordForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAO9C,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAChD,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAiE5E"}

package/dist/components/Authentication/UsernamePasswordForm.js

@@ -2,56 +2,59 @@ import { useOneSageURL as e } from "../../utils/hooks/useOneSageURL.js";
 import t from "../TextField/TextField.js";
 import n from "./PasswordField.js";
 import { useState as r } from "react";
-import { Button as i, Link as a } from "@mui/material";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Button as i, Link as a, Stack as o } from "@mui/material";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/Authentication/UsernamePasswordForm.tsx
-function c(c) {
-	let l = e("/resetPassword"), { resetPasswordUrl: u = l.toString(), onSubmit: d, loginIsPending: f, hideForgotPasswordButton: p } = c, [m, h] = r(""), [g, _] = r("");
-	function v(e) {
-		e.preventDefault(), d(m, g);
+function l(l) {
+	let u = e("/resetPassword"), { resetPasswordUrl: d = u.toString(), onSubmit: f, loginIsPending: p, hideForgotPasswordButton: m } = l, [h, g] = r(""), [_, v] = r("");
+	function y(e) {
+		e.preventDefault(), f(h, _);
 	}
-	return /* @__PURE__ */ s("form", {
+	return /* @__PURE__ */ c("form", {
 		onSubmit: (e) => {
-			v(e);
+			y(e);
 		},
 		children: [
-			/* @__PURE__ */ o(t, {
-				required: !0,
-				fullWidth: !0,
-				autoFocus: !0,
-				autoComplete: "username",
-				label: "Username or Email Address",
-				id: "username",
-				type: "text",
-				value: m,
-				onChange: (e) => h(e.target.value)
-			}),
-			/* @__PURE__ */ o(n, {
-				value: g,
-				onChange: (e) => _(e.target.value)
+			/* @__PURE__ */ c(o, {
+				gap: 2,
+				sx: { mb: 1 },
+				children: [/* @__PURE__ */ s(t, {
+					required: !0,
+					fullWidth: !0,
+					autoFocus: !0,
+					autoComplete: "username",
+					label: "Username or Email Address",
+					id: "username",
+					type: "text",
+					value: h,
+					onChange: (e) => g(e.target.value)
+				}), /* @__PURE__ */ s(n, {
+					value: _,
+					onChange: (e) => v(e.target.value)
+				})]
 			}),
-			!p && /* @__PURE__ */ o(a, {
-				href: u,
-				target: u.startsWith("/") ? void 0 : "_blank",
+			!m && /* @__PURE__ */ s(a, {
+				href: d,
+				target: d.startsWith("/") ? void 0 : "_blank",
 				children: "Forgot password?"
 			}),
-			/* @__PURE__ */ o(i, {
+			/* @__PURE__ */ s(i, {
 				fullWidth: !0,
 				type: "submit",
 				color: "primary",
 				variant: "contained",
-				disabled: f,
+				disabled: p,
 				sx: {
 					height: "50px",
 					mt: 4,
 					mb: 2
 				},
-				children: f ? "Logging you in..." : "Sign in"
+				children: p ? "Logging you in..." : "Sign in"
 			})
 		]
 	});
 }
 //#endregion
-export { c as default };
+export { l as default };
 
 //# sourceMappingURL=UsernamePasswordForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UsernamePasswordForm.js","names":[],"sources":["../../../src/components/Authentication/UsernamePasswordForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { useOneSageURL } from '@/utils/hooks/useOneSageURL'\nimport { Button, Link } from '@mui/material'\nimport { SyntheticEvent, useState } from 'react'\nimport TextField from '../TextField/TextField'\nimport PasswordField from './PasswordField'\n\ntype UsernamePasswordFormProps = {\n  onSubmit: (username: string, password: string) => void\n  resetPasswordUrl?: string\n  loginIsPending: UseLoginReturn['loginIsPending']\n  hideForgotPasswordButton?: boolean\n}\n\nexport default function UsernamePasswordForm(props: UsernamePasswordFormProps) {\n  const defaultResetPasswordUrl = useOneSageURL('/resetPassword')\n  const {\n    resetPasswordUrl = defaultResetPasswordUrl.toString(),\n    onSubmit,\n    loginIsPending,\n    hideForgotPasswordButton,\n  } = props\n  const [username, setUsername] = useState('')\n  const [password, setPassword] = useState('')\n\n  function handleLogin(e: SyntheticEvent) {\n    e.preventDefault()\n    onSubmit(username, password)\n  }\n  return (\n    <form\n      onSubmit={e => {\n        handleLogin(e)\n      }}\n    >\n      <TextField\n        required\n        fullWidth\n        autoFocus\n        autoComplete=\"username\"\n        label=\"Username or Email Address\"\n        id=\"username\"\n        type=\"text\"\n        value={username}\n        onChange={e => setUsername(e.target.value)}\n      />\n      <PasswordField\n        value={password}\n        onChange={e => setPassword(e.target.value)}\n      />\n      {!hideForgotPasswordButton && (\n        <Link\n          href={resetPasswordUrl}\n          target={\n            // If not on OneSage, open in new tab\n            resetPasswordUrl.startsWith('/') ? undefined : '_blank'\n          }\n        >\n          Forgot password?\n        </Link>\n      )}\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        disabled={loginIsPending}\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n      >\n        {loginIsPending ? 'Logging you in...' : 'Sign in'}\n      </Button>\n    </form>\n  )\n}\n"],"mappings":";;;;;;;AAcA,SAAwB,EAAqB,GAAkC;CAC7E,IAAM,IAA0B,EAAc,iBAAiB,EACzD,EACJ,sBAAmB,EAAwB,UAAU,EACrD,aACA,mBACA,gCACE,GACE,CAAC,GAAU,KAAe,EAAS,GAAG,EACtC,CAAC,GAAU,KAAe,EAAS,GAAG;CAE5C,SAAS,EAAY,GAAmB;AAEtC,EADA,EAAE,gBAAgB,EAClB,EAAS,GAAU,EAAS;;AAE9B,QACE,kBAAC,QAAD;EACE,WAAU,MAAK;AACb,KAAY,EAAE;;YAFlB;GAKE,kBAAC,GAAD;IACE,UAAA;IACA,WAAA;IACA,WAAA;IACA,cAAa;IACb,OAAM;IACN,IAAG;IACH,MAAK;IACL,OAAO;IACP,WAAU,MAAK,EAAY,EAAE,OAAO,MAAM;IAC1C,CAAA;GACF,kBAAC,GAAD;IACE,OAAO;IACP,WAAU,MAAK,EAAY,EAAE,OAAO,MAAM;IAC1C,CAAA;GACD,CAAC,KACA,kBAAC,GAAD;IACE,MAAM;IACN,QAEE,EAAiB,WAAW,IAAI,GAAG,KAAA,IAAY;cAElD;IAEM,CAAA;GAET,kBAAC,GAAD;IACE,WAAA;IACA,MAAK;IACL,OAAM;IACN,SAAQ;IACR,UAAU;IACV,IAAI;KACF,QAAQ;KACR,IAAI;KACJ,IAAI;KACL;cAEA,IAAiB,sBAAsB;IACjC,CAAA;GACJ"}
+{"version":3,"file":"UsernamePasswordForm.js","names":[],"sources":["../../../src/components/Authentication/UsernamePasswordForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { useOneSageURL } from '@/utils/hooks/useOneSageURL'\nimport { Button, Link, Stack } from '@mui/material'\nimport { SyntheticEvent, useState } from 'react'\nimport TextField from '../TextField/TextField'\nimport PasswordField from './PasswordField'\n\ntype UsernamePasswordFormProps = {\n  onSubmit: (username: string, password: string) => void\n  resetPasswordUrl?: string\n  loginIsPending: UseLoginReturn['loginIsPending']\n  hideForgotPasswordButton?: boolean\n}\n\nexport default function UsernamePasswordForm(props: UsernamePasswordFormProps) {\n  const defaultResetPasswordUrl = useOneSageURL('/resetPassword')\n  const {\n    resetPasswordUrl = defaultResetPasswordUrl.toString(),\n    onSubmit,\n    loginIsPending,\n    hideForgotPasswordButton,\n  } = props\n  const [username, setUsername] = useState('')\n  const [password, setPassword] = useState('')\n\n  function handleLogin(e: SyntheticEvent) {\n    e.preventDefault()\n    onSubmit(username, password)\n  }\n  return (\n    <form\n      onSubmit={e => {\n        handleLogin(e)\n      }}\n    >\n      <Stack gap={2} sx={{ mb: 1 }}>\n        <TextField\n          required\n          fullWidth\n          autoFocus\n          autoComplete=\"username\"\n          label=\"Username or Email Address\"\n          id=\"username\"\n          type=\"text\"\n          value={username}\n          onChange={e => setUsername(e.target.value)}\n        />\n        <PasswordField\n          value={password}\n          onChange={e => setPassword(e.target.value)}\n        />\n      </Stack>\n      {!hideForgotPasswordButton && (\n        <Link\n          href={resetPasswordUrl}\n          target={\n            // If not on OneSage, open in new tab\n            resetPasswordUrl.startsWith('/') ? undefined : '_blank'\n          }\n        >\n          Forgot password?\n        </Link>\n      )}\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        disabled={loginIsPending}\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n      >\n        {loginIsPending ? 'Logging you in...' : 'Sign in'}\n      </Button>\n    </form>\n  )\n}\n"],"mappings":";;;;;;;AAcA,SAAwB,EAAqB,GAAkC;CAC7E,IAAM,IAA0B,EAAc,iBAAiB,EACzD,EACJ,sBAAmB,EAAwB,UAAU,EACrD,aACA,mBACA,gCACE,GACE,CAAC,GAAU,KAAe,EAAS,GAAG,EACtC,CAAC,GAAU,KAAe,EAAS,GAAG;CAE5C,SAAS,EAAY,GAAmB;AAEtC,EADA,EAAE,gBAAgB,EAClB,EAAS,GAAU,EAAS;;AAE9B,QACE,kBAAC,QAAD;EACE,WAAU,MAAK;AACb,KAAY,EAAE;;YAFlB;GAKE,kBAAC,GAAD;IAAO,KAAK;IAAG,IAAI,EAAE,IAAI,GAAG;cAA5B,CACE,kBAAC,GAAD;KACE,UAAA;KACA,WAAA;KACA,WAAA;KACA,cAAa;KACb,OAAM;KACN,IAAG;KACH,MAAK;KACL,OAAO;KACP,WAAU,MAAK,EAAY,EAAE,OAAO,MAAM;KAC1C,CAAA,EACF,kBAAC,GAAD;KACE,OAAO;KACP,WAAU,MAAK,EAAY,EAAE,OAAO,MAAM;KAC1C,CAAA,CACI;;GACP,CAAC,KACA,kBAAC,GAAD;IACE,MAAM;IACN,QAEE,EAAiB,WAAW,IAAI,GAAG,KAAA,IAAY;cAElD;IAEM,CAAA;GAET,kBAAC,GAAD;IACE,WAAA;IACA,MAAK;IACL,OAAM;IACN,SAAQ;IACR,UAAU;IACV,IAAI;KACF,QAAQ;KACR,IAAI;KACJ,IAAI;KACL;cAEA,IAAiB,sBAAsB;IACjC,CAAA;GACJ"}

package/dist/components/CardContainer/CardLink.d.ts

@@ -2,7 +2,7 @@ import { TargetEnum } from '@/utils/html/TargetEnum';
 /**
  * Defines the configuration for a link that will be rendered in the card
  */
-export type CardLink = ({
+export type CardLink = {
     matchColumnName: string;
     overrideValueWithRowID?: boolean;
     isMarkdown: false;
@@ -28,5 +28,5 @@ export type CardLink = ({
 } | {
     overrideLinkURLColumnName: string;
     overrideLinkURLColumnTransform?: (columnValue: string) => string;
-}));
+});
 //# sourceMappingURL=CardLink.d.ts.map

package/dist/components/CardContainer/CardLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardLink.d.ts","sourceRoot":"","sources":["../../../src/components/CardContainer/CardLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEpD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAClB,CAAE;IAEE,eAAe,EAAE,MAAM,CAAA;IAEvB,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAEhC,UAAU,EAAE,KAAK,CAAA;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,MAAM,CAAC,EAAE,UAAU,CAAA;CACpB,GAAG,CACA;IACE,OAAO,EAAE,MAAM,CAAA;IAEf,aAAa,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,cAAc,CAAA;IAG9C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,GACD;IAEE,yBAAyB,EAAE,MAAM,CAAA;IAEjC,8BAA8B,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAA;CACjE,CACJ,CAAA,CAAA"}
+{"version":3,"file":"CardLink.d.ts","sourceRoot":"","sources":["../../../src/components/CardContainer/CardLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEpD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG;IAErB,eAAe,EAAE,MAAM,CAAA;IAEvB,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAEhC,UAAU,EAAE,KAAK,CAAA;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,MAAM,CAAC,EAAE,UAAU,CAAA;CACpB,GAAG,CACA;IACE,OAAO,EAAE,MAAM,CAAA;IAEf,aAAa,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,cAAc,CAAA;IAG9C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,GACD;IAEE,yBAAyB,EAAE,MAAM,CAAA;IAEjC,8BAA8B,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAA;CACjE,CACJ,CAAA"}

package/dist/components/CardDeck/CardDeckCardProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardDeckCardProps.d.ts","sourceRoot":"","sources":["../../../src/components/CardDeck/CardDeckCardProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,YAAY,CAAC,EACb,AADe,6CAA6C,CAC5D,MAAM,GAAG,MAAM,GAAG,kBAAkB,CAAA;CACrC,CAAA"}
+{"version":3,"file":"CardDeckCardProps.d.ts","sourceRoot":"","sources":["../../../src/components/CardDeck/CardDeckCardProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,YAAY,CAAC,EACX,AADa,6CAA6C,CAC1D,MAAM,GAAG,MAAM,GAAG,kBAAkB,CAAA;CACvC,CAAA"}

package/dist/components/ChallengeSubmission/SubmissionDirectoryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmissionDirectoryList.js","names":[],"sources":["../../../src/components/ChallengeSubmission/SubmissionDirectoryList.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport {\n  invalidateAllQueriesForEntity,\n  useGetEntities,\n  useGetEntityChildren,\n} from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport {\n  BackendDestinationEnum,\n  getEndpoint,\n} from '@/utils/functions/getEndpoint'\nimport { NotesTwoTone } from '@mui/icons-material'\nimport { Box, Button, Radio, Typography } from '@mui/material'\nimport { DataGrid, GridCellParams, GridColDef } from '@mui/x-data-grid'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport {\n  Direction,\n  Entity,\n  EntityChildrenRequest,\n  EntityHeader,\n  EntityLookupRequest,\n  FILE_ENTITY_CONCRETE_TYPE_VALUE,\n  FileEntity,\n  FileUploadComplete,\n  SortBy,\n  UploadCallbackResp,\n} from '@sage-bionetworks/synapse-types'\nimport { useQueryClient } from '@tanstack/react-query'\nimport dayjs from 'dayjs'\nimport { useEffect, useMemo, useState } from 'react'\nimport { Link } from 'react-router'\nimport ConfirmationDialog from '../ConfirmationDialog'\nimport CopyToClipboardIcon from '../CopyToClipboardIcon'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport FileUpload from '../FileUpload'\nimport IconSvg from '../IconSvg'\nimport { EntityItem } from './ChallengeSubmission'\n\ntype SubmissionDirectoryRow = {\n  id: string\n  name: string\n  modifiedOn: string\n}\n\ntype SubmissionDirectoryListProps = {\n  pageSize: number\n  challengeProjectId: string\n  entityType: typeof EntityType.dockerrepo | typeof EntityType.file\n  onItemSelected: (selected: EntityItem) => void\n}\n\ntype FileUploadAttempt = FileUploadComplete & {\n  entityId?: string\n}\n\nfunction SubmissionDirectoryList({\n  pageSize,\n  challengeProjectId,\n  entityType,\n  onItemSelected,\n}: SubmissionDirectoryListProps) {\n  const queryClient = useQueryClient()\n  const { accessToken, keyFactory } = useSynapseContext()\n  const [page, setPage] = useState<number>(0)\n  const [selectedItem, setSelectedItem] = useState<EntityItem | undefined>()\n  const [errorMessage, setErrorMessage] = useState<string>()\n  const [canSubmit, setCanSubmit] = useState<boolean>()\n  const [fetchedHeaders, setFetchedHeaders] = useState<EntityHeader[]>([])\n  const [nextPageToken, setNextPageToken] = useState<string | undefined>()\n  const [fetchNextPage, setFetchNextPage] = useState<boolean>(false)\n  const [confirmOpen, setConfirmOpen] = useState<boolean>(false)\n  const [uploadAttempt, setUploadAttempt] = useState<FileUploadAttempt>()\n\n  const PER_PAGE = pageSize\n  const HEADERS_PER_PAGE = 50\n  const PROJECT_URL = `${getEndpoint(\n    BackendDestinationEnum.PORTAL_ENDPOINT,\n  )}Synapse:${challengeProjectId}`\n\n  const request: EntityChildrenRequest = {\n    parentId: challengeProjectId,\n    nextPageToken: fetchNextPage ? nextPageToken : null,\n    includeTypes: [entityType],\n    includeTotalChildCount: true,\n    sortBy: SortBy.MODIFIED_ON,\n    sortDirection: Direction.DESC,\n  }\n\n  const { data: headerResults, refetch } = useGetEntityChildren(request, {\n    enabled: !!challengeProjectId,\n    throwOnError: true,\n  })\n\n  useEffect(() => {\n    if (headerResults) {\n      const newHeaders = [...fetchedHeaders]\n      const headerPage = Math.floor(((page + 1) * PER_PAGE) / HEADERS_PER_PAGE)\n      const start = headerPage * HEADERS_PER_PAGE\n      newHeaders.splice(start, start + HEADERS_PER_PAGE, ...headerResults.page)\n      setFetchedHeaders(newHeaders)\n      setFetchNextPage(false)\n      setNextPageToken(headerResults.nextPageToken)\n    }\n    // TODO: Temporary useEffect hook to remove onSuccess QueryOption for @tanstack/react-query v5\n    // Refactor this component to remove this effect.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [headerResults])\n\n  function getPageHeaders() {\n    const pageStart = page * PER_PAGE\n    const pageHeaders = fetchedHeaders.slice(pageStart, pageStart + PER_PAGE)\n    return pageHeaders\n  }\n\n  function reset() {\n    setErrorMessage(undefined)\n    setCanSubmit(undefined)\n    setFetchedHeaders([])\n    setNextPageToken(undefined)\n    setFetchNextPage(false)\n    refetch()\n  }\n\n  useEffect(() => {\n    reset()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [entityType, pageSize])\n\n  const queries = useGetEntities(getPageHeaders())\n  const entities = useMemo(\n    () =>\n      queries\n        .filter(q => q.status === 'success')\n        .map(q => q.data) as EntityItem[],\n    [queries],\n  )\n  const areEntitiesLoading = queries.some(q => q.isLoading)\n\n  const entityChangeHandler = async (value: string) => {\n    setCanSubmit(false)\n    const entity = entities.find(entity => entity?.id === value)\n    if (entity) {\n      setSelectedItem(entity)\n      if (entityType === EntityType.dockerrepo) {\n        let commits\n        try {\n          commits = await SynapseClient.getDockerTag(\n            entity.id!,\n            accessToken,\n            0,\n            1,\n          )\n        } catch (e) {\n          return setErrorMessage(e.message)\n        }\n        if (commits.totalNumberOfResults === 0) {\n          return setErrorMessage(\n            'No commits have been made to this repository. Please select a repository with at least one commit.',\n          )\n        }\n      }\n      setCanSubmit(true)\n      setErrorMessage(undefined)\n    }\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'radiobutton',\n      headerName: '',\n      width: 25,\n      sortable: false,\n      filterable: false,\n      hideable: false,\n      disableColumnMenu: true,\n      renderCell: params => {\n        return (\n          <Radio\n            value={params.id}\n            checked={params.id === selectedItem?.id}\n            onChange={event => {\n              entityChangeHandler(event.target.value)\n            }}\n          />\n        )\n      },\n    },\n    {\n      field: 'name',\n      headerName:\n        entityType === EntityType.dockerrepo\n          ? 'Docker Repository'\n          : 'File Name',\n      flex: 1,\n      filterable: false,\n      hideable: false,\n      disableColumnMenu: true,\n      renderCell: (params: GridCellParams<Entity, SubmissionDirectoryRow>) => (\n        <Link\n          to={{\n            pathname: `${getEndpoint(\n              BackendDestinationEnum.PORTAL_ENDPOINT,\n            )}Synapse:${params.row.id}`,\n          }}\n          target=\"_blank\"\n        >\n          {params.row.name}\n        </Link>\n      ),\n    },\n    {\n      field: 'modifiedOn',\n      headerName: 'Updated On',\n      width: 100,\n      filterable: false,\n      hideable: false,\n      disableColumnMenu: true,\n    },\n    {\n      field: 'id',\n      headerName: 'ID',\n      width: 200,\n      filterable: false,\n      hideable: false,\n      disableColumnMenu: true,\n    },\n  ]\n\n  const getRows = (entities: EntityItem[]) => {\n    const newRows: SubmissionDirectoryRow[] = []\n    entities.forEach(entity => {\n      newRows.push({\n        id: entity.id!,\n        name:\n          entityType === EntityType.dockerrepo\n            ? entity.repositoryName ?? entity.name\n            : entity.name,\n        modifiedOn: formatDate(dayjs(entity.modifiedOn), 'MM/DD/YY'),\n      })\n    })\n    return newRows\n  }\n\n  const handlePageChange = (newPageNum: number) => {\n    const lastIndexNeeded = Math.min(\n      headerResults?.totalChildCount ?? 0,\n      (newPageNum + 1) * PER_PAGE,\n    )\n    if (lastIndexNeeded > fetchedHeaders.length) {\n      setFetchNextPage(true)\n    }\n    setPage(newPageNum)\n  }\n\n  const itemSelectedHandler = () => {\n    onItemSelected(selectedItem!)\n  }\n\n  function createEntity(file: FileUploadAttempt) {\n    // Create Entity\n    if (!file) return\n    const { fileHandleId, fileName } = file\n    const newFileEntity: FileEntity = {\n      parentId: challengeProjectId,\n      name: fileName,\n      concreteType: FILE_ENTITY_CONCRETE_TYPE_VALUE,\n      dataFileHandleId: fileHandleId,\n    }\n    SynapseClient.createEntity(newFileEntity, accessToken)\n      .then(() => {\n        reset()\n      })\n      .catch((err: SynapseClientError) => {\n        setErrorMessage(err.reason)\n      })\n  }\n\n  async function updateEntity() {\n    if (!uploadAttempt) return\n    const { fileHandleId, entityId } = uploadAttempt\n    if (!entityId)\n      return setErrorMessage('Error: missing entityId. Please try again.')\n    // Get the entity\n    let entity: FileEntity\n    try {\n      entity = await SynapseClient.getEntity(accessToken, entityId)\n    } catch (err) {\n      return setErrorMessage(`The entity ${entityId} could not be retrieved.`)\n    }\n\n    const updateRequest: FileEntity = {\n      id: entity.id,\n      name: entity.name,\n      dataFileHandleId: fileHandleId,\n      concreteType: FILE_ENTITY_CONCRETE_TYPE_VALUE,\n      parentId: entity.parentId,\n      etag: entity.etag,\n      modifiedOn: entity.modifiedOn,\n    }\n\n    try {\n      const updatedEntity = await SynapseClient.updateEntity(\n        updateRequest,\n        accessToken,\n        true,\n      )\n      await invalidateAllQueriesForEntity(\n        queryClient,\n        keyFactory,\n        updatedEntity.id!,\n      )\n      queryClient.setQueryData(\n        keyFactory.getEntityQueryKey(updatedEntity.id!),\n        updatedEntity,\n      )\n      reset()\n    } catch (err) {\n      setErrorMessage(err.reason)\n    }\n  }\n\n  const handleUpload = async (response: UploadCallbackResp) => {\n    if (response.success && response.resp) {\n      const { fileName } = response.resp\n\n      // Lookup entity\n      const entityLookupRequest: EntityLookupRequest = {\n        entityName: fileName,\n        parentId: challengeProjectId,\n      }\n      try {\n        const entityId = await SynapseClient.lookupChildEntity(\n          entityLookupRequest,\n          accessToken,\n        )\n        // Entity exists, prompt user to update it\n        if (entityId) {\n          setUploadAttempt({ ...response.resp, entityId: entityId.id })\n          setConfirmOpen(true)\n        }\n      } catch (err) {\n        // An existing entity was not found for this file, create it\n        setUploadAttempt(undefined)\n        createEntity(response.resp)\n      }\n    } else if (!response.success && response.error) {\n      setErrorMessage(response.error.reason as string)\n    } else {\n      setErrorMessage('An unknown error occurred. Please try again.')\n    }\n  }\n\n  return (\n    <Box>\n      <Box\n        sx={{\n          display: 'flex',\n          backgroundColor: '#FBFBFC',\n          padding: '10px',\n          justifyContent: 'space-between',\n        }}\n      >\n        <Typography\n          variant=\"h6\"\n          sx={{ fontSize: '18px', lineHeight: '20px', fontWeight: 700 }}\n        >\n          {entityType === EntityType.file\n            ? 'Submit File'\n            : 'Submit Docker Image'}\n        </Typography>\n        <Box sx={{ display: 'flex' }}>\n          <Typography\n            variant=\"body1\"\n            sx={{ fontSize: '14px', color: '#71767F' }}\n          >\n            Your Project SynID:{'  '}\n            <Link to={{ pathname: PROJECT_URL }} target=\"_blank\">\n              {challengeProjectId}\n            </Link>\n          </Typography>\n          <CopyToClipboardIcon value={PROJECT_URL} sx={{ marginTop: '-4px' }} />\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          my: 3,\n          display: 'flex',\n        }}\n      >\n        <NotesTwoTone\n          sx={{\n            width: '16px',\n            height: '16px',\n            verticalAlign: 'text-bottom',\n          }}\n        />\n        <Box\n          sx={{\n            ml: 1,\n          }}\n        >\n          {entityType === EntityType.file && (\n            <>\n              Choose a prediction file from your submission directory below and\n              click \"Submit Selection\" to pick an evaluation queue. If you need\n              to add a new file, click \"Upload File\" first.\n            </>\n          )}\n          {entityType === EntityType.dockerrepo && (\n            <>\n              Choose a Docker image from your submission directory below and\n              click \"Submit Selection\" to pick an image version and evaluation\n              queue. If you need to upload a new image to your project (\n              <code>{challengeProjectId}</code>), see our{' '}\n              <Link\n                to=\"https://github.com/Sage-Bionetworks-Challenges/sample-model-templates#build-your-model\"\n                target=\"_blank\"\n              >\n                Docker model submission guide\n              </Link>{' '}\n              for command-line instructions on how to build and upload.\n            </>\n          )}\n        </Box>\n      </Box>\n      <Box>\n        <DataGrid\n          loading={areEntitiesLoading}\n          columns={columns}\n          rows={getRows(entities)}\n          rowCount={headerResults?.totalChildCount ?? 0}\n          pagination\n          paginationMode=\"server\"\n          paginationModel={{ page, pageSize: PER_PAGE }}\n          pageSizeOptions={[PER_PAGE]}\n          onPaginationModelChange={({ page }) => {\n            handlePageChange(page)\n          }}\n          density=\"compact\"\n          autoHeight\n          sx={{\n            fontSize: '14px',\n            border: 'none',\n            height: '100%',\n            '& .MuiDataGrid-columnHeader': {\n              backgroundColor: '#F1F3F5',\n            },\n            '& .Mui-odd': {\n              backgroundColor: '#FBFBFC',\n            },\n            '.MuiDataGrid-columnHeaderTitleContainer': {\n              justifyContent: 'space-between',\n            },\n            '.radio': {\n              display: 'flex',\n              alignItems: 'center',\n              height: '100%',\n            },\n          }}\n          getRowClassName={params =>\n            params.indexRelativeToCurrentPage % 2 === 0 ? 'Mui-even' : 'Mui-odd'\n          }\n        />\n      </Box>\n      {errorMessage && <ErrorBanner error={errorMessage}></ErrorBanner>}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n        }}\n      >\n        {entityType === EntityType.file && (\n          <FileUpload\n            label=\"Upload File\"\n            buttonProps={{\n              variant: 'outlined',\n              endIcon: <IconSvg icon=\"upload\" />,\n              sx: { lineHeight: 1 },\n            }}\n            onComplete={resp => {\n              handleUpload(resp)\n            }}\n          />\n        )}\n        <Button\n          color=\"primary\"\n          variant=\"contained\"\n          onClick={itemSelectedHandler}\n          disabled={!canSubmit}\n        >\n          Submit Selection\n        </Button>\n      </Box>\n      <ConfirmationDialog\n        open={confirmOpen}\n        title=\"File exists\"\n        content={\n          <Typography variant=\"body1\" sx={{ fontSize: '16px' }}>\n            A file named &quot;{uploadAttempt?.fileName}&quot; (\n            {uploadAttempt?.entityId}) already exists in this location. Do you\n            want to update the existing file and create a new version?\n          </Typography>\n        }\n        onCancel={() => setConfirmOpen(false)}\n        onConfirm={() => {\n          updateEntity()\n          setConfirmOpen(false)\n        }}\n      />\n    </Box>\n  )\n}\n\nexport default SubmissionDirectoryList\n"],"mappings":"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"}
+{"version":3,"file":"SubmissionDirectoryList.js","names":[],"sources":["../../../src/components/ChallengeSubmission/SubmissionDirectoryList.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport {\n  invalidateAllQueriesForEntity,\n  useGetEntities,\n  useGetEntityChildren,\n} from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport {\n  BackendDestinationEnum,\n  getEndpoint,\n} from '@/utils/functions/getEndpoint'\nimport { NotesTwoTone } from '@mui/icons-material'\nimport { Box, Button, Radio, Typography } from '@mui/material'\nimport { DataGrid, GridCellParams, GridColDef } from '@mui/x-data-grid'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport {\n  Direction,\n  Entity,\n  EntityChildrenRequest,\n  EntityHeader,\n  EntityLookupRequest,\n  FILE_ENTITY_CONCRETE_TYPE_VALUE,\n  FileEntity,\n  FileUploadComplete,\n  SortBy,\n  UploadCallbackResp,\n} from '@sage-bionetworks/synapse-types'\nimport { useQueryClient } from '@tanstack/react-query'\nimport dayjs from 'dayjs'\nimport { useEffect, useMemo, useState } from 'react'\nimport { Link } from 'react-router'\nimport ConfirmationDialog from '../ConfirmationDialog'\nimport CopyToClipboardIcon from '../CopyToClipboardIcon'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport FileUpload from '../FileUpload'\nimport IconSvg from '../IconSvg'\nimport { EntityItem } from './ChallengeSubmission'\n\ntype SubmissionDirectoryRow = {\n  id: string\n  name: string\n  modifiedOn: string\n}\n\ntype SubmissionDirectoryListProps = {\n  pageSize: number\n  challengeProjectId: string\n  entityType: typeof EntityType.dockerrepo | typeof EntityType.file\n  onItemSelected: (selected: EntityItem) => void\n}\n\ntype FileUploadAttempt = FileUploadComplete & {\n  entityId?: string\n}\n\nfunction SubmissionDirectoryList({\n  pageSize,\n  challengeProjectId,\n  entityType,\n  onItemSelected,\n}: SubmissionDirectoryListProps) {\n  const queryClient = useQueryClient()\n  const { accessToken, keyFactory } = useSynapseContext()\n  const [page, setPage] = useState<number>(0)\n  const [selectedItem, setSelectedItem] = useState<EntityItem | undefined>()\n  const [errorMessage, setErrorMessage] = useState<string>()\n  const [canSubmit, setCanSubmit] = useState<boolean>()\n  const [fetchedHeaders, setFetchedHeaders] = useState<EntityHeader[]>([])\n  const [nextPageToken, setNextPageToken] = useState<string | undefined>()\n  const [fetchNextPage, setFetchNextPage] = useState<boolean>(false)\n  const [confirmOpen, setConfirmOpen] = useState<boolean>(false)\n  const [uploadAttempt, setUploadAttempt] = useState<FileUploadAttempt>()\n\n  const PER_PAGE = pageSize\n  const HEADERS_PER_PAGE = 50\n  const PROJECT_URL = `${getEndpoint(\n    BackendDestinationEnum.PORTAL_ENDPOINT,\n  )}Synapse:${challengeProjectId}`\n\n  const request: EntityChildrenRequest = {\n    parentId: challengeProjectId,\n    nextPageToken: fetchNextPage ? nextPageToken : null,\n    includeTypes: [entityType],\n    includeTotalChildCount: true,\n    sortBy: SortBy.MODIFIED_ON,\n    sortDirection: Direction.DESC,\n  }\n\n  const { data: headerResults, refetch } = useGetEntityChildren(request, {\n    enabled: !!challengeProjectId,\n    throwOnError: true,\n  })\n\n  useEffect(() => {\n    if (headerResults) {\n      const newHeaders = [...fetchedHeaders]\n      const headerPage = Math.floor(((page + 1) * PER_PAGE) / HEADERS_PER_PAGE)\n      const start = headerPage * HEADERS_PER_PAGE\n      newHeaders.splice(start, start + HEADERS_PER_PAGE, ...headerResults.page)\n      setFetchedHeaders(newHeaders)\n      setFetchNextPage(false)\n      setNextPageToken(headerResults.nextPageToken)\n    }\n    // TODO: Temporary useEffect hook to remove onSuccess QueryOption for @tanstack/react-query v5\n    // Refactor this component to remove this effect.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [headerResults])\n\n  function getPageHeaders() {\n    const pageStart = page * PER_PAGE\n    const pageHeaders = fetchedHeaders.slice(pageStart, pageStart + PER_PAGE)\n    return pageHeaders\n  }\n\n  function reset() {\n    setErrorMessage(undefined)\n    setCanSubmit(undefined)\n    setFetchedHeaders([])\n    setNextPageToken(undefined)\n    setFetchNextPage(false)\n    refetch()\n  }\n\n  useEffect(() => {\n    reset()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [entityType, pageSize])\n\n  const queries = useGetEntities(getPageHeaders())\n  const entities = useMemo(\n    () =>\n      queries\n        .filter(q => q.status === 'success')\n        .map(q => q.data) as EntityItem[],\n    [queries],\n  )\n  const areEntitiesLoading = queries.some(q => q.isLoading)\n\n  const entityChangeHandler = async (value: string) => {\n    setCanSubmit(false)\n    const entity = entities.find(entity => entity?.id === value)\n    if (entity) {\n      setSelectedItem(entity)\n      if (entityType === EntityType.dockerrepo) {\n        let commits\n        try {\n          commits = await SynapseClient.getDockerTag(\n            entity.id!,\n            accessToken,\n            0,\n            1,\n          )\n        } catch (e) {\n          return setErrorMessage(e.message)\n        }\n        if (commits.totalNumberOfResults === 0) {\n          return setErrorMessage(\n            'No commits have been made to this repository. Please select a repository with at least one commit.',\n          )\n        }\n      }\n      setCanSubmit(true)\n      setErrorMessage(undefined)\n    }\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'radiobutton',\n      headerName: '',\n      width: 25,\n      sortable: false,\n      filterable: false,\n      hideable: false,\n      disableColumnMenu: true,\n      renderCell: params => {\n        return (\n          <Radio\n            value={params.id}\n            checked={params.id === selectedItem?.id}\n            onChange={event => {\n              entityChangeHandler(event.target.value)\n            }}\n          />\n        )\n      },\n    },\n    {\n      field: 'name',\n      headerName:\n        entityType === EntityType.dockerrepo\n          ? 'Docker Repository'\n          : 'File Name',\n      flex: 1,\n      filterable: false,\n      hideable: false,\n      disableColumnMenu: true,\n      renderCell: (params: GridCellParams<Entity, SubmissionDirectoryRow>) => (\n        <Link\n          to={{\n            pathname: `${getEndpoint(\n              BackendDestinationEnum.PORTAL_ENDPOINT,\n            )}Synapse:${params.row.id}`,\n          }}\n          target=\"_blank\"\n        >\n          {params.row.name}\n        </Link>\n      ),\n    },\n    {\n      field: 'modifiedOn',\n      headerName: 'Updated On',\n      width: 100,\n      filterable: false,\n      hideable: false,\n      disableColumnMenu: true,\n    },\n    {\n      field: 'id',\n      headerName: 'ID',\n      width: 200,\n      filterable: false,\n      hideable: false,\n      disableColumnMenu: true,\n    },\n  ]\n\n  const getRows = (entities: EntityItem[]) => {\n    const newRows: SubmissionDirectoryRow[] = []\n    entities.forEach(entity => {\n      newRows.push({\n        id: entity.id!,\n        name:\n          entityType === EntityType.dockerrepo\n            ? (entity.repositoryName ?? entity.name)\n            : entity.name,\n        modifiedOn: formatDate(dayjs(entity.modifiedOn), 'MM/DD/YY'),\n      })\n    })\n    return newRows\n  }\n\n  const handlePageChange = (newPageNum: number) => {\n    const lastIndexNeeded = Math.min(\n      headerResults?.totalChildCount ?? 0,\n      (newPageNum + 1) * PER_PAGE,\n    )\n    if (lastIndexNeeded > fetchedHeaders.length) {\n      setFetchNextPage(true)\n    }\n    setPage(newPageNum)\n  }\n\n  const itemSelectedHandler = () => {\n    onItemSelected(selectedItem!)\n  }\n\n  function createEntity(file: FileUploadAttempt) {\n    // Create Entity\n    if (!file) return\n    const { fileHandleId, fileName } = file\n    const newFileEntity: FileEntity = {\n      parentId: challengeProjectId,\n      name: fileName,\n      concreteType: FILE_ENTITY_CONCRETE_TYPE_VALUE,\n      dataFileHandleId: fileHandleId,\n    }\n    SynapseClient.createEntity(newFileEntity, accessToken)\n      .then(() => {\n        reset()\n      })\n      .catch((err: SynapseClientError) => {\n        setErrorMessage(err.reason)\n      })\n  }\n\n  async function updateEntity() {\n    if (!uploadAttempt) return\n    const { fileHandleId, entityId } = uploadAttempt\n    if (!entityId)\n      return setErrorMessage('Error: missing entityId. Please try again.')\n    // Get the entity\n    let entity: FileEntity\n    try {\n      entity = await SynapseClient.getEntity(accessToken, entityId)\n    } catch (err) {\n      return setErrorMessage(`The entity ${entityId} could not be retrieved.`)\n    }\n\n    const updateRequest: FileEntity = {\n      id: entity.id,\n      name: entity.name,\n      dataFileHandleId: fileHandleId,\n      concreteType: FILE_ENTITY_CONCRETE_TYPE_VALUE,\n      parentId: entity.parentId,\n      etag: entity.etag,\n      modifiedOn: entity.modifiedOn,\n    }\n\n    try {\n      const updatedEntity = await SynapseClient.updateEntity(\n        updateRequest,\n        accessToken,\n        true,\n      )\n      await invalidateAllQueriesForEntity(\n        queryClient,\n        keyFactory,\n        updatedEntity.id!,\n      )\n      queryClient.setQueryData(\n        keyFactory.getEntityQueryKey(updatedEntity.id!),\n        updatedEntity,\n      )\n      reset()\n    } catch (err) {\n      setErrorMessage(err.reason)\n    }\n  }\n\n  const handleUpload = async (response: UploadCallbackResp) => {\n    if (response.success && response.resp) {\n      const { fileName } = response.resp\n\n      // Lookup entity\n      const entityLookupRequest: EntityLookupRequest = {\n        entityName: fileName,\n        parentId: challengeProjectId,\n      }\n      try {\n        const entityId = await SynapseClient.lookupChildEntity(\n          entityLookupRequest,\n          accessToken,\n        )\n        // Entity exists, prompt user to update it\n        if (entityId) {\n          setUploadAttempt({ ...response.resp, entityId: entityId.id })\n          setConfirmOpen(true)\n        }\n      } catch (err) {\n        // An existing entity was not found for this file, create it\n        setUploadAttempt(undefined)\n        createEntity(response.resp)\n      }\n    } else if (!response.success && response.error) {\n      setErrorMessage(response.error.reason as string)\n    } else {\n      setErrorMessage('An unknown error occurred. Please try again.')\n    }\n  }\n\n  return (\n    <Box>\n      <Box\n        sx={{\n          display: 'flex',\n          backgroundColor: '#FBFBFC',\n          padding: '10px',\n          justifyContent: 'space-between',\n        }}\n      >\n        <Typography\n          variant=\"h6\"\n          sx={{ fontSize: '18px', lineHeight: '20px', fontWeight: 700 }}\n        >\n          {entityType === EntityType.file\n            ? 'Submit File'\n            : 'Submit Docker Image'}\n        </Typography>\n        <Box sx={{ display: 'flex' }}>\n          <Typography\n            variant=\"body1\"\n            sx={{ fontSize: '14px', color: '#71767F' }}\n          >\n            Your Project SynID:{'  '}\n            <Link to={{ pathname: PROJECT_URL }} target=\"_blank\">\n              {challengeProjectId}\n            </Link>\n          </Typography>\n          <CopyToClipboardIcon value={PROJECT_URL} sx={{ marginTop: '-4px' }} />\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          my: 3,\n          display: 'flex',\n        }}\n      >\n        <NotesTwoTone\n          sx={{\n            width: '16px',\n            height: '16px',\n            verticalAlign: 'text-bottom',\n          }}\n        />\n        <Box\n          sx={{\n            ml: 1,\n          }}\n        >\n          {entityType === EntityType.file && (\n            <>\n              Choose a prediction file from your submission directory below and\n              click \"Submit Selection\" to pick an evaluation queue. If you need\n              to add a new file, click \"Upload File\" first.\n            </>\n          )}\n          {entityType === EntityType.dockerrepo && (\n            <>\n              Choose a Docker image from your submission directory below and\n              click \"Submit Selection\" to pick an image version and evaluation\n              queue. If you need to upload a new image to your project (\n              <code>{challengeProjectId}</code>), see our{' '}\n              <Link\n                to=\"https://github.com/Sage-Bionetworks-Challenges/sample-model-templates#build-your-model\"\n                target=\"_blank\"\n              >\n                Docker model submission guide\n              </Link>{' '}\n              for command-line instructions on how to build and upload.\n            </>\n          )}\n        </Box>\n      </Box>\n      <Box>\n        <DataGrid\n          loading={areEntitiesLoading}\n          columns={columns}\n          rows={getRows(entities)}\n          rowCount={headerResults?.totalChildCount ?? 0}\n          pagination\n          paginationMode=\"server\"\n          paginationModel={{ page, pageSize: PER_PAGE }}\n          pageSizeOptions={[PER_PAGE]}\n          onPaginationModelChange={({ page }) => {\n            handlePageChange(page)\n          }}\n          density=\"compact\"\n          autoHeight\n          sx={{\n            fontSize: '14px',\n            border: 'none',\n            height: '100%',\n            '& .MuiDataGrid-columnHeader': {\n              backgroundColor: '#F1F3F5',\n            },\n            '& .Mui-odd': {\n              backgroundColor: '#FBFBFC',\n            },\n            '.MuiDataGrid-columnHeaderTitleContainer': {\n              justifyContent: 'space-between',\n            },\n            '.radio': {\n              display: 'flex',\n              alignItems: 'center',\n              height: '100%',\n            },\n          }}\n          getRowClassName={params =>\n            params.indexRelativeToCurrentPage % 2 === 0 ? 'Mui-even' : 'Mui-odd'\n          }\n        />\n      </Box>\n      {errorMessage && <ErrorBanner error={errorMessage}></ErrorBanner>}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n        }}\n      >\n        {entityType === EntityType.file && (\n          <FileUpload\n            label=\"Upload File\"\n            buttonProps={{\n              variant: 'outlined',\n              endIcon: <IconSvg icon=\"upload\" />,\n              sx: { lineHeight: 1 },\n            }}\n            onComplete={resp => {\n              handleUpload(resp)\n            }}\n          />\n        )}\n        <Button\n          color=\"primary\"\n          variant=\"contained\"\n          onClick={itemSelectedHandler}\n          disabled={!canSubmit}\n        >\n          Submit Selection\n        </Button>\n      </Box>\n      <ConfirmationDialog\n        open={confirmOpen}\n        title=\"File exists\"\n        content={\n          <Typography variant=\"body1\" sx={{ fontSize: '16px' }}>\n            A file named &quot;{uploadAttempt?.fileName}&quot; (\n            {uploadAttempt?.entityId}) already exists in this location. Do you\n            want to update the existing file and create a new version?\n          </Typography>\n        }\n        onCancel={() => setConfirmOpen(false)}\n        onConfirm={() => {\n          updateEntity()\n          setConfirmOpen(false)\n        }}\n      />\n    </Box>\n  )\n}\n\nexport default SubmissionDirectoryList\n"],"mappings":"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"}

package/dist/components/ChallengeTeamWizard/CreateChallengeTeam.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateChallengeTeam.d.ts","sourceRoot":"","sources":["../../../src/components/ChallengeTeamWizard/CreateChallengeTeam.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAChD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC,CAAA;AAGD,eAAO,MAAM,uBAAuB,iIAC4F,CAAA;AAEhI,MAAM,MAAM,yBAAyB,GAAG;IAEtC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,gIAmL9B,CAAA"}
+{"version":3,"file":"CreateChallengeTeam.d.ts","sourceRoot":"","sources":["../../../src/components/ChallengeTeamWizard/CreateChallengeTeam.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAChD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC,CAAA;AAGD,eAAO,MAAM,uBAAuB,iIAC4F,CAAA;AAEhI,MAAM,MAAM,yBAAyB,GAAG;IAEtC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,gIA+K9B,CAAA"}