synapse-react-client 4.0.18 → 4.0.20

package/dist/components/TermsAndConditions/TermsAndConditionsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TermsAndConditionsItem.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditionsItem.tsx"],"sourcesContent":["import { CheckIcon } from '@/assets/icons/terms/CheckIcon'\nimport { useGetPresignedUrlContentFromFHA } from '@/synapse-queries/file/useFiles'\nimport { Link, Skeleton } from '@mui/material'\nimport { FileHandleAssociateType } from '@sage-bionetworks/synapse-types'\nimport { times } from 'lodash-es'\nimport { MouseEvent, useEffect, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\nimport { SkeletonParagraph } from '../Skeleton'\n\nexport type tcItem = {\n  iconFileHandleId: string\n  label: string\n  description: string\n}\n\nexport type TermsAndConditionsItemProps = {\n  id: number\n  enabled: boolean\n  checked: boolean\n  item: tcItem\n  termsAndConditionsTableID: string\n  onChange: (id: number) => void\n}\n\nfunction TermsAndConditionsItem(props: TermsAndConditionsItemProps) {\n  const { id, item, enabled, checked, onChange, termsAndConditionsTableID } =\n    props\n  const { iconFileHandleId, label, description } = item\n  const { data: iconFileContent } = useGetPresignedUrlContentFromFHA(\n    {\n      associateObjectId: termsAndConditionsTableID,\n      associateObjectType: FileHandleAssociateType.TableEntity,\n      fileHandleId: iconFileHandleId,\n    },\n    true, // force this query to be run as the anonymous user (without an access token)\n  )\n\n  const [showDesc, setShowDes] = useState<boolean>(false)\n  const [isChecked, setIsChecked] = useState<boolean>(false)\n  let mounted = true\n\n  useEffect(() => {\n    if (mounted) {\n      setIsChecked(checked)\n    }\n    return () => {\n      mounted = false\n    }\n  }, [enabled, checked])\n\n  const handleShowDescLink = (e: MouseEvent) => {\n    e.preventDefault()\n    if (enabled) {\n      setShowDes(!showDesc)\n    }\n  }\n\n  const handleCheckboxClick = (e: MouseEvent) => {\n    if (enabled) {\n      onChange(id)\n    }\n  }\n\n  return (\n    <li className={enabled ? 'terms-enabled' : ''}>\n      <span\n        className=\"terms-icon\"\n        dangerouslySetInnerHTML={{ __html: iconFileContent ?? '' }}\n      />\n      <span className=\"terms-desc\">\n        <label id={`toc-item-${id}`}>\n          <MarkdownSynapse markdown={label} />\n        </label>\n        {showDesc && description && (\n          <div className=\"terms-desc-content\">\n            <MarkdownSynapse markdown={description} />\n          </div>\n        )}\n        {description && (\n          <div>\n            <Link\n              className=\"terms-show-desc highlight-link\"\n              href=\"\"\n              onClick={handleShowDescLink}\n            >\n              {showDesc ? 'Show Less' : 'Show More'}\n            </Link>\n          </div>\n        )}\n      </span>\n      <span className=\"terms-checkbox\">\n        <span\n          role=\"checkbox\"\n          aria-labelledby={`toc-item-${id}`}\n          className={isChecked ? 'terms-circle terms-checked' : 'terms-circle'}\n          onClick={handleCheckboxClick}\n        >\n          <CheckIcon />\n        </span>\n        I agree\n      </span>\n    </li>\n  )\n}\n\nexport function LoadingItem(props: { numLoadingItems: number }) {\n  const { numLoadingItems } = props\n  return (\n    <>\n      {times(numLoadingItems).map(index => {\n        return (\n          <li\n            key={index}\n            aria-busy=\"true\"\n            aria-live=\"polite\"\n            data-testid=\"loading-terms-and-conditions\"\n          >\n            <span className=\"terms-icon\">\n              <Skeleton\n                variant=\"rectangular\"\n                height=\"30px\"\n                width=\"30px\"\n                sx={{ margin: 'auto' }}\n              />\n            </span>\n            <span className=\"terms-desc\">\n              <SkeletonParagraph numRows={5} />\n            </span>\n            <span className=\"terms-checkbox\">\n              <Skeleton\n                variant=\"circular\"\n                height=\"40px\"\n                width=\"40px\"\n                sx={{ margin: 'auto' }}\n              />\n            </span>\n          </li>\n        )\n      })}\n    </>\n  )\n}\n\nexport default TermsAndConditionsItem\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,EAAuB,GAAoC;CAClE,IAAM,EAAE,OAAI,SAAM,YAAS,YAAS,aAAU,iCAC5C,GACI,EAAE,qBAAkB,UAAO,mBAAgB,GAC3C,EAAE,MAAM,MAAoB,EAChC;EACE,mBAAmB;EACnB,qBAAqB,EAAwB;EAC7C,cAAc;EACf,EACD,GACD,EAEK,CAAC,GAAU,KAAc,EAAkB,GAAM,EACjD,CAAC,GAAW,KAAgB,EAAkB,GAAM,EACtD,IAAU;AAwBd,QAtBA,SACM,KACF,EAAa,EAAQ,QAEV;AACX,MAAU;KAEX,CAAC,GAAS,EAAQ,CAAC,EAgBpB,kBAAC,MAAD;EAAI,WAAW,IAAU,kBAAkB;YAA3C;GACE,kBAAC,QAAD;IACE,WAAU;IACV,yBAAyB,EAAE,QAAQ,KAAmB,IAAI;IAC1D,CAAA;GACF,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,SAAD;MAAO,IAAI,YAAY;gBACrB,kBAAC,GAAD,EAAiB,UAAU,GAAS,CAAA;MAC9B,CAAA;KACP,KAAY,KACX,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAiB,UAAU,GAAe,CAAA;MACtC,CAAA;KAEP,KACC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;MACE,WAAU;MACV,MAAK;MACL,UAjCgB,MAAkB;AAE5C,OADA,EAAE,gBAAgB,EACd,KACF,EAAW,CAAC,EAAS;;gBAgCZ,IAAW,cAAc;MACrB,CAAA,EACH,CAAA;KAEH;;GACP,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD;KACE,MAAK;KACL,mBAAiB,YAAY;KAC7B,WAAW,IAAY,+BAA+B;KACtD,UAtCqB,MAAkB;AAC7C,MAAI,KACF,EAAS,EAAG;;eAsCR,kBAAC,GAAD,EAAa,CAAA;KACR,CAAA,EAAA,UAEF;;GACJ;;;AAIT,SAAgB,EAAY,GAAoC;CAC9D,IAAM,EAAE,uBAAoB;AAC5B,QACE,kBAAA,GAAA,EAAA,UACG,EAAM,EAAgB,CAAC,KAAI,MAExB,kBAAC,MAAD;EAEE,aAAU;EACV,aAAU;EACV,eAAY;YAJd;GAME,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD;KACE,SAAQ;KACR,QAAO;KACP,OAAM;KACN,IAAI,EAAE,QAAQ,QAAQ;KACtB,CAAA;IACG,CAAA;GACP,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD,EAAmB,SAAS,GAAK,CAAA;IAC5B,CAAA;GACP,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD;KACE,SAAQ;KACR,QAAO;KACP,OAAM;KACN,IAAI,EAAE,QAAQ,QAAQ;KACtB,CAAA;IACG,CAAA;GACJ;IAxBE,EAwBF,CAEP,EACD,CAAA"}
+{"version":3,"file":"TermsAndConditionsItem.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditionsItem.tsx"],"sourcesContent":["import { CheckIcon } from '@/assets/icons/terms/CheckIcon'\nimport { useGetPresignedUrlContentFromFHA } from '@/synapse-queries/file/useFiles'\nimport { Link, Skeleton } from '@mui/material'\nimport { FileHandleAssociateType } from '@sage-bionetworks/synapse-types'\nimport { times } from 'lodash-es'\nimport { MouseEvent, useEffect, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\nimport { SkeletonParagraph } from '../Skeleton'\n\nexport type tcItem = {\n  iconFileHandleId: string\n  label: string\n  description: string\n}\n\nexport type TermsAndConditionsItemProps = {\n  id: number\n  enabled: boolean\n  checked: boolean\n  item: tcItem\n  termsAndConditionsTableID: string\n  onChange: (id: number) => void\n}\n\nfunction TermsAndConditionsItem(props: TermsAndConditionsItemProps) {\n  const { id, item, enabled, checked, onChange, termsAndConditionsTableID } =\n    props\n  const { iconFileHandleId, label, description } = item\n  const { data: iconFileContent } = useGetPresignedUrlContentFromFHA(\n    {\n      associateObjectId: termsAndConditionsTableID,\n      associateObjectType: FileHandleAssociateType.TableEntity,\n      fileHandleId: iconFileHandleId,\n    },\n    true, // force this query to be run as the anonymous user (without an access token)\n  )\n\n  const [showDesc, setShowDes] = useState<boolean>(false)\n  const [isChecked, setIsChecked] = useState<boolean>(false)\n  let mounted = true\n\n  useEffect(() => {\n    if (mounted) {\n      setIsChecked(checked)\n    }\n    return () => {\n      mounted = false\n    }\n  }, [enabled, checked])\n\n  const handleShowDescLink = (e: MouseEvent) => {\n    e.preventDefault()\n    if (enabled) {\n      setShowDes(!showDesc)\n    }\n  }\n\n  const handleCheckboxClick = (e: MouseEvent) => {\n    if (enabled) {\n      onChange(id)\n    }\n  }\n\n  return (\n    <li className={enabled ? 'terms-enabled' : ''}>\n      <span\n        className=\"terms-icon\"\n        dangerouslySetInnerHTML={{ __html: iconFileContent ?? '' }}\n      />\n      <span className=\"terms-desc\">\n        <label id={`toc-item-${id}`}>\n          <MarkdownSynapse markdown={label} />\n        </label>\n        {showDesc && description && (\n          <div className=\"terms-desc-content\">\n            <MarkdownSynapse markdown={description} />\n          </div>\n        )}\n        {description && (\n          <div>\n            <Link\n              className=\"terms-show-desc highlight-link\"\n              href=\"\"\n              onClick={handleShowDescLink}\n            >\n              {showDesc ? 'Show Less' : 'Show More'}\n            </Link>\n          </div>\n        )}\n      </span>\n      <span className=\"terms-checkbox\">\n        <span\n          role=\"checkbox\"\n          aria-labelledby={`toc-item-${id}`}\n          className={isChecked ? 'terms-circle terms-checked' : 'terms-circle'}\n          onClick={handleCheckboxClick}\n        >\n          <CheckIcon />\n        </span>\n        I agree\n      </span>\n    </li>\n  )\n}\n\nexport function LoadingItem(props: { numLoadingItems: number }) {\n  const { numLoadingItems } = props\n  return (\n    <>\n      {times(numLoadingItems).map(index => {\n        return (\n          <li\n            key={index}\n            aria-busy=\"true\"\n            aria-live=\"polite\"\n            data-testid=\"loading-terms-and-conditions\"\n          >\n            <span className=\"terms-icon\">\n              <Skeleton\n                variant=\"rectangular\"\n                height=\"30px\"\n                width=\"30px\"\n                sx={{ margin: 'auto' }}\n              />\n            </span>\n            <span className=\"terms-desc\">\n              <SkeletonParagraph numRows={5} />\n            </span>\n            <span className=\"terms-checkbox\">\n              <Skeleton\n                variant=\"circular\"\n                height=\"40px\"\n                width=\"40px\"\n                sx={{ margin: 'auto' }}\n              />\n            </span>\n          </li>\n        )\n      })}\n    </>\n  )\n}\n\nexport default TermsAndConditionsItem\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,EAAuB,GAAoC;CAClE,IAAM,EAAE,OAAI,SAAM,YAAS,YAAS,aAAU,iCAC5C,GACI,EAAE,qBAAkB,UAAO,mBAAgB,GAC3C,EAAE,MAAM,MAAoB,EAChC;EACE,mBAAmB;EACnB,qBAAqB,EAAwB;EAC7C,cAAc;CAChB,GACA,EACF,GAEM,CAAC,GAAU,KAAc,EAAkB,EAAK,GAChD,CAAC,GAAW,KAAgB,EAAkB,EAAK,GACrD,IAAU;CAwBd,OAtBA,SACM,KACF,EAAa,CAAO,SAET;EACX,IAAU;CACZ,IACC,CAAC,GAAS,CAAO,CAAC,GAgBnB,kBAAC,MAAD;EAAI,WAAW,IAAU,kBAAkB;YAA3C;GACE,kBAAC,QAAD;IACE,WAAU;IACV,yBAAyB,EAAE,QAAQ,KAAmB,GAAG;GAC1D,CAAA;GACD,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,SAAD;MAAO,IAAI,YAAY;gBACrB,kBAAC,GAAD,EAAiB,UAAU,EAAQ,CAAA;KAC9B,CAAA;KACN,KAAY,KACX,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAiB,UAAU,EAAc,CAAA;KACtC,CAAA;KAEN,KACC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;MACE,WAAU;MACV,MAAK;MACL,UAjCgB,MAAkB;OAE5C,AADA,EAAE,eAAe,GACb,KACF,EAAW,CAAC,CAAQ;MAExB;gBA8Ba,IAAW,cAAc;KACtB,CAAA,EACH,CAAA;IAEH;;GACN,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD;KACE,MAAK;KACL,mBAAiB,YAAY;KAC7B,WAAW,IAAY,+BAA+B;KACtD,UAtCqB,MAAkB;MAC7C,AAAI,KACF,EAAS,CAAE;KAEf;eAoCQ,kBAAC,GAAD,CAAY,CAAA;IACR,CAAA,GAAC,SAEH;;EACJ;;AAER;AAEA,SAAgB,EAAY,GAAoC;CAC9D,IAAM,EAAE,uBAAoB;CAC5B,OACE,kBAAA,GAAA,EAAA,UACG,EAAM,CAAe,EAAE,KAAI,MAExB,kBAAC,MAAD;EAEE,aAAU;EACV,aAAU;EACV,eAAY;YAJd;GAME,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD;KACE,SAAQ;KACR,QAAO;KACP,OAAM;KACN,IAAI,EAAE,QAAQ,OAAO;IACtB,CAAA;GACG,CAAA;GACN,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD,EAAmB,SAAS,EAAI,CAAA;GAC5B,CAAA;GACN,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD;KACE,SAAQ;KACR,QAAO;KACP,OAAM;KACN,IAAI,EAAE,QAAQ,OAAO;IACtB,CAAA;GACG,CAAA;EACJ;IAxBG,CAwBH,CAEP,EACD,CAAA;AAEN"}

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  Box,\n  inputBaseClasses,\n  TextField as MuiTextField,\n  TextFieldProps as MuiTextFieldProps,\n  Typography,\n} from '@mui/material'\nimport styles from './TextField.module.scss'\nimport { ReactNode, useId } from 'react'\n\nexport type TextFieldProps = MuiTextFieldProps & {\n  /**\n   * Neutral supplementary text shown below the label and above the input (similar to an inline tooltip).\n   * Always rendered in a neutral color regardless of form state.\n   * For error or status messages, use `helperText` instead.\n   */\n  description?: ReactNode\n  maxCharacterCount?: number\n}\n\n/**\n * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.\n *\n * - `label`: Bold label text above the input. Changes color on focus/error/disabled states.\n * - `description`: Neutral supplementary text shown below the label, above the input. Always neutral color.\n * - `helperText`: Status or error message shown below the input. Color-reactive to form state.\n * - `maxCharacterCount`: Renders a character count indicator below the input and sets the `maxLength` on the input.\n */\nexport default function TextField({\n  description,\n  maxCharacterCount,\n  slotProps,\n  id: idProp,\n  label,\n  fullWidth = true,\n  className,\n  sx,\n  value,\n  ...rest\n}: TextFieldProps) {\n  const generatedId = useId()\n  const id = idProp ?? generatedId\n\n  const currentLength = typeof value === 'string' ? value.length : 0\n\n  const compositeLabel =\n    label != null || description != null ? (\n      <>\n        {label}\n        {description != null && (\n          <span className={styles.description}>{description}</span>\n        )}\n      </>\n    ) : undefined\n\n  return (\n    <Box className={className} sx={sx}>\n      <MuiTextField\n        id={id}\n        variant=\"standard\"\n        label={compositeLabel}\n        fullWidth={fullWidth}\n        value={value}\n        sx={{\n          [`& .${inputBaseClasses.root}`]: {\n            // The theme default applies spacing(3) for the floating-label pattern (absolute\n            // positioned label). Our label is in document flow (position: relative), so it\n            // already occupies vertical space — no top margin needed on the input.\n            marginTop: 0,\n          },\n        }}\n        slotProps={{\n          ...slotProps,\n          htmlInput: {\n            maxLength: maxCharacterCount,\n            ...slotProps?.htmlInput,\n          },\n          inputLabel: {\n            className: styles.inputLabel,\n            ...slotProps?.inputLabel,\n          },\n          input: {\n            disableUnderline: true,\n            ...slotProps?.input,\n          },\n        }}\n        {...rest}\n      />\n      {maxCharacterCount !== undefined && (\n        <Typography variant=\"body2\" className={styles.charCount}>\n          {currentLength}/{maxCharacterCount}\n        </Typography>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AA4BA,SAAwB,EAAU,EAChC,gBACA,sBACA,cACA,IAAI,GACJ,UACA,eAAY,IACZ,cACA,OACA,UACA,GAAG,KACc;CACjB,IAAM,IAAc,GAAO,EACrB,IAAK,KAAU,GAEf,IAAgB,OAAO,KAAU,WAAW,EAAM,SAAS;AAYjE,QACE,kBAAC,GAAD;EAAgB;EAAe;YAA/B,CACE,kBAAC,GAAD;GACM;GACJ,SAAQ;GACR,OAdJ,KAAS,QAAQ,KAAe,OAC9B,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,KAAe,QACd,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAc;IAAmB,CAAA,CAE1D,EAAA,CAAA,GACD,KAAA;GAQW;GACJ;GACP,IAAI,GACD,MAAM,EAAiB,SAAS,EAI/B,WAAW,GACZ,EACF;GACD,WAAW;IACT,GAAG;IACH,WAAW;KACT,WAAW;KACX,GAAG,GAAW;KACf;IACD,YAAY;KACV,WAAW,EAAO;KAClB,GAAG,GAAW;KACf;IACD,OAAO;KACL,kBAAkB;KAClB,GAAG,GAAW;KACf;IACF;GACD,GAAI;GACJ,CAAA,EACD,MAAsB,KAAA,KACrB,kBAAC,GAAD;GAAY,SAAQ;GAAQ,WAAW,EAAO;aAA9C;IACG;IAAc;IAAE;IACN;KAEX"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  Box,\n  inputBaseClasses,\n  TextField as MuiTextField,\n  TextFieldProps as MuiTextFieldProps,\n  Typography,\n} from '@mui/material'\nimport styles from './TextField.module.scss'\nimport { ReactNode, useId } from 'react'\n\nexport type TextFieldProps = MuiTextFieldProps & {\n  /**\n   * Neutral supplementary text shown below the label and above the input (similar to an inline tooltip).\n   * Always rendered in a neutral color regardless of form state.\n   * For error or status messages, use `helperText` instead.\n   */\n  description?: ReactNode\n  maxCharacterCount?: number\n}\n\n/**\n * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.\n *\n * - `label`: Bold label text above the input. Changes color on focus/error/disabled states.\n * - `description`: Neutral supplementary text shown below the label, above the input. Always neutral color.\n * - `helperText`: Status or error message shown below the input. Color-reactive to form state.\n * - `maxCharacterCount`: Renders a character count indicator below the input and sets the `maxLength` on the input.\n */\nexport default function TextField({\n  description,\n  maxCharacterCount,\n  slotProps,\n  id: idProp,\n  label,\n  fullWidth = true,\n  className,\n  sx,\n  value,\n  ...rest\n}: TextFieldProps) {\n  const generatedId = useId()\n  const id = idProp ?? generatedId\n\n  const currentLength = typeof value === 'string' ? value.length : 0\n\n  const compositeLabel =\n    label != null || description != null ? (\n      <>\n        {label}\n        {description != null && (\n          <span className={styles.description}>{description}</span>\n        )}\n      </>\n    ) : undefined\n\n  return (\n    <Box className={className} sx={sx}>\n      <MuiTextField\n        id={id}\n        variant=\"standard\"\n        label={compositeLabel}\n        fullWidth={fullWidth}\n        value={value}\n        sx={{\n          [`& .${inputBaseClasses.root}`]: {\n            // The theme default applies spacing(3) for the floating-label pattern (absolute\n            // positioned label). Our label is in document flow (position: relative), so it\n            // already occupies vertical space — no top margin needed on the input.\n            marginTop: 0,\n          },\n        }}\n        slotProps={{\n          ...slotProps,\n          htmlInput: {\n            maxLength: maxCharacterCount,\n            ...slotProps?.htmlInput,\n          },\n          inputLabel: {\n            className: styles.inputLabel,\n            ...slotProps?.inputLabel,\n          },\n          input: {\n            disableUnderline: true,\n            ...slotProps?.input,\n          },\n        }}\n        {...rest}\n      />\n      {maxCharacterCount !== undefined && (\n        <Typography variant=\"body2\" className={styles.charCount}>\n          {currentLength}/{maxCharacterCount}\n        </Typography>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AA4BA,SAAwB,EAAU,EAChC,gBACA,sBACA,cACA,IAAI,GACJ,UACA,eAAY,IACZ,cACA,OACA,UACA,GAAG,KACc;CACjB,IAAM,IAAc,EAAM,GACpB,IAAK,KAAU,GAEf,IAAgB,OAAO,KAAU,WAAW,EAAM,SAAS;CAYjE,OACE,kBAAC,GAAD;EAAgB;EAAe;YAA/B,CACE,kBAAC,GAAD;GACM;GACJ,SAAQ;GACR,OAdJ,KAAS,QAAQ,KAAe,OAC9B,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,KAAe,QACd,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAc;GAAkB,CAAA,CAE1D,EAAA,CAAA,IACA,KAAA;GAQW;GACJ;GACP,IAAI,GACD,MAAM,EAAiB,SAAS,EAI/B,WAAW,EACb,EACF;GACA,WAAW;IACT,GAAG;IACH,WAAW;KACT,WAAW;KACX,GAAG,GAAW;IAChB;IACA,YAAY;KACV,WAAW,EAAO;KAClB,GAAG,GAAW;IAChB;IACA,OAAO;KACL,kBAAkB;KAClB,GAAG,GAAW;IAChB;GACF;GACA,GAAI;EACL,CAAA,GACA,MAAsB,KAAA,KACrB,kBAAC,GAAD;GAAY,SAAQ;GAAQ,WAAW,EAAO;aAA9C;IACG;IAAc;IAAE;GACP;IAEX;;AAET"}

package/dist/components/TextField/TextFieldWithWordLimit.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldWithWordLimit.js","names":[],"sources":["../../../src/components/TextField/TextFieldWithWordLimit.tsx"],"sourcesContent":["import {\n  Box,\n  FormControl,\n  Input,\n  InputLabel,\n  InputProps,\n  Typography,\n} from '@mui/material'\nimport FormHelperText from '@mui/material/FormHelperText'\nimport { ChangeEvent, ReactNode, useId, useState } from 'react'\n\n// TODO: In MUI v6, use TextFieldProps and only add `minWords` and `maxWords`.\nexport type TextFieldWithWordLimitProps = InputProps & {\n  label?: ReactNode\n  helperText?: ReactNode\n  minWords?: number\n  maxWords?: number\n}\n\nexport function getWordCount(s: string) {\n  return (\n    s\n      .trim()\n      .split(/\\W+/)\n      // remove empty string(s)\n      .filter(s => !!s).length\n  )\n}\n\nfunction DisplayedWordCount(props: {\n  maxWords?: number\n  minWords?: number\n  wordCount: number\n}) {\n  const { wordCount, maxWords, minWords } = props\n\n  let color = 'grey.700'\n  if (\n    wordCount > 0 &&\n    ((minWords != null && wordCount < minWords) ||\n      (maxWords != null && wordCount > maxWords))\n  ) {\n    color = 'error.main'\n  } else if (wordCount > 0) {\n    color = 'success.main'\n  }\n\n  let wordCountText = `${wordCount.toLocaleString()}`\n  if (maxWords) {\n    wordCountText += ` of ${maxWords.toLocaleString()}`\n  }\n  wordCountText += ' words'\n  if (minWords) {\n    wordCountText += ` (min. ${minWords.toLocaleString()})`\n  }\n\n  return (\n    <Typography component={'div'} variant={'smallText1'} sx={{ color: color }}>\n      {wordCountText}\n    </Typography>\n  )\n}\n\n/**\n * Wrapper around MUI input components that displays the word count of the input. The appearance of the word count changes\n * based on the validity of the current input.\n * @param props\n * @constructor\n */\nexport default function TextFieldWithWordLimit(\n  props: TextFieldWithWordLimitProps,\n) {\n  const { minWords, maxWords, label, helperText, ...inputProps } = props\n  const { value, onChange } = inputProps\n\n  const generatedId = useId()\n  const id = props.id ?? generatedId\n\n  const helperTextId = id + '-helperText'\n\n  const [trackedWordCount, setTrackedWordCount] = useState(0)\n\n  const wordCount =\n    typeof value === 'string' ? getWordCount(value) : trackedWordCount\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value\n    setTrackedWordCount(getWordCount(newValue))\n    onChange?.(event)\n  }\n\n  const inputLabelWithWordCount = (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'baseline',\n        width: '100%',\n      }}\n    >\n      <InputLabel sx={{ position: 'static' }} htmlFor={id}>\n        {label}\n      </InputLabel>\n      <DisplayedWordCount\n        wordCount={wordCount}\n        minWords={minWords}\n        maxWords={maxWords}\n      />\n    </Box>\n  )\n\n  // TODO: In MUI v6, use MUI TextField and override slots.inputLabel with inputLabelWithWordCount.\n  return (\n    <FormControl required={props.required} fullWidth={props.fullWidth}>\n      {inputLabelWithWordCount}\n      <Input\n        {...inputProps}\n        aria-describedby={helperTextId}\n        id={id}\n        onChange={handleChange}\n      />\n      <FormHelperText id={helperTextId}>{props.helperText}</FormHelperText>\n    </FormControl>\n  )\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAa,GAAW;AACtC,QACE,EACG,MAAM,CACN,MAAM,MAAM,CAEZ,QAAO,MAAK,CAAC,CAAC,EAAE,CAAC;;AAIxB,SAAS,EAAmB,GAIzB;CACD,IAAM,EAAE,cAAW,aAAU,gBAAa,GAEtC,IAAQ;AACZ,CACE,IAAY,MACV,KAAY,QAAQ,IAAY,KAC/B,KAAY,QAAQ,IAAY,KAEnC,IAAQ,eACC,IAAY,MACrB,IAAQ;CAGV,IAAI,IAAgB,GAAG,EAAU,gBAAgB;AASjD,QARI,MACF,KAAiB,OAAO,EAAS,gBAAgB,KAEnD,KAAiB,UACb,MACF,KAAiB,UAAU,EAAS,gBAAgB,CAAC,KAIrD,kBAAC,GAAD;EAAY,WAAW;EAAO,SAAS;EAAc,IAAI,EAAS,UAAO;YACtE;EACU,CAAA;;AAUjB,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,aAAU,aAAU,UAAO,eAAY,GAAG,MAAe,GAC3D,EAAE,UAAO,gBAAa,GAEtB,IAAc,GAAO,EACrB,IAAK,EAAM,MAAM,GAEjB,IAAe,IAAK,eAEpB,CAAC,GAAkB,KAAuB,EAAS,EAAE,EAErD,IACJ,OAAO,KAAU,WAAW,EAAa,EAAM,GAAG,GAE9C,KAAgB,MAAyC;EAC7D,IAAM,IAAW,EAAM,OAAO;AAE9B,EADA,EAAoB,EAAa,EAAS,CAAC,EAC3C,IAAW,EAAM;IAGb,IACJ,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,OAAO;GACR;YANH,CAQE,kBAAC,GAAD;GAAY,IAAI,EAAE,UAAU,UAAU;GAAE,SAAS;aAC9C;GACU,CAAA,EACb,kBAAC,GAAD;GACa;GACD;GACA;GACV,CAAA,CACE;;AAIR,QACE,kBAAC,GAAD;EAAa,UAAU,EAAM;EAAU,WAAW,EAAM;YAAxD;GACG;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,oBAAkB;IACd;IACJ,UAAU;IACV,CAAA;GACF,kBAAC,GAAD;IAAgB,IAAI;cAAe,EAAM;IAA4B,CAAA;GACzD"}
+{"version":3,"file":"TextFieldWithWordLimit.js","names":[],"sources":["../../../src/components/TextField/TextFieldWithWordLimit.tsx"],"sourcesContent":["import {\n  Box,\n  FormControl,\n  Input,\n  InputLabel,\n  InputProps,\n  Typography,\n} from '@mui/material'\nimport FormHelperText from '@mui/material/FormHelperText'\nimport { ChangeEvent, ReactNode, useId, useState } from 'react'\n\n// TODO: In MUI v6, use TextFieldProps and only add `minWords` and `maxWords`.\nexport type TextFieldWithWordLimitProps = InputProps & {\n  label?: ReactNode\n  helperText?: ReactNode\n  minWords?: number\n  maxWords?: number\n}\n\nexport function getWordCount(s: string) {\n  return (\n    s\n      .trim()\n      .split(/\\W+/)\n      // remove empty string(s)\n      .filter(s => !!s).length\n  )\n}\n\nfunction DisplayedWordCount(props: {\n  maxWords?: number\n  minWords?: number\n  wordCount: number\n}) {\n  const { wordCount, maxWords, minWords } = props\n\n  let color = 'grey.700'\n  if (\n    wordCount > 0 &&\n    ((minWords != null && wordCount < minWords) ||\n      (maxWords != null && wordCount > maxWords))\n  ) {\n    color = 'error.main'\n  } else if (wordCount > 0) {\n    color = 'success.main'\n  }\n\n  let wordCountText = `${wordCount.toLocaleString()}`\n  if (maxWords) {\n    wordCountText += ` of ${maxWords.toLocaleString()}`\n  }\n  wordCountText += ' words'\n  if (minWords) {\n    wordCountText += ` (min. ${minWords.toLocaleString()})`\n  }\n\n  return (\n    <Typography component={'div'} variant={'smallText1'} sx={{ color: color }}>\n      {wordCountText}\n    </Typography>\n  )\n}\n\n/**\n * Wrapper around MUI input components that displays the word count of the input. The appearance of the word count changes\n * based on the validity of the current input.\n * @param props\n * @constructor\n */\nexport default function TextFieldWithWordLimit(\n  props: TextFieldWithWordLimitProps,\n) {\n  const { minWords, maxWords, label, helperText, ...inputProps } = props\n  const { value, onChange } = inputProps\n\n  const generatedId = useId()\n  const id = props.id ?? generatedId\n\n  const helperTextId = id + '-helperText'\n\n  const [trackedWordCount, setTrackedWordCount] = useState(0)\n\n  const wordCount =\n    typeof value === 'string' ? getWordCount(value) : trackedWordCount\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value\n    setTrackedWordCount(getWordCount(newValue))\n    onChange?.(event)\n  }\n\n  const inputLabelWithWordCount = (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'baseline',\n        width: '100%',\n      }}\n    >\n      <InputLabel sx={{ position: 'static' }} htmlFor={id}>\n        {label}\n      </InputLabel>\n      <DisplayedWordCount\n        wordCount={wordCount}\n        minWords={minWords}\n        maxWords={maxWords}\n      />\n    </Box>\n  )\n\n  // TODO: In MUI v6, use MUI TextField and override slots.inputLabel with inputLabelWithWordCount.\n  return (\n    <FormControl required={props.required} fullWidth={props.fullWidth}>\n      {inputLabelWithWordCount}\n      <Input\n        {...inputProps}\n        aria-describedby={helperTextId}\n        id={id}\n        onChange={handleChange}\n      />\n      <FormHelperText id={helperTextId}>{props.helperText}</FormHelperText>\n    </FormControl>\n  )\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAa,GAAW;CACtC,OACE,EACG,KAAK,EACL,MAAM,KAAK,EAEX,QAAO,MAAK,CAAC,CAAC,CAAC,EAAE;AAExB;AAEA,SAAS,EAAmB,GAIzB;CACD,IAAM,EAAE,cAAW,aAAU,gBAAa,GAEtC,IAAQ;CACZ,AACE,IAAY,MACV,KAAY,QAAQ,IAAY,KAC/B,KAAY,QAAQ,IAAY,KAEnC,IAAQ,eACC,IAAY,MACrB,IAAQ;CAGV,IAAI,IAAgB,GAAG,EAAU,eAAe;CAShD,OARI,MACF,KAAiB,OAAO,EAAS,eAAe,MAElD,KAAiB,UACb,MACF,KAAiB,UAAU,EAAS,eAAe,EAAE,KAIrD,kBAAC,GAAD;EAAY,WAAW;EAAO,SAAS;EAAc,IAAI,EAAS,SAAM;YACrE;CACS,CAAA;AAEhB;AAQA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,aAAU,aAAU,UAAO,eAAY,GAAG,MAAe,GAC3D,EAAE,UAAO,gBAAa,GAEtB,IAAc,EAAM,GACpB,IAAK,EAAM,MAAM,GAEjB,IAAe,IAAK,eAEpB,CAAC,GAAkB,KAAuB,EAAS,CAAC,GAEpD,IACJ,OAAO,KAAU,WAAW,EAAa,CAAK,IAAI,GAE9C,KAAgB,MAAyC;EAC7D,IAAM,IAAW,EAAM,OAAO;EAE9B,AADA,EAAoB,EAAa,CAAQ,CAAC,GAC1C,IAAW,CAAK;CAClB,GAEM,IACJ,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,OAAO;EACT;YANF,CAQE,kBAAC,GAAD;GAAY,IAAI,EAAE,UAAU,SAAS;GAAG,SAAS;aAC9C;EACS,CAAA,GACZ,kBAAC,GAAD;GACa;GACD;GACA;EACX,CAAA,CACE;;CAIP,OACE,kBAAC,GAAD;EAAa,UAAU,EAAM;EAAU,WAAW,EAAM;YAAxD;GACG;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,oBAAkB;IACd;IACJ,UAAU;GACX,CAAA;GACD,kBAAC,GAAD;IAAgB,IAAI;cAAe,EAAM;GAA2B,CAAA;EACzD;;AAEjB"}

package/dist/components/TextToComponentCollapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextToComponentCollapse.js","names":[],"sources":["../../src/components/TextToComponentCollapse.tsx"],"sourcesContent":["import { SxProps, Typography, TypographyOwnProps } from '@mui/material'\nimport { PropsWithChildren } from 'react'\nimport ComponentCollapse from './ComponentCollapse'\n\nexport type TextToComponentCollapseProps = PropsWithChildren<{\n  text: string\n  defaultVisible?: boolean // default to false (collapsed)\n  textVariant?: TypographyOwnProps['variant']\n  textSx?: SxProps\n  textContainerSx?: SxProps\n  collapseBoxSx?: SxProps\n  iconSx?: SxProps\n}>\n\n/**\n * Wrap any child components in a collapse, using a Typography as the trigger\n */\nexport default function TextToComponentCollapse({\n  text,\n  defaultVisible,\n  textVariant = 'smallLink',\n  textSx,\n  textContainerSx,\n  collapseBoxSx,\n  iconSx,\n  children,\n}: TextToComponentCollapseProps) {\n  return (\n    <ComponentCollapse\n      component={\n        <Typography variant={textVariant} sx={textSx}>\n          {text}\n        </Typography>\n      }\n      componentContainerSx={textContainerSx}\n      defaultVisible={defaultVisible}\n      collapseBoxSx={collapseBoxSx}\n      iconSx={iconSx}\n    >\n      {children}\n    </ComponentCollapse>\n  )\n}\n"],"mappings":";;;;AAiBA,SAAwB,EAAwB,EAC9C,SACA,mBACA,iBAAc,aACd,WACA,oBACA,kBACA,WACA,eAC+B;AAC/B,QACE,kBAAC,GAAD;EACE,WACE,kBAAC,GAAD;GAAY,SAAS;GAAa,IAAI;aACnC;GACU,CAAA;EAEf,sBAAsB;EACN;EACD;EACP;EAEP;EACiB,CAAA"}
+{"version":3,"file":"TextToComponentCollapse.js","names":[],"sources":["../../src/components/TextToComponentCollapse.tsx"],"sourcesContent":["import { SxProps, Typography, TypographyOwnProps } from '@mui/material'\nimport { PropsWithChildren } from 'react'\nimport ComponentCollapse from './ComponentCollapse'\n\nexport type TextToComponentCollapseProps = PropsWithChildren<{\n  text: string\n  defaultVisible?: boolean // default to false (collapsed)\n  textVariant?: TypographyOwnProps['variant']\n  textSx?: SxProps\n  textContainerSx?: SxProps\n  collapseBoxSx?: SxProps\n  iconSx?: SxProps\n}>\n\n/**\n * Wrap any child components in a collapse, using a Typography as the trigger\n */\nexport default function TextToComponentCollapse({\n  text,\n  defaultVisible,\n  textVariant = 'smallLink',\n  textSx,\n  textContainerSx,\n  collapseBoxSx,\n  iconSx,\n  children,\n}: TextToComponentCollapseProps) {\n  return (\n    <ComponentCollapse\n      component={\n        <Typography variant={textVariant} sx={textSx}>\n          {text}\n        </Typography>\n      }\n      componentContainerSx={textContainerSx}\n      defaultVisible={defaultVisible}\n      collapseBoxSx={collapseBoxSx}\n      iconSx={iconSx}\n    >\n      {children}\n    </ComponentCollapse>\n  )\n}\n"],"mappings":";;;;AAiBA,SAAwB,EAAwB,EAC9C,SACA,mBACA,iBAAc,aACd,WACA,oBACA,kBACA,WACA,eAC+B;CAC/B,OACE,kBAAC,GAAD;EACE,WACE,kBAAC,GAAD;GAAY,SAAS;GAAa,IAAI;aACnC;EACS,CAAA;EAEd,sBAAsB;EACN;EACD;EACP;EAEP;CACgB,CAAA;AAEvB"}

package/dist/components/ThemeGallery/ThemeGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeGallery.js","names":[],"sources":["../../../src/components/ThemeGallery/ThemeGallery.tsx"],"sourcesContent":["const COLOR_VARS = [\n  /* Primary Palette */\n  '--synapse-primary-action-color',\n  '--synapse-primary-focus-border',\n  '--synapse-primary-focus-shadow',\n  '--synapse-primary-active',\n  '--synapse-primary-100',\n  '--synapse-primary-200',\n  '--synapse-primary-300',\n  '--synapse-primary-400',\n  '--synapse-primary-500',\n  '--synapse-primary-600',\n  '--synapse-primary-700',\n  '--synapse-primary-800',\n  '--synapse-primary-900',\n\n  /* Secondary Palette */\n  '--synapse-secondary-action-color',\n  '--synapse-secondary-200-hover',\n  '--synapse-secondary-100',\n  '--synapse-secondary-200',\n  '--synapse-secondary-300',\n  '--synapse-secondary-400',\n  '--synapse-secondary-500',\n  '--synapse-secondary-600',\n  '--synapse-secondary-700',\n  '--synapse-secondary-800',\n  '--synapse-secondary-900',\n\n  /* Tertiary Palette */\n  '--synapse-tertiary-action-color',\n  '--synapse-tertiary-100',\n  '--synapse-tertiary-200',\n  '--synapse-tertiary-300',\n  '--synapse-tertiary-400',\n  '--synapse-tertiary-500',\n  '--synapse-tertiary-600',\n  '--synapse-tertiary-700',\n  '--synapse-tertiary-800',\n  '--synapse-tertiary-900',\n\n  /* Alpha Variants */\n  '--synapse-primary-action-color-alpha-4',\n  '--synapse-primary-action-color-alpha-10',\n  '--synapse-primary-alpha-05',\n  '--synapse-primary-alpha-08',\n  '--synapse-secondary-action-color-alpha-10',\n  '--synapse-secondary-action-color-alpha-20',\n  '--synapse-secondary-action-color-alpha-50',\n\n  /* Status Colors */\n  '--synapse-info',\n  '--synapse-success',\n  '--synapse-warning',\n  '--synapse-error',\n  '--synapse-green-affirmative',\n  '--synapse-yellow-warning',\n  '--synapse-red-delete',\n  '--synapse-red-required',\n\n  /* Grays */\n  '--synapse-white',\n  '--synapse-black',\n  '--synapse-gray-100',\n  '--synapse-gray-200',\n  '--synapse-gray-300',\n  '--synapse-gray-400',\n  '--synapse-gray-500',\n  '--synapse-gray-600',\n  '--synapse-gray-700',\n  '--synapse-gray-800',\n  '--synapse-gray-900',\n  '--synapse-gray-1000',\n  '--synapse-dark-gray',\n  '--synapse-gray-dark',\n  '--synapse-gray-light',\n\n  /* UI Specific */\n  '--synapse-link-underline-color',\n  '--synapse-text-color-dark',\n  '--synapse-text-color-disabled',\n  '--synapse-active-tab-text',\n  '--synapse-inactive-tab-text',\n  '--synapse-dropdown-disabled-text',\n]\n\nexport const ThemeGallery = () => {\n  return (\n    <div\n      style={{\n        padding: '20px',\n      }}\n    >\n      <h3>Theme Gallery</h3>\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',\n          gap: '20px',\n          marginTop: '20px',\n        }}\n      >\n        {COLOR_VARS.map(v => (\n          <div\n            key={v}\n            style={{\n              border: '1px solid #ddd',\n              padding: '10px',\n              borderRadius: '8px',\n            }}\n          >\n            <div\n              style={{\n                backgroundColor: `var(${v})`,\n                height: '50px',\n                borderRadius: '4px',\n                border: '1px solid #eee',\n              }}\n            />\n            <code\n              style={{ fontSize: '12px', display: 'block', marginTop: '8px' }}\n            >\n              {v}\n            </code>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;AAAA,IAAM,IAAa,+sDAoFlB,EAEY,UAET,kBAAC,OAAD;CACE,OAAO,EACL,SAAS,QACV;WAHH,CAKE,kBAAC,MAAD,EAAA,UAAI,iBAAkB,CAAA,EACtB,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,qBAAqB;GACrB,KAAK;GACL,WAAW;GACZ;YAEA,EAAW,KAAI,MACd,kBAAC,OAAD;GAEE,OAAO;IACL,QAAQ;IACR,SAAS;IACT,cAAc;IACf;aANH,CAQE,kBAAC,OAAD,EACE,OAAO;IACL,iBAAiB,OAAO,EAAE;IAC1B,QAAQ;IACR,cAAc;IACd,QAAQ;IACT,EACD,CAAA,EACF,kBAAC,QAAD;IACE,OAAO;KAAE,UAAU;KAAQ,SAAS;KAAS,WAAW;KAAO;cAE9D;IACI,CAAA,CACH;KApBC,EAoBD,CACN;EACE,CAAA,CACF"}
+{"version":3,"file":"ThemeGallery.js","names":[],"sources":["../../../src/components/ThemeGallery/ThemeGallery.tsx"],"sourcesContent":["const COLOR_VARS = [\n  /* Primary Palette */\n  '--synapse-primary-action-color',\n  '--synapse-primary-focus-border',\n  '--synapse-primary-focus-shadow',\n  '--synapse-primary-active',\n  '--synapse-primary-100',\n  '--synapse-primary-200',\n  '--synapse-primary-300',\n  '--synapse-primary-400',\n  '--synapse-primary-500',\n  '--synapse-primary-600',\n  '--synapse-primary-700',\n  '--synapse-primary-800',\n  '--synapse-primary-900',\n\n  /* Secondary Palette */\n  '--synapse-secondary-action-color',\n  '--synapse-secondary-200-hover',\n  '--synapse-secondary-100',\n  '--synapse-secondary-200',\n  '--synapse-secondary-300',\n  '--synapse-secondary-400',\n  '--synapse-secondary-500',\n  '--synapse-secondary-600',\n  '--synapse-secondary-700',\n  '--synapse-secondary-800',\n  '--synapse-secondary-900',\n\n  /* Tertiary Palette */\n  '--synapse-tertiary-action-color',\n  '--synapse-tertiary-100',\n  '--synapse-tertiary-200',\n  '--synapse-tertiary-300',\n  '--synapse-tertiary-400',\n  '--synapse-tertiary-500',\n  '--synapse-tertiary-600',\n  '--synapse-tertiary-700',\n  '--synapse-tertiary-800',\n  '--synapse-tertiary-900',\n\n  /* Alpha Variants */\n  '--synapse-primary-action-color-alpha-4',\n  '--synapse-primary-action-color-alpha-10',\n  '--synapse-primary-alpha-05',\n  '--synapse-primary-alpha-08',\n  '--synapse-secondary-action-color-alpha-10',\n  '--synapse-secondary-action-color-alpha-20',\n  '--synapse-secondary-action-color-alpha-50',\n\n  /* Status Colors */\n  '--synapse-info',\n  '--synapse-success',\n  '--synapse-warning',\n  '--synapse-error',\n  '--synapse-green-affirmative',\n  '--synapse-yellow-warning',\n  '--synapse-red-delete',\n  '--synapse-red-required',\n\n  /* Grays */\n  '--synapse-white',\n  '--synapse-black',\n  '--synapse-gray-100',\n  '--synapse-gray-200',\n  '--synapse-gray-300',\n  '--synapse-gray-400',\n  '--synapse-gray-500',\n  '--synapse-gray-600',\n  '--synapse-gray-700',\n  '--synapse-gray-800',\n  '--synapse-gray-900',\n  '--synapse-gray-1000',\n  '--synapse-dark-gray',\n  '--synapse-gray-dark',\n  '--synapse-gray-light',\n\n  /* UI Specific */\n  '--synapse-link-underline-color',\n  '--synapse-text-color-dark',\n  '--synapse-text-color-disabled',\n  '--synapse-active-tab-text',\n  '--synapse-inactive-tab-text',\n  '--synapse-dropdown-disabled-text',\n]\n\nexport const ThemeGallery = () => {\n  return (\n    <div\n      style={{\n        padding: '20px',\n      }}\n    >\n      <h3>Theme Gallery</h3>\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',\n          gap: '20px',\n          marginTop: '20px',\n        }}\n      >\n        {COLOR_VARS.map(v => (\n          <div\n            key={v}\n            style={{\n              border: '1px solid #ddd',\n              padding: '10px',\n              borderRadius: '8px',\n            }}\n          >\n            <div\n              style={{\n                backgroundColor: `var(${v})`,\n                height: '50px',\n                borderRadius: '4px',\n                border: '1px solid #eee',\n              }}\n            />\n            <code\n              style={{ fontSize: '12px', display: 'block', marginTop: '8px' }}\n            >\n              {v}\n            </code>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;AAAA,IAAM,IAAa,8sDAoFnB,GAEa,UAET,kBAAC,OAAD;CACE,OAAO,EACL,SAAS,OACX;WAHF,CAKE,kBAAC,MAAD,EAAA,UAAI,gBAAiB,CAAA,GACrB,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,qBAAqB;GACrB,KAAK;GACL,WAAW;EACb;YAEC,EAAW,KAAI,MACd,kBAAC,OAAD;GAEE,OAAO;IACL,QAAQ;IACR,SAAS;IACT,cAAc;GAChB;aANF,CAQE,kBAAC,OAAD,EACE,OAAO;IACL,iBAAiB,OAAO,EAAE;IAC1B,QAAQ;IACR,cAAc;IACd,QAAQ;GACV,EACD,CAAA,GACD,kBAAC,QAAD;IACE,OAAO;KAAE,UAAU;KAAQ,SAAS;KAAS,WAAW;IAAM;cAE7D;GACG,CAAA,CACH;KApBE,CAoBF,CACN;CACE,CAAA,CACF"}

package/dist/components/TimelinePlot/TimelineLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineLegendItem.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelineLegendItem.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '@mui/system'\nimport { Typography } from '@mui/material'\n\ntype TimelineLegendItemProps = {\n  color: string\n  phaseName: string | null\n}\nconst TimelineLegendItem = ({\n  color,\n  phaseName,\n}: TimelineLegendItemProps): React.ReactNode => {\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: '7px' }}>\n      <Box\n        sx={{\n          backgroundColor: color,\n          width: '20px',\n          height: '20px',\n        }}\n      />\n      <Typography variant=\"body1\">{phaseName?.toUpperCase()}</Typography>\n    </Box>\n  )\n}\n\nexport default TimelineLegendItem\n"],"mappings":";;;;;AAQA,IAAM,KAAsB,EAC1B,UACA,mBAGE,kBAAC,GAAD;CAAK,IAAI;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;EAAO;WAA9D,CACE,kBAAC,GAAD,EACE,IAAI;EACF,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACT,EACD,CAAA,EACF,kBAAC,GAAD;EAAY,SAAQ;YAAS,GAAW,aAAa;EAAc,CAAA,CAC/D"}
+{"version":3,"file":"TimelineLegendItem.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelineLegendItem.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '@mui/system'\nimport { Typography } from '@mui/material'\n\ntype TimelineLegendItemProps = {\n  color: string\n  phaseName: string | null\n}\nconst TimelineLegendItem = ({\n  color,\n  phaseName,\n}: TimelineLegendItemProps): React.ReactNode => {\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: '7px' }}>\n      <Box\n        sx={{\n          backgroundColor: color,\n          width: '20px',\n          height: '20px',\n        }}\n      />\n      <Typography variant=\"body1\">{phaseName?.toUpperCase()}</Typography>\n    </Box>\n  )\n}\n\nexport default TimelineLegendItem\n"],"mappings":";;;;;AAQA,IAAM,KAAsB,EAC1B,UACA,mBAGE,kBAAC,GAAD;CAAK,IAAI;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;CAAM;WAA7D,CACE,kBAAC,GAAD,EACE,IAAI;EACF,iBAAiB;EACjB,OAAO;EACP,QAAQ;CACV,EACD,CAAA,GACD,kBAAC,GAAD;EAAY,SAAQ;YAAS,GAAW,YAAY;CAAc,CAAA,CAC/D"}

package/dist/components/TimelinePlot/TimelinePhase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelinePhase.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePhase.tsx"],"sourcesContent":["import React from 'react'\nimport { OBSERVATION_CARD } from '@/utils/SynapseConstants'\nimport { Dialog, DialogContent } from '@mui/material'\nimport {\n  ColumnSingleValueFilterOperator,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs, { ManipulateType } from 'dayjs'\nimport Plotly, { Layout, PlotData } from 'plotly.js-basic-dist'\nimport { useMemo, useRef, useState } from 'react'\nimport CardContainerLogic from '../CardContainerLogic'\nimport Plot from '../Plot/Plot'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\n\ntype TimepointData = {\n  timepoints: dayjs.Dayjs[]\n  hoverOverIndex: number\n}\n\nconst getTimepointData = (\n  start: dayjs.Dayjs,\n  rowData: Row[],\n  schema: ObservationCardSchema,\n  hoverEventRowId?: number, //if supplied, will return the index of this row\n): TimepointData => {\n  let hoverOverIndex = -1\n  const timepoints = rowData.map((row, index) => {\n    const time = parseFloat(row.values[schema.observationTime]!)\n    const timeUnit = row.values[schema.observationTimeUnits]\n    if (row.rowId == hoverEventRowId) {\n      hoverOverIndex = index\n    }\n    return start.add(time, timeUnit as ManipulateType)\n  })\n  return {\n    timepoints,\n    hoverOverIndex,\n  }\n}\n\nexport const getMaxDate = (timepoints: dayjs.Dayjs[]) => {\n  if (timepoints.length == 0) {\n    return dayjs().add(1, 'days')\n  }\n  return timepoints.reduce(\n    (maxDateItem: dayjs.Dayjs, currentDateItem: dayjs.Dayjs) => {\n      if (!maxDateItem || currentDateItem.isAfter(maxDateItem)) {\n        return currentDateItem\n      }\n      return maxDateItem\n    },\n  )\n}\n\nconst getTimelineData = (timepointData: TimepointData, rowData: Row[]) => {\n  // If this phase has no data, return an empty data line\n  if (\n    timepointData.timepoints == undefined ||\n    timepointData.timepoints.length == 0\n  ) {\n    return [\n      {\n        x: [dayjs().format()],\n        y: [0.5],\n        mode: 'lines',\n        line: {\n          color: 'blue',\n          width: 2,\n        },\n        customdata: [],\n        hoverinfo: 'none',\n      },\n    ]\n  }\n\n  // first combine all of the Rows that share the same timepoint\n  const combinedData: Record<string, Row[]> = timepointData.timepoints.reduce(\n    (result, currentTimepoint, index) => {\n      const resultRecord = result as Record<string, Row[]>\n      if (!resultRecord[currentTimepoint.format()]) {\n        resultRecord[currentTimepoint.format()] = []\n      }\n      resultRecord[currentTimepoint.format()].push(rowData[index])\n      return result\n    },\n    {},\n  )\n\n  const data = timepointData.timepoints.map((timepoint, index) => {\n    const utcFormattedTimepoint = timepoint.format()\n    const isHoveredOver = index == timepointData.hoverOverIndex\n    const rows = combinedData[utcFormattedTimepoint]\n    const rowIds = rows.map(row => {\n      return row.rowId\n    })\n    return {\n      x: [utcFormattedTimepoint, utcFormattedTimepoint, utcFormattedTimepoint],\n      y: [0, 0.5, 1],\n      mode: 'lines',\n      line: {\n        color: isHoveredOver ? 'black' : 'gray',\n        width: isHoveredOver ? 2 : 1,\n      },\n      // Add event into in the customdata\n      customdata: [rowIds, rowIds, rowIds],\n      // but tell Plotly that we do not want it to show a hover tooltip (we're going to handle this)\n      hoverinfo: 'none',\n    }\n  })\n  return data\n}\n\nconst getLayout = (\n  start: dayjs.Dayjs,\n  end: dayjs.Dayjs,\n  color: string,\n  timelineData: Plotly.Data[],\n  rowData: Row[],\n  schema: ObservationCardSchema,\n): Partial<Layout> => {\n  const xTickVals = timelineData.map(value => {\n    // return the utcFormattedTimepoint\n    return (value as PlotData).x[0]\n  })\n  const xTickText = timelineData.map(value => {\n    const rowIds = (value as PlotData).customdata[0] as number[] | undefined\n    if (rowIds && rowIds.length > 0) {\n      const count = rowIds.length\n      const rows = rowData?.filter(row => {\n        return rowIds[0] == row.rowId\n      })\n      if (rows && rows.length > 0) {\n        const row = rows[0]\n        const time = parseFloat(row.values[schema.observationTime]!)\n        const timeUnits = row.values[\n          schema.observationTimeUnits\n        ] as ManipulateType\n        const countString = count > 1 ? `(${count})` : ''\n        return `${time} ${timeUnits} ${countString}`\n      }\n    }\n    return ''\n  })\n\n  return {\n    hovermode: 'closest',\n    dragmode: false, //disallow interaction\n    showlegend: false,\n    xaxis: {\n      showgrid: false,\n      showticklabels: true,\n      showline: false,\n      zeroline: false,\n      tickvals: xTickVals,\n      ticktext: xTickText,\n      tickangle: -45,\n    },\n\n    yaxis: {\n      range: [0, 1.25],\n      showgrid: false,\n      zeroline: false,\n      showline: false,\n      showticklabels: false,\n    },\n    // Each phase has a shape\n    shapes: [\n      {\n        type: 'rect',\n        x0: start.subtract(end.diff(start) / 10).format(), // add 10% to the left side of the graph\n        x1: end.add(end.diff(start) / 3).format(), // add 33% to right side of the graph\n        y0: 0.25,\n        y1: 0.75,\n        fillcolor: color,\n        opacity: 0.8,\n        line: {\n          width: 0,\n        },\n      },\n    ],\n    margin: {\n      l: 0,\n      r: 0,\n      t: 60,\n      b: 60,\n    },\n    // autosize: false,\n  }\n}\n\ntype TimelinePhaseProps = {\n  name: string\n  color: string\n  rowData: Row[]\n  schema: ObservationCardSchema\n  widthPx: number\n  sql: string\n}\n\nconst TimelinePhase = ({\n  color,\n  rowData,\n  schema,\n  widthPx,\n  sql,\n}: TimelinePhaseProps): React.ReactNode => {\n  const [clickEvent, setClickEvent] = useState<Plotly.PlotMouseEvent>()\n  const [hoverEvent, setHoverEvent] = useState<Plotly.PlotHoverEvent>()\n  const [plotKey, setPlotKey] = useState(1)\n  const start = dayjs()\n  // hide the hover UI if we detect that the user moves the mouse outside of this component boundary\n  const componentRef = useRef<HTMLDivElement>(null)\n  const rowIds = clickEvent?.points[0].customdata as unknown as (\n    | number\n    | undefined\n  )[]\n  const selectedRows = rowData?.filter(row => {\n    return rowIds?.includes(row.rowId)\n  })\n\n  const hoverEventRowIds = hoverEvent?.points[0].customdata as unknown as (\n    | number\n    | undefined\n  )[]\n\n  const timepointData = useMemo(() => {\n    return getTimepointData(\n      start,\n      rowData,\n      schema,\n      hoverEventRowIds?.length > 0 ? hoverEventRowIds[0] : undefined,\n    )\n  }, [hoverEventRowIds, rowData, schema, start])\n\n  const end = getMaxDate(timepointData.timepoints)\n\n  const timelineData = useMemo(() => {\n    return getTimelineData(timepointData, rowData)\n  }, [timepointData, rowData])\n\n  const selectedRowIds = selectedRows.map(row => row.rowId!)\n\n  return (\n    <div ref={componentRef} style={{ width: widthPx }}>\n      <Plot\n        key={`Plot-${color}-${plotKey}`}\n        style={{ width: widthPx, height: '220px' }}\n        data={timelineData}\n        layout={getLayout(start, end, color, timelineData, rowData, schema)}\n        config={{ displayModeBar: false }}\n        useResizeHandler={true}\n        onClick={eventData => {\n          setClickEvent(eventData)\n          setHoverEvent(undefined)\n        }}\n        // PORTALS-2861: To avoid the plot handling the double-click, change the key so the Plotly graph (gd) associated\n        // to the click event is invalid.\n        onDoubleClick={() => {\n          setPlotKey(plotKey + 1)\n        }}\n        onHover={eventData => {\n          setHoverEvent(eventData)\n        }}\n        onUnhover={() => {\n          setHoverEvent(undefined)\n        }}\n      />\n      <Dialog\n        onClose={() => setClickEvent(undefined)}\n        open={selectedRows && selectedRows.length > 0}\n      >\n        <DialogContent>\n          <CardContainerLogic\n            topLevelEnumeratedFacetToFilter={{ columnName: 'observationType' }}\n            sql={sql}\n            searchParams={{ ['ROW_ID']: selectedRowIds.map(String).join(',') }}\n            sqlOperator={ColumnSingleValueFilterOperator.IN}\n            lockedColumn={{ columnName: 'ROW_ID' }}\n            cardConfiguration={{ type: OBSERVATION_CARD }}\n            initialLimit={3}\n          />\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n\nexport default TimelinePhase\n"],"mappings":"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"}
+{"version":3,"file":"TimelinePhase.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePhase.tsx"],"sourcesContent":["import React from 'react'\nimport { OBSERVATION_CARD } from '@/utils/SynapseConstants'\nimport { Dialog, DialogContent } from '@mui/material'\nimport {\n  ColumnSingleValueFilterOperator,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs, { ManipulateType } from 'dayjs'\nimport Plotly, { Layout, PlotData } from 'plotly.js-basic-dist'\nimport { useMemo, useRef, useState } from 'react'\nimport CardContainerLogic from '../CardContainerLogic'\nimport Plot from '../Plot/Plot'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\n\ntype TimepointData = {\n  timepoints: dayjs.Dayjs[]\n  hoverOverIndex: number\n}\n\nconst getTimepointData = (\n  start: dayjs.Dayjs,\n  rowData: Row[],\n  schema: ObservationCardSchema,\n  hoverEventRowId?: number, //if supplied, will return the index of this row\n): TimepointData => {\n  let hoverOverIndex = -1\n  const timepoints = rowData.map((row, index) => {\n    const time = parseFloat(row.values[schema.observationTime]!)\n    const timeUnit = row.values[schema.observationTimeUnits]\n    if (row.rowId == hoverEventRowId) {\n      hoverOverIndex = index\n    }\n    return start.add(time, timeUnit as ManipulateType)\n  })\n  return {\n    timepoints,\n    hoverOverIndex,\n  }\n}\n\nexport const getMaxDate = (timepoints: dayjs.Dayjs[]) => {\n  if (timepoints.length == 0) {\n    return dayjs().add(1, 'days')\n  }\n  return timepoints.reduce(\n    (maxDateItem: dayjs.Dayjs, currentDateItem: dayjs.Dayjs) => {\n      if (!maxDateItem || currentDateItem.isAfter(maxDateItem)) {\n        return currentDateItem\n      }\n      return maxDateItem\n    },\n  )\n}\n\nconst getTimelineData = (timepointData: TimepointData, rowData: Row[]) => {\n  // If this phase has no data, return an empty data line\n  if (\n    timepointData.timepoints == undefined ||\n    timepointData.timepoints.length == 0\n  ) {\n    return [\n      {\n        x: [dayjs().format()],\n        y: [0.5],\n        mode: 'lines',\n        line: {\n          color: 'blue',\n          width: 2,\n        },\n        customdata: [],\n        hoverinfo: 'none',\n      },\n    ]\n  }\n\n  // first combine all of the Rows that share the same timepoint\n  const combinedData: Record<string, Row[]> = timepointData.timepoints.reduce(\n    (result, currentTimepoint, index) => {\n      const resultRecord = result as Record<string, Row[]>\n      if (!resultRecord[currentTimepoint.format()]) {\n        resultRecord[currentTimepoint.format()] = []\n      }\n      resultRecord[currentTimepoint.format()].push(rowData[index])\n      return result\n    },\n    {},\n  )\n\n  const data = timepointData.timepoints.map((timepoint, index) => {\n    const utcFormattedTimepoint = timepoint.format()\n    const isHoveredOver = index == timepointData.hoverOverIndex\n    const rows = combinedData[utcFormattedTimepoint]\n    const rowIds = rows.map(row => {\n      return row.rowId\n    })\n    return {\n      x: [utcFormattedTimepoint, utcFormattedTimepoint, utcFormattedTimepoint],\n      y: [0, 0.5, 1],\n      mode: 'lines',\n      line: {\n        color: isHoveredOver ? 'black' : 'gray',\n        width: isHoveredOver ? 2 : 1,\n      },\n      // Add event into in the customdata\n      customdata: [rowIds, rowIds, rowIds],\n      // but tell Plotly that we do not want it to show a hover tooltip (we're going to handle this)\n      hoverinfo: 'none',\n    }\n  })\n  return data\n}\n\nconst getLayout = (\n  start: dayjs.Dayjs,\n  end: dayjs.Dayjs,\n  color: string,\n  timelineData: Plotly.Data[],\n  rowData: Row[],\n  schema: ObservationCardSchema,\n): Partial<Layout> => {\n  const xTickVals = timelineData.map(value => {\n    // return the utcFormattedTimepoint\n    return (value as PlotData).x[0]\n  })\n  const xTickText = timelineData.map(value => {\n    const rowIds = (value as PlotData).customdata[0] as number[] | undefined\n    if (rowIds && rowIds.length > 0) {\n      const count = rowIds.length\n      const rows = rowData?.filter(row => {\n        return rowIds[0] == row.rowId\n      })\n      if (rows && rows.length > 0) {\n        const row = rows[0]\n        const time = parseFloat(row.values[schema.observationTime]!)\n        const timeUnits = row.values[\n          schema.observationTimeUnits\n        ] as ManipulateType\n        const countString = count > 1 ? `(${count})` : ''\n        return `${time} ${timeUnits} ${countString}`\n      }\n    }\n    return ''\n  })\n\n  return {\n    hovermode: 'closest',\n    dragmode: false, //disallow interaction\n    showlegend: false,\n    xaxis: {\n      showgrid: false,\n      showticklabels: true,\n      showline: false,\n      zeroline: false,\n      tickvals: xTickVals,\n      ticktext: xTickText,\n      tickangle: -45,\n    },\n\n    yaxis: {\n      range: [0, 1.25],\n      showgrid: false,\n      zeroline: false,\n      showline: false,\n      showticklabels: false,\n    },\n    // Each phase has a shape\n    shapes: [\n      {\n        type: 'rect',\n        x0: start.subtract(end.diff(start) / 10).format(), // add 10% to the left side of the graph\n        x1: end.add(end.diff(start) / 3).format(), // add 33% to right side of the graph\n        y0: 0.25,\n        y1: 0.75,\n        fillcolor: color,\n        opacity: 0.8,\n        line: {\n          width: 0,\n        },\n      },\n    ],\n    margin: {\n      l: 0,\n      r: 0,\n      t: 60,\n      b: 60,\n    },\n    // autosize: false,\n  }\n}\n\ntype TimelinePhaseProps = {\n  name: string\n  color: string\n  rowData: Row[]\n  schema: ObservationCardSchema\n  widthPx: number\n  sql: string\n}\n\nconst TimelinePhase = ({\n  color,\n  rowData,\n  schema,\n  widthPx,\n  sql,\n}: TimelinePhaseProps): React.ReactNode => {\n  const [clickEvent, setClickEvent] = useState<Plotly.PlotMouseEvent>()\n  const [hoverEvent, setHoverEvent] = useState<Plotly.PlotHoverEvent>()\n  const [plotKey, setPlotKey] = useState(1)\n  const start = dayjs()\n  // hide the hover UI if we detect that the user moves the mouse outside of this component boundary\n  const componentRef = useRef<HTMLDivElement>(null)\n  const rowIds = clickEvent?.points[0].customdata as unknown as (\n    | number\n    | undefined\n  )[]\n  const selectedRows = rowData?.filter(row => {\n    return rowIds?.includes(row.rowId)\n  })\n\n  const hoverEventRowIds = hoverEvent?.points[0].customdata as unknown as (\n    | number\n    | undefined\n  )[]\n\n  const timepointData = useMemo(() => {\n    return getTimepointData(\n      start,\n      rowData,\n      schema,\n      hoverEventRowIds?.length > 0 ? hoverEventRowIds[0] : undefined,\n    )\n  }, [hoverEventRowIds, rowData, schema, start])\n\n  const end = getMaxDate(timepointData.timepoints)\n\n  const timelineData = useMemo(() => {\n    return getTimelineData(timepointData, rowData)\n  }, [timepointData, rowData])\n\n  const selectedRowIds = selectedRows.map(row => row.rowId!)\n\n  return (\n    <div ref={componentRef} style={{ width: widthPx }}>\n      <Plot\n        key={`Plot-${color}-${plotKey}`}\n        style={{ width: widthPx, height: '220px' }}\n        data={timelineData}\n        layout={getLayout(start, end, color, timelineData, rowData, schema)}\n        config={{ displayModeBar: false }}\n        useResizeHandler={true}\n        onClick={eventData => {\n          setClickEvent(eventData)\n          setHoverEvent(undefined)\n        }}\n        // PORTALS-2861: To avoid the plot handling the double-click, change the key so the Plotly graph (gd) associated\n        // to the click event is invalid.\n        onDoubleClick={() => {\n          setPlotKey(plotKey + 1)\n        }}\n        onHover={eventData => {\n          setHoverEvent(eventData)\n        }}\n        onUnhover={() => {\n          setHoverEvent(undefined)\n        }}\n      />\n      <Dialog\n        onClose={() => setClickEvent(undefined)}\n        open={selectedRows && selectedRows.length > 0}\n      >\n        <DialogContent>\n          <CardContainerLogic\n            topLevelEnumeratedFacetToFilter={{ columnName: 'observationType' }}\n            sql={sql}\n            searchParams={{ ['ROW_ID']: selectedRowIds.map(String).join(',') }}\n            sqlOperator={ColumnSingleValueFilterOperator.IN}\n            lockedColumn={{ columnName: 'ROW_ID' }}\n            cardConfiguration={{ type: OBSERVATION_CARD }}\n            initialLimit={3}\n          />\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n\nexport default TimelinePhase\n"],"mappings":"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"}

package/dist/components/TimelinePlot/TimelinePlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelinePlot.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n  getAdditionalFilters,\n  parseEntityIdFromSqlStatement,\n  SQLOperator,\n} from '@/utils/functions'\nimport { getHeaderIndex } from '@/utils/functions/queryUtils'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { Skeleton, Typography } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { useMeasure } from '@react-hookz/web'\nimport {\n  ColumnMultiValueFunction,\n  ColumnMultiValueFunctionQueryFilter,\n} from '@sage-bionetworks/synapse-types'\nimport { useMemo, useState } from 'react'\nimport { getColorPalette } from '../ColorGradient/ColorGradient'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\nimport hardcodedPhasesQueryResponseData, {\n  phaseObservationIndex,\n  phaseSpeciesIndex,\n} from './phasesQueryResponseData'\nimport TimelineLegendItem from './TimelineLegendItem'\nimport TimelinePhase from './TimelinePhase'\nimport TimelinePlotSpeciesSelector from './TimelinePlotSpeciesSelector'\n\nconst OBSERVATION_PHASE_COLUMN_NAME = 'observationphase'\nconst OBSERVATION_TIME_COLUMN_NAME = 'observationtime'\nconst OBSERVATION_TIME_UNITS_COLUMN_NAME = 'observationtimeunits'\nconst OBSERVATION_SUBMITTER_NAME_COLUMN_NAME = 'observationsubmittername'\nconst OBSERVATION_TEXT_COLUMN_NAME = 'observationtext'\nconst OBSERVATION_TYPE_COLUMN_NAME = 'observationtype'\nconst OBSERVATION_SUBMITTER_USER_ID_COLUMN_NAME = 'synapseid'\nconst OBSERVATION_DOI_COLUMN_NAME = 'doi'\n\nexport type TimelinePlotProps = {\n  sql: string\n  searchParams?: Record<string, string>\n  sqlOperator?: SQLOperator\n  title?: string\n  subTitle?: string\n  defaultSpecies?: string //for test\n}\nexport const TimelinePlot = ({\n  sql,\n  searchParams,\n  sqlOperator,\n  defaultSpecies,\n  title,\n  subTitle,\n}: TimelinePlotProps): React.ReactNode => {\n  // Fetch the table data\n  const eventsTableId = parseEntityIdFromSqlStatement(sql)\n  const [species, setSpecies] = useState<string | undefined | null>(\n    defaultSpecies,\n  )\n  const [plotContainerMeasurements, plotContainerRef] =\n    useMeasure<HTMLDivElement>()\n  const queryFilters = getAdditionalFilters(searchParams, sqlOperator) ?? []\n  const speciesFilter: ColumnMultiValueFunctionQueryFilter | undefined = species\n    ? {\n        columnName: 'species',\n        concreteType:\n          'org.sagebionetworks.repo.model.table.ColumnMultiValueFunctionQueryFilter',\n        values: [species],\n        function: ColumnMultiValueFunction.HAS,\n        _function: ColumnMultiValueFunction.HAS,\n      }\n    : undefined\n  const additionalFilters = [...queryFilters]\n  if (speciesFilter) {\n    additionalFilters.push(speciesFilter)\n  }\n  const eventTableQuery = useGetFullTableQueryResults(\n    {\n      entityId: eventsTableId,\n      query: {\n        sql: `${sql} WHERE observationTime IS NOT NULL`,\n        sort: [\n          {\n            column: 'observationTime',\n            direction: 'ASC',\n          },\n        ],\n        additionalFilters: additionalFilters,\n      },\n\n      partMask: BUNDLE_MASK_QUERY_RESULTS,\n      concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    },\n    {\n      enabled: !!species,\n    },\n  )\n\n  const { data: eventsData, isLoading } = eventTableQuery\n\n  // filter the phases query response data to the specific species\n  const phaseData = useMemo(() => {\n    if (species) {\n      const phasesForTargetSpecies =\n        hardcodedPhasesQueryResponseData.queryResult?.queryResults.rows.filter(\n          row => {\n            return row.values[phaseSpeciesIndex] == species\n          },\n        )\n      return phasesForTargetSpecies\n    } else return undefined\n  }, [species])\n\n  if (isLoading) {\n    return <LoadingTimelinePlot />\n  }\n  const observationPhaseIndex = getHeaderIndex(\n    OBSERVATION_PHASE_COLUMN_NAME,\n    eventsData,\n  )\n  const observationTimeIndex = getHeaderIndex(\n    OBSERVATION_TIME_COLUMN_NAME,\n    eventsData,\n  )\n  const observationTimeUnitIndex = getHeaderIndex(\n    OBSERVATION_TIME_UNITS_COLUMN_NAME,\n    eventsData,\n  )\n  const observationSubmitterNameIndex = getHeaderIndex(\n    OBSERVATION_SUBMITTER_NAME_COLUMN_NAME,\n    eventsData,\n  )\n  const observationTextIndex = getHeaderIndex(\n    OBSERVATION_TEXT_COLUMN_NAME,\n    eventsData,\n  )\n  const observationDoiIndex = getHeaderIndex(\n    OBSERVATION_DOI_COLUMN_NAME,\n    eventsData,\n  )\n\n  const observationTypeIndex = getHeaderIndex(\n    OBSERVATION_TYPE_COLUMN_NAME,\n    eventsData,\n  )\n  const submitterUserIdIndex = getHeaderIndex(\n    OBSERVATION_SUBMITTER_USER_ID_COLUMN_NAME,\n    eventsData,\n  )\n\n  const schema: ObservationCardSchema = {\n    observationSubmitterName: observationSubmitterNameIndex,\n    synapseId: submitterUserIdIndex,\n    observationType: observationTypeIndex,\n    observationText: observationTextIndex,\n    observationTime: observationTimeIndex,\n    observationTimeUnits: observationTimeUnitIndex,\n    doi: observationDoiIndex,\n  }\n\n  const widthPx =\n    plotContainerMeasurements?.width && phaseData\n      ? plotContainerMeasurements?.width / phaseData.length\n      : 0\n  const gridTemplateColumns = phaseData?.map(() => 'auto').join(' ')\n\n  return (\n    <>\n      {species && (\n        <>\n          {title && <Typography variant=\"h2\">{title}</Typography>}\n          {subTitle && (\n            <Typography variant=\"body1Italic\" sx={{ margin: '10px 0px' }}>\n              {subTitle}\n            </Typography>\n          )}\n        </>\n      )}\n      <Box>\n        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>\n          {/* Species selector */}\n          <Box>\n            {!defaultSpecies && (\n              <TimelinePlotSpeciesSelector\n                setSpecies={setSpecies}\n                species={species}\n                sql={sql}\n                additionalFilters={queryFilters}\n              />\n            )}\n          </Box>\n          {/* Legend */}\n          {phaseData && (\n            <Box\n              sx={{ display: 'flex', justifyContent: 'flex-end', gap: '25px' }}\n            >\n              {phaseData.map((phaseRow, index) => {\n                const { colorPalette } = getColorPalette(index, 1)\n                return (\n                  <TimelineLegendItem\n                    key={phaseRow.rowId}\n                    color={colorPalette[0]}\n                    phaseName={phaseRow.values[phaseObservationIndex]}\n                  />\n                )\n              })}\n            </Box>\n          )}\n        </Box>\n        {/* Phase plots */}\n        {species && phaseData && (\n          <div ref={plotContainerRef}>\n            <Box\n              sx={{\n                display: 'inline-grid',\n                gridTemplateColumns,\n                minWidth: plotContainerMeasurements?.width,\n                maxWidth: plotContainerMeasurements?.width,\n              }}\n              className=\"forcePlotlyDefaultCursor\"\n            >\n              {phaseData.map((phaseRow, index) => {\n                const { colorPalette } = getColorPalette(index, 1)\n                const phaseEventRows =\n                  eventsData?.queryResult?.queryResults.rows.filter(row => {\n                    return (\n                      row.values[observationPhaseIndex] ==\n                      phaseRow.values[phaseObservationIndex]\n                    )\n                  })\n\n                return phaseEventRows ? (\n                  <TimelinePhase\n                    key={phaseRow.rowId}\n                    name={phaseRow.values[phaseObservationIndex]!}\n                    color={colorPalette[0]}\n                    rowData={phaseEventRows}\n                    schema={schema}\n                    widthPx={widthPx}\n                    sql={sql}\n                  />\n                ) : (\n                  <></>\n                )\n              })}\n            </Box>\n          </div>\n        )}\n      </Box>\n    </>\n  )\n}\n\nexport const LoadingTimelinePlot = (): React.ReactNode => {\n  return (\n    <Box>\n      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>\n        <Skeleton height=\"45px\" width=\"80px\" />\n        <Skeleton height=\"45px\" width=\"80px\" />\n      </Box>\n      <Box sx={{ display: 'flex' }}>\n        <Skeleton height=\"150px\" width=\"100%\" />\n      </Box>\n    </Box>\n  )\n}\n\nexport default TimelinePlot\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,IAAM,IAAgC,oBAChC,IAA+B,mBAC/B,IAAqC,wBACrC,IAAyC,4BACzC,IAA+B,mBAC/B,IAA+B,mBAC/B,IAA4C,aAC5C,IAA8B,OAUvB,KAAgB,EAC3B,QACA,iBACA,gBACA,mBACA,UACA,kBACwC;CAExC,IAAM,IAAgB,EAA8B,EAAI,EAClD,CAAC,GAAS,KAAc,EAC5B,EACD,EACK,CAAC,GAA2B,KAChC,GAA4B,EACxB,IAAe,EAAqB,GAAc,EAAY,IAAI,EAAE,EACpE,IAAiE,IACnE;EACE,YAAY;EACZ,cACE;EACF,QAAQ,CAAC,EAAQ;EACjB,UAAU,EAAyB;EACnC,WAAW,EAAyB;EACrC,GACD,KAAA,GACE,IAAoB,CAAC,GAAG,EAAa;AAC3C,CAAI,KACF,EAAkB,KAAK,EAAc;CAwBvC,IAAM,EAAE,MAAM,GAAY,iBAtBF,EACtB;EACE,UAAU;EACV,OAAO;GACL,KAAK,GAAG,EAAI;GACZ,MAAM,CACJ;IACE,QAAQ;IACR,WAAW;IACZ,CACF;GACkB;GACpB;EAED,UAAA;EACA,cAAc;EACf,EACD,EACE,SAAS,CAAC,CAAC,GACZ,CAGqC,EAGlC,IAAY,QAAc;AAC9B,MAAI,EAOF,QALE,EAAiC,aAAa,aAAa,KAAK,QAC9D,MACS,EAAI,OAAO,MAAsB,EAE3C;IAGJ,CAAC,EAAQ,CAAC;AAEb,KAAI,EACF,QAAO,kBAAC,GAAD,EAAuB,CAAA;CAEhC,IAAM,IAAwB,EAC5B,GACA,EACD,EACK,IAAuB,EAC3B,GACA,EACD,EACK,IAA2B,EAC/B,GACA,EACD,EACK,IAAgC,EACpC,GACA,EACD,EACK,IAAuB,EAC3B,GACA,EACD,EACK,IAAsB,EAC1B,GACA,EACD,EAEK,IAAuB,EAC3B,GACA,EACD,EAMK,IAAgC;EACpC,0BAA0B;EAC1B,WAP2B,EAC3B,GACA,EAKW;EACX,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,sBAAsB;EACtB,KAAK;EACN,EAEK,KACJ,GAA2B,SAAS,IAChC,GAA2B,QAAQ,EAAU,SAC7C,GACA,KAAsB,GAAW,UAAU,OAAO,CAAC,KAAK,IAAI;AAElE,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,KAAS,kBAAC,GAAD;EAAY,SAAQ;YAAM;EAAmB,CAAA,EACtD,KACC,kBAAC,GAAD;EAAY,SAAQ;EAAc,IAAI,EAAE,QAAQ,YAAY;YACzD;EACU,CAAA,CAEd,EAAA,CAAA,EAEL,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,gBAAgB;GAAiB;YAA7D,CAEE,kBAAC,GAAD,EAAA,UACG,CAAC,KACA,kBAAC,GAAD;GACc;GACH;GACJ;GACL,mBAAmB;GACnB,CAAA,EAEA,CAAA,EAEL,KACC,kBAAC,GAAD;GACE,IAAI;IAAE,SAAS;IAAQ,gBAAgB;IAAY,KAAK;IAAQ;aAE/D,EAAU,KAAK,GAAU,MAAU;IAClC,IAAM,EAAE,oBAAiB,EAAgB,GAAO,EAAE;AAClD,WACE,kBAAC,GAAD;KAEE,OAAO,EAAa;KACpB,WAAW,EAAS,OAAO;KAC3B,EAHK,EAAS,MAGd;KAEJ;GACE,CAAA,CAEJ;KAEL,KAAW,KACV,kBAAC,OAAD;EAAK,KAAK;YACR,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT;IACA,UAAU,GAA2B;IACrC,UAAU,GAA2B;IACtC;GACD,WAAU;aAET,EAAU,KAAK,GAAU,MAAU;IAClC,IAAM,EAAE,oBAAiB,EAAgB,GAAO,EAAE,EAC5C,IACJ,GAAY,aAAa,aAAa,KAAK,QAAO,MAE9C,EAAI,OAAO,MACX,EAAS,OAAO,GAElB;AAEJ,WAAO,IACL,kBAAC,GAAD;KAEE,MAAM,EAAS,OAAO;KACtB,OAAO,EAAa;KACpB,SAAS;KACD;KACC;KACJ;KACL,EAPK,EAAS,MAOd,GAEF,kBAAA,GAAA,EAAK,CAAA;KAEP;GACE,CAAA;EACF,CAAA,CAEJ,EAAA,CAAA,CACL,EAAA,CAAA;GAIM,UAET,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;CAAK,IAAI;EAAE,SAAS;EAAQ,gBAAgB;EAAY,KAAK;EAAQ;WAArE,CACE,kBAAC,GAAD;EAAU,QAAO;EAAO,OAAM;EAAS,CAAA,EACvC,kBAAC,GAAD;EAAU,QAAO;EAAO,OAAM;EAAS,CAAA,CACnC;IACN,kBAAC,GAAD;CAAK,IAAI,EAAE,SAAS,QAAQ;WAC1B,kBAAC,GAAD;EAAU,QAAO;EAAQ,OAAM;EAAS,CAAA;CACpC,CAAA,CACF,EAAA,CAAA"}
+{"version":3,"file":"TimelinePlot.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n  getAdditionalFilters,\n  parseEntityIdFromSqlStatement,\n  SQLOperator,\n} from '@/utils/functions'\nimport { getHeaderIndex } from '@/utils/functions/queryUtils'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { Skeleton, Typography } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { useMeasure } from '@react-hookz/web'\nimport {\n  ColumnMultiValueFunction,\n  ColumnMultiValueFunctionQueryFilter,\n} from '@sage-bionetworks/synapse-types'\nimport { useMemo, useState } from 'react'\nimport { getColorPalette } from '../ColorGradient/ColorGradient'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\nimport hardcodedPhasesQueryResponseData, {\n  phaseObservationIndex,\n  phaseSpeciesIndex,\n} from './phasesQueryResponseData'\nimport TimelineLegendItem from './TimelineLegendItem'\nimport TimelinePhase from './TimelinePhase'\nimport TimelinePlotSpeciesSelector from './TimelinePlotSpeciesSelector'\n\nconst OBSERVATION_PHASE_COLUMN_NAME = 'observationphase'\nconst OBSERVATION_TIME_COLUMN_NAME = 'observationtime'\nconst OBSERVATION_TIME_UNITS_COLUMN_NAME = 'observationtimeunits'\nconst OBSERVATION_SUBMITTER_NAME_COLUMN_NAME = 'observationsubmittername'\nconst OBSERVATION_TEXT_COLUMN_NAME = 'observationtext'\nconst OBSERVATION_TYPE_COLUMN_NAME = 'observationtype'\nconst OBSERVATION_SUBMITTER_USER_ID_COLUMN_NAME = 'synapseid'\nconst OBSERVATION_DOI_COLUMN_NAME = 'doi'\n\nexport type TimelinePlotProps = {\n  sql: string\n  searchParams?: Record<string, string>\n  sqlOperator?: SQLOperator\n  title?: string\n  subTitle?: string\n  defaultSpecies?: string //for test\n}\nexport const TimelinePlot = ({\n  sql,\n  searchParams,\n  sqlOperator,\n  defaultSpecies,\n  title,\n  subTitle,\n}: TimelinePlotProps): React.ReactNode => {\n  // Fetch the table data\n  const eventsTableId = parseEntityIdFromSqlStatement(sql)\n  const [species, setSpecies] = useState<string | undefined | null>(\n    defaultSpecies,\n  )\n  const [plotContainerMeasurements, plotContainerRef] =\n    useMeasure<HTMLDivElement>()\n  const queryFilters = getAdditionalFilters(searchParams, sqlOperator) ?? []\n  const speciesFilter: ColumnMultiValueFunctionQueryFilter | undefined = species\n    ? {\n        columnName: 'species',\n        concreteType:\n          'org.sagebionetworks.repo.model.table.ColumnMultiValueFunctionQueryFilter',\n        values: [species],\n        function: ColumnMultiValueFunction.HAS,\n        _function: ColumnMultiValueFunction.HAS,\n      }\n    : undefined\n  const additionalFilters = [...queryFilters]\n  if (speciesFilter) {\n    additionalFilters.push(speciesFilter)\n  }\n  const eventTableQuery = useGetFullTableQueryResults(\n    {\n      entityId: eventsTableId,\n      query: {\n        sql: `${sql} WHERE observationTime IS NOT NULL`,\n        sort: [\n          {\n            column: 'observationTime',\n            direction: 'ASC',\n          },\n        ],\n        additionalFilters: additionalFilters,\n      },\n\n      partMask: BUNDLE_MASK_QUERY_RESULTS,\n      concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    },\n    {\n      enabled: !!species,\n    },\n  )\n\n  const { data: eventsData, isLoading } = eventTableQuery\n\n  // filter the phases query response data to the specific species\n  const phaseData = useMemo(() => {\n    if (species) {\n      const phasesForTargetSpecies =\n        hardcodedPhasesQueryResponseData.queryResult?.queryResults.rows.filter(\n          row => {\n            return row.values[phaseSpeciesIndex] == species\n          },\n        )\n      return phasesForTargetSpecies\n    } else return undefined\n  }, [species])\n\n  if (isLoading) {\n    return <LoadingTimelinePlot />\n  }\n  const observationPhaseIndex = getHeaderIndex(\n    OBSERVATION_PHASE_COLUMN_NAME,\n    eventsData,\n  )\n  const observationTimeIndex = getHeaderIndex(\n    OBSERVATION_TIME_COLUMN_NAME,\n    eventsData,\n  )\n  const observationTimeUnitIndex = getHeaderIndex(\n    OBSERVATION_TIME_UNITS_COLUMN_NAME,\n    eventsData,\n  )\n  const observationSubmitterNameIndex = getHeaderIndex(\n    OBSERVATION_SUBMITTER_NAME_COLUMN_NAME,\n    eventsData,\n  )\n  const observationTextIndex = getHeaderIndex(\n    OBSERVATION_TEXT_COLUMN_NAME,\n    eventsData,\n  )\n  const observationDoiIndex = getHeaderIndex(\n    OBSERVATION_DOI_COLUMN_NAME,\n    eventsData,\n  )\n\n  const observationTypeIndex = getHeaderIndex(\n    OBSERVATION_TYPE_COLUMN_NAME,\n    eventsData,\n  )\n  const submitterUserIdIndex = getHeaderIndex(\n    OBSERVATION_SUBMITTER_USER_ID_COLUMN_NAME,\n    eventsData,\n  )\n\n  const schema: ObservationCardSchema = {\n    observationSubmitterName: observationSubmitterNameIndex,\n    synapseId: submitterUserIdIndex,\n    observationType: observationTypeIndex,\n    observationText: observationTextIndex,\n    observationTime: observationTimeIndex,\n    observationTimeUnits: observationTimeUnitIndex,\n    doi: observationDoiIndex,\n  }\n\n  const widthPx =\n    plotContainerMeasurements?.width && phaseData\n      ? plotContainerMeasurements?.width / phaseData.length\n      : 0\n  const gridTemplateColumns = phaseData?.map(() => 'auto').join(' ')\n\n  return (\n    <>\n      {species && (\n        <>\n          {title && <Typography variant=\"h2\">{title}</Typography>}\n          {subTitle && (\n            <Typography variant=\"body1Italic\" sx={{ margin: '10px 0px' }}>\n              {subTitle}\n            </Typography>\n          )}\n        </>\n      )}\n      <Box>\n        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>\n          {/* Species selector */}\n          <Box>\n            {!defaultSpecies && (\n              <TimelinePlotSpeciesSelector\n                setSpecies={setSpecies}\n                species={species}\n                sql={sql}\n                additionalFilters={queryFilters}\n              />\n            )}\n          </Box>\n          {/* Legend */}\n          {phaseData && (\n            <Box\n              sx={{ display: 'flex', justifyContent: 'flex-end', gap: '25px' }}\n            >\n              {phaseData.map((phaseRow, index) => {\n                const { colorPalette } = getColorPalette(index, 1)\n                return (\n                  <TimelineLegendItem\n                    key={phaseRow.rowId}\n                    color={colorPalette[0]}\n                    phaseName={phaseRow.values[phaseObservationIndex]}\n                  />\n                )\n              })}\n            </Box>\n          )}\n        </Box>\n        {/* Phase plots */}\n        {species && phaseData && (\n          <div ref={plotContainerRef}>\n            <Box\n              sx={{\n                display: 'inline-grid',\n                gridTemplateColumns,\n                minWidth: plotContainerMeasurements?.width,\n                maxWidth: plotContainerMeasurements?.width,\n              }}\n              className=\"forcePlotlyDefaultCursor\"\n            >\n              {phaseData.map((phaseRow, index) => {\n                const { colorPalette } = getColorPalette(index, 1)\n                const phaseEventRows =\n                  eventsData?.queryResult?.queryResults.rows.filter(row => {\n                    return (\n                      row.values[observationPhaseIndex] ==\n                      phaseRow.values[phaseObservationIndex]\n                    )\n                  })\n\n                return phaseEventRows ? (\n                  <TimelinePhase\n                    key={phaseRow.rowId}\n                    name={phaseRow.values[phaseObservationIndex]!}\n                    color={colorPalette[0]}\n                    rowData={phaseEventRows}\n                    schema={schema}\n                    widthPx={widthPx}\n                    sql={sql}\n                  />\n                ) : (\n                  <></>\n                )\n              })}\n            </Box>\n          </div>\n        )}\n      </Box>\n    </>\n  )\n}\n\nexport const LoadingTimelinePlot = (): React.ReactNode => {\n  return (\n    <Box>\n      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>\n        <Skeleton height=\"45px\" width=\"80px\" />\n        <Skeleton height=\"45px\" width=\"80px\" />\n      </Box>\n      <Box sx={{ display: 'flex' }}>\n        <Skeleton height=\"150px\" width=\"100%\" />\n      </Box>\n    </Box>\n  )\n}\n\nexport default TimelinePlot\n"],"mappings":"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"}

package/dist/components/TimelinePlot/TimelinePlotSpeciesSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelinePlotSpeciesSelector.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePlotSpeciesSelector.tsx"],"sourcesContent":["import React, { useId } from 'react'\nimport { StyledFormControl } from '@/components/styled'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { InputLabel, MenuItem, Select } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { QueryFilter } from '@sage-bionetworks/synapse-types'\nimport { Dispatch, SetStateAction } from 'react'\n\nexport type TimelinePlotSpeciesSelectorProps = {\n  sql: string\n  additionalFilters?: QueryFilter[]\n  species?: string | null\n  setSpecies: Dispatch<SetStateAction<string | null | undefined>>\n}\nexport const TimelinePlotSpeciesSelector = ({\n  sql,\n  additionalFilters,\n  species,\n  setSpecies,\n}: TimelinePlotSpeciesSelectorProps): React.ReactNode => {\n  const speciesLabelId = useId()\n\n  const eventsTableId = parseEntityIdFromSqlStatement(sql)\n  // Fetch the species\n  const eventTableQuery = useGetFullTableQueryResults({\n    entityId: eventsTableId,\n    query: {\n      sql: `SELECT distinct unnest(species) FROM ${eventsTableId} WHERE species IS NOT NULL AND observationTime IS NOT NULL GROUP BY species`,\n      additionalFilters: additionalFilters,\n    },\n    partMask: BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  })\n\n  const { data: speciesData, isLoading } = eventTableQuery\n  const rows = speciesData?.queryResult?.queryResults?.rows\n  const defaultSpecies = rows && rows.length > 0 ? rows[0].values[0] : undefined\n  if (species == undefined && defaultSpecies != undefined) {\n    setSpecies(defaultSpecies)\n  }\n  // Hide if loading, there are no rows, or there's only 1 species option\n  if (isLoading || !rows || rows.length < 2) {\n    return <></>\n  }\n\n  return (\n    <Box>\n      <StyledFormControl>\n        <InputLabel id={speciesLabelId}>Species</InputLabel>\n        <Select\n          sx={{ marginLeft: '2px', marginBottom: '2px' }}\n          labelId={speciesLabelId}\n          value={species}\n          label=\"Species\"\n          onChange={event => {\n            setSpecies(event.target.value)\n          }}\n        >\n          {rows?.map(row => {\n            const species = row.values[0]!\n            return (\n              <MenuItem key={species} value={species}>\n                {species}\n              </MenuItem>\n            )\n          })}\n        </Select>\n      </StyledFormControl>\n    </Box>\n  )\n}\nexport default TimelinePlotSpeciesSelector\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,KAA+B,EAC1C,QACA,sBACA,YACA,oBACuD;CACvD,IAAM,IAAiB,GAAO,EAExB,IAAgB,EAA8B,EAAI,EAYlD,EAAE,MAAM,GAAa,iBAVH,EAA4B;EAClD,UAAU;EACV,OAAO;GACL,KAAK,wCAAwC,EAAc;GACxC;GACpB;EACD,UAAA;EACA,cAAc;EACf,CAEwC,EACnC,IAAO,GAAa,aAAa,cAAc,MAC/C,IAAiB,KAAQ,EAAK,SAAS,IAAI,EAAK,GAAG,OAAO,KAAK,KAAA;AASrE,QARI,KAAW,QAAa,KAAkB,QAC5C,EAAW,EAAe,EAGxB,KAAa,CAAC,KAAQ,EAAK,SAAS,IAC/B,kBAAA,GAAA,EAAK,CAAA,GAIZ,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,IAAI;YAAgB;EAAoB,CAAA,EACpD,kBAAC,GAAD;EACE,IAAI;GAAE,YAAY;GAAO,cAAc;GAAO;EAC9C,SAAS;EACT,OAAO;EACP,OAAM;EACN,WAAU,MAAS;AACjB,KAAW,EAAM,OAAO,MAAM;;YAG/B,GAAM,KAAI,MAAO;GAChB,IAAM,IAAU,EAAI,OAAO;AAC3B,UACE,kBAAC,GAAD;IAAwB,OAAO;cAC5B;IACQ,EAFI,EAEJ;IAEb;EACK,CAAA,CACS,EAAA,CAAA,EAChB,CAAA"}
+{"version":3,"file":"TimelinePlotSpeciesSelector.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePlotSpeciesSelector.tsx"],"sourcesContent":["import React, { useId } from 'react'\nimport { StyledFormControl } from '@/components/styled'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { InputLabel, MenuItem, Select } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { QueryFilter } from '@sage-bionetworks/synapse-types'\nimport { Dispatch, SetStateAction } from 'react'\n\nexport type TimelinePlotSpeciesSelectorProps = {\n  sql: string\n  additionalFilters?: QueryFilter[]\n  species?: string | null\n  setSpecies: Dispatch<SetStateAction<string | null | undefined>>\n}\nexport const TimelinePlotSpeciesSelector = ({\n  sql,\n  additionalFilters,\n  species,\n  setSpecies,\n}: TimelinePlotSpeciesSelectorProps): React.ReactNode => {\n  const speciesLabelId = useId()\n\n  const eventsTableId = parseEntityIdFromSqlStatement(sql)\n  // Fetch the species\n  const eventTableQuery = useGetFullTableQueryResults({\n    entityId: eventsTableId,\n    query: {\n      sql: `SELECT distinct unnest(species) FROM ${eventsTableId} WHERE species IS NOT NULL AND observationTime IS NOT NULL GROUP BY species`,\n      additionalFilters: additionalFilters,\n    },\n    partMask: BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  })\n\n  const { data: speciesData, isLoading } = eventTableQuery\n  const rows = speciesData?.queryResult?.queryResults?.rows\n  const defaultSpecies = rows && rows.length > 0 ? rows[0].values[0] : undefined\n  if (species == undefined && defaultSpecies != undefined) {\n    setSpecies(defaultSpecies)\n  }\n  // Hide if loading, there are no rows, or there's only 1 species option\n  if (isLoading || !rows || rows.length < 2) {\n    return <></>\n  }\n\n  return (\n    <Box>\n      <StyledFormControl>\n        <InputLabel id={speciesLabelId}>Species</InputLabel>\n        <Select\n          sx={{ marginLeft: '2px', marginBottom: '2px' }}\n          labelId={speciesLabelId}\n          value={species}\n          label=\"Species\"\n          onChange={event => {\n            setSpecies(event.target.value)\n          }}\n        >\n          {rows?.map(row => {\n            const species = row.values[0]!\n            return (\n              <MenuItem key={species} value={species}>\n                {species}\n              </MenuItem>\n            )\n          })}\n        </Select>\n      </StyledFormControl>\n    </Box>\n  )\n}\nexport default TimelinePlotSpeciesSelector\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,KAA+B,EAC1C,QACA,sBACA,YACA,oBACuD;CACvD,IAAM,IAAiB,EAAM,GAEvB,IAAgB,EAA8B,CAAG,GAYjD,EAAE,MAAM,GAAa,iBAVH,EAA4B;EAClD,UAAU;EACV,OAAO;GACL,KAAK,wCAAwC,EAAc;GACxC;EACrB;EACA,UAAA;EACA,cAAc;CAChB,CAEyC,GACnC,IAAO,GAAa,aAAa,cAAc,MAC/C,IAAiB,KAAQ,EAAK,SAAS,IAAI,EAAK,GAAG,OAAO,KAAK,KAAA;CASrE,OARI,KAAW,QAAa,KAAkB,QAC5C,EAAW,CAAc,GAGvB,KAAa,CAAC,KAAQ,EAAK,SAAS,IAC/B,kBAAA,GAAA,CAAI,CAAA,IAIX,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,IAAI;YAAgB;CAAmB,CAAA,GACnD,kBAAC,GAAD;EACE,IAAI;GAAE,YAAY;GAAO,cAAc;EAAM;EAC7C,SAAS;EACT,OAAO;EACP,OAAM;EACN,WAAU,MAAS;GACjB,EAAW,EAAM,OAAO,KAAK;EAC/B;YAEC,GAAM,KAAI,MAAO;GAChB,IAAM,IAAU,EAAI,OAAO;GAC3B,OACE,kBAAC,GAAD;IAAwB,OAAO;cAC5B;GACO,GAFK,CAEL;EAEd,CAAC;CACK,CAAA,CACS,EAAA,CAAA,EAChB,CAAA;AAET"}

package/dist/components/TimelinePlot/phasesQueryResponseData.js.map

@@ -1 +1 @@
-{"version":3,"file":"phasesQueryResponseData.js","names":[],"sources":["../../../src/components/TimelinePlot/phasesQueryResponseData.ts"],"sourcesContent":["import { QueryResultBundle } from '@sage-bionetworks/synapse-types'\n\nconst SPECIES_COLUMN_NAME = 'species'\nconst OBSERVATION_PHASE_COLUMN_NAME = 'observationphase'\n\nconst hardcodedPhasesQueryResponseData: QueryResultBundle = {\n  concreteType: 'org.sagebionetworks.repo.model.table.QueryResultBundle',\n  queryResult: {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryResult',\n    queryResults: {\n      concreteType: 'org.sagebionetworks.repo.model.table.RowSet',\n      tableId: 'syn52408661',\n      etag: 'a3270cb2-4373-4e12-9981-e12326e54ad1',\n      headers: [\n        {\n          name: 'species',\n          columnType: 'STRING',\n          id: '152514',\n        },\n        {\n          name: 'observationPhase',\n          columnType: 'STRING',\n          id: '197976',\n        },\n        {\n          name: 'observationPhaseOrder',\n          columnType: 'INTEGER',\n          id: '198102',\n        },\n        {\n          name: 'observationTimeMax',\n          columnType: 'INTEGER',\n          id: '198103',\n        },\n        {\n          name: 'observationTimeUnits',\n          columnType: 'STRING',\n          id: '198101',\n        },\n      ],\n      rows: [\n        {\n          rowId: 9,\n          versionNumber: 4,\n          values: ['Danio rerio', 'embryo', '1', '7', 'days'],\n        },\n        {\n          rowId: 10,\n          versionNumber: 4,\n          values: ['Danio rerio', 'larval', '2', '3', 'months'],\n        },\n        {\n          rowId: 11,\n          versionNumber: 4,\n          values: ['Danio rerio', 'juvenile', '3', '6', 'months'],\n        },\n        {\n          rowId: 12,\n          versionNumber: 4,\n          values: ['Danio rerio', 'adult', '4', '12', 'months'],\n        },\n        {\n          rowId: 16,\n          versionNumber: 4,\n          values: ['Drosophila', 'embryo', '1', '24', 'hours'],\n        },\n        {\n          rowId: 17,\n          versionNumber: 4,\n          values: ['Drosophila', 'larval', '2', '5', 'days'],\n        },\n        {\n          rowId: 18,\n          versionNumber: 4,\n          values: ['Drosophila', 'pupal', '3', '12', 'days'],\n        },\n        {\n          rowId: 19,\n          versionNumber: 4,\n          values: ['Drosophila', 'adult', '4', '5', 'weeks'],\n        },\n        {\n          rowId: 1,\n          versionNumber: 4,\n          values: ['Mus musculus', 'prenatal', '1', '21', 'days'],\n        },\n        {\n          rowId: 2,\n          versionNumber: 4,\n          values: ['Mus musculus', 'postnatal', '2', '6', 'months'],\n        },\n        {\n          rowId: 20,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'prenatal', '1', '23', 'days'],\n        },\n        {\n          rowId: 21,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'neonatal', '2', '4', 'weeks'],\n        },\n        {\n          rowId: 22,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'weanling', '3', '2', 'months'],\n        },\n        {\n          rowId: 23,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'juvenile', '4', '3', 'months'],\n        },\n        {\n          rowId: 24,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'adolescent', '5', '6', 'months'],\n        },\n        {\n          rowId: 25,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'adult', '6', '12', 'months'],\n        },\n        {\n          rowId: 13,\n          versionNumber: 4,\n          values: ['Saccharomyces', 'log phase', '1', '7', 'days'],\n        },\n        {\n          rowId: 14,\n          versionNumber: 4,\n          values: ['Saccharomyces', 'stationary phase', '2', '2', 'weeks'],\n        },\n        {\n          rowId: 15,\n          versionNumber: 4,\n          values: ['Saccharomyces', 'death phase', '3', '3', 'weeks'],\n        },\n        {\n          rowId: 3,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'prenatal', '1', '115', 'days'],\n        },\n        {\n          rowId: 4,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'neonatal', '2', '3', 'months'],\n        },\n        {\n          rowId: 5,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'weanling', '3', '6', 'months'],\n        },\n        {\n          rowId: 6,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'juvenile', '4', '12', 'months'],\n        },\n        {\n          rowId: 7,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'adolescent', '5', '2', 'years'],\n        },\n        {\n          rowId: 8,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'adult', '6', '3', 'years'],\n        },\n      ],\n    },\n  },\n}\n\nexport const phaseSpeciesIndex =\n  hardcodedPhasesQueryResponseData.queryResult?.queryResults.headers.findIndex(\n    header => header.name.toLowerCase() === SPECIES_COLUMN_NAME,\n  )!\nexport const phaseObservationIndex =\n  hardcodedPhasesQueryResponseData.queryResult?.queryResults.headers.findIndex(\n    header => header.name.toLowerCase() === OBSERVATION_PHASE_COLUMN_NAME,\n  )!\n\nexport default hardcodedPhasesQueryResponseData\n"],"mappings":"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"}
+{"version":3,"file":"phasesQueryResponseData.js","names":[],"sources":["../../../src/components/TimelinePlot/phasesQueryResponseData.ts"],"sourcesContent":["import { QueryResultBundle } from '@sage-bionetworks/synapse-types'\n\nconst SPECIES_COLUMN_NAME = 'species'\nconst OBSERVATION_PHASE_COLUMN_NAME = 'observationphase'\n\nconst hardcodedPhasesQueryResponseData: QueryResultBundle = {\n  concreteType: 'org.sagebionetworks.repo.model.table.QueryResultBundle',\n  queryResult: {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryResult',\n    queryResults: {\n      concreteType: 'org.sagebionetworks.repo.model.table.RowSet',\n      tableId: 'syn52408661',\n      etag: 'a3270cb2-4373-4e12-9981-e12326e54ad1',\n      headers: [\n        {\n          name: 'species',\n          columnType: 'STRING',\n          id: '152514',\n        },\n        {\n          name: 'observationPhase',\n          columnType: 'STRING',\n          id: '197976',\n        },\n        {\n          name: 'observationPhaseOrder',\n          columnType: 'INTEGER',\n          id: '198102',\n        },\n        {\n          name: 'observationTimeMax',\n          columnType: 'INTEGER',\n          id: '198103',\n        },\n        {\n          name: 'observationTimeUnits',\n          columnType: 'STRING',\n          id: '198101',\n        },\n      ],\n      rows: [\n        {\n          rowId: 9,\n          versionNumber: 4,\n          values: ['Danio rerio', 'embryo', '1', '7', 'days'],\n        },\n        {\n          rowId: 10,\n          versionNumber: 4,\n          values: ['Danio rerio', 'larval', '2', '3', 'months'],\n        },\n        {\n          rowId: 11,\n          versionNumber: 4,\n          values: ['Danio rerio', 'juvenile', '3', '6', 'months'],\n        },\n        {\n          rowId: 12,\n          versionNumber: 4,\n          values: ['Danio rerio', 'adult', '4', '12', 'months'],\n        },\n        {\n          rowId: 16,\n          versionNumber: 4,\n          values: ['Drosophila', 'embryo', '1', '24', 'hours'],\n        },\n        {\n          rowId: 17,\n          versionNumber: 4,\n          values: ['Drosophila', 'larval', '2', '5', 'days'],\n        },\n        {\n          rowId: 18,\n          versionNumber: 4,\n          values: ['Drosophila', 'pupal', '3', '12', 'days'],\n        },\n        {\n          rowId: 19,\n          versionNumber: 4,\n          values: ['Drosophila', 'adult', '4', '5', 'weeks'],\n        },\n        {\n          rowId: 1,\n          versionNumber: 4,\n          values: ['Mus musculus', 'prenatal', '1', '21', 'days'],\n        },\n        {\n          rowId: 2,\n          versionNumber: 4,\n          values: ['Mus musculus', 'postnatal', '2', '6', 'months'],\n        },\n        {\n          rowId: 20,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'prenatal', '1', '23', 'days'],\n        },\n        {\n          rowId: 21,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'neonatal', '2', '4', 'weeks'],\n        },\n        {\n          rowId: 22,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'weanling', '3', '2', 'months'],\n        },\n        {\n          rowId: 23,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'juvenile', '4', '3', 'months'],\n        },\n        {\n          rowId: 24,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'adolescent', '5', '6', 'months'],\n        },\n        {\n          rowId: 25,\n          versionNumber: 4,\n          values: ['Rattus norvegicus', 'adult', '6', '12', 'months'],\n        },\n        {\n          rowId: 13,\n          versionNumber: 4,\n          values: ['Saccharomyces', 'log phase', '1', '7', 'days'],\n        },\n        {\n          rowId: 14,\n          versionNumber: 4,\n          values: ['Saccharomyces', 'stationary phase', '2', '2', 'weeks'],\n        },\n        {\n          rowId: 15,\n          versionNumber: 4,\n          values: ['Saccharomyces', 'death phase', '3', '3', 'weeks'],\n        },\n        {\n          rowId: 3,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'prenatal', '1', '115', 'days'],\n        },\n        {\n          rowId: 4,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'neonatal', '2', '3', 'months'],\n        },\n        {\n          rowId: 5,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'weanling', '3', '6', 'months'],\n        },\n        {\n          rowId: 6,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'juvenile', '4', '12', 'months'],\n        },\n        {\n          rowId: 7,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'adolescent', '5', '2', 'years'],\n        },\n        {\n          rowId: 8,\n          versionNumber: 4,\n          values: ['Sus scrofa', 'adult', '6', '3', 'years'],\n        },\n      ],\n    },\n  },\n}\n\nexport const phaseSpeciesIndex =\n  hardcodedPhasesQueryResponseData.queryResult?.queryResults.headers.findIndex(\n    header => header.name.toLowerCase() === SPECIES_COLUMN_NAME,\n  )!\nexport const phaseObservationIndex =\n  hardcodedPhasesQueryResponseData.queryResult?.queryResults.headers.findIndex(\n    header => header.name.toLowerCase() === OBSERVATION_PHASE_COLUMN_NAME,\n  )!\n\nexport default hardcodedPhasesQueryResponseData\n"],"mappings":"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"}

package/dist/components/ToastMessage/ToastMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastMessage.js","names":[],"sources":["../../../src/components/ToastMessage/ToastMessage.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es'\nimport React, { ReactNode, useRef } from 'react'\nimport { toast, ToastBar, Toaster } from 'react-hot-toast'\nimport { CSSTransition, TransitionGroup } from 'react-transition-group'\nimport FullWidthAlert, {\n  AlertButtonConfig,\n} from '../FullWidthAlert/FullWidthAlert'\n\nexport type ToastMessageProps = {\n  text: string\n  show: boolean\n  autohide: boolean\n}\n\n/**\n *\n * Generalization of a Material-style toast message used in a couple of places. This component is simple and\n * cannot handle issuing multiple toast messages. For more sophisticated cases, see {@link displayToast}\n */\nexport function ToastMessage({\n  text,\n  show,\n  autohide,\n}: ToastMessageProps): React.JSX.Element {\n  const modalRef = useRef<HTMLDivElement>(null)\n  return (\n    <TransitionGroup>\n      {show && (\n        <CSSTransition\n          nodeRef={modalRef}\n          classNames=\"SRC-card\"\n          timeout={autohide ? { enter: 500, exit: 300 } : {}}\n        >\n          <div className=\"SRC-modal\" ref={modalRef}>\n            {text}\n          </div>\n        </CSSTransition>\n      )}\n    </TransitionGroup>\n  )\n}\n\n/**\n * Customized ToastContainer for using react-toastify.\n *\n * Note that this will collide with other notification systems, such as the BootstrapNotify notifications\n * in SWC.\n */\nexport function SynapseToastContainer(): React.ReactNode {\n  return (\n    <Toaster\n      containerClassName=\"SynapseToastContainer\"\n      position=\"bottom-center\"\n    >\n      {t => (\n        <ToastBar\n          toast={t}\n          style={{\n            ...t.style,\n            animation: t.visible ? 'fadeInUp 0.5s ease' : 'fadeOutDown 1s ease', // The exit animation needs to be long enough for the element to be removed, or else it will pop back in\n          }}\n        ></ToastBar>\n      )}\n    </Toaster>\n  )\n}\n\ntype ToastMessageOptions = {\n  title?: string\n  /* autoCloseInMs default: 15000 */\n  autoCloseInMs?: number\n  primaryButtonConfig?: AlertButtonConfig\n  secondaryButtonConfig?: AlertButtonConfig\n  dismissOnPrimaryButtonClick?: boolean\n  dismissOnSecondaryButtonClick?: boolean\n}\n\n/**\n * Displays a toast message. Requires one 'SynapseToastContainer' to be somewhere in the page.\n *\n * @param message - The description of the toast message.\n * @param variant - The type of toast message to display. Default 'info'.\n\n * In ToastMessageOptions:\n *\n * @param autoCloseInMs - The amount of time in milliseconds to wait before automatically closing the toast. To prevent autoclose, set to 0 or Infinity. Default 15000.\n *\n * The rest of the options params are undefined by default.\n */\nexport const displayToast = (\n  message: ReactNode,\n  variant?: 'info' | 'success' | 'warning' | 'danger',\n  toastMessageOptions: ToastMessageOptions | null = {},\n): (() => void) => {\n  const id = uniqueId('synToast-')\n  const onClose = () => {\n    toast.dismiss(id)\n  }\n\n  const {\n    title = undefined,\n    primaryButtonConfig = undefined,\n    secondaryButtonConfig = undefined,\n    dismissOnPrimaryButtonClick = false,\n    dismissOnSecondaryButtonClick = false,\n  } = toastMessageOptions ?? {}\n\n  // If 'dismissOnPrimaryButtonClick' is true, then we need to invoke onClose after onClick is invoked.\n  if (\n    primaryButtonConfig &&\n    'onClick' in primaryButtonConfig &&\n    dismissOnPrimaryButtonClick\n  ) {\n    const onClick = primaryButtonConfig.onClick!\n    primaryButtonConfig.onClick = e => {\n      onClick(e)\n      onClose()\n    }\n  }\n\n  // ditto for secondary\n  if (\n    secondaryButtonConfig &&\n    'onClick' in secondaryButtonConfig &&\n    dismissOnSecondaryButtonClick\n  ) {\n    const onClick = secondaryButtonConfig.onClick!\n    secondaryButtonConfig.onClick = e => {\n      onClick(e)\n      onClose()\n    }\n  }\n\n  let { autoCloseInMs = 15000 } = toastMessageOptions ?? {}\n  // Some toast libraries use 0 to prevent autoclose\n  // react-hot-toast doesn't, but we can convert it for better compatibility as we try to migrate to use just one library\n  if (autoCloseInMs === 0) {\n    autoCloseInMs = Infinity\n  }\n\n  toast(\n    <FullWidthAlert\n      isGlobal={false}\n      onClose={onClose}\n      variant={variant ?? 'info'}\n      show={true}\n      title={title}\n      description={message}\n      primaryButtonConfig={primaryButtonConfig}\n      secondaryButtonConfig={secondaryButtonConfig}\n    />,\n    {\n      id: id,\n      className: 'SynapseToastMessage',\n      duration: autoCloseInMs,\n    },\n  )\n\n  return onClose\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,EAAa,EAC3B,SACA,SACA,eACuC;CACvC,IAAM,IAAW,EAAuB,KAAK;AAC7C,QACE,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;EACE,SAAS;EACT,YAAW;EACX,SAAS,IAAW;GAAE,OAAO;GAAK,MAAM;GAAK,GAAG,EAAE;YAElD,kBAAC,OAAD;GAAK,WAAU;GAAY,KAAK;aAC7B;GACG,CAAA;EACQ,CAAA,EAEF,CAAA;;AAUtB,SAAgB,IAAyC;AACvD,QACE,kBAAC,GAAD;EACE,oBAAmB;EACnB,UAAS;aAER,MACC,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;IACL,GAAG,EAAE;IACL,WAAW,EAAE,UAAU,uBAAuB;IAC/C;GACS,CAAA;EAEN,CAAA;;AA0Bd,IAAa,KACX,GACA,GACA,IAAkD,EAAE,KACnC;CACjB,IAAM,IAAK,EAAS,YAAY,EAC1B,UAAgB;AACpB,IAAM,QAAQ,EAAG;IAGb,EACJ,WAAQ,KAAA,GACR,yBAAsB,KAAA,GACtB,2BAAwB,KAAA,GACxB,iCAA8B,IAC9B,mCAAgC,OAC9B,KAAuB,EAAE;AAG7B,KACE,KACA,aAAa,KACb,GACA;EACA,IAAM,IAAU,EAAoB;AACpC,IAAoB,WAAU,MAAK;AAEjC,GADA,EAAQ,EAAE,EACV,GAAS;;;AAKb,KACE,KACA,aAAa,KACb,GACA;EACA,IAAM,IAAU,EAAsB;AACtC,IAAsB,WAAU,MAAK;AAEnC,GADA,EAAQ,EAAE,EACV,GAAS;;;CAIb,IAAI,EAAE,mBAAgB,SAAU,KAAuB,EAAE;AAyBzD,QAtBI,MAAkB,MACpB,IAAgB,WAGlB,EACE,kBAAC,GAAD;EACE,UAAU;EACD;EACT,SAAS,KAAW;EACpB,MAAM;EACC;EACP,aAAa;EACQ;EACE;EACvB,CAAA,EACF;EACM;EACJ,WAAW;EACX,UAAU;EACX,CACF,EAEM"}
+{"version":3,"file":"ToastMessage.js","names":[],"sources":["../../../src/components/ToastMessage/ToastMessage.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es'\nimport React, { ReactNode, useRef } from 'react'\nimport { toast, ToastBar, Toaster } from 'react-hot-toast'\nimport { CSSTransition, TransitionGroup } from 'react-transition-group'\nimport FullWidthAlert, {\n  AlertButtonConfig,\n} from '../FullWidthAlert/FullWidthAlert'\n\nexport type ToastMessageProps = {\n  text: string\n  show: boolean\n  autohide: boolean\n}\n\n/**\n *\n * Generalization of a Material-style toast message used in a couple of places. This component is simple and\n * cannot handle issuing multiple toast messages. For more sophisticated cases, see {@link displayToast}\n */\nexport function ToastMessage({\n  text,\n  show,\n  autohide,\n}: ToastMessageProps): React.JSX.Element {\n  const modalRef = useRef<HTMLDivElement>(null)\n  return (\n    <TransitionGroup>\n      {show && (\n        <CSSTransition\n          nodeRef={modalRef}\n          classNames=\"SRC-card\"\n          timeout={autohide ? { enter: 500, exit: 300 } : {}}\n        >\n          <div className=\"SRC-modal\" ref={modalRef}>\n            {text}\n          </div>\n        </CSSTransition>\n      )}\n    </TransitionGroup>\n  )\n}\n\n/**\n * Customized ToastContainer for using react-toastify.\n *\n * Note that this will collide with other notification systems, such as the BootstrapNotify notifications\n * in SWC.\n */\nexport function SynapseToastContainer(): React.ReactNode {\n  return (\n    <Toaster\n      containerClassName=\"SynapseToastContainer\"\n      position=\"bottom-center\"\n    >\n      {t => (\n        <ToastBar\n          toast={t}\n          style={{\n            ...t.style,\n            animation: t.visible ? 'fadeInUp 0.5s ease' : 'fadeOutDown 1s ease', // The exit animation needs to be long enough for the element to be removed, or else it will pop back in\n          }}\n        ></ToastBar>\n      )}\n    </Toaster>\n  )\n}\n\ntype ToastMessageOptions = {\n  title?: string\n  /* autoCloseInMs default: 15000 */\n  autoCloseInMs?: number\n  primaryButtonConfig?: AlertButtonConfig\n  secondaryButtonConfig?: AlertButtonConfig\n  dismissOnPrimaryButtonClick?: boolean\n  dismissOnSecondaryButtonClick?: boolean\n}\n\n/**\n * Displays a toast message. Requires one 'SynapseToastContainer' to be somewhere in the page.\n *\n * @param message - The description of the toast message.\n * @param variant - The type of toast message to display. Default 'info'.\n\n * In ToastMessageOptions:\n *\n * @param autoCloseInMs - The amount of time in milliseconds to wait before automatically closing the toast. To prevent autoclose, set to 0 or Infinity. Default 15000.\n *\n * The rest of the options params are undefined by default.\n */\nexport const displayToast = (\n  message: ReactNode,\n  variant?: 'info' | 'success' | 'warning' | 'danger',\n  toastMessageOptions: ToastMessageOptions | null = {},\n): (() => void) => {\n  const id = uniqueId('synToast-')\n  const onClose = () => {\n    toast.dismiss(id)\n  }\n\n  const {\n    title = undefined,\n    primaryButtonConfig = undefined,\n    secondaryButtonConfig = undefined,\n    dismissOnPrimaryButtonClick = false,\n    dismissOnSecondaryButtonClick = false,\n  } = toastMessageOptions ?? {}\n\n  // If 'dismissOnPrimaryButtonClick' is true, then we need to invoke onClose after onClick is invoked.\n  if (\n    primaryButtonConfig &&\n    'onClick' in primaryButtonConfig &&\n    dismissOnPrimaryButtonClick\n  ) {\n    const onClick = primaryButtonConfig.onClick!\n    primaryButtonConfig.onClick = e => {\n      onClick(e)\n      onClose()\n    }\n  }\n\n  // ditto for secondary\n  if (\n    secondaryButtonConfig &&\n    'onClick' in secondaryButtonConfig &&\n    dismissOnSecondaryButtonClick\n  ) {\n    const onClick = secondaryButtonConfig.onClick!\n    secondaryButtonConfig.onClick = e => {\n      onClick(e)\n      onClose()\n    }\n  }\n\n  let { autoCloseInMs = 15000 } = toastMessageOptions ?? {}\n  // Some toast libraries use 0 to prevent autoclose\n  // react-hot-toast doesn't, but we can convert it for better compatibility as we try to migrate to use just one library\n  if (autoCloseInMs === 0) {\n    autoCloseInMs = Infinity\n  }\n\n  toast(\n    <FullWidthAlert\n      isGlobal={false}\n      onClose={onClose}\n      variant={variant ?? 'info'}\n      show={true}\n      title={title}\n      description={message}\n      primaryButtonConfig={primaryButtonConfig}\n      secondaryButtonConfig={secondaryButtonConfig}\n    />,\n    {\n      id: id,\n      className: 'SynapseToastMessage',\n      duration: autoCloseInMs,\n    },\n  )\n\n  return onClose\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,EAAa,EAC3B,SACA,SACA,eACuC;CACvC,IAAM,IAAW,EAAuB,IAAI;CAC5C,OACE,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;EACE,SAAS;EACT,YAAW;EACX,SAAS,IAAW;GAAE,OAAO;GAAK,MAAM;EAAI,IAAI,CAAC;YAEjD,kBAAC,OAAD;GAAK,WAAU;GAAY,KAAK;aAC7B;EACE,CAAA;CACQ,CAAA,EAEF,CAAA;AAErB;AAQA,SAAgB,IAAyC;CACvD,OACE,kBAAC,GAAD;EACE,oBAAmB;EACnB,UAAS;aAER,MACC,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;IACL,GAAG,EAAE;IACL,WAAW,EAAE,UAAU,uBAAuB;GAChD;EACS,CAAA;CAEN,CAAA;AAEb;AAwBA,IAAa,KACX,GACA,GACA,IAAkD,CAAC,MAClC;CACjB,IAAM,IAAK,EAAS,WAAW,GACzB,UAAgB;EACpB,EAAM,QAAQ,CAAE;CAClB,GAEM,EACJ,WAAQ,KAAA,GACR,yBAAsB,KAAA,GACtB,2BAAwB,KAAA,GACxB,iCAA8B,IAC9B,mCAAgC,OAC9B,KAAuB,CAAC;CAG5B,IACE,KACA,aAAa,KACb,GACA;EACA,IAAM,IAAU,EAAoB;EACpC,EAAoB,WAAU,MAAK;GAEjC,AADA,EAAQ,CAAC,GACT,EAAQ;EACV;CACF;CAGA,IACE,KACA,aAAa,KACb,GACA;EACA,IAAM,IAAU,EAAsB;EACtC,EAAsB,WAAU,MAAK;GAEnC,AADA,EAAQ,CAAC,GACT,EAAQ;EACV;CACF;CAEA,IAAI,EAAE,mBAAgB,SAAU,KAAuB,CAAC;CAyBxD,OAtBI,MAAkB,MACpB,IAAgB,WAGlB,EACE,kBAAC,GAAD;EACE,UAAU;EACD;EACT,SAAS,KAAW;EACpB,MAAM;EACC;EACP,aAAa;EACQ;EACE;CACxB,CAAA,GACD;EACM;EACJ,WAAW;EACX,UAAU;CACZ,CACF,GAEO;AACT"}

package/dist/components/TotalQueryResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"TotalQueryResults.js","names":[],"sources":["../../src/components/TotalQueryResults.tsx"],"sourcesContent":["import { FacetColumnRequest } from '@sage-bionetworks/synapse-types'\nimport pluralize from 'pluralize'\nimport { CSSProperties, Suspense } from 'react'\nimport { SynapseErrorBoundary } from './error'\nimport IconSvg from './IconSvg/IconSvg'\nimport { useQueryContext } from './QueryContext'\nimport { useQueryVisualizationContext } from './QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from './QueryWrapper/useGetQueryMetadata'\nimport { SkeletonInlineBlock } from './Skeleton'\nimport SelectionCriteriaPills from './widgets/facet-nav/SelectionCriteriaPills'\n\nexport type TotalQueryResultsProps = {\n  style?: CSSProperties\n  frontText: string\n  endText?: string\n  applyChanges?: (newFacets: FacetColumnRequest[]) => void\n  hideIfUnfiltered?: boolean\n}\n\nfunction TotalQueryResults(props: TotalQueryResultsProps) {\n  const { style, frontText, endText = '', hideIfUnfiltered = false } = props\n  const { resetQuery, hasResettableFilters } = useQueryContext()\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { unitDescription } = useQueryVisualizationContext()\n\n  const total = queryMetadata?.queryCount\n\n  const showClearAll = hasResettableFilters\n\n  return (\n    <div\n      className={`TotalQueryResults ${\n        hasResettableFilters ? 'hasFilters' : ''\n      }`}\n      style={style}\n    >\n      {(hasResettableFilters || !hideIfUnfiltered) && (\n        <div className=\"TotalQueryResults__topbar\">\n          <span className=\"SRC-boldText\">\n            {frontText} {total?.toLocaleString()}{' '}\n            {pluralize(unitDescription, total)} {endText}\n          </span>\n          {showClearAll && (\n            <a\n              onClick={resetQuery}\n              className=\"TotalQueryResults__topbar__clearall\"\n            >\n              <IconSvg icon=\"deleteSweep\" />\n              Clear all filters\n            </a>\n          )}\n        </div>\n      )}\n      <div className=\"TotalQueryResults__selections\">\n        <SelectionCriteriaPills />\n      </div>\n    </div>\n  )\n}\n\nexport default function TotalQueryResultsWithSuspense(\n  props: TotalQueryResultsProps,\n) {\n  return (\n    <SynapseErrorBoundary>\n      <Suspense fallback={<SkeletonInlineBlock width={100} />}>\n        <TotalQueryResults {...props} />\n      </Suspense>\n    </SynapseErrorBoundary>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAS,EAAkB,GAA+B;CACxD,IAAM,EAAE,UAAO,cAAW,aAAU,IAAI,sBAAmB,OAAU,GAC/D,EAAE,eAAY,4BAAyB,GAAiB,EACxD,EAAE,MAAM,MAAkB,GAA6B,EACvD,EAAE,uBAAoB,GAA8B,EAEpD,IAAQ,GAAe,YAEvB,IAAe;AAErB,QACE,kBAAC,OAAD;EACE,WAAW,qBACT,IAAuB,eAAe;EAEjC;YAJT,EAMI,KAAwB,CAAC,MACzB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACG;KAAU;KAAE,GAAO,gBAAgB;KAAE;KACrC,EAAU,GAAiB,EAAM;KAAC;KAAE;KAChC;OACN,KACC,kBAAC,KAAD;IACE,SAAS;IACT,WAAU;cAFZ,CAIE,kBAAC,GAAD,EAAS,MAAK,eAAgB,CAAA,EAAA,oBAE5B;MAEF;MAER,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,EAA0B,CAAA;GACtB,CAAA,CACF;;;AAIV,SAAwB,EACtB,GACA;AACA,QACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAU,UAAU,kBAAC,GAAD,EAAqB,OAAO,KAAO,CAAA;YACrD,kBAAC,GAAD,EAAmB,GAAI,GAAS,CAAA;EACvB,CAAA,EACU,CAAA"}
+{"version":3,"file":"TotalQueryResults.js","names":[],"sources":["../../src/components/TotalQueryResults.tsx"],"sourcesContent":["import { FacetColumnRequest } from '@sage-bionetworks/synapse-types'\nimport pluralize from 'pluralize'\nimport { CSSProperties, Suspense } from 'react'\nimport { SynapseErrorBoundary } from './error'\nimport IconSvg from './IconSvg/IconSvg'\nimport { useQueryContext } from './QueryContext'\nimport { useQueryVisualizationContext } from './QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from './QueryWrapper/useGetQueryMetadata'\nimport { SkeletonInlineBlock } from './Skeleton'\nimport SelectionCriteriaPills from './widgets/facet-nav/SelectionCriteriaPills'\n\nexport type TotalQueryResultsProps = {\n  style?: CSSProperties\n  frontText: string\n  endText?: string\n  applyChanges?: (newFacets: FacetColumnRequest[]) => void\n  hideIfUnfiltered?: boolean\n}\n\nfunction TotalQueryResults(props: TotalQueryResultsProps) {\n  const { style, frontText, endText = '', hideIfUnfiltered = false } = props\n  const { resetQuery, hasResettableFilters } = useQueryContext()\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { unitDescription } = useQueryVisualizationContext()\n\n  const total = queryMetadata?.queryCount\n\n  const showClearAll = hasResettableFilters\n\n  return (\n    <div\n      className={`TotalQueryResults ${\n        hasResettableFilters ? 'hasFilters' : ''\n      }`}\n      style={style}\n    >\n      {(hasResettableFilters || !hideIfUnfiltered) && (\n        <div className=\"TotalQueryResults__topbar\">\n          <span className=\"SRC-boldText\">\n            {frontText} {total?.toLocaleString()}{' '}\n            {pluralize(unitDescription, total)} {endText}\n          </span>\n          {showClearAll && (\n            <a\n              onClick={resetQuery}\n              className=\"TotalQueryResults__topbar__clearall\"\n            >\n              <IconSvg icon=\"deleteSweep\" />\n              Clear all filters\n            </a>\n          )}\n        </div>\n      )}\n      <div className=\"TotalQueryResults__selections\">\n        <SelectionCriteriaPills />\n      </div>\n    </div>\n  )\n}\n\nexport default function TotalQueryResultsWithSuspense(\n  props: TotalQueryResultsProps,\n) {\n  return (\n    <SynapseErrorBoundary>\n      <Suspense fallback={<SkeletonInlineBlock width={100} />}>\n        <TotalQueryResults {...props} />\n      </Suspense>\n    </SynapseErrorBoundary>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAS,EAAkB,GAA+B;CACxD,IAAM,EAAE,UAAO,cAAW,aAAU,IAAI,sBAAmB,OAAU,GAC/D,EAAE,eAAY,4BAAyB,EAAgB,GACvD,EAAE,MAAM,MAAkB,EAA4B,GACtD,EAAE,uBAAoB,EAA6B,GAEnD,IAAQ,GAAe,YAEvB,IAAe;CAErB,OACE,kBAAC,OAAD;EACE,WAAW,qBACT,IAAuB,eAAe;EAEjC;YAJT,EAMI,KAAwB,CAAC,MACzB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACG;KAAU;KAAE,GAAO,eAAe;KAAG;KACrC,EAAU,GAAiB,CAAK;KAAE;KAAE;IACjC;OACL,KACC,kBAAC,KAAD;IACE,SAAS;IACT,WAAU;cAFZ,CAIE,kBAAC,GAAD,EAAS,MAAK,cAAe,CAAA,GAAC,mBAE7B;KAEF;MAEP,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,CAAyB,CAAA;EACtB,CAAA,CACF;;AAET;AAEA,SAAwB,EACtB,GACA;CACA,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAU,UAAU,kBAAC,GAAD,EAAqB,OAAO,IAAM,CAAA;YACpD,kBAAC,GAAD,EAAmB,GAAI,EAAQ,CAAA;CACvB,CAAA,EACU,CAAA;AAE1B"}

package/dist/components/UserCard/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/UserCard/Avatar.tsx"],"sourcesContent":["import { getColor } from '@/utils/functions/getUserData'\nimport { useOverlay } from '@/utils/hooks'\nimport { Avatar as MUIAvatar, Skeleton, SxProps, useTheme } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\nimport { CSSProperties, ReactNode, useRef } from 'react'\nimport UserCardMedium from './UserCardMedium'\n\nconst TIMER_DELAY_SHOW = 250 // milliseconds\nconst TIMER_DELAY_HIDE = 500\n\nexport type AvatarSize = 'SMALL' | 'MEDIUM' | 'LARGE'\n\nexport type AvatarProps = {\n  userProfile: UserProfile\n  avatarSize?: AvatarSize\n  imageURL?: string\n  showCardOnHover?: boolean\n  isLoadingAvatar?: boolean\n  className?: string\n}\n\nexport function Avatar({\n  userProfile,\n  avatarSize = 'LARGE',\n  imageURL,\n  showCardOnHover = false,\n  isLoadingAvatar = false,\n  className,\n}: AvatarProps) {\n  const target = useRef(null)\n  const theme = useTheme()\n\n  const mediumUserCard = (\n    <UserCardMedium userProfile={userProfile} imageURL={imageURL} />\n  )\n  const {\n    OverlayComponent,\n    isShowing: isShowingOverlay,\n    toggleShow,\n    toggleHide,\n  } = useOverlay(mediumUserCard, target, TIMER_DELAY_SHOW, TIMER_DELAY_HIDE, {\n    sx: { maxWidth: '425px' },\n  })\n\n  let sizeStyles: SxProps = {}\n  switch (avatarSize) {\n    case 'SMALL':\n      sizeStyles = {\n        fontSize: '12px',\n        width: '20px',\n        height: '20px',\n      }\n      break\n    case 'MEDIUM':\n      sizeStyles = {\n        fontSize: '18px',\n        width: '30px',\n        height: '30px',\n      }\n      break\n    case 'LARGE':\n      sizeStyles = {\n        fontSize: '26px',\n        width: '80px',\n        height: '80px',\n        [theme.breakpoints.down('sm')]: {\n          fontSize: '21px',\n          width: '45px',\n          height: '45px',\n        },\n      }\n      break\n    default:\n      break\n  }\n\n  const cursorStyle = showCardOnHover ? 'pointer' : 'unset'\n\n  const hasProfileImage = !!imageURL\n\n  const { ownerId } = userProfile\n  const { userName = ownerId, firstName } = userProfile\n  const conditionalStyles: CSSProperties = hasProfileImage\n    ? {\n        backgroundImage: `url(${imageURL})`,\n      }\n    : { background: getColor(userName) }\n\n  if (isLoadingAvatar) {\n    return <Skeleton sx={sizeStyles} variant=\"circular\" />\n  }\n\n  let content: ReactNode | string = <></>\n\n  if (!hasProfileImage) {\n    content = firstName ? firstName[0] : userName[0]\n  }\n\n  return (\n    <>\n      {showCardOnHover && <OverlayComponent />}\n      <MUIAvatar\n        ref={target}\n        role=\"img\"\n        onMouseEnter={() => toggleShow()}\n        onMouseLeave={() => toggleHide()}\n        onClick={event => {\n          if (showCardOnHover) {\n            event.stopPropagation()\n          }\n          if (isShowingOverlay) {\n            toggleHide(false)\n          } else {\n            toggleShow(false)\n          }\n        }}\n        className={`${className ?? ''}`}\n        sx={{\n          backgroundPosition: 'center',\n          backgroundRepeat: 'no-repeat',\n          backgroundSize: 'cover',\n          cursor: cursorStyle,\n          textDecoration: 'none',\n          ...sizeStyles,\n          ...conditionalStyles,\n        }}\n      >\n        {content}\n      </MUIAvatar>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,IAAmB,KACnB,IAAmB;AAazB,SAAgB,EAAO,EACrB,gBACA,gBAAa,SACb,aACA,qBAAkB,IAClB,qBAAkB,IAClB,gBACc;CACd,IAAM,IAAS,EAAO,KAAK,EACrB,IAAQ,GAAU,EAKlB,EACJ,qBACA,WAAW,GACX,eACA,kBACE,EAPF,kBAAC,GAAD;EAA6B;EAAuB;EAAY,CAOnD,EAAgB,GAAQ,GAAkB,GAAkB,EACzE,IAAI,EAAE,UAAU,SAAS,EAC1B,CAAC,EAEE,IAAsB,EAAE;AAC5B,SAAQ,GAAR;EACE,KAAK;AACH,OAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;IACT;AACD;EACF,KAAK;AACH,OAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;IACT;AACD;EACF,KAAK;AACH,OAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;KACP,EAAM,YAAY,KAAK,KAAK,GAAG;KAC9B,UAAU;KACV,OAAO;KACP,QAAQ;KACT;IACF;AACD;EACF,QACE;;CAGJ,IAAM,IAAc,IAAkB,YAAY,SAE5C,IAAkB,CAAC,CAAC,GAEpB,EAAE,eAAY,GACd,EAAE,cAAW,GAAS,iBAAc,GACpC,IAAmC,IACrC,EACE,iBAAiB,OAAO,EAAS,IAClC,GACD,EAAE,YAAY,EAAS,EAAS,EAAE;AAEtC,KAAI,EACF,QAAO,kBAAC,GAAD;EAAU,IAAI;EAAY,SAAQ;EAAa,CAAA;CAGxD,IAAI,IAA8B,kBAAA,GAAA,EAAK,CAAA;AAMvC,QAJK,MACH,IAAU,IAAY,EAAU,KAAK,EAAS,KAI9C,kBAAA,GAAA,EAAA,UAAA,CACG,KAAmB,kBAAC,GAAD,EAAoB,CAAA,EACxC,kBAAC,GAAD;EACE,KAAK;EACL,MAAK;EACL,oBAAoB,GAAY;EAChC,oBAAoB,GAAY;EAChC,UAAS,MAAS;AAIhB,GAHI,KACF,EAAM,iBAAiB,EAErB,IACF,EAAW,GAAM,GAEjB,EAAW,GAAM;;EAGrB,WAAW,GAAG,KAAa;EAC3B,IAAI;GACF,oBAAoB;GACpB,kBAAkB;GAClB,gBAAgB;GAChB,QAAQ;GACR,gBAAgB;GAChB,GAAG;GACH,GAAG;GACJ;YAEA;EACS,CAAA,CACX,EAAA,CAAA"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/UserCard/Avatar.tsx"],"sourcesContent":["import { getColor } from '@/utils/functions/getUserData'\nimport { useOverlay } from '@/utils/hooks'\nimport { Avatar as MUIAvatar, Skeleton, SxProps, useTheme } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\nimport { CSSProperties, ReactNode, useRef } from 'react'\nimport UserCardMedium from './UserCardMedium'\n\nconst TIMER_DELAY_SHOW = 250 // milliseconds\nconst TIMER_DELAY_HIDE = 500\n\nexport type AvatarSize = 'SMALL' | 'MEDIUM' | 'LARGE'\n\nexport type AvatarProps = {\n  userProfile: UserProfile\n  avatarSize?: AvatarSize\n  imageURL?: string\n  showCardOnHover?: boolean\n  isLoadingAvatar?: boolean\n  className?: string\n}\n\nexport function Avatar({\n  userProfile,\n  avatarSize = 'LARGE',\n  imageURL,\n  showCardOnHover = false,\n  isLoadingAvatar = false,\n  className,\n}: AvatarProps) {\n  const target = useRef(null)\n  const theme = useTheme()\n\n  const mediumUserCard = (\n    <UserCardMedium userProfile={userProfile} imageURL={imageURL} />\n  )\n  const {\n    OverlayComponent,\n    isShowing: isShowingOverlay,\n    toggleShow,\n    toggleHide,\n  } = useOverlay(mediumUserCard, target, TIMER_DELAY_SHOW, TIMER_DELAY_HIDE, {\n    sx: { maxWidth: '425px' },\n  })\n\n  let sizeStyles: SxProps = {}\n  switch (avatarSize) {\n    case 'SMALL':\n      sizeStyles = {\n        fontSize: '12px',\n        width: '20px',\n        height: '20px',\n      }\n      break\n    case 'MEDIUM':\n      sizeStyles = {\n        fontSize: '18px',\n        width: '30px',\n        height: '30px',\n      }\n      break\n    case 'LARGE':\n      sizeStyles = {\n        fontSize: '26px',\n        width: '80px',\n        height: '80px',\n        [theme.breakpoints.down('sm')]: {\n          fontSize: '21px',\n          width: '45px',\n          height: '45px',\n        },\n      }\n      break\n    default:\n      break\n  }\n\n  const cursorStyle = showCardOnHover ? 'pointer' : 'unset'\n\n  const hasProfileImage = !!imageURL\n\n  const { ownerId } = userProfile\n  const { userName = ownerId, firstName } = userProfile\n  const conditionalStyles: CSSProperties = hasProfileImage\n    ? {\n        backgroundImage: `url(${imageURL})`,\n      }\n    : { background: getColor(userName) }\n\n  if (isLoadingAvatar) {\n    return <Skeleton sx={sizeStyles} variant=\"circular\" />\n  }\n\n  let content: ReactNode | string = <></>\n\n  if (!hasProfileImage) {\n    content = firstName ? firstName[0] : userName[0]\n  }\n\n  return (\n    <>\n      {showCardOnHover && <OverlayComponent />}\n      <MUIAvatar\n        ref={target}\n        role=\"img\"\n        onMouseEnter={() => toggleShow()}\n        onMouseLeave={() => toggleHide()}\n        onClick={event => {\n          if (showCardOnHover) {\n            event.stopPropagation()\n          }\n          if (isShowingOverlay) {\n            toggleHide(false)\n          } else {\n            toggleShow(false)\n          }\n        }}\n        className={`${className ?? ''}`}\n        sx={{\n          backgroundPosition: 'center',\n          backgroundRepeat: 'no-repeat',\n          backgroundSize: 'cover',\n          cursor: cursorStyle,\n          textDecoration: 'none',\n          ...sizeStyles,\n          ...conditionalStyles,\n        }}\n      >\n        {content}\n      </MUIAvatar>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,IAAmB,KACnB,IAAmB;AAazB,SAAgB,EAAO,EACrB,gBACA,gBAAa,SACb,aACA,qBAAkB,IAClB,qBAAkB,IAClB,gBACc;CACd,IAAM,IAAS,EAAO,IAAI,GACpB,IAAQ,EAAS,GAKjB,EACJ,qBACA,WAAW,GACX,eACA,kBACE,EAPF,kBAAC,GAAD;EAA6B;EAAuB;CAAW,CAOlD,GAAgB,GAAQ,GAAkB,GAAkB,EACzE,IAAI,EAAE,UAAU,QAAQ,EAC1B,CAAC,GAEG,IAAsB,CAAC;CAC3B,QAAQ,GAAR;EACE,KAAK;GACH,IAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;GACV;GACA;EACF,KAAK;GACH,IAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;GACV;GACA;EACF,KAAK;GACH,IAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;KACP,EAAM,YAAY,KAAK,IAAI,IAAI;KAC9B,UAAU;KACV,OAAO;KACP,QAAQ;IACV;GACF;GACA;EACF,SACE;CACJ;CAEA,IAAM,IAAc,IAAkB,YAAY,SAE5C,IAAkB,CAAC,CAAC,GAEpB,EAAE,eAAY,GACd,EAAE,cAAW,GAAS,iBAAc,GACpC,IAAmC,IACrC,EACE,iBAAiB,OAAO,EAAS,GACnC,IACA,EAAE,YAAY,EAAS,CAAQ,EAAE;CAErC,IAAI,GACF,OAAO,kBAAC,GAAD;EAAU,IAAI;EAAY,SAAQ;CAAY,CAAA;CAGvD,IAAI,IAA8B,kBAAA,GAAA,CAAI,CAAA;CAMtC,OAJK,MACH,IAAU,IAAY,EAAU,KAAK,EAAS,KAI9C,kBAAA,GAAA,EAAA,UAAA,CACG,KAAmB,kBAAC,GAAD,CAAmB,CAAA,GACvC,kBAAC,GAAD;EACE,KAAK;EACL,MAAK;EACL,oBAAoB,EAAW;EAC/B,oBAAoB,EAAW;EAC/B,UAAS,MAAS;GAIhB,AAHI,KACF,EAAM,gBAAgB,GAEpB,IACF,EAAW,EAAK,IAEhB,EAAW,EAAK;EAEpB;EACA,WAAW,GAAG,KAAa;EAC3B,IAAI;GACF,oBAAoB;GACpB,kBAAkB;GAClB,gBAAgB;GAChB,QAAQ;GACR,gBAAgB;GAChB,GAAG;GACH,GAAG;EACL;YAEC;CACQ,CAAA,CACX,EAAA,CAAA;AAEN"}

package/dist/components/UserCard/UserBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserBadge.js","names":[],"sources":["../../../src/components/UserCard/UserBadge.tsx"],"sourcesContent":["import { useUserOrTeam } from '../UserOrTeamBadge/useUserOrTeam'\nimport { useGetUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { getPrincipalDisplayName } from '@/utils/functions/getPrincipalDisplayName'\nimport { useOverlay } from '@/utils/hooks/useOverlay'\nimport { Box, Chip, Link, Skeleton } from '@mui/material'\nimport { CSSProperties, useMemo, useRef } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { AvatarSize } from './Avatar'\nimport UserCard from './UserCard'\n\nexport type UserBadgeProps = {\n  /* The ID of the user to show. If undefined, a skeleton will be shown */\n  userId?: string\n  /* If true, shows the user's avatar with their name. Default false */\n  withAvatar?: boolean\n  /* Whether a card containing additional profile information should be shown on hover. Default true. */\n  showCardOnHover?: boolean\n  /* Whether to disable the profile linking to the user's profile page */\n  disableLink?: boolean\n  /* Override the href of the UserBadge component. Default is the Synapse profile page */\n  link?: string\n  /* Shows icons to denote profile certification and validation. Default is false. */\n  showAccountLevelIcon?: boolean\n  /* Whether to open the clicked link in a new tab. Default is false */\n  openLinkInNewTab?: boolean\n  /* Defines the size of the avatar if `withAvatar` is true. Default is 'SMALL' */\n  avatarSize?: AvatarSize\n  /* If true, shows the user's full name. Default is false */\n  showFullName?: boolean\n\n  className?: string\n\n  showModeratorBadge?: boolean\n}\n\nconst TIMER_DELAY_SHOW = 250 // milliseconds\nconst TIMER_DELAY_HIDE = 500\n\nexport function UserBadge(props: UserBadgeProps) {\n  const {\n    userId,\n    showCardOnHover = true,\n    disableLink,\n    showAccountLevelIcon = false,\n    openLinkInNewTab = false,\n    withAvatar = false,\n    avatarSize = 'SMALL',\n    className,\n    showFullName = false,\n    showModeratorBadge = false,\n  } = props\n  let { link } = props\n\n  const target = useRef(null)\n  const certificationOrVerification =\n    SynapseConstants.USER_BUNDLE_MASK_IS_CERTIFIED |\n    SynapseConstants.USER_BUNDLE_MASK_IS_VERIFIED\n\n  const { userGroupHeader, IconComponent } = useUserOrTeam(userId)\n\n  // To show certification/validation status, we need the full bundle. Only fetch if these should be shown.\n  const { data: userBundle } = useGetUserBundle(\n    userId!,\n    certificationOrVerification,\n    {\n      enabled: Boolean(userId) && showAccountLevelIcon,\n    },\n  )\n\n  const mediumUserCard = useMemo(\n    () => <UserCard ownerId={userId} size={'MEDIUM USER CARD'} />,\n    [userId],\n  )\n\n  if (link == null) {\n    link = `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Profile:${userId}`\n  }\n\n  const { OverlayComponent, toggleShow, toggleHide } = useOverlay(\n    mediumUserCard,\n    target,\n    TIMER_DELAY_SHOW,\n    TIMER_DELAY_HIDE,\n    { sx: { maxWidth: '425px' } },\n  )\n\n  const avatar = withAvatar ? (\n    <span className=\"SRC-inline-avatar\">\n      <IconComponent avatarSize={avatarSize} />\n    </span>\n  ) : (\n    <></>\n  )\n\n  const accountLevelIcon = (\n    <Box\n      sx={{\n        display: 'flex',\n        gap: 1,\n        mx: 1,\n      }}\n    >\n      {!userBundle?.isCertified && !userBundle?.isVerified && (\n        <IconSvg\n          icon=\"accountRegistered\"\n          label={'Registered'}\n          sx={{ width: '30px', height: '30px' }}\n        />\n      )}\n      {userBundle?.isCertified && (\n        <IconSvg\n          icon=\"accountCertified\"\n          label={'Certified'}\n          sx={{ width: '30px', height: '30px' }}\n        />\n      )}\n      {userBundle?.isVerified && (\n        <IconSvg\n          icon=\"accountValidated\"\n          label={'Validated'}\n          sx={{ width: '30px', height: '30px' }}\n        />\n      )}\n    </Box>\n  )\n\n  const displayName = userGroupHeader\n    ? getPrincipalDisplayName(userGroupHeader, { showFullName })\n    : undefined\n\n  const Tag = showCardOnHover || !disableLink ? Link : 'span'\n\n  let style: CSSProperties = {}\n  if (showCardOnHover) {\n    style = { whiteSpace: 'nowrap' }\n  } else if (disableLink) {\n    style = { cursor: 'unset' }\n  }\n\n  return (\n    <>\n      {showCardOnHover && <OverlayComponent />}\n      {avatar}\n      <Tag\n        className={`SRC-userCard UserBadge SRC-boldText ${className ?? ''}`}\n        style={style}\n        href={disableLink ? undefined : link}\n        target={openLinkInNewTab ? '_blank' : ''}\n        rel={openLinkInNewTab ? 'noreferrer' : ''}\n        ref={target}\n        onMouseEnter={() => toggleShow()}\n        onMouseLeave={() => toggleHide()}\n      >\n        {displayName ?? <Skeleton width={'100px'} />}\n        {showAccountLevelIcon && accountLevelIcon}\n      </Tag>\n      {showModeratorBadge && (\n        <Chip\n          sx={{\n            borderRadius: '5px',\n            backgroundColor: '#395979',\n            color: '#FFF',\n            fontWeight: 700,\n            fontSize: '12px',\n            marginLeft: '8px',\n            height: 'unset',\n            '& .MuiChip-label': {\n              padding: '5px 6px',\n            },\n          }}\n          label=\"Moderator\"\n        />\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAqCA,IAAM,IAAmB,KACnB,IAAmB;AAEzB,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EACJ,WACA,qBAAkB,IAClB,gBACA,0BAAuB,IACvB,sBAAmB,IACnB,gBAAa,IACb,gBAAa,SACb,cACA,kBAAe,IACf,wBAAqB,OACnB,GACA,EAAE,YAAS,GAET,IAAS,EAAO,KAAK,EAKrB,EAAE,oBAAiB,qBAAkB,EAAc,EAAO,EAG1D,EAAE,MAAM,MAAe,EAC3B,GACA,IACA,EACE,SAAS,EAAQ,KAAW,GAC7B,CACF,EAEK,IAAiB,QACf,kBAAC,GAAD;EAAU,SAAS;EAAQ,MAAM;EAAsB,CAAA,EAC7D,CAAC,EAAO,CACT;AAED,CACE,MAAO,GAAG,EAA2B,OAAO,UAAU;CAGxD,IAAM,EAAE,qBAAkB,eAAY,kBAAe,EACnD,GACA,GACA,GACA,GACA,EAAE,IAAI,EAAE,UAAU,SAAS,EAAE,CAC9B,EAEK,IAAS,IACb,kBAAC,QAAD;EAAM,WAAU;YACd,kBAAC,GAAD,EAA2B,eAAc,CAAA;EACpC,CAAA,GAEP,kBAAA,GAAA,EAAK,CAAA,EAGD,IACJ,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,KAAK;GACL,IAAI;GACL;YALH;GAOG,CAAC,GAAY,eAAe,CAAC,GAAY,cACxC,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACrC,CAAA;GAEH,GAAY,eACX,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACrC,CAAA;GAEH,GAAY,cACX,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACrC,CAAA;GAEA;KAGF,IAAc,IAChB,EAAwB,GAAiB,EAAE,iBAAc,CAAC,GAC1D,KAAA,GAEE,IAAM,KAAmB,CAAC,IAAc,IAAO,QAEjD,IAAuB,EAAE;AAO7B,QANI,IACF,IAAQ,EAAE,YAAY,UAAU,GACvB,MACT,IAAQ,EAAE,QAAQ,SAAS,GAI3B,kBAAA,GAAA,EAAA,UAAA;EACG,KAAmB,kBAAC,GAAD,EAAoB,CAAA;EACvC;EACD,kBAAC,GAAD;GACE,WAAW,uCAAuC,KAAa;GACxD;GACP,MAAM,IAAc,KAAA,IAAY;GAChC,QAAQ,IAAmB,WAAW;GACtC,KAAK,IAAmB,eAAe;GACvC,KAAK;GACL,oBAAoB,GAAY;GAChC,oBAAoB,GAAY;aARlC,CAUG,KAAe,kBAAC,GAAD,EAAU,OAAO,SAAW,CAAA,EAC3C,KAAwB,EACrB;;EACL,KACC,kBAAC,GAAD;GACE,IAAI;IACF,cAAc;IACd,iBAAiB;IACjB,OAAO;IACP,YAAY;IACZ,UAAU;IACV,YAAY;IACZ,QAAQ;IACR,oBAAoB,EAClB,SAAS,WACV;IACF;GACD,OAAM;GACN,CAAA;EAEH,EAAA,CAAA"}
+{"version":3,"file":"UserBadge.js","names":[],"sources":["../../../src/components/UserCard/UserBadge.tsx"],"sourcesContent":["import { useUserOrTeam } from '../UserOrTeamBadge/useUserOrTeam'\nimport { useGetUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { getPrincipalDisplayName } from '@/utils/functions/getPrincipalDisplayName'\nimport { useOverlay } from '@/utils/hooks/useOverlay'\nimport { Box, Chip, Link, Skeleton } from '@mui/material'\nimport { CSSProperties, useMemo, useRef } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { AvatarSize } from './Avatar'\nimport UserCard from './UserCard'\n\nexport type UserBadgeProps = {\n  /* The ID of the user to show. If undefined, a skeleton will be shown */\n  userId?: string\n  /* If true, shows the user's avatar with their name. Default false */\n  withAvatar?: boolean\n  /* Whether a card containing additional profile information should be shown on hover. Default true. */\n  showCardOnHover?: boolean\n  /* Whether to disable the profile linking to the user's profile page */\n  disableLink?: boolean\n  /* Override the href of the UserBadge component. Default is the Synapse profile page */\n  link?: string\n  /* Shows icons to denote profile certification and validation. Default is false. */\n  showAccountLevelIcon?: boolean\n  /* Whether to open the clicked link in a new tab. Default is false */\n  openLinkInNewTab?: boolean\n  /* Defines the size of the avatar if `withAvatar` is true. Default is 'SMALL' */\n  avatarSize?: AvatarSize\n  /* If true, shows the user's full name. Default is false */\n  showFullName?: boolean\n\n  className?: string\n\n  showModeratorBadge?: boolean\n}\n\nconst TIMER_DELAY_SHOW = 250 // milliseconds\nconst TIMER_DELAY_HIDE = 500\n\nexport function UserBadge(props: UserBadgeProps) {\n  const {\n    userId,\n    showCardOnHover = true,\n    disableLink,\n    showAccountLevelIcon = false,\n    openLinkInNewTab = false,\n    withAvatar = false,\n    avatarSize = 'SMALL',\n    className,\n    showFullName = false,\n    showModeratorBadge = false,\n  } = props\n  let { link } = props\n\n  const target = useRef(null)\n  const certificationOrVerification =\n    SynapseConstants.USER_BUNDLE_MASK_IS_CERTIFIED |\n    SynapseConstants.USER_BUNDLE_MASK_IS_VERIFIED\n\n  const { userGroupHeader, IconComponent } = useUserOrTeam(userId)\n\n  // To show certification/validation status, we need the full bundle. Only fetch if these should be shown.\n  const { data: userBundle } = useGetUserBundle(\n    userId!,\n    certificationOrVerification,\n    {\n      enabled: Boolean(userId) && showAccountLevelIcon,\n    },\n  )\n\n  const mediumUserCard = useMemo(\n    () => <UserCard ownerId={userId} size={'MEDIUM USER CARD'} />,\n    [userId],\n  )\n\n  if (link == null) {\n    link = `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Profile:${userId}`\n  }\n\n  const { OverlayComponent, toggleShow, toggleHide } = useOverlay(\n    mediumUserCard,\n    target,\n    TIMER_DELAY_SHOW,\n    TIMER_DELAY_HIDE,\n    { sx: { maxWidth: '425px' } },\n  )\n\n  const avatar = withAvatar ? (\n    <span className=\"SRC-inline-avatar\">\n      <IconComponent avatarSize={avatarSize} />\n    </span>\n  ) : (\n    <></>\n  )\n\n  const accountLevelIcon = (\n    <Box\n      sx={{\n        display: 'flex',\n        gap: 1,\n        mx: 1,\n      }}\n    >\n      {!userBundle?.isCertified && !userBundle?.isVerified && (\n        <IconSvg\n          icon=\"accountRegistered\"\n          label={'Registered'}\n          sx={{ width: '30px', height: '30px' }}\n        />\n      )}\n      {userBundle?.isCertified && (\n        <IconSvg\n          icon=\"accountCertified\"\n          label={'Certified'}\n          sx={{ width: '30px', height: '30px' }}\n        />\n      )}\n      {userBundle?.isVerified && (\n        <IconSvg\n          icon=\"accountValidated\"\n          label={'Validated'}\n          sx={{ width: '30px', height: '30px' }}\n        />\n      )}\n    </Box>\n  )\n\n  const displayName = userGroupHeader\n    ? getPrincipalDisplayName(userGroupHeader, { showFullName })\n    : undefined\n\n  const Tag = showCardOnHover || !disableLink ? Link : 'span'\n\n  let style: CSSProperties = {}\n  if (showCardOnHover) {\n    style = { whiteSpace: 'nowrap' }\n  } else if (disableLink) {\n    style = { cursor: 'unset' }\n  }\n\n  return (\n    <>\n      {showCardOnHover && <OverlayComponent />}\n      {avatar}\n      <Tag\n        className={`SRC-userCard UserBadge SRC-boldText ${className ?? ''}`}\n        style={style}\n        href={disableLink ? undefined : link}\n        target={openLinkInNewTab ? '_blank' : ''}\n        rel={openLinkInNewTab ? 'noreferrer' : ''}\n        ref={target}\n        onMouseEnter={() => toggleShow()}\n        onMouseLeave={() => toggleHide()}\n      >\n        {displayName ?? <Skeleton width={'100px'} />}\n        {showAccountLevelIcon && accountLevelIcon}\n      </Tag>\n      {showModeratorBadge && (\n        <Chip\n          sx={{\n            borderRadius: '5px',\n            backgroundColor: '#395979',\n            color: '#FFF',\n            fontWeight: 700,\n            fontSize: '12px',\n            marginLeft: '8px',\n            height: 'unset',\n            '& .MuiChip-label': {\n              padding: '5px 6px',\n            },\n          }}\n          label=\"Moderator\"\n        />\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAqCA,IAAM,IAAmB,KACnB,IAAmB;AAEzB,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EACJ,WACA,qBAAkB,IAClB,gBACA,0BAAuB,IACvB,sBAAmB,IACnB,gBAAa,IACb,gBAAa,SACb,cACA,kBAAe,IACf,wBAAqB,OACnB,GACA,EAAE,YAAS,GAET,IAAS,EAAO,IAAI,GAKpB,EAAE,oBAAiB,qBAAkB,EAAc,CAAM,GAGzD,EAAE,MAAM,MAAe,EAC3B,GACA,IACA,EACE,SAAS,EAAQ,KAAW,EAC9B,CACF,GAEM,IAAiB,QACf,kBAAC,GAAD;EAAU,SAAS;EAAQ,MAAM;CAAqB,CAAA,GAC5D,CAAC,CAAM,CACT;CAEA,AACE,MAAO,GAAG,EAA2B,OAAO,UAAU;CAGxD,IAAM,EAAE,qBAAkB,eAAY,kBAAe,EACnD,GACA,GACA,GACA,GACA,EAAE,IAAI,EAAE,UAAU,QAAQ,EAAE,CAC9B,GAEM,IAAS,IACb,kBAAC,QAAD;EAAM,WAAU;YACd,kBAAC,GAAD,EAA2B,cAAa,CAAA;CACpC,CAAA,IAEN,kBAAA,GAAA,CAAI,CAAA,GAGA,IACJ,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,KAAK;GACL,IAAI;EACN;YALF;GAOG,CAAC,GAAY,eAAe,CAAC,GAAY,cACxC,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;IAAO;GACrC,CAAA;GAEF,GAAY,eACX,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;IAAO;GACrC,CAAA;GAEF,GAAY,cACX,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;IAAO;GACrC,CAAA;EAEA;KAGD,IAAc,IAChB,EAAwB,GAAiB,EAAE,gBAAa,CAAC,IACzD,KAAA,GAEE,IAAM,KAAmB,CAAC,IAAc,IAAO,QAEjD,IAAuB,CAAC;CAO5B,OANI,IACF,IAAQ,EAAE,YAAY,SAAS,IACtB,MACT,IAAQ,EAAE,QAAQ,QAAQ,IAI1B,kBAAA,GAAA,EAAA,UAAA;EACG,KAAmB,kBAAC,GAAD,CAAmB,CAAA;EACtC;EACD,kBAAC,GAAD;GACE,WAAW,uCAAuC,KAAa;GACxD;GACP,MAAM,IAAc,KAAA,IAAY;GAChC,QAAQ,IAAmB,WAAW;GACtC,KAAK,IAAmB,eAAe;GACvC,KAAK;GACL,oBAAoB,EAAW;GAC/B,oBAAoB,EAAW;aARjC,CAUG,KAAe,kBAAC,GAAD,EAAU,OAAO,QAAU,CAAA,GAC1C,KAAwB,CACtB;;EACJ,KACC,kBAAC,GAAD;GACE,IAAI;IACF,cAAc;IACd,iBAAiB;IACjB,OAAO;IACP,YAAY;IACZ,UAAU;IACV,YAAY;IACZ,QAAQ;IACR,oBAAoB,EAClB,SAAS,UACX;GACF;GACA,OAAM;EACP,CAAA;CAEH,EAAA,CAAA;AAEN"}

package/dist/components/UserCard/UserCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCard.js","names":[],"sources":["../../../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { useGetProfileImage } from '@/synapse-queries/file/useFiles'\nimport {\n  useGetPrincipalIdForAlias,\n  useGetUserProfile,\n} from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport usePreFetchResource, {\n  useCreateUrlForData,\n} from '@/utils/hooks/usePreFetchResource'\nimport { UserCardSize } from '@/utils/SynapseConstants'\nimport { AliasType, UserProfile } from '@sage-bionetworks/synapse-types'\nimport { useMemo } from 'react'\nimport { Avatar, AvatarSize } from './Avatar'\nimport { UserBadge } from './UserBadge'\nimport { MenuAction } from './UserCardContextMenu'\nimport UserCardMedium from './UserCardMedium'\n\nexport type UserCardProps = {\n  /** A UserProfile may be used for data for the card. You must supply one of `userProfile`, `alias`, `ownerId` */\n  userProfile?: UserProfile\n  /** An alias that resolves the ownerId for the UserProfile. You must supply one of `userProfile`, `alias`, `ownerId` */\n  alias?: string\n  /** The unique ownerId of the UserProfile. You must supply one of `userProfile`, `alias`, `ownerId` */\n  ownerId?: string\n  /** Whether to hide the user's Synapse email address */\n  hideEmail?: boolean\n  /** If set, the corresponding image will be shown for the user. */\n  preSignedURL?: string\n  /** Specifies the card size */\n  size: UserCardSize\n  /** For the small user card or avatar, shows the medium user card on mouseover */\n  showCardOnHover?: boolean\n  /** @deprecated For the small user card, hides the tooltip observed when hovering over the profile image. */\n  hideTooltip?: boolean\n  /** Specifies the dropdown menu functionality for the ellipsis on medium/large cards. If field === 'SEPERATOR' then a break will occur in the menu. If left undefined, the menu will not render to the screen. */\n  menuActions?: MenuAction[]\n  /** The link to point to on the username, defaults to https://www.synapse.org/Profile:${userProfile.ownerId} */\n  link?: string\n  openLinkInNewTab?: boolean\n  /** Disables the `@username` link for the small user card (if `showCardOnHover` is false). For the medium user card, disables linking the user's name to their profile (or other specified destination) */\n  disableLink?: boolean\n  isCertified?: boolean\n  isValidated?: boolean\n  /** Determines the size of the avatar when size === 'AVATAR' or (size === 'SMALL' and withAvatar is true) */\n  avatarSize?: AvatarSize\n  /** Whether to show the avatar with the name for the small user card */\n  withAvatar?: boolean\n  /** @deprecated Whether to show the full name in the small user card */\n  showFullName?: boolean\n  className?: string\n  /** @deprecated show certification/validation badges for small user card */\n  showAccountLevelIcon?: boolean\n}\n\nexport function UserCard(props: UserCardProps) {\n  const {\n    userProfile: initialProfile,\n    preSignedURL: initialPreSignedURL,\n    size,\n    ownerId,\n    alias,\n    ...rest\n  } = props\n\n  // If we were given an alias, fetch the principal ID\n  const { data: fetchedPrincipalId, isLoading: isLoadingAliasLookup } =\n    useGetPrincipalIdForAlias(\n      {\n        alias: alias!,\n        type: AliasType.USER_NAME,\n      },\n      { enabled: !!alias },\n    )\n\n  const principalId = (\n    ownerId ??\n    initialProfile?.ownerId ??\n    fetchedPrincipalId\n  )?.toString()\n\n  // If we weren't provided an initialProfile, fetch from Synapse\n  const { data: fetchedProfile, isLoading: isLoadingProfile } =\n    useGetUserProfile(principalId!, {\n      enabled: !!principalId && !initialProfile,\n    })\n  const userProfile = initialProfile ?? fetchedProfile\n\n  const { data: avatarData, isLoading: isLoadingAvatar } = useGetProfileImage(\n    principalId!,\n    {\n      // Don't fetch the avatar if `initialPresignedURL` is provided.\n      // Also, wait until we have a value for `principalId`\n      enabled: !!(!initialPreSignedURL && principalId),\n    },\n  )\n\n  // If a URL was provided, fetch it and create a local data URL\n  const providedAvatarURL = usePreFetchResource(initialPreSignedURL)\n  // If we fetched the avatar from Synapse, we already have the blob. Create a local data URL\n  const fetchedAvatarUrl = useCreateUrlForData(avatarData)\n\n  const imageURL = providedAvatarURL ?? fetchedAvatarUrl\n\n  const isLoading = isLoadingAliasLookup || isLoadingProfile\n\n  const propsForChild = useMemo(\n    () => ({\n      userProfile: userProfile!,\n      imageURL,\n      isLoadingAvatar,\n      ...rest,\n    }),\n    [imageURL, isLoadingAvatar, rest, userProfile],\n  )\n\n  if (isLoading || userProfile == null) {\n    return <></>\n  }\n\n  switch (size) {\n    case SynapseConstants.AVATAR:\n      return <Avatar {...propsForChild} />\n    case SynapseConstants.SMALL_USER_CARD:\n      return (\n        <UserBadge userId={ownerId ?? userProfile.ownerId} {...propsForChild} />\n      )\n    case SynapseConstants.MEDIUM_USER_CARD:\n      return <UserCardMedium {...propsForChild} />\n    case SynapseConstants.LARGE_USER_CARD:\n      return <UserCardMedium isLarge={true} {...propsForChild} />\n    default:\n      console.warn('No size specified for UserCard')\n      return <span />\n  }\n}\n\nexport default UserCard\n"],"mappings":";;;;;;;;;;;;AAsDA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,EACJ,aAAa,GACb,cAAc,GACd,SACA,YACA,UACA,GAAG,MACD,GAGE,EAAE,MAAM,GAAoB,WAAW,MAC3C,EACE;EACS;EACP,MAAM,EAAU;EACjB,EACD,EAAE,SAAS,CAAC,CAAC,GAAO,CACrB,EAEG,KACJ,KACA,GAAgB,WAChB,IACC,UAAU,EAGP,EAAE,MAAM,GAAgB,WAAW,MACvC,EAAkB,GAAc,EAC9B,SAAS,CAAC,CAAC,KAAe,CAAC,GAC5B,CAAC,EACE,IAAc,KAAkB,GAEhC,EAAE,MAAM,GAAY,WAAW,MAAoB,EACvD,GACA,EAGE,SAAS,CAAC,EAAE,CAAC,KAAuB,IACrC,CACF,EAGK,IAAoB,EAAoB,EAAoB,EAE5D,IAAmB,EAAoB,EAAW,EAElD,IAAW,KAAqB,GAEhC,IAAY,KAAwB,GAEpC,IAAgB,SACb;EACQ;EACb;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAU;EAAiB;EAAM;EAAY,CAC/C;AAED,KAAI,KAAa,KAAe,KAC9B,QAAO,kBAAA,GAAA,EAAK,CAAA;AAGd,SAAQ,GAAR;EACE,KAAK,EACH,QAAO,kBAAC,GAAD,EAAQ,GAAI,GAAiB,CAAA;EACtC,KAAK,EACH,QACE,kBAAC,GAAD;GAAW,QAAQ,KAAW,EAAY;GAAS,GAAI;GAAiB,CAAA;EAE5E,KAAK,EACH,QAAO,kBAAC,GAAD,EAAgB,GAAI,GAAiB,CAAA;EAC9C,KAAK,EACH,QAAO,kBAAC,GAAD;GAAgB,SAAS;GAAM,GAAI;GAAiB,CAAA;EAC7D,QAEE,QADA,QAAQ,KAAK,iCAAiC,EACvC,kBAAC,QAAD,EAAQ,CAAA"}
+{"version":3,"file":"UserCard.js","names":[],"sources":["../../../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { useGetProfileImage } from '@/synapse-queries/file/useFiles'\nimport {\n  useGetPrincipalIdForAlias,\n  useGetUserProfile,\n} from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport usePreFetchResource, {\n  useCreateUrlForData,\n} from '@/utils/hooks/usePreFetchResource'\nimport { UserCardSize } from '@/utils/SynapseConstants'\nimport { AliasType, UserProfile } from '@sage-bionetworks/synapse-types'\nimport { useMemo } from 'react'\nimport { Avatar, AvatarSize } from './Avatar'\nimport { UserBadge } from './UserBadge'\nimport { MenuAction } from './UserCardContextMenu'\nimport UserCardMedium from './UserCardMedium'\n\nexport type UserCardProps = {\n  /** A UserProfile may be used for data for the card. You must supply one of `userProfile`, `alias`, `ownerId` */\n  userProfile?: UserProfile\n  /** An alias that resolves the ownerId for the UserProfile. You must supply one of `userProfile`, `alias`, `ownerId` */\n  alias?: string\n  /** The unique ownerId of the UserProfile. You must supply one of `userProfile`, `alias`, `ownerId` */\n  ownerId?: string\n  /** Whether to hide the user's Synapse email address */\n  hideEmail?: boolean\n  /** If set, the corresponding image will be shown for the user. */\n  preSignedURL?: string\n  /** Specifies the card size */\n  size: UserCardSize\n  /** For the small user card or avatar, shows the medium user card on mouseover */\n  showCardOnHover?: boolean\n  /** @deprecated For the small user card, hides the tooltip observed when hovering over the profile image. */\n  hideTooltip?: boolean\n  /** Specifies the dropdown menu functionality for the ellipsis on medium/large cards. If field === 'SEPERATOR' then a break will occur in the menu. If left undefined, the menu will not render to the screen. */\n  menuActions?: MenuAction[]\n  /** The link to point to on the username, defaults to https://www.synapse.org/Profile:${userProfile.ownerId} */\n  link?: string\n  openLinkInNewTab?: boolean\n  /** Disables the `@username` link for the small user card (if `showCardOnHover` is false). For the medium user card, disables linking the user's name to their profile (or other specified destination) */\n  disableLink?: boolean\n  isCertified?: boolean\n  isValidated?: boolean\n  /** Determines the size of the avatar when size === 'AVATAR' or (size === 'SMALL' and withAvatar is true) */\n  avatarSize?: AvatarSize\n  /** Whether to show the avatar with the name for the small user card */\n  withAvatar?: boolean\n  /** @deprecated Whether to show the full name in the small user card */\n  showFullName?: boolean\n  className?: string\n  /** @deprecated show certification/validation badges for small user card */\n  showAccountLevelIcon?: boolean\n}\n\nexport function UserCard(props: UserCardProps) {\n  const {\n    userProfile: initialProfile,\n    preSignedURL: initialPreSignedURL,\n    size,\n    ownerId,\n    alias,\n    ...rest\n  } = props\n\n  // If we were given an alias, fetch the principal ID\n  const { data: fetchedPrincipalId, isLoading: isLoadingAliasLookup } =\n    useGetPrincipalIdForAlias(\n      {\n        alias: alias!,\n        type: AliasType.USER_NAME,\n      },\n      { enabled: !!alias },\n    )\n\n  const principalId = (\n    ownerId ??\n    initialProfile?.ownerId ??\n    fetchedPrincipalId\n  )?.toString()\n\n  // If we weren't provided an initialProfile, fetch from Synapse\n  const { data: fetchedProfile, isLoading: isLoadingProfile } =\n    useGetUserProfile(principalId!, {\n      enabled: !!principalId && !initialProfile,\n    })\n  const userProfile = initialProfile ?? fetchedProfile\n\n  const { data: avatarData, isLoading: isLoadingAvatar } = useGetProfileImage(\n    principalId!,\n    {\n      // Don't fetch the avatar if `initialPresignedURL` is provided.\n      // Also, wait until we have a value for `principalId`\n      enabled: !!(!initialPreSignedURL && principalId),\n    },\n  )\n\n  // If a URL was provided, fetch it and create a local data URL\n  const providedAvatarURL = usePreFetchResource(initialPreSignedURL)\n  // If we fetched the avatar from Synapse, we already have the blob. Create a local data URL\n  const fetchedAvatarUrl = useCreateUrlForData(avatarData)\n\n  const imageURL = providedAvatarURL ?? fetchedAvatarUrl\n\n  const isLoading = isLoadingAliasLookup || isLoadingProfile\n\n  const propsForChild = useMemo(\n    () => ({\n      userProfile: userProfile!,\n      imageURL,\n      isLoadingAvatar,\n      ...rest,\n    }),\n    [imageURL, isLoadingAvatar, rest, userProfile],\n  )\n\n  if (isLoading || userProfile == null) {\n    return <></>\n  }\n\n  switch (size) {\n    case SynapseConstants.AVATAR:\n      return <Avatar {...propsForChild} />\n    case SynapseConstants.SMALL_USER_CARD:\n      return (\n        <UserBadge userId={ownerId ?? userProfile.ownerId} {...propsForChild} />\n      )\n    case SynapseConstants.MEDIUM_USER_CARD:\n      return <UserCardMedium {...propsForChild} />\n    case SynapseConstants.LARGE_USER_CARD:\n      return <UserCardMedium isLarge={true} {...propsForChild} />\n    default:\n      console.warn('No size specified for UserCard')\n      return <span />\n  }\n}\n\nexport default UserCard\n"],"mappings":";;;;;;;;;;;;AAsDA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,EACJ,aAAa,GACb,cAAc,GACd,SACA,YACA,UACA,GAAG,MACD,GAGE,EAAE,MAAM,GAAoB,WAAW,MAC3C,EACE;EACS;EACP,MAAM,EAAU;CAClB,GACA,EAAE,SAAS,CAAC,CAAC,EAAM,CACrB,GAEI,KACJ,KACA,GAAgB,WAChB,IACC,SAAS,GAGN,EAAE,MAAM,GAAgB,WAAW,MACvC,EAAkB,GAAc,EAC9B,SAAS,CAAC,CAAC,KAAe,CAAC,EAC7B,CAAC,GACG,IAAc,KAAkB,GAEhC,EAAE,MAAM,GAAY,WAAW,MAAoB,EACvD,GACA,EAGE,SAAS,CAAC,EAAE,CAAC,KAAuB,GACtC,CACF,GAGM,IAAoB,EAAoB,CAAmB,GAE3D,IAAmB,EAAoB,CAAU,GAEjD,IAAW,KAAqB,GAEhC,IAAY,KAAwB,GAEpC,IAAgB,SACb;EACQ;EACb;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAU;EAAiB;EAAM;CAAW,CAC/C;CAEA,IAAI,KAAa,KAAe,MAC9B,OAAO,kBAAA,GAAA,CAAI,CAAA;CAGb,QAAQ,GAAR;EACE,KAAK,GACH,OAAO,kBAAC,GAAD,EAAQ,GAAI,EAAgB,CAAA;EACrC,KAAK,GACH,OACE,kBAAC,GAAD;GAAW,QAAQ,KAAW,EAAY;GAAS,GAAI;EAAgB,CAAA;EAE3E,KAAK,GACH,OAAO,kBAAC,GAAD,EAAgB,GAAI,EAAgB,CAAA;EAC7C,KAAK,GACH,OAAO,kBAAC,GAAD;GAAgB,SAAS;GAAM,GAAI;EAAgB,CAAA;EAC5D,SAEE,OADA,QAAQ,KAAK,gCAAgC,GACtC,kBAAC,QAAD,CAAO,CAAA;CAClB;AACF"}

package/dist/components/UserCard/UserCardContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardContextMenu.js","names":[],"sources":["../../../src/components/UserCard/UserCardContextMenu.tsx"],"sourcesContent":["import { SEPERATOR } from '@/utils/SynapseConstants'\nimport { Divider, Menu, MenuItem } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\n\nexport type MenuAction = {\n  field: string\n  callback?: (userProfile: UserProfile) => void\n}\n\nexport type UserCardContextMenuProps = {\n  userProfile: UserProfile\n  menuActions: MenuAction[]\n  open: boolean\n  anchorEl?: HTMLElement | null\n  onClose?: () => void\n}\n\nfunction UserCardContextMenu(props: UserCardContextMenuProps) {\n  const {\n    menuActions = [],\n    userProfile,\n    open,\n    anchorEl = null,\n    onClose,\n  } = props\n  return (\n    <Menu open={open} anchorEl={anchorEl} onClose={onClose}>\n      {menuActions.map((menuAction, index) => {\n        const callback = () => menuAction.callback!(userProfile)\n        if (menuAction.field === SEPERATOR) {\n          return <Divider key={`${menuAction.field}_${index}`} />\n        }\n        return (\n          <MenuItem role=\"menuitem\" key={menuAction.field} onClick={callback}>\n            {menuAction.field}\n          </MenuItem>\n        )\n      })}\n    </Menu>\n  )\n}\n\nexport default UserCardContextMenu\n"],"mappings":";;;;AAiBA,SAAS,EAAoB,GAAiC;CAC5D,IAAM,EACJ,iBAAc,EAAE,EAChB,gBACA,SACA,cAAW,MACX,eACE;AACJ,QACE,kBAAC,GAAD;EAAY;EAAgB;EAAmB;YAC5C,EAAY,KAAK,GAAY,MAExB,EAAW,UAAA,cACN,kBAAC,GAAD,EAAgD,EAAlC,GAAG,EAAW,MAAM,GAAG,IAAW,GAGvD,kBAAC,GAAD;GAAU,MAAK;GAAkC,eAL5B,EAAW,SAAU,EAAY;aAMnD,EAAW;GACH,EAFoB,EAAW,MAE/B,CAEb;EACG,CAAA"}
+{"version":3,"file":"UserCardContextMenu.js","names":[],"sources":["../../../src/components/UserCard/UserCardContextMenu.tsx"],"sourcesContent":["import { SEPERATOR } from '@/utils/SynapseConstants'\nimport { Divider, Menu, MenuItem } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\n\nexport type MenuAction = {\n  field: string\n  callback?: (userProfile: UserProfile) => void\n}\n\nexport type UserCardContextMenuProps = {\n  userProfile: UserProfile\n  menuActions: MenuAction[]\n  open: boolean\n  anchorEl?: HTMLElement | null\n  onClose?: () => void\n}\n\nfunction UserCardContextMenu(props: UserCardContextMenuProps) {\n  const {\n    menuActions = [],\n    userProfile,\n    open,\n    anchorEl = null,\n    onClose,\n  } = props\n  return (\n    <Menu open={open} anchorEl={anchorEl} onClose={onClose}>\n      {menuActions.map((menuAction, index) => {\n        const callback = () => menuAction.callback!(userProfile)\n        if (menuAction.field === SEPERATOR) {\n          return <Divider key={`${menuAction.field}_${index}`} />\n        }\n        return (\n          <MenuItem role=\"menuitem\" key={menuAction.field} onClick={callback}>\n            {menuAction.field}\n          </MenuItem>\n        )\n      })}\n    </Menu>\n  )\n}\n\nexport default UserCardContextMenu\n"],"mappings":";;;;AAiBA,SAAS,EAAoB,GAAiC;CAC5D,IAAM,EACJ,iBAAc,CAAC,GACf,gBACA,SACA,cAAW,MACX,eACE;CACJ,OACE,kBAAC,GAAD;EAAY;EAAgB;EAAmB;YAC5C,EAAY,KAAK,GAAY,MAExB,EAAW,UAAA,cACN,kBAAC,GAAD,CAA+C,GAAjC,GAAG,EAAW,MAAM,GAAG,GAAU,IAGtD,kBAAC,GAAD;GAAU,MAAK;GAAkC,eAL5B,EAAW,SAAU,CAAW;aAMlD,EAAW;EACJ,GAFqB,EAAW,KAEhC,CAEb;CACG,CAAA;AAEV"}

package/dist/components/UserCard/UserCardLarge.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardLarge.js","names":[],"sources":["../../../src/components/UserCard/UserCardLarge.tsx"],"sourcesContent":["import CertifiedUserIcon from '@/assets/icons/CertifiedUser'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\n\ntype UserCardLargeProps = {\n  userProfile: UserProfile\n  isCertified?: boolean\n}\n\n/**\n * UserCardLarge wraps around UserCardMedium\n *\n * @export UserCardLarge\n * @param {UserCardLargeProps} { userProfile }\n */\n// Disable function name because compiler has to know that its a class\n// tslint:disable-next-line:function-name\nexport function UserCardLarge({\n  userProfile,\n  isCertified,\n}: UserCardLargeProps) {\n  const { summary, industry, location, url } = userProfile\n\n  return (\n    <div className=\"SRC-cardMetaData\">\n      <div className=\"SRC-cardMetaData-scroll\">\n        {summary && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> Bio </p>\n            <p>{summary}</p>\n          </div>\n        )}\n        {url && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> More Info </p>\n            <p>{url}</p>\n          </div>\n        )}\n        {industry && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> Industry </p>\n            <p>{industry}</p>\n          </div>\n        )}\n        {location && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> Location </p>\n            <p>{location}</p>\n          </div>\n        )}\n        {isCertified && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> Access </p>\n            <p>{CertifiedUserIcon} Certified Account</p>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAc,EAC5B,gBACA,kBACqB;CACrB,IAAM,EAAE,YAAS,aAAU,aAAU,WAAQ;AAE7C,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;KAAS,CAAA,EAChD,kBAAC,KAAD,EAAA,UAAI,GAAY,CAAA,CACZ,EAAA,CAAA;IAEP,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;KAAe,CAAA,EACtD,kBAAC,KAAD,EAAA,UAAI,GAAQ,CAAA,CACR,EAAA,CAAA;IAEP,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;KAAc,CAAA,EACrD,kBAAC,KAAD,EAAA,UAAI,GAAa,CAAA,CACb,EAAA,CAAA;IAEP,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;KAAc,CAAA,EACrD,kBAAC,KAAD,EAAA,UAAI,GAAa,CAAA,CACb,EAAA,CAAA;IAEP,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;KAAY,CAAA,EACnD,kBAAC,KAAD,EAAA,UAAA,CAAI,GAAkB,qBAAsB,EAAA,CAAA,CACxC,EAAA,CAAA;IAEJ;;EACF,CAAA"}
+{"version":3,"file":"UserCardLarge.js","names":[],"sources":["../../../src/components/UserCard/UserCardLarge.tsx"],"sourcesContent":["import CertifiedUserIcon from '@/assets/icons/CertifiedUser'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\n\ntype UserCardLargeProps = {\n  userProfile: UserProfile\n  isCertified?: boolean\n}\n\n/**\n * UserCardLarge wraps around UserCardMedium\n *\n * @export UserCardLarge\n * @param {UserCardLargeProps} { userProfile }\n */\n// Disable function name because compiler has to know that its a class\n// tslint:disable-next-line:function-name\nexport function UserCardLarge({\n  userProfile,\n  isCertified,\n}: UserCardLargeProps) {\n  const { summary, industry, location, url } = userProfile\n\n  return (\n    <div className=\"SRC-cardMetaData\">\n      <div className=\"SRC-cardMetaData-scroll\">\n        {summary && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> Bio </p>\n            <p>{summary}</p>\n          </div>\n        )}\n        {url && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> More Info </p>\n            <p>{url}</p>\n          </div>\n        )}\n        {industry && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> Industry </p>\n            <p>{industry}</p>\n          </div>\n        )}\n        {location && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> Location </p>\n            <p>{location}</p>\n          </div>\n        )}\n        {isCertified && (\n          <div>\n            <p className=\"SRC-card-metadata-title\"> Access </p>\n            <p>{CertifiedUserIcon} Certified Account</p>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAc,EAC5B,gBACA,kBACqB;CACrB,IAAM,EAAE,YAAS,aAAU,aAAU,WAAQ;CAE7C,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAQ,CAAA,GAC/C,kBAAC,KAAD,EAAA,UAAI,EAAW,CAAA,CACZ,EAAA,CAAA;IAEN,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAc,CAAA,GACrD,kBAAC,KAAD,EAAA,UAAI,EAAO,CAAA,CACR,EAAA,CAAA;IAEN,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAa,CAAA,GACpD,kBAAC,KAAD,EAAA,UAAI,EAAY,CAAA,CACb,EAAA,CAAA;IAEN,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAa,CAAA,GACpD,kBAAC,KAAD,EAAA,UAAI,EAAY,CAAA,CACb,EAAA,CAAA;IAEN,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAW,CAAA,GAClD,kBAAC,KAAD,EAAA,UAAA,CAAI,GAAkB,oBAAqB,EAAA,CAAA,CACxC,EAAA,CAAA;GAEJ;;CACF,CAAA;AAET"}