npm - synapse-react-client - Versions diffs - 4.0.3 → 4.0.5 - Mend

synapse-react-client 4.0.3 → 4.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (338) hide show

package/dist/components/AclEditor/AclEditor.test-utils.js CHANGED Viewed

@@ -1,40 +1,40 @@
-import { within as i, waitFor as a, screen as r } from "@testing-library/react";
+import { screen as r, waitFor as a, within as i } from "@testing-library/react";
 import { REMOVE_BUTTON_LABEL as m } from "./ResourceAccessItem.js";
 import { PUBLIC_GROUP_DISPLAY_TEXT as B, AUTHENTICATED_GROUP_DISPLAY_TEXT as T } from "../TeamBadge.js";
-import { ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL as x, ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT as y } from "./AclEditor.js";
-function u(o, n) {
-  return o.find((t) => i(t).queryByText(n, { exact: !1 }));
+import { ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT as x, ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL as y } from "./AclEditor.js";
+function u(e, n) {
+  return e.find((t) => i(t).queryByText(n, { exact: !1 }));
 }
-async function R(o, n, t) {
-  let e;
+async function R(e, n, t) {
+  let o;
   try {
     await a(() => {
-      e = u(o, n), expect(e).toBeInTheDocument();
+      o = u(e, n), expect(o).toBeInTheDocument();
     });
   } catch (l) {
     throw r.debug(), new Error(`Principal ${n} not found in ACL`, { cause: l });
   }
-  const c = i(e).queryByRole("combobox");
-  return c ? expect(c).toHaveTextContent(t) : i(e).getByText(t), e;
+  const c = i(o).queryByRole("combobox");
+  return c ? expect(c).toHaveTextContent(t) : i(o).getByText(t), o;
 }
-function b(o, n, t) {
-  expect(i(o).queryByRole("link") ?? o).toHaveTextContent(
+function b(e, n, t) {
+  expect(i(e).queryByRole("link") ?? e).toHaveTextContent(
     n
   );
-  const e = i(o).queryByRole("combobox");
-  e ? expect(e).toHaveTextContent(t) : i(o).getByText(t);
+  const o = i(e).queryByRole("combobox");
+  o ? expect(o).toHaveTextContent(t) : i(e).getByText(t);
 }
-async function d(o, n, t = !0) {
-  const e = i(o).getByRole("button", {
+async function d(e, n, t = !0) {
+  const o = i(e).getByRole("button", {
     name: m
   });
-  await n.click(e), t && await a(() => {
-    expect(e).not.toBeInTheDocument(), expect(o).not.toBeInTheDocument();
+  await n.click(o), t && await a(() => {
+    expect(o).not.toBeInTheDocument(), expect(e).not.toBeInTheDocument();
   });
 }
-async function h(o, n, t) {
-  const e = i(o).getByRole("combobox");
-  await n.click(e);
+async function h(e, n, t) {
+  const o = i(e).getByRole("combobox");
+  await n.click(o);
   const c = r.getByRole("option", {
     name: t
   });
@@ -42,30 +42,30 @@ async function h(o, n, t) {
     expect(c).not.toBeInTheDocument();
   });
 }
-function p() {
+function w() {
   return r.queryByRole("combobox", {
-    name: x
+    name: y
   });
 }
-async function A(o, n) {
-  const t = p();
-  expect(t).toBeInTheDocument(), await o.type(t, n);
-  const e = await r.findByText(new RegExp(`\\(@${n}\\)`));
-  await o.click(e), await a(() => expect(e).not.toBeInTheDocument());
+async function A(e, n) {
+  const t = w();
+  expect(t).toBeInTheDocument(), await e.clear(t), await e.type(t, n);
+  const o = await r.findByText(new RegExp(`\\(@${n}\\)`));
+  await e.click(o), await a(() => expect(o).not.toBeInTheDocument());
   const c = r.getAllByRole("row");
   return c[c.length - 1];
 }
-async function _(o) {
+async function _(e) {
   const n = r.getByRole("button", {
-    name: y
+    name: x
   });
-  await o.click(n);
-  let t = [], e, c;
+  await e.click(n);
+  let t = [], o, c;
   return await a(() => {
-    t = r.getAllByRole("row"), e = u(t, B), c = u(
+    t = r.getAllByRole("row"), o = u(t, B), c = u(
       t,
       T
-    ), expect(e).toBeInTheDocument(), expect(c).toBeInTheDocument();
+    ), expect(o).toBeInTheDocument(), expect(c).toBeInTheDocument();
   }), {
     publicRow: t[t.length - 2],
     authenticatedUsersRow: t[t.length - 1]
@@ -76,7 +76,7 @@ export {
   A as addUserToAcl,
   b as confirmItem,
   R as confirmItemViaQuery,
-  p as queryForAddUserCombobox,
+  w as queryForAddUserCombobox,
   u as queryForRowWithPrincipalName,
   d as removeItem,
   h as updatePermissionLevel

package/dist/components/AclEditor/AclEditor.test-utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AclEditor.test-utils.js","sources":["../../../src/components/AclEditor/AclEditor.test-utils.ts"],"sourcesContent":["import userEvent from '@testing-library/user-event'\nimport { screen, waitFor, within } from '@testing-library/react'\nimport { REMOVE_BUTTON_LABEL } from './ResourceAccessItem'\nimport {\n AUTHENTICATED_GROUP_DISPLAY_TEXT,\n PUBLIC_GROUP_DISPLAY_TEXT,\n} from '../TeamBadge'\nimport {\n ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL,\n ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT,\n} from './AclEditor'\n\n/*\n Find a row in the ACL editor that contains the specified principal name.\n * @param rows\n * @param principalName\n /\nexport function queryForRowWithPrincipalName(\n rows: HTMLElement[],\n principalName: string,\n) {\n return rows.find(row => {\n return within(row).queryByText(principalName, { exact: false })\n })\n}\n\n/\n Verify that a row in the ACL editor contains the expected principal name and access type.\n * @param rows\n * @param principalName\n * @param accessTypeLabel\n /\nexport async function confirmItemViaQuery(\n rows: HTMLElement[],\n principalName: string,\n accessTypeLabel: string,\n) {\n let row: HTMLElement \| undefined\n try {\n await waitFor(() => {\n row = queryForRowWithPrincipalName(rows, principalName)!\n expect(row).toBeInTheDocument()\n })\n } catch (e) {\n screen.debug()\n throw new Error(`Principal ${principalName} not found in ACL`, { cause: e })\n }\n\n const editorCombobox = within(row!).queryByRole('combobox')\n if (editorCombobox) {\n expect(editorCombobox).toHaveTextContent(accessTypeLabel)\n } else {\n within(row!).getByText(accessTypeLabel)\n }\n return row!\n}\n\n/\n Verify that a row in the ACL editor contains the expected principal name and access type.\n * @param row\n * @param principalName\n * @param accessTypeLabel\n /\nexport function confirmItem(\n row: HTMLElement,\n principalName: string,\n accessTypeLabel: string,\n) {\n expect(within(row).queryByRole('link') ?? row).toHaveTextContent(\n principalName,\n )\n const editorCombobox = within(row).queryByRole('combobox')\n if (editorCombobox) {\n expect(editorCombobox).toHaveTextContent(accessTypeLabel)\n } else {\n within(row).getByText(accessTypeLabel)\n }\n}\n\n/\n Remove a particular row from the HTML editor.\n * @param row\n * @param user\n * @param verifyRemoval\n /\nexport async function removeItem(\n row: HTMLElement,\n user: ReturnType<(typeof userEvent)['setup']>,\n verifyRemoval = true,\n) {\n const removeButton = within(row).getByRole('button', {\n name: REMOVE_BUTTON_LABEL,\n })\n await user.click(removeButton)\n if (verifyRemoval) {\n await waitFor(() => {\n expect(removeButton).not.toBeInTheDocument()\n expect(row).not.toBeInTheDocument()\n })\n }\n}\n\n/\n Updates the permission level of a particular row in the ACL editor.\n * @param row\n * @param user\n * @param updatedPermissionLevelLabel\n /\nexport async function updatePermissionLevel(\n row: HTMLElement,\n user: ReturnType<(typeof userEvent)['setup']>,\n updatedPermissionLevelLabel: string,\n) {\n const menu = within(row).getByRole('combobox')\n await user.click(menu)\n\n const option = screen.getByRole('option', {\n name: updatedPermissionLevelLabel,\n })\n await user.click(option)\n\n await waitFor(() => {\n expect(option).not.toBeInTheDocument()\n })\n}\n\nexport function queryForAddUserCombobox() {\n return screen.queryByRole('combobox', {\n name: ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL,\n })\n}\n\n/\n Adds a user to the ACL editor.\n * @param user\n * @param userName\n /\nexport async function addUserToAcl(\n user: ReturnType<(typeof userEvent)['setup']>,\n userName: string,\n) {\n const userInput = queryForAddUserCombobox()!\n expect(userInput).toBeInTheDocument()\n await user.type(userInput, userName)\n\n const option = await screen.findByText(new RegExp(`\\\$@${userName}\\\$`))\n await user.click(option)\n\n await waitFor(() => expect(option).not.toBeInTheDocument())\n const rows = screen.getAllByRole('row')\n return rows[rows.length - 1]\n}\n\n/\n Adds public / authenticated groups to the ACL editor.\n * @param user\n */\nexport async function addPublicToAcl(\n user: ReturnType<(typeof userEvent)['setup']>,\n) {\n const makePublicButton = screen.getByRole('button', {\n name: ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT,\n })\n await user.click(makePublicButton)\n\n let rows: HTMLElement[] = []\n let publicRow: HTMLElement \| undefined = undefined\n let authenticatedUsersRow: HTMLElement \| undefined = undefined\n await waitFor(() => {\n rows = screen.getAllByRole('row')\n publicRow = queryForRowWithPrincipalName(rows, PUBLIC_GROUP_DISPLAY_TEXT)\n authenticatedUsersRow = queryForRowWithPrincipalName(\n rows,\n AUTHENTICATED_GROUP_DISPLAY_TEXT,\n )\n expect(publicRow).toBeInTheDocument()\n expect(authenticatedUsersRow).toBeInTheDocument()\n })\n\n return {\n publicRow: rows[rows.length - 2],\n authenticatedUsersRow: rows[rows.length - 1],\n }\n}\n"],"names":["queryForRowWithPrincipalName","rows","principalName","row","within","confirmItemViaQuery","accessTypeLabel","waitFor","e","screen","editorCombobox","confirmItem","removeItem","user","verifyRemoval","removeButton","REMOVE_BUTTON_LABEL","updatePermissionLevel","updatedPermissionLevelLabel","menu","option","queryForAddUserCombobox","ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL","addUserToAcl","userName","userInput","addPublicToAcl","makePublicButton","ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT","publicRow","authenticatedUsersRow","PUBLIC_GROUP_DISPLAY_TEXT","AUTHENTICATED_GROUP_DISPLAY_TEXT"],"mappings":"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"}
1	+ {"version":3,"file":"AclEditor.test-utils.js","sources":["../../../src/components/AclEditor/AclEditor.test-utils.ts"],"sourcesContent":["import userEvent from '@testing-library/user-event'\nimport { screen, waitFor, within } from '@testing-library/react'\nimport { REMOVE_BUTTON_LABEL } from './ResourceAccessItem'\nimport {\n AUTHENTICATED_GROUP_DISPLAY_TEXT,\n PUBLIC_GROUP_DISPLAY_TEXT,\n} from '../TeamBadge'\nimport {\n ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL,\n ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT,\n} from './AclEditor'\n\n/*\n Find a row in the ACL editor that contains the specified principal name.\n * @param rows\n * @param principalName\n /\nexport function queryForRowWithPrincipalName(\n rows: HTMLElement[],\n principalName: string,\n) {\n return rows.find(row => {\n return within(row).queryByText(principalName, { exact: false })\n })\n}\n\n/\n Verify that a row in the ACL editor contains the expected principal name and access type.\n * @param rows\n * @param principalName\n * @param accessTypeLabel\n /\nexport async function confirmItemViaQuery(\n rows: HTMLElement[],\n principalName: string,\n accessTypeLabel: string,\n) {\n let row: HTMLElement \| undefined\n try {\n await waitFor(() => {\n row = queryForRowWithPrincipalName(rows, principalName)!\n expect(row).toBeInTheDocument()\n })\n } catch (e) {\n screen.debug()\n throw new Error(`Principal ${principalName} not found in ACL`, { cause: e })\n }\n\n const editorCombobox = within(row!).queryByRole('combobox')\n if (editorCombobox) {\n expect(editorCombobox).toHaveTextContent(accessTypeLabel)\n } else {\n within(row!).getByText(accessTypeLabel)\n }\n return row!\n}\n\n/\n Verify that a row in the ACL editor contains the expected principal name and access type.\n * @param row\n * @param principalName\n * @param accessTypeLabel\n /\nexport function confirmItem(\n row: HTMLElement,\n principalName: string,\n accessTypeLabel: string,\n) {\n expect(within(row).queryByRole('link') ?? row).toHaveTextContent(\n principalName,\n )\n const editorCombobox = within(row).queryByRole('combobox')\n if (editorCombobox) {\n expect(editorCombobox).toHaveTextContent(accessTypeLabel)\n } else {\n within(row).getByText(accessTypeLabel)\n }\n}\n\n/\n Remove a particular row from the HTML editor.\n * @param row\n * @param user\n * @param verifyRemoval\n /\nexport async function removeItem(\n row: HTMLElement,\n user: ReturnType<(typeof userEvent)['setup']>,\n verifyRemoval = true,\n) {\n const removeButton = within(row).getByRole('button', {\n name: REMOVE_BUTTON_LABEL,\n })\n await user.click(removeButton)\n if (verifyRemoval) {\n await waitFor(() => {\n expect(removeButton).not.toBeInTheDocument()\n expect(row).not.toBeInTheDocument()\n })\n }\n}\n\n/\n Updates the permission level of a particular row in the ACL editor.\n * @param row\n * @param user\n * @param updatedPermissionLevelLabel\n /\nexport async function updatePermissionLevel(\n row: HTMLElement,\n user: ReturnType<(typeof userEvent)['setup']>,\n updatedPermissionLevelLabel: string,\n) {\n const menu = within(row).getByRole('combobox')\n await user.click(menu)\n\n const option = screen.getByRole('option', {\n name: updatedPermissionLevelLabel,\n })\n await user.click(option)\n\n await waitFor(() => {\n expect(option).not.toBeInTheDocument()\n })\n}\n\nexport function queryForAddUserCombobox() {\n return screen.queryByRole('combobox', {\n name: ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL,\n })\n}\n\n/\n Adds a user to the ACL editor.\n * @param user\n * @param userName\n /\nexport async function addUserToAcl(\n user: ReturnType<(typeof userEvent)['setup']>,\n userName: string,\n) {\n const userInput = queryForAddUserCombobox()!\n expect(userInput).toBeInTheDocument()\n await user.clear(userInput)\n await user.type(userInput, userName)\n\n const option = await screen.findByText(new RegExp(`\\\$@${userName}\\\$`))\n await user.click(option)\n\n await waitFor(() => expect(option).not.toBeInTheDocument())\n const rows = screen.getAllByRole('row')\n return rows[rows.length - 1]\n}\n\n/\n Adds public / authenticated groups to the ACL editor.\n * @param user\n */\nexport async function addPublicToAcl(\n user: ReturnType<(typeof userEvent)['setup']>,\n) {\n const makePublicButton = screen.getByRole('button', {\n name: ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT,\n })\n await user.click(makePublicButton)\n\n let rows: HTMLElement[] = []\n let publicRow: HTMLElement \| undefined = undefined\n let authenticatedUsersRow: HTMLElement \| undefined = undefined\n await waitFor(() => {\n rows = screen.getAllByRole('row')\n publicRow = queryForRowWithPrincipalName(rows, PUBLIC_GROUP_DISPLAY_TEXT)\n authenticatedUsersRow = queryForRowWithPrincipalName(\n rows,\n AUTHENTICATED_GROUP_DISPLAY_TEXT,\n )\n expect(publicRow).toBeInTheDocument()\n expect(authenticatedUsersRow).toBeInTheDocument()\n })\n\n return {\n publicRow: rows[rows.length - 2],\n authenticatedUsersRow: rows[rows.length - 1],\n }\n}\n"],"names":["queryForRowWithPrincipalName","rows","principalName","row","within","confirmItemViaQuery","accessTypeLabel","waitFor","e","screen","editorCombobox","confirmItem","removeItem","user","verifyRemoval","removeButton","REMOVE_BUTTON_LABEL","updatePermissionLevel","updatedPermissionLevelLabel","menu","option","queryForAddUserCombobox","ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL","addUserToAcl","userName","userInput","addPublicToAcl","makePublicButton","ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT","publicRow","authenticatedUsersRow","PUBLIC_GROUP_DISPLAY_TEXT","AUTHENTICATED_GROUP_DISPLAY_TEXT"],"mappings":"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"}

package/dist/components/Authentication/AuthenticationMethodSelection.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs as s, jsx as t, Fragment as d } from "react/jsx-runtime";
+import { jsxs as s, Fragment as d, jsx as t } from "react/jsx-runtime";
 import * as a from "../../synapse-client/SynapseClient.js";
 import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
 import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TwoFactorEnrollmentForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;~~AAS5D~~;;;;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,2CA6NpC;AAED,eAAO,MAAM,yBAAyB;;CAAmB,CAAA"}
1	+ {"version":3,"file":"TwoFactorEnrollmentForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"names":[],"mappings":"AAeA,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,2CA6NpC;AAED,eAAO,MAAM,yBAAyB;;CAAmB,CAAA"}

package/dist/components/Authentication/TwoFactorEnrollmentForm.js CHANGED Viewed

@@ -2,13 +2,14 @@ import { jsx as t, jsxs as o } from "react/jsx-runtime";
 import { StyledOuterContainer as I } from "../styled/LeftRightPanel.js";
 import { useFinishTwoFactorEnrollment as k } from "../../synapse-queries/auth/useTwoFactorEnrollment.js";
 import { styled as S, Box as s, Paper as E, IconButton as O, Typography as i, Link as a, Stack as y, Divider as x, Button as D } from "@mui/material";
-import { toCanvas as G } from "qrcode";
+import * as G from "qrcode";
 import { useState as p, useRef as R, useEffect as B } from "react";
 import W from "../FullWidthAlert/FullWidthAlert.js";
 import _ from "../IconSvg/IconSvg.js";
 import { SynapseSpinner as M } from "../LoadingScreen/LoadingScreen.js";
 import Q from "../TextField/TextField.js";
 import $ from "./TwoFactorSecretDialog.js";
+const { toCanvas: j } = G;
 function v(e) {
   return `otpauth://totp/Synapse:${e.username}?secret=${e.secret}&issuer=Sage%20Bionetworks&algorithm=${e.alg}&digits=${e.digits}&period=${e.period}`;
 }
@@ -36,7 +37,7 @@ const c = S(
       gap: "18px"
     }
   })
-), j = "https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account";
+), L = "https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account";
 function J(e) {
   const { onTwoFactorEnrollmentSuccess: b, onBackClicked: u, totpSecret: r } = e, [l, w] = p(""), [m, C] = p(!1), [A, f] = p(!1), d = R(null), {
     mutate: F,
@@ -47,7 +48,7 @@ function J(e) {
   });
   return B(() => {
     async function n() {
-      r && d.current && (await G(d.current, v(r), {
+      r && d.current && (await j(d.current, v(r), {
         version: 10,
         margin: 0,
         scale: 3.5
@@ -95,7 +96,7 @@ function J(e) {
             " or ORCiD account, you may need to use 2FA as part of",
             "that process as well.",
             " ",
-            /* @__PURE__ */ t(a, { href: j, children: "Learn more about 2FA" }),
+            /* @__PURE__ */ t(a, { href: L, children: "Learn more about 2FA" }),
             "."
           ] })
         ] }),
@@ -251,7 +252,7 @@ function J(e) {
 const Z = { toOtpAuthUrl: v };
 export {
   Z as EXPORTED_FOR_UNIT_TESTING,
-  j as TWO_FACTOR_DOCS_LINK,
+  L as TWO_FACTOR_DOCS_LINK,
   J as default
 };
 //# sourceMappingURL=TwoFactorEnrollmentForm.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TwoFactorEnrollmentForm.js","sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"sourcesContent":["import { StyledOuterContainer } from '@/components/styled/LeftRightPanel'\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 { toCanvas } from '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 "+" 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'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={error.reason}\n />\n )}\n </Paper>\n </StyledOuterContainer>\n )\n}\n\nexport const EXPORTED_FOR_UNIT_TESTING = { toOtpAuthUrl }\n"],"names":["toOtpAuthUrl","secret","Section","styled","props","jsx","Box","SectionInnerGrid","theme","TWO_FACTOR_DOCS_LINK","TwoFactorEnrollmentForm","onTwoFactorEnrollmentSuccess","onBackClicked","totpSecret","totp","setTotp","useState","hasQrCode","setHasQrCode","showSecretInModal","setShowSecretInModal","qrCodeCanvasElement","useRef","finishEnrollment","isFinishingEnrollment","error","useFinishTwoFactorEnrollment","useEffect","createQrCode","toCanvas","StyledOuterContainer","jsxs","Paper","IconButton","IconSvg","Typography","Link","Stack","Divider","TwoFactorSecretDialog","SynapseSpinner","e","TextField","Button","FullWidthAlert","EXPORTED_FOR_UNIT_TESTING"],"mappings":"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"}
1	+ {"version":3,"file":"TwoFactorEnrollmentForm.js","sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"sourcesContent":["import { StyledOuterContainer } from '@/components/styled/LeftRightPanel'\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 "+" 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'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={error.reason}\n />\n )}\n </Paper>\n </StyledOuterContainer>\n )\n}\n\nexport const EXPORTED_FOR_UNIT_TESTING = { toOtpAuthUrl }\n"],"names":["toCanvas","qrcode","toOtpAuthUrl","secret","Section","styled","props","jsx","Box","SectionInnerGrid","theme","TWO_FACTOR_DOCS_LINK","TwoFactorEnrollmentForm","onTwoFactorEnrollmentSuccess","onBackClicked","totpSecret","totp","setTotp","useState","hasQrCode","setHasQrCode","showSecretInModal","setShowSecretInModal","qrCodeCanvasElement","useRef","finishEnrollment","isFinishingEnrollment","error","useFinishTwoFactorEnrollment","useEffect","createQrCode","StyledOuterContainer","jsxs","Paper","IconButton","IconSvg","Typography","Link","Stack","Divider","TwoFactorSecretDialog","SynapseSpinner","e","TextField","Button","FullWidthAlert","EXPORTED_FOR_UNIT_TESTING"],"mappings":"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"}

package/dist/components/BasePortalCard/BasePortalCard.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_BasePortalCard__root_ug9g6_1~~.MuiCard-root{position:relative}.~~_BasePortalCard__contentBelow_ug9g6_5~~{margin-top:15px}.~~_BasePortalCard__content_ug9g6_5~~.MuiCardContent-root:last-child{padding:0}.~~_BasePortalCard__media_ug9g6_13~~{height:50%;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.05)}@media(min-width:768px){.~~_BasePortalCard__media_ug9g6_13~~{height:60%}}.~~_BasePortalCard__media_ug9g6_13~~ .MuiCardMedia-root{height:100%}.~~_small_ug9g6_27~~{width:100%;height:250px;min-height:150px}@media(min-width:768px){.~~_small_ug9g6_27~~{width:250px}}.~~_medium_ug9g6_38~~{width:100%;height:400px;min-height:200px}@media(min-width:768px){.~~_medium_ug9g6_38~~{width:400px}}.~~_large_ug9g6_49~~{width:100%;height:500px;min-height:300px}@media(min-width:768px){.~~_large_ug9g6_49~~{width:600px}}
1	+ ._BasePortalCard__root_1hm6w_1.MuiCard-root{position:relative;display:flex;flex-direction:column}._BasePortalCard__contentBelow_1hm6w_7{margin-top:15px}._BasePortalCard__content_1hm6w_7.MuiCardContent-root:last-child{padding:0;flex:1;display:flex;flex-direction:column}._BasePortalCard__media_1hm6w_18{height:50%;flex-shrink:0;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.05)}@media(min-width:768px){._BasePortalCard__media_1hm6w_18{height:60%}}._BasePortalCard__media_1hm6w_18 .MuiCardMedia-root{height:100%}._small_1hm6w_33{width:100%;height:250px;min-height:150px}@media(min-width:768px){._small_1hm6w_33{width:250px}}._medium_1hm6w_44{width:100%;height:400px;min-height:200px}@media(min-width:768px){._medium_1hm6w_44{width:400px}}._large_1hm6w_55{width:100%;height:500px;min-height:300px}@media(min-width:768px){._large_1hm6w_55{width:600px}}

package/dist/components/BasePortalCard/BasePortalCard.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ type BasePortalCardProps = {
     borderRadiusPx?: number;
     boxShadow?: string;
     cardSize?: 'small' | 'medium' | 'large';
-    backgroundImage?: string;
+    backgroundImage?: string | ReactNode;
     backgroundColor?: string;
     className?: string;
 };

package/dist/components/BasePortalCard/BasePortalCard.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BasePortalCard.d.ts","sourceRoot":"","sources":["../../../src/components/BasePortalCard/BasePortalCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGxC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACvC,eAAe,CAAC,EAAE,MAAM,CAAA;~~IACxB~~,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,mHASrB,mBAAmB,KAAG,KAAK,CAAC,~~SAyB9B~~,CAAA;AAED,eAAe,cAAc,CAAA"}
1	+ {"version":3,"file":"BasePortalCard.d.ts","sourceRoot":"","sources":["../../../src/components/BasePortalCard/BasePortalCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGxC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACvC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,mHASrB,mBAAmB,KAAG,KAAK,CAAC,SA2B9B,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/components/BasePortalCard/BasePortalCard.js CHANGED Viewed

@@ -1,33 +1,33 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { Stack as C, Card as _, CardMedia as p, CardContent as B } from "@mui/material";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { Stack as C, Card as _, CardMedia as p, CardContent as f } from "@mui/material";
 import t from "@mui/material/Box";
 import a from "./BasePortalCard.module.scss.js";
 const N = ({
   borderRadiusPx: m,
   boxShadow: d,
-  children: l,
-  contentBelowCard: e,
-  cardSize: i = "medium",
+  children: i,
+  contentBelowCard: s,
+  cardSize: l = "medium",
   className: c,
-  backgroundImage: o,
+  backgroundImage: e,
   backgroundColor: n
-}) => /* @__PURE__ */ s(C, { children: [
-  /* @__PURE__ */ s(
+}) => /* @__PURE__ */ o(C, { children: [
+  /* @__PURE__ */ o(
     _,
     {
-      className: `${c} ${a.BasePortalCard__root} ${a[i]}`,
+      className: `${c} ${a.BasePortalCard__root} ${a[l]}`,
       sx: {
         backgroundColor: n,
         borderRadius: m,
         boxShadow: d
       },
       children: [
-        /* @__PURE__ */ r(t, { className: a.BasePortalCard__media, children: o && /* @__PURE__ */ r(p, { image: o, component: "img" }) }),
-        /* @__PURE__ */ r(B, { className: a.BasePortalCard__content, children: l })
+        /* @__PURE__ */ r(t, { className: a.BasePortalCard__media, children: typeof e == "string" ? /* @__PURE__ */ r(p, { image: e, component: "img" }) : e }),
+        /* @__PURE__ */ r(f, { className: a.BasePortalCard__content, children: i })
       ]
     }
   ),
-  e && /* @__PURE__ */ r(t, { className: a.BasePortalCard__contentBelow, children: e })
+  s && /* @__PURE__ */ r(t, { className: a.BasePortalCard__contentBelow, children: s })
 ] });
 export {
   N as default

package/dist/components/BasePortalCard/BasePortalCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BasePortalCard.js","sources":["../../../src/components/BasePortalCard/BasePortalCard.tsx"],"sourcesContent":["import { Card, CardContent, CardMedia, Stack } from '@mui/material'\nimport Box from '@mui/material/Box'\nimport React, { ReactNode } from 'react'\nimport styles from './BasePortalCard.module.scss'\n\ntype BasePortalCardProps = {\n children?: ReactNode\n contentBelowCard?: ReactNode\n borderRadiusPx?: number\n boxShadow?: string\n cardSize?: 'small' \| 'medium' \| 'large'\n backgroundImage?: string\n backgroundColor?: string\n className?: string\n}\n\nconst BasePortalCard = ({\n borderRadiusPx,\n boxShadow,\n children,\n contentBelowCard,\n cardSize = 'medium',\n className,\n backgroundImage,\n backgroundColor,\n}: BasePortalCardProps): React.ReactNode => (\n <Stack>\n <Card\n className={`${className} ${styles.BasePortalCard__root} ${styles[cardSize]}`}\n sx={{\n backgroundColor: backgroundColor,\n borderRadius: borderRadiusPx,\n boxShadow: boxShadow,\n }}\n >\n <Box className={styles.BasePortalCard__media}>\n {backgroundImage && (\n <CardMedia image={backgroundImage} component=\"img\" />\n )}\n </Box>\n <CardContent className={styles.BasePortalCard__content}>\n {children}\n </CardContent>\n </Card>\n {contentBelowCard && (\n <Box className={styles.BasePortalCard__contentBelow}>\n {contentBelowCard}\n </Box>\n )}\n </Stack>\n)\n\nexport default BasePortalCard\n"],"names":["BasePortalCard","borderRadiusPx","boxShadow","children","contentBelowCard","cardSize","className","backgroundImage","backgroundColor","Stack","jsxs","Card","styles","jsx","Box","CardMedia","CardContent"],"mappings":";;;;AAgBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AACF,wBACGC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGL,CAAS,IAAIM,EAAO,oBAAoB,IAAIA,EAAOP,CAAQ,CAAC;AAAA,MAC1E,IAAI;AAAA,QACF,iBAAAG;AAAA,QACA,cAAcP;AAAA,QACd,WAAAC;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAW,EAACC,GAAA,EAAI,WAAWF,EAAO,uBACpB,~~UAAAL~~,~~KACC~~,gBAAAM,EAACE,GAAA,EAAU,OAAOR,GAAiB,WAAU,MAAA,CAAM,~~GAEvD~~;AAAA,QACA,gBAAAM,EAACG,GAAA,EAAY,WAAWJ,EAAO,yBAC5B,UAAAT,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAAA,EAEDC,KACC,gBAAAS,EAACC,GAAA,EAAI,WAAWF,EAAO,8BACpB,UAAAR,EAAA,CACH;AAAA,EAAA,CAEJ;"}
1	+ {"version":3,"file":"BasePortalCard.js","sources":["../../../src/components/BasePortalCard/BasePortalCard.tsx"],"sourcesContent":["import { Card, CardContent, CardMedia, Stack } from '@mui/material'\nimport Box from '@mui/material/Box'\nimport React, { ReactNode } from 'react'\nimport styles from './BasePortalCard.module.scss'\n\ntype BasePortalCardProps = {\n children?: ReactNode\n contentBelowCard?: ReactNode\n borderRadiusPx?: number\n boxShadow?: string\n cardSize?: 'small' \| 'medium' \| 'large'\n backgroundImage?: string \| ReactNode\n backgroundColor?: string\n className?: string\n}\n\nconst BasePortalCard = ({\n borderRadiusPx,\n boxShadow,\n children,\n contentBelowCard,\n cardSize = 'medium',\n className,\n backgroundImage,\n backgroundColor,\n}: BasePortalCardProps): React.ReactNode => (\n <Stack>\n <Card\n className={`${className} ${styles.BasePortalCard__root} ${styles[cardSize]}`}\n sx={{\n backgroundColor: backgroundColor,\n borderRadius: borderRadiusPx,\n boxShadow: boxShadow,\n }}\n >\n <Box className={styles.BasePortalCard__media}>\n {typeof backgroundImage === 'string' ? (\n <CardMedia image={backgroundImage} component=\"img\" />\n ) : (\n backgroundImage\n )}\n </Box>\n <CardContent className={styles.BasePortalCard__content}>\n {children}\n </CardContent>\n </Card>\n {contentBelowCard && (\n <Box className={styles.BasePortalCard__contentBelow}>\n {contentBelowCard}\n </Box>\n )}\n </Stack>\n)\n\nexport default BasePortalCard\n"],"names":["BasePortalCard","borderRadiusPx","boxShadow","children","contentBelowCard","cardSize","className","backgroundImage","backgroundColor","Stack","jsxs","Card","styles","jsx","Box","CardMedia","CardContent"],"mappings":";;;;AAgBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AACF,wBACGC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGL,CAAS,IAAIM,EAAO,oBAAoB,IAAIA,EAAOP,CAAQ,CAAC;AAAA,MAC1E,IAAI;AAAA,QACF,iBAAAG;AAAA,QACA,cAAcP;AAAA,QACd,WAAAC;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAW,EAACC,GAAA,EAAI,WAAWF,EAAO,uBACpB,iBAAOL,KAAoB,WAC1B,gBAAAM,EAACE,GAAA,EAAU,OAAOR,GAAiB,WAAU,MAAA,CAAM,IAEnDA,GAEJ;AAAA,QACA,gBAAAM,EAACG,GAAA,EAAY,WAAWJ,EAAO,yBAC5B,UAAAT,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAAA,EAEDC,KACC,gBAAAS,EAACC,GAAA,EAAI,WAAWF,EAAO,8BACpB,UAAAR,EAAA,CACH;AAAA,EAAA,CAEJ;"}

package/dist/components/BasePortalCard/BasePortalCard.module.scss CHANGED Viewed

@@ -3,6 +3,8 @@
 .BasePortalCard__root:global(.MuiCard-root) {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .BasePortalCard__contentBelow {
@@ -11,10 +13,14 @@
 .BasePortalCard__content:global(.MuiCardContent-root):last-child {
   padding: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 .BasePortalCard__media {
   height: 50%;
+  flex-shrink: 0;
   overflow: hidden;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);

package/dist/components/BasePortalCard/BasePortalCard.module.scss.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './BasePortalCard.css';const a = "_BasePortalCard__root_ug9g6_1", _ = "_BasePortalCard__contentBelow_ug9g6_5", t = "_BasePortalCard__content_ug9g6_5", o = "_BasePortalCard__media_ug9g6_13", e = "_small_ug9g6_27", r = "_medium_ug9g6_38", l = "_large_ug9g6_49", s = {
+import './BasePortalCard.css';const a = "_BasePortalCard__root_1hm6w_1", _ = "_BasePortalCard__contentBelow_1hm6w_7", t = "_BasePortalCard__content_1hm6w_7", o = "_BasePortalCard__media_1hm6w_18", e = "_small_1hm6w_33", r = "_medium_1hm6w_44", l = "_large_1hm6w_55", s = {
   BasePortalCard__root: a,
   BasePortalCard__contentBelow: _,
   BasePortalCard__content: t,

package/dist/components/BasePortalCard/ColorfulPortalCardWithChips/ColorfulPortalCardWithChips.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_ColorfulPortalCardWithChips__root_fcyoh_1~~{position:relative}.~~_ColorfulPortalCardWithChips__container_fcyoh_5~~{height:100%;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:20px;flex-wrap:wrap}@media(min-width:1024px){.~~_ColorfulPortalCardWithChips__container_fcyoh_5~~{flex-direction:row;align-items:flex-start;padding:40px 100px 20px}}.~~_ColorfulPortalCardWithChips__titleSection_fcyoh_22~~{color:#fff;max-width:~~225px~~;top:0;position:absolute;padding-left:30px;padding-top:~~50px~~}.~~_ColorfulPortalCardWithChips__title_fcyoh_22~~.MuiTypography-root{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow-wrap:break-word}.~~_ColorfulPortalCardWithChips__sectionTitle_fcyoh_40~~.MuiTypography-root{color:var(--synapse-black);margin-bottom:25px;font-size:48px;line-height:80px;text-align:center}.~~_ColorfulPortalCardWithChips__backgroundImage_fcyoh_48~~.MuiCardMedia-root{background-size:contain}.~~_ColorfulPortalCardWithChips__challengeName_fcyoh_52~~.MuiTypography-root{font-weight:300;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:break-word}.~~_ColorfulPortalCardWithChips__sectionContainer_fcyoh_62~~{~~height~~:~~100%~~}.~~_ColorfulPortalCardWithChips__bottomSection_fcyoh_66~~{min-height:0;gap:12px;padding:30px;align-items:flex-start}.~~_ColorfulPortalCardWithChips__descriptionTitle_fcyoh_73~~.MuiTypography-root{color:var(--synapse-black);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.~~_ColorfulPortalCardWithChips__registrationStatus_fcyoh_82~~.MuiChip-root{color:var(--synapse-gray-900);position:absolute;top:0;right:0;margin:26px 20px 0 0}.~~_ColorfulPortalCardWithChips__chipsContainer_fcyoh_91~~{display:flex;gap:5px;flex-wrap:wrap;max-width:400px}.~~_ColorfulPortalCardWithChips__learnMoreButton_fcyoh_98~~.MuiButton-root{display:flex;height:36px;padding:6px 16px;border-radius:8px;color:var(--synapse-black)!important;border:1px solid var(--synapse-black)!important}@media(max-width:768px){.~~_ColorfulPortalCardWithChips__learnMoreButton_fcyoh_98~~.MuiButton-root{width:100%}}.~~_ColorfulPortalCardWithChips__chip_fcyoh_91~~{flex-direction:row-reverse;padding-right:0;gap:5px;margin-bottom:5px}.~~_ColorfulPortalCardWithChips__chip_fcyoh_91~~.MuiChip-root .MuiChip-label{padding-right:0;color:var(--synapse-gray-900)}.~~_ColorfulPortalCardWithChips__chip_fcyoh_91~~.MuiChip-root .MuiChip-icon{margin-left:0;margin-right:5px;padding-right:5px;color:var(--synapse-black)}.~~_ColorfulPortalCardWithChips__triangleImage_fcyoh_131~~{position:absolute;left:10%;bottom:100%;transform:translate(-50%);z-index:1}@media(min-width:1024px){.~~_ColorfulPortalCardWithChips__triangleImage_fcyoh_131~~{left:35%}}.~~_ColorfulPortalCardWithChips__circleImage_fcyoh_144~~{position:absolute;left:10%;top:4%;transform:translate(-50%);z-index:1}@media(min-width:1024px){.~~_ColorfulPortalCardWithChips__circleImage_fcyoh_144~~{left:35%;top:7%}}.~~_ColorfulPortalCardWithChips__doubleLineImage_fcyoh_158~~{display:flex;position:absolute;left:42%;top:5%;transform:translate(-50%);z-index:1}@media(min-width:1024px){.~~_ColorfulPortalCardWithChips__doubleLineImage_fcyoh_158~~{left:45%;top:10%}}.~~_ColorfulPortalCardWithChips__longLineImage_fcyoh_173~~{position:absolute;right:10%;bottom:100%;transform:translate(-50%);z-index:1}@media(min-width:1024px){.~~_ColorfulPortalCardWithChips__longLineImage_fcyoh_173~~{right:5%;left:62%}}.~~_ColorfulPortalCardWithChips__shortLineImage_fcyoh_187~~{position:absolute;right:7%;transform:translate(-50%);z-index:1}@media(min-width:1024px){.~~_ColorfulPortalCardWithChips__shortLineImage_fcyoh_187~~{right:2%;left:63%}}.~~_ColorfulPortalCardWithChips__description_fcyoh_73~~ .markdown{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.~~_ColorfulPortalCardWithChips__description_fcyoh_73~~ .markdown p{color:var(--synapse-black)!important;font-size:14px;line-height:~~20px~~}
1	+ ._ColorfulPortalCardWithChips__root_1mhpo_1{position:relative}._ColorfulPortalCardWithChips__container_1mhpo_5{height:100%;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:20px;flex-wrap:wrap}@media(min-width:1024px){._ColorfulPortalCardWithChips__container_1mhpo_5{flex-direction:row;align-items:flex-start;padding:40px 100px 20px}}._ColorfulPortalCardWithChips__titleSection_1mhpo_22{color:#fff;max-width:310px;top:0;position:absolute;padding-left:30px;padding-top:65px}._ColorfulPortalCardWithChips__title_1mhpo_22.MuiTypography-root{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow-wrap:break-word;max-width:225px;font-weight:600}._ColorfulPortalCardWithChips__sectionTitle_1mhpo_42.MuiTypography-root{color:var(--synapse-black);margin-bottom:25px;font-size:48px;line-height:80px;text-align:center}._ColorfulPortalCardWithChips__backgroundImage_1mhpo_50.MuiCardMedia-root{background-size:contain}._ColorfulPortalCardWithChips__challengeName_1mhpo_54.MuiTypography-root{font-weight:300;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:break-word}._ColorfulPortalCardWithChips__sectionContainer_1mhpo_64{flex:1}._ColorfulPortalCardWithChips__bottomSection_1mhpo_68{min-height:0;flex:1;gap:12px;padding:30px;align-items:flex-start}._ColorfulPortalCardWithChips__descriptionTitle_1mhpo_76.MuiTypography-root{color:var(--synapse-black);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}._ColorfulPortalCardWithChips__registrationStatus_1mhpo_85.MuiChip-root{color:var(--synapse-gray-900);position:absolute;top:0;right:0;margin:26px 20px 0 0}._ColorfulPortalCardWithChips__chipsContainer_1mhpo_94{display:flex;gap:5px;flex-wrap:wrap;max-width:400px}._ColorfulPortalCardWithChips__learnMoreButton_1mhpo_101.MuiButton-root{display:flex;margin-top:auto;height:36px;padding:6px 16px;border-radius:8px;color:var(--synapse-black)!important;border:1px solid var(--synapse-black)!important}@media(max-width:768px){._ColorfulPortalCardWithChips__learnMoreButton_1mhpo_101.MuiButton-root{width:100%}}._ColorfulPortalCardWithChips__chip_1mhpo_94{flex-direction:row-reverse;padding-right:0;gap:5px;margin-bottom:5px}._ColorfulPortalCardWithChips__chip_1mhpo_94.MuiChip-root .MuiChip-label{padding-right:0;color:var(--synapse-gray-900)}._ColorfulPortalCardWithChips__chip_1mhpo_94.MuiChip-root .MuiChip-icon{margin-left:0;margin-right:5px;padding-right:5px;color:var(--synapse-black)}._ColorfulPortalCardWithChips__triangleImage_1mhpo_135{position:absolute;left:10%;bottom:100%;transform:translate(-50%);z-index:1}@media(min-width:1024px){._ColorfulPortalCardWithChips__triangleImage_1mhpo_135{left:35%}}._ColorfulPortalCardWithChips__circleImage_1mhpo_148{position:absolute;left:10%;top:4%;transform:translate(-50%);z-index:1}@media(min-width:1024px){._ColorfulPortalCardWithChips__circleImage_1mhpo_148{left:35%;top:7%}}._ColorfulPortalCardWithChips__doubleLineImage_1mhpo_162{display:flex;position:absolute;left:42%;top:5%;transform:translate(-50%);z-index:1}@media(min-width:1024px){._ColorfulPortalCardWithChips__doubleLineImage_1mhpo_162{left:45%;top:10%}}._ColorfulPortalCardWithChips__longLineImage_1mhpo_177{position:absolute;right:10%;bottom:100%;transform:translate(-50%);z-index:1}@media(min-width:1024px){._ColorfulPortalCardWithChips__longLineImage_1mhpo_177{right:5%;left:62%}}._ColorfulPortalCardWithChips__shortLineImage_1mhpo_191{position:absolute;right:7%;transform:translate(-50%);z-index:1}@media(min-width:1024px){._ColorfulPortalCardWithChips__shortLineImage_1mhpo_191{right:2%;left:63%}}._ColorfulPortalCardWithChips__description_1mhpo_76 .markdown{--description-line-height: 20px;--description-max-lines: 3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:var(--description-max-lines);-webkit-box-orient:vertical;min-height:calc(var(--description-max-lines) * var(--description-line-height))}._ColorfulPortalCardWithChips__description_1mhpo_76 .markdown p{color:var(--synapse-black)!important;font-size:14px;line-height:var(--description-line-height)}

package/dist/components/BasePortalCard/ColorfulPortalCardWithChips/ColorfulPortalCardWithChips.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorfulPortalCardWithChips.d.ts","sourceRoot":"","sources":["../../../../src/components/BasePortalCard/ColorfulPortalCardWithChips/ColorfulPortalCardWithChips.tsx"],"names":[],"mappings":"~~AAKA~~,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,gCAAgC,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxC,CAAA;AA6BD,QAAA,MAAM,2BAA2B,GAAI,0KAclC,gCAAgC,KAAG,KAAK,CAAC,SAqE3C,CAAA;AAED,eAAe,2BAA2B,CAAA"}
1	+ {"version":3,"file":"ColorfulPortalCardWithChips.d.ts","sourceRoot":"","sources":["../../../../src/components/BasePortalCard/ColorfulPortalCardWithChips/ColorfulPortalCardWithChips.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,gCAAgC,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxC,CAAA;AA6BD,QAAA,MAAM,2BAA2B,GAAI,0KAclC,gCAAgC,KAAG,KAAK,CAAC,SAqE3C,CAAA;AAED,eAAe,2BAA2B,CAAA"}

package/dist/components/BasePortalCard/ColorfulPortalCardWithChips/ColorfulPortalCardWithChips.js CHANGED Viewed

@@ -1,18 +1,19 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { MarkdownSynapse as W } from "../../Markdown/MarkdownSynapse.js";
-import { hashCode as v } from "../../../utils/functions/StringUtils.js";
-import { useImageUrl as x } from "../../../utils/hooks/useImageUrlUtils.js";
-import b from "@mui/icons-material/ArrowForward";
-import { Stack as s, Chip as u, Typography as i, Button as B, Box as y } from "@mui/material";
-import k from "../BasePortalCard.js";
+import { ReactComponent as W } from "../../../assets/DefaultColorfulPortalCardBackground.svg.js";
+import { Markdown as v } from "../../Markdown/MarkdownSynapse.js";
+import { hashCode as x } from "../../../utils/functions/StringUtils.js";
+import { useImageUrl as b } from "../../../utils/hooks/useImageUrlUtils.js";
+import w from "@mui/icons-material/ArrowForward";
+import { Stack as s, Chip as f, Typography as i, Button as B, Box as k } from "@mui/material";
+import y from "../BasePortalCard.js";
 import a from "./ColorfulPortalCardWithChips.module.scss.js";
-const C = ["#F8CC7D", "#BFE8F4", "#CEFBDD"], w = (o) => o.map((e) => {
-  const l = v(e), t = Math.abs(l) % C.length;
+const C = ["#F8CC7D", "#BFE8F4", "#CEFBDD"], F = (o) => o.map((e) => {
+  const l = x(e), t = Math.abs(l) % C.length;
   return C[t];
-}), F = ({ values: o }) => {
-  const e = w(o);
-  return /* @__PURE__ */ r(y, { className: a.ColorfulPortalCardWithChips__chipsContainer, children: o.map((l, t) => /* @__PURE__ */ r(
-    u,
+}), S = ({ values: o }) => {
+  const e = F(o);
+  return /* @__PURE__ */ r(k, { className: a.ColorfulPortalCardWithChips__chipsContainer, children: o.map((l, t) => /* @__PURE__ */ r(
+    f,
     {
       label: /* @__PURE__ */ r(i, { variant: "smallText1", children: l }),
       variant: "filled",
@@ -21,13 +22,13 @@ const C = ["#F8CC7D", "#BFE8F4", "#CEFBDD"], w = (o) => o.map((e) => {
     },
     l
   )) });
-}, V = ({
+}, q = ({
   title: o,
   subtitle: e,
   description: l,
   descriptionTitle: t,
   learnMoreLink: c,
-  buttonOverrideText: f,
+  buttonOverrideText: u,
   chips: h,
   backgroundImage: d,
   backgroundColor: m,
@@ -36,19 +37,19 @@ const C = ["#F8CC7D", "#BFE8F4", "#CEFBDD"], w = (o) => o.map((e) => {
   borderRadiusPx: g,
   cardSize: P = "medium"
 }) => {
-  const N = x(d ?? "", _ ?? "") ?? d;
+  const N = b(d ?? "", _ ?? "") || d;
   return /* @__PURE__ */ r(
-    k,
+    y,
     {
       cardSize: P,
       borderRadiusPx: g,
-      backgroundImage: N,
+      backgroundImage: N || /* @__PURE__ */ r(W, {}),
       backgroundColor: m || C[0],
-      contentBelowCard: h && h.length > 0 && /* @__PURE__ */ r(F, { values: h }),
+      contentBelowCard: h && h.length > 0 && /* @__PURE__ */ r(S, { values: h }),
       children: /* @__PURE__ */ n(s, { className: a.ColorfulPortalCardWithChips__sectionContainer, children: [
         /* @__PURE__ */ n(s, { children: [
           p && /* @__PURE__ */ r(
-            u,
+            f,
             {
               color: "secondary",
               variant: "filled",
@@ -90,7 +91,7 @@ const C = ["#F8CC7D", "#BFE8F4", "#CEFBDD"], w = (o) => o.map((e) => {
             {
               variant: "smallText1",
               className: a.ColorfulPortalCardWithChips__description,
-              children: /* @__PURE__ */ r(W, { markdown: l ?? "" })
+              children: /* @__PURE__ */ r(v, { markdown: l ?? "" })
             }
           ),
           c && /* @__PURE__ */ r(
@@ -98,11 +99,11 @@ const C = ["#F8CC7D", "#BFE8F4", "#CEFBDD"], w = (o) => o.map((e) => {
             {
               className: a.ColorfulPortalCardWithChips__learnMoreButton,
               variant: "outlined",
-              endIcon: /* @__PURE__ */ r(b, {}),
+              endIcon: /* @__PURE__ */ r(w, {}),
               href: c,
               target: "_blank",
               rel: "noopener noreferrer",
-              children: f ?? "Learn more"
+              children: u ?? "Learn more"
             }
           )
         ] })
@@ -111,6 +112,6 @@ const C = ["#F8CC7D", "#BFE8F4", "#CEFBDD"], w = (o) => o.map((e) => {
   );
 };
 export {
-  V as default
+  q as default
 };
 //# sourceMappingURL=ColorfulPortalCardWithChips.js.map

package/dist/components/BasePortalCard/ColorfulPortalCardWithChips/ColorfulPortalCardWithChips.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorfulPortalCardWithChips.js","sources":["../../../../src/components/BasePortalCard/ColorfulPortalCardWithChips/ColorfulPortalCardWithChips.tsx"],"sourcesContent":["import MarkdownSynapse from '@/components/Markdown/MarkdownSynapse'\nimport { hashCode } from '@/utils/functions/StringUtils'\nimport { useImageUrl } from '@/utils/hooks/useImageUrlUtils'\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\nimport { Box, Button, Chip, Stack, Typography } from '@mui/material'\nimport React from 'react'\nimport BasePortalCard from '../BasePortalCard'\nimport styles from './ColorfulPortalCardWithChips.module.scss'\n\ntype ColorfulPortalCardWithChipsProps = {\n title?: string\n subtitle?: string\n description?: string\n descriptionTitle?: string\n learnMoreLink?: string\n buttonOverrideText?: string\n chips?: string[]\n backgroundImage?: string\n backgroundColor?: string\n tag?: string\n entityId?: string\n borderRadiusPx?: number\n cardSize?: 'small' \| 'medium' \| 'large'\n}\n\nconst colors = ['#F8CC7D', '#BFE8F4', '#CEFBDD']\n\nconst getChicletColors = (chips: string[]) => {\n return chips.map(chip => {\n const hash = hashCode(chip)\n const index = Math.abs(hash) % colors.length\n return colors[index]\n })\n}\n\nconst Chips = ({ values }: { values: string[] }): React.ReactNode => {\n const chipColors = getChicletColors(values)\n return (\n <Box className={styles.ColorfulPortalCardWithChips__chipsContainer}>\n {values.map((chip, index) => (\n <Chip\n key={chip}\n label={<Typography variant=\"smallText1\">{chip}</Typography>}\n variant=\"filled\"\n style={{ backgroundColor: chipColors[index] }}\n className={styles.ChallengePortalCard__chip}\n />\n ))}\n </Box>\n )\n}\n\nconst ColorfulPortalCardWithChips = ({\n title,\n subtitle,\n description,\n descriptionTitle,\n learnMoreLink,\n buttonOverrideText,\n chips,\n backgroundImage,\n backgroundColor,\n tag,\n entityId,\n borderRadiusPx,\n cardSize = 'medium',\n}: ColorfulPortalCardWithChipsProps): React.ReactNode => {\n const imageUrl = useImageUrl(backgroundImage ?? '', entityId ?? '')\n const backgroundImageValue = imageUrl ?? backgroundImage\n\n return (\n <BasePortalCard\n cardSize={cardSize}\n borderRadiusPx={borderRadiusPx}\n backgroundImage={backgroundImageValue}\n backgroundColor={backgroundColor \|\| colors[0]}\n contentBelowCard={chips && chips.length > 0 && <Chips values={chips} />}\n >\n <Stack className={styles.ColorfulPortalCardWithChips__sectionContainer}>\n <Stack>\n {tag && (\n <Chip\n color=\"secondary\"\n variant=\"filled\"\n className={styles.ColorfulPortalCardWithChips__registrationStatus}\n sx={{ backgroundColor }}\n label={tag}\n />\n )}\n <Stack className={styles.ColorfulPortalCardWithChips__titleSection}>\n <Typography\n variant=\"headline1\"\n className={styles.ColorfulPortalCardWithChips__title}\n >\n {title}\n </Typography>\n <Typography\n variant=\"headline1\"\n className={styles.ColorfulPortalCardWithChips__challengeName}\n >\n {subtitle}\n </Typography>\n </Stack>\n </Stack>\n <Stack className={styles.ColorfulPortalCardWithChips__bottomSection}>\n {descriptionTitle && (\n <Typography\n variant=\"headline1\"\n className={styles.ColorfulPortalCardWithChips__descriptionTitle}\n >\n {descriptionTitle}\n </Typography>\n )}\n <Typography\n variant=\"smallText1\"\n className={styles.ColorfulPortalCardWithChips__description}\n >\n <MarkdownSynapse markdown={description ?? ''} />\n </Typography>\n {learnMoreLink && (\n <Button\n className={styles.ColorfulPortalCardWithChips__learnMoreButton}\n variant=\"outlined\"\n endIcon={<ArrowForwardIcon />}\n href={learnMoreLink}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {buttonOverrideText ?? 'Learn more'}\n </Button>\n )}\n </Stack>\n </Stack>\n </BasePortalCard>\n )\n}\n\nexport default ColorfulPortalCardWithChips\n"],"names":["colors","getChicletColors","chips","chip","hash","hashCode","index","Chips","values","chipColors","jsx","Box","styles","Chip","Typography","ColorfulPortalCardWithChips","title","subtitle","description","descriptionTitle","learnMoreLink","buttonOverrideText","backgroundImage","backgroundColor","tag","entityId","borderRadiusPx","cardSize","backgroundImageValue","useImageUrl","BasePortalCard","jsxs","Stack","MarkdownSynapse","Button","ArrowForwardIcon"],"mappings":"~~;;;;;;;;AAyBA~~,MAAMA,IAAS,CAAC,WAAW,WAAW,SAAS,GAEzCC,IAAmB,CAACC,MACjBA,EAAM,IAAI,CAAAC,MAAQ;AACvB,QAAMC,IAAOC,EAASF,CAAI,GACpBG,IAAQ,KAAK,IAAIF,CAAI,IAAIJ,EAAO;AACtC,SAAOA,EAAOM,CAAK;AACrB,CAAC,GAGGC,IAAQ,CAAC,EAAE,QAAAC,QAAoD;AACnE,QAAMC,IAAaR,EAAiBO,CAAM;AAC1C,SACE,gBAAAE,EAACC,KAAI,WAAWC,EAAO,6CACpB,UAAAJ,EAAO,IAAI,CAACL,GAAMG,MACjB,gBAAAI;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,OAAO,gBAAAH,EAACI,GAAA,EAAW,SAAQ,cAAc,UAAAX,GAAK;AAAA,MAC9C,SAAQ;AAAA,MACR,OAAO,EAAE,iBAAiBM,EAAWH,CAAK,EAAA;AAAA,MAC1C,WAAWM,EAAO;AAAA,IAAA;AAAA,IAJbT;AAAA,EAAA,CAMR,GACH;AAEJ,GAEMY,IAA8B,CAAC;AAAA,EACnC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,OAAAnB;AAAA,EACA,iBAAAoB;AAAA,EACA,iBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAyD;AAEvD,QAAMC,IADWC,EAAYP,KAAmB,IAAIG,KAAY,EAAE,KACzBH;AAEzC,SACE,gBAAAZ;AAAA,IAACoB;AAAA,IAAA;AAAA,MACC,UAAAH;AAAA,MACA,gBAAAD;AAAA,MACA,iBAAiBE;AAAA,~~MACjB~~,~~iBAAiBL~~,KAAmBvB,EAAO,CAAC;AAAA,MAC5C,kBAAkBE,KAASA,EAAM,SAAS,KAAK,gBAAAQ,EAACH,GAAA,EAAM,QAAQL,GAAO;AAAA,MAErE,UAAA,~~gBAAA6B~~,EAACC,GAAA,EAAM,~~WAAWpB~~,EAAO,+CACvB,UAAA;AAAA,QAAA,~~gBAAAmB~~,EAACC,GAAA,EACE,UAAA;AAAA,~~UAAAR~~,KACC,gBAAAd;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cACR,WAAWD,EAAO;AAAA,cAClB,IAAI,EAAE,iBAAAW,EAAA;AAAA,cACN,OAAOC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGX,~~gBAAAO~~,EAACC,GAAA,EAAM,~~WAAWpB~~,EAAO,2CACvB,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAWF,EAAO;AAAA,gBAEjB,UAAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAEH,gBAAAN;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAWF,EAAO;AAAA,gBAEjB,UAAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QACA,~~gBAAAc~~,EAACC,GAAA,EAAM,~~WAAWpB~~,EAAO,4CACtB,UAAA;AAAA,UAAAO,KACC,gBAAAT;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAWF,EAAO;AAAA,cAEjB,UAAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UAGL,gBAAAT;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAWF,EAAO;AAAA,cAElB,UAAA,gBAAAF,~~EAACuB~~,GAAA,EAAgB,~~UAAUf~~,KAAe,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAE/CE,KACC,gBAAAV;AAAA,~~YAACwB~~;AAAA,YAAA;AAAA,cACC,~~WAAWtB~~,EAAO;AAAA,cAClB,SAAQ;AAAA,cACR,~~2BAAUuB~~,GAAA,EAAiB;AAAA,cAC3B,~~MAAMf~~;AAAA,cACN,QAAO;AAAA,cACP,KAAI;AAAA,cAEH,UAAAC,KAAsB;AAAA,YAAA;AAAA,UAAA;AAAA,QACzB,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"ColorfulPortalCardWithChips.js","sources":["../../../../src/components/BasePortalCard/ColorfulPortalCardWithChips/ColorfulPortalCardWithChips.tsx"],"sourcesContent":["import { ReactComponent as DefaultBackground } from '@/assets/DefaultColorfulPortalCardBackground.svg'\nimport MarkdownSynapse from '@/components/Markdown/MarkdownSynapse'\nimport { hashCode } from '@/utils/functions/StringUtils'\nimport { useImageUrl } from '@/utils/hooks/useImageUrlUtils'\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\nimport { Box, Button, Chip, Stack, Typography } from '@mui/material'\nimport React from 'react'\nimport BasePortalCard from '../BasePortalCard'\nimport styles from './ColorfulPortalCardWithChips.module.scss'\n\ntype ColorfulPortalCardWithChipsProps = {\n title?: string\n subtitle?: string\n description?: string\n descriptionTitle?: string\n learnMoreLink?: string\n buttonOverrideText?: string\n chips?: string[]\n backgroundImage?: string\n backgroundColor?: string\n tag?: string\n entityId?: string\n borderRadiusPx?: number\n cardSize?: 'small' \| 'medium' \| 'large'\n}\n\nconst colors = ['#F8CC7D', '#BFE8F4', '#CEFBDD']\n\nconst getChicletColors = (chips: string[]) => {\n return chips.map(chip => {\n const hash = hashCode(chip)\n const index = Math.abs(hash) % colors.length\n return colors[index]\n })\n}\n\nconst Chips = ({ values }: { values: string[] }): React.ReactNode => {\n const chipColors = getChicletColors(values)\n return (\n <Box className={styles.ColorfulPortalCardWithChips__chipsContainer}>\n {values.map((chip, index) => (\n <Chip\n key={chip}\n label={<Typography variant=\"smallText1\">{chip}</Typography>}\n variant=\"filled\"\n style={{ backgroundColor: chipColors[index] }}\n className={styles.ChallengePortalCard__chip}\n />\n ))}\n </Box>\n )\n}\n\nconst ColorfulPortalCardWithChips = ({\n title,\n subtitle,\n description,\n descriptionTitle,\n learnMoreLink,\n buttonOverrideText,\n chips,\n backgroundImage,\n backgroundColor,\n tag,\n entityId,\n borderRadiusPx,\n cardSize = 'medium',\n}: ColorfulPortalCardWithChipsProps): React.ReactNode => {\n const imageUrl = useImageUrl(backgroundImage ?? '', entityId ?? '')\n const backgroundImageValue = imageUrl \|\| backgroundImage\n\n return (\n <BasePortalCard\n cardSize={cardSize}\n borderRadiusPx={borderRadiusPx}\n backgroundImage={backgroundImageValue \|\| <DefaultBackground />}\n backgroundColor={backgroundColor \|\| colors[0]}\n contentBelowCard={chips && chips.length > 0 && <Chips values={chips} />}\n >\n <Stack className={styles.ColorfulPortalCardWithChips__sectionContainer}>\n <Stack>\n {tag && (\n <Chip\n color=\"secondary\"\n variant=\"filled\"\n className={styles.ColorfulPortalCardWithChips__registrationStatus}\n sx={{ backgroundColor }}\n label={tag}\n />\n )}\n <Stack className={styles.ColorfulPortalCardWithChips__titleSection}>\n <Typography\n variant=\"headline1\"\n className={styles.ColorfulPortalCardWithChips__title}\n >\n {title}\n </Typography>\n <Typography\n variant=\"headline1\"\n className={styles.ColorfulPortalCardWithChips__challengeName}\n >\n {subtitle}\n </Typography>\n </Stack>\n </Stack>\n <Stack className={styles.ColorfulPortalCardWithChips__bottomSection}>\n {descriptionTitle && (\n <Typography\n variant=\"headline1\"\n className={styles.ColorfulPortalCardWithChips__descriptionTitle}\n >\n {descriptionTitle}\n </Typography>\n )}\n <Typography\n variant=\"smallText1\"\n className={styles.ColorfulPortalCardWithChips__description}\n >\n <MarkdownSynapse markdown={description ?? ''} />\n </Typography>\n {learnMoreLink && (\n <Button\n className={styles.ColorfulPortalCardWithChips__learnMoreButton}\n variant=\"outlined\"\n endIcon={<ArrowForwardIcon />}\n href={learnMoreLink}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {buttonOverrideText ?? 'Learn more'}\n </Button>\n )}\n </Stack>\n </Stack>\n </BasePortalCard>\n )\n}\n\nexport default ColorfulPortalCardWithChips\n"],"names":["colors","getChicletColors","chips","chip","hash","hashCode","index","Chips","values","chipColors","jsx","Box","styles","Chip","Typography","ColorfulPortalCardWithChips","title","subtitle","description","descriptionTitle","learnMoreLink","buttonOverrideText","backgroundImage","backgroundColor","tag","entityId","borderRadiusPx","cardSize","backgroundImageValue","useImageUrl","BasePortalCard","DefaultBackground","jsxs","Stack","MarkdownSynapse","Button","ArrowForwardIcon"],"mappings":"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"}