@databiosphere/findable-ui 13.0.1 → 14.0.0

package/lib/theme/components/muiAlert.js

@@ -0,0 +1,121 @@
+import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon";
+import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
+import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
+import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
+import { SIZE } from "../../styles/common/constants/size";
+import { COLOR, SEVERITY, VARIANT } from "../../styles/common/mui/alert";
+import { FONT_SIZE } from "../../styles/common/mui/icon";
+import { alpha32 } from "../common/palette";
+import { TEXT_BODY_500 } from "../common/typography";
+export const MuiAlert = (theme) => {
+    return {
+        defaultProps: {
+            elevation: 1,
+            iconMapping: {
+                error: ErrorIcon({ fontSize: FONT_SIZE.SMALL }),
+                info: InfoIcon({ fontSize: FONT_SIZE.SMALL }),
+                success: SuccessIcon({ fontSize: FONT_SIZE.SMALL }),
+                warning: WarningIcon({ fontSize: FONT_SIZE.SMALL }),
+            },
+            size: SIZE.MEDIUM,
+        },
+        styleOverrides: {
+            icon: {
+                opacity: 1,
+                padding: 0,
+            },
+            message: {
+                ...theme.typography[TEXT_BODY_500], // default size - "medium"
+                display: "grid",
+                gap: 4,
+                padding: 0,
+            },
+            root: {
+                alignItems: "flex-start",
+                borderRadius: 8,
+                color: theme.palette.ink.main,
+                padding: 16,
+                variants: [
+                    {
+                        props: { severity: SEVERITY.ERROR },
+                        style: {
+                            backgroundColor: theme.palette.alert.lightest,
+                            border: `1px solid ${theme.palette.alert.main}${alpha32}`,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "& .MuiAlert-icon": {
+                                color: theme.palette.alert.main,
+                            },
+                        },
+                    },
+                    {
+                        props: { severity: SEVERITY.INFO },
+                        style: {
+                            backgroundColor: theme.palette.info.lightest,
+                            border: `1px solid ${theme.palette.info.main}${alpha32}`,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "& .MuiAlert-icon": {
+                                color: theme.palette.info.main,
+                            },
+                        },
+                    },
+                    {
+                        props: { severity: SEVERITY.SUCCESS },
+                        style: {
+                            backgroundColor: theme.palette.success.lightest,
+                            border: `1px solid ${theme.palette.success.main}${alpha32}`,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "& .MuiAlert-icon": {
+                                color: theme.palette.success.main,
+                            },
+                        },
+                    },
+                    {
+                        props: { severity: SEVERITY.WARNING },
+                        style: {
+                            backgroundColor: theme.palette.warning.lightest,
+                            border: `1px solid ${theme.palette.warning.main}${alpha32}`,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "& .MuiAlert-icon": {
+                                color: theme.palette.warning.main,
+                            },
+                        },
+                    },
+                    {
+                        props: { color: COLOR.INK },
+                        style: {
+                            backgroundColor: theme.palette.ink.main,
+                            color: theme.palette.common.white,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            ".MuiLink-root": {
+                                color: theme.palette.common.white,
+                            },
+                        },
+                    },
+                    {
+                        props: { color: COLOR.PRIMARY },
+                        style: {
+                            backgroundColor: theme.palette.primary.main,
+                            color: theme.palette.common.white,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            ".MuiLink-root": {
+                                color: theme.palette.common.white,
+                            },
+                        },
+                    },
+                    {
+                        props: { color: COLOR.SMOKE },
+                        style: {
+                            backgroundColor: theme.palette.smoke.light,
+                        },
+                    },
+                    {
+                        props: { variant: VARIANT.FILLED },
+                        style: {
+                            border: "none",
+                        },
+                    },
+                ],
+            },
+        },
+    };
+};

package/lib/theme/components/muiAlertTitle.d.ts

@@ -0,0 +1,2 @@
+import { Components } from "@mui/material";
+export declare const MuiAlertTitle: Components["MuiAlertTitle"];

package/lib/theme/components/muiAlertTitle.js

@@ -0,0 +1,12 @@
+import { TEXT_BODY_500 } from "../common/typography";
+export const MuiAlertTitle = {
+    defaultProps: {
+        gutterBottom: false,
+        variant: TEXT_BODY_500,
+    },
+    styleOverrides: {
+        root: {
+            margin: 0,
+        },
+    },
+};

package/lib/theme/theme.js

@@ -4,6 +4,7 @@ import * as C from "./common/components";
 import * as P from "./common/palette";
 import { shadows } from "./common/shadows";
 import * as T from "./common/typography";
+import * as M from "./components";
 /**
  * Returns a generated theme with customization.
  * @param customOptions - Custom theme option overrides.
@@ -59,8 +60,8 @@ export function createAppTheme(customOptions) {
         MuiAccordion: C.MuiAccordion(theme),
         MuiAccordionDetails: C.MuiAccordionDetails,
         MuiAccordionSummary: C.MuiAccordionSummary,
-        MuiAlert: C.MuiAlert(theme),
-        MuiAlertTitle: C.MuiAlertTitle(theme),
+        MuiAlert: M.MuiAlert(theme),
+        MuiAlertTitle: M.MuiAlertTitle,
         MuiAppBar: C.MuiAppBar,
         MuiBackdrop: C.MuiBackdrop(theme),
         MuiBreadcrumbs: C.MuiBreadcrumbs(theme),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "13.0.1",
+  "version": "14.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
-    "@mui/types": "^7.2.16",
+    "@mui/types": "^7.2.18",
     "@next/eslint-plugin-next": "^14.1.0",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
@@ -67,8 +67,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.0.2",
-    "@mui/material": "^6.0.2",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/material": "^6.1.5",
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "copy-to-clipboard": "3.3.1",

package/src/common/analytics/entities.ts

@@ -10,19 +10,18 @@ export enum EVENT_NAME {
   ENTITY_TABLE_PAGINATED = "entity_table_paginated",
   ENTITY_TABLE_SORTED = "entity_table_sorted",
   FILTER_SELECTED = "filter_selected",
+  INDEX_ANALYZE_IN_TERRA_REQUESTED = "index_analyze_in_terra_requested",
+  INDEX_FILE_MANIFEST_REQUESTED = "index_file_manifest_requested",
 }
 
 /**
  * Set of analytics event parameters.
  */
 export enum EVENT_PARAM {
-  CATALOG = "catalog",
   COLUMN_NAME = "column_name",
-  CURRENT_QUERY = "current_query",
   ENTITY_NAME = "entity_name",
   FILTER_NAME = "filter_name",
   FILTER_VALUE = "filter_value",
-  INDEX = "index",
   PAGINATION_DIRECTION = "pagination_direction",
   SORT_DIRECTION = "sort_direction",
   TOOL_NAME = "tool_name",
@@ -49,9 +48,7 @@ export enum SORT_DIRECTION {
  */
 export type EventParams = {
   [EVENT_NAME.BULK_DOWNLOAD_REQUESTED]: {
-    [EVENT_PARAM.CATALOG]: string;
-    [EVENT_PARAM.CURRENT_QUERY]: string;
-    [EVENT_PARAM.INDEX]: string;
+    [EVENT_PARAM.ENTITY_NAME]: string;
     [EVENT_PARAM.TOOL_NAME]: string;
   };
   [EVENT_NAME.ENTITY_SELECTED]: { [EVENT_PARAM.ENTITY_NAME]: string };
@@ -68,4 +65,10 @@ export type EventParams = {
     [EVENT_PARAM.FILTER_NAME]: string;
     [EVENT_PARAM.FILTER_VALUE]: string;
   };
+  [EVENT_NAME.INDEX_ANALYZE_IN_TERRA_REQUESTED]: {
+    [EVENT_PARAM.ENTITY_NAME]: string;
+  };
+  [EVENT_NAME.INDEX_FILE_MANIFEST_REQUESTED]: {
+    [EVENT_PARAM.ENTITY_NAME]: string;
+  };
 };

package/src/common/analytics/readme-analytics.md

@@ -6,13 +6,15 @@ See below a list of the currently available events.
 
 ### GA4 Event Inventory
 
-| Event                     | Parameters                                       | Description                                                     |
-| ------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
-| `bulk_download_requested` | `catalog`, `current_query`, `index`, `tool_name` | Runs when the HCA-DCP "Request curl command" button is selected |
-| `entity_selected`         | `entity_name`                                    | Runs when an entity (tab) is selected                           |
-| `entity_table_paginated`  | `entity_name`, `pagination_direction`            | Runs when the page forward/backwards buttons are clicked        |
-| `entity_table_sorted`     | `entity_name`, `column_name`, `sort_direction`   | Runs each time a column in the entity table is sorted           |
-| `filter_selected`         | `filter_name`, `filter_value`                    | Runs each time a filter is selected                             |
+| Event                              | Parameters                                     | Description                                                    |
+| ---------------------------------- | ---------------------------------------------- | -------------------------------------------------------------- |
+| `bulk_download_requested`          | `entity_name`, `tool_name`                     | Runs when the index "Request curl command" button is selected  |
+| `index_analyze_in_terra_requested` | `entity_name`                                  | Runs when the index "Analyze in Terra" button is selected      |
+| `index_file_manifest_requested`    | `entity_name`                                  | Runs when the index "Request File Manifest" button is selected |
+| `entity_selected`                  | `entity_name`                                  | Runs when an entity (tab) is selected                          |
+| `entity_table_paginated`           | `entity_name`, `pagination_direction`          | Runs when the page forward/backwards buttons are clicked       |
+| `entity_table_sorted`              | `entity_name`, `column_name`, `sort_direction` | Runs each time a column in the entity table is sorted          |
+| `filter_selected`                  | `filter_name`, `filter_value`                  | Runs each time a filter is selected                            |
 
 ### Tracking-related ID Inventory
 

package/src/components/Export/common/tracking.ts

@@ -3,27 +3,38 @@ import { EVENT_NAME, EVENT_PARAM } from "../../../common/analytics/entities";
 
 /**
  * Executes event tracking for bulk download.
- * @param index - Index.
+ * @param entity_name - Entity (tab) name.
  * @param toolName - Tool name.
- * @param requestParams - Request params.
  */
 export function bulkDownloadTracking(
-  index: string,
-  toolName: string,
-  requestParams?: URLSearchParams
+  entity_name: string,
+  toolName: string
 ): void {
-  if (!requestParams) {
-    return;
-  }
-  // Grab catalog and current query from the request params.
-  const catalog = requestParams.get("catalog") as string; // Catalog will be defined.
-  const currentQuery = requestParams.get("filters") as string; // Filters will be defined.
-
   // Track the bulk download requested event.
   track(EVENT_NAME.BULK_DOWNLOAD_REQUESTED, {
-    [EVENT_PARAM.CATALOG]: catalog,
-    [EVENT_PARAM.CURRENT_QUERY]: currentQuery,
-    [EVENT_PARAM.INDEX]: index,
+    [EVENT_PARAM.ENTITY_NAME]: entity_name,
     [EVENT_PARAM.TOOL_NAME]: toolName,
   });
 }
+
+/**
+ * Executes event tracking for the file manifest export.
+ * @param entity_name - Entity (tab) name.
+ */
+export function fileManifestTracking(entity_name: string): void {
+  // Track the file manifest requested event.
+  track(EVENT_NAME.INDEX_FILE_MANIFEST_REQUESTED, {
+    [EVENT_PARAM.ENTITY_NAME]: entity_name,
+  });
+}
+
+/**
+ * Executes event tracking for the Terra export.
+ * @param entity_name - Entity (tab) name.
+ */
+export function exportToTerraTracking(entity_name: string): void {
+  // Track the export to terra event.
+  track(EVENT_NAME.INDEX_ANALYZE_IN_TERRA_REQUESTED, {
+    [EVENT_PARAM.ENTITY_NAME]: entity_name,
+  });
+}

package/src/components/Export/components/DownloadCurlCommand/downloadCurlCommand.tsx

@@ -2,10 +2,7 @@ import React, { ElementType, useState } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
 import { Filters } from "../../../../common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
-import {
-  FILE_MANIFEST_TYPE,
-  FileManifestType,
-} from "../../../../hooks/useFileManifest/common/entities";
+import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useRequestFileManifest } from "../../../../hooks/useFileManifest/useRequestFileManifest";
 import { FileLocation } from "../../../../hooks/useRequestFileLocation";
@@ -35,7 +32,6 @@ export const DownloadCurlCommand = ({
   DownloadCurlStart,
   DownloadCurlSuccess,
   fileManifestState,
-  fileManifestType,
   fileSummaryFacetName,
   filters,
   formFacet,
@@ -50,7 +46,6 @@ export const DownloadCurlCommand = ({
   const {
     exploreState: { tabValue: entityList },
   } = useExploreState();
-  const { requestParams } = fileManifestState;
   const { data, isLoading, run } = useFileManifest();
   const curlCommand = getBulkDownloadCurlCommand(data, executionEnvironment);
   return curlCommand ? (
@@ -68,12 +63,7 @@ export const DownloadCurlCommand = ({
       isLoading={isLoading}
       onRequestManifest={(): void => {
         // Execute GTM tracking.
-        track(
-          fileManifestType,
-          entityList,
-          executionEnvironment,
-          requestParams
-        );
+        bulkDownloadTracking(entityList, executionEnvironment);
         // Request manifest.
         run();
       }}
@@ -98,21 +88,3 @@ function getBulkDownloadCurlCommand(
   }
   return commandLine[executionEnvironment];
 }
-
-/**
- * Executes GTM tracking.
- * @param fileManifestType - File manifest type.
- * @param index - Index.
- * @param toolName - Execution environment.
- * @param requestParams - Request params.
- */
-function track(
-  fileManifestType: FileManifestType,
-  index: string,
-  toolName: string,
-  requestParams?: URLSearchParams
-): void {
-  if (fileManifestType === FILE_MANIFEST_TYPE.BULK_DOWNLOAD) {
-    bulkDownloadTracking(index, toolName, requestParams);
-  }
-}

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx

@@ -3,7 +3,9 @@ import {
   expireTimeInSeconds,
   useAuthenticationNIHExpiry,
 } from "../../../../../../../../hooks/useAuthentication/useAuthenticationNIHExpiry";
-import { FluidAlert } from "../../../../../../../common/Alert/alert.styles";
+import { Alert } from "../../../../../../../common/Alert/alert";
+import { ALERT_PROPS } from "../../../../../../../common/Alert/constants";
+import { FluidPaper } from "../../../../../../../common/Paper/paper.styles";
 import { Link } from "../../../../../../../Links/components/Link/link";
 
 export const NIHAccountExpiryWarning = (): JSX.Element | null => {
@@ -14,23 +16,19 @@ export const NIHAccountExpiryWarning = (): JSX.Element | null => {
   if (!isReady) return null;
 
   return linkWillExpire || linkExpired ? (
-    <FluidAlert
-      severity="warning"
-      title={
-        <>
-          <span>{getExpiryMessage(linkExpired, linkExpireTime)}</span>{" "}
-          <span>
-            Please{" "}
-            <Link
-              label="renew your account"
-              url="https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers#heading-4"
-            />{" "}
-            link.
-          </span>
-        </>
-      }
-      variant="banner"
-    />
+    <Alert {...ALERT_PROPS.STANDARD_WARNING} component={FluidPaper}>
+      <span>
+        <span>{getExpiryMessage(linkExpired, linkExpireTime)}</span>{" "}
+        <span>
+          Please{" "}
+          <Link
+            label="renew your account"
+            url="https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers#heading-4"
+          />{" "}
+          link.
+        </span>
+      </span>
+    </Alert>
   ) : null;
 };
 

package/src/components/Export/components/ExportToTerra/exportToTerra.tsx

@@ -1,11 +1,13 @@
 import React, { ElementType } from "react";
 import { Filters } from "../../../../common/entities";
+import { useExploreState } from "../../../../hooks/useExploreState";
 import { useExportToTerraResponseURL } from "../../../../hooks/useExportToTerraResponseURL";
 import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useRequestFileManifest } from "../../../../hooks/useFileManifest/useRequestFileManifest";
 import { FileManifestState } from "../../../../providers/fileManifestState";
 import { FormFacet, ManifestDownloadFormat } from "../../common/entities";
+import { exportToTerraTracking } from "../../common/tracking";
 import { ExportToTerraNotStarted } from "./components/ExportToTerraNotStarted/exportToTerraNotStarted";
 import { ExportToTerraReady } from "./components/ExportToTerraReady/exportToTerraReady";
 
@@ -33,6 +35,9 @@ export const ExportToTerra = ({
   manifestDownloadFormat,
   manifestDownloadFormats,
 }: ExportToTerraProps): JSX.Element => {
+  const {
+    exploreState: { tabValue: entityList },
+  } = useExploreState();
   useRequestFileManifest(manifestDownloadFormat, filters, fileSummaryFacetName);
   const { requestParams } = fileManifestState;
   const { data, isLoading, run } = useFileManifest();
@@ -50,7 +55,12 @@ export const ExportToTerra = ({
       formFacet={formFacet}
       isLoading={isLoading}
       manifestDownloadFormats={manifestDownloadFormats}
-      onRequestManifest={run}
+      onRequestManifest={(): void => {
+        // Execute GA tracking
+        exportToTerraTracking(entityList);
+        // Request manifest
+        run();
+      }}
     />
   );
 };

package/src/components/Export/components/ManifestDownload/manifestDownload.tsx

@@ -1,12 +1,14 @@
 import React, { ElementType } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities";
 import { Filters } from "../../../../common/entities";
+import { useExploreState } from "../../../../hooks/useExploreState";
 import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useRequestFileManifest } from "../../../../hooks/useFileManifest/useRequestFileManifest";
 import { FileLocation } from "../../../../hooks/useRequestFileLocation";
 import { FileManifestState } from "../../../../providers/fileManifestState";
 import { FormFacet } from "../../common/entities";
+import { fileManifestTracking } from "../../common/tracking";
 import { ManifestDownloadNotStarted } from "./components/ManifestDownloadNotStarted/manifestDownloadNotStarted";
 import { ManifestDownloadReady } from "./components/ManifestDownloadReady/manifestDownloadReady";
 
@@ -35,6 +37,9 @@ export const ManifestDownload = ({
     filters,
     fileSummaryFacetName
   );
+  const {
+    exploreState: { tabValue: entityList },
+  } = useExploreState();
   const { data, isLoading, run } = useFileManifest();
   const manifestURL = getManifestDownloadURL(data);
   return manifestURL ? (
@@ -49,7 +54,10 @@ export const ManifestDownload = ({
       fileManifestState={fileManifestState}
       formFacet={formFacet}
       isLoading={isLoading}
-      onRequestManifest={run}
+      onRequestManifest={(): void => {
+        fileManifestTracking(entityList);
+        run();
+      }}
     />
   );
 };

package/src/components/Layout/components/Header/components/Content/components/Logo/logo.styles.ts

@@ -4,7 +4,6 @@ import { Link } from "../../../../../../../Links/components/Link/link";
 export const StyledLink = styled(Link)`
   &.MuiLink-root {
     flex: none;
-    text-decoration: none !important;
     img {
       margin: 0;
     }

package/src/components/Layout/components/Header/components/Content/components/Logo/logo.tsx

@@ -4,11 +4,11 @@ import {
   StaticImage,
 } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { BaseComponentProps } from "../../../../../../../types";
 import { StyledLink } from "./logo.styles";
 
-export interface LogoProps {
+export interface LogoProps extends BaseComponentProps {
   alt: string;
-  className?: string;
   height?: number;
   link: string;
   src: ImageSrc;
@@ -30,6 +30,7 @@ export const Logo = ({
       className={className}
       label={<StaticImage alt={alt} height={height} src={src} width={width} />}
       target={target}
+      underline="none"
       url={link}
     />
   );

package/src/components/Links/components/Link/link.tsx

@@ -8,6 +8,7 @@ import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
 import { TypographyProps } from "../../../common/Typography/common/entities";
+import { BaseComponentProps } from "../../../types";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, Url } from "../../common/entities";
 import {
   isClientSideNavigation,
@@ -16,11 +17,11 @@ import {
 } from "../../common/utils";
 import { ExploreViewLink } from "./components/ExploreViewLink/exploreViewLink";
 
-export interface LinkProps {
-  className?: string;
+export interface LinkProps
+  extends BaseComponentProps,
+    Omit<MLinkProps, "children" | "component"> {
   copyable?: boolean;
   label: ReactNode /* link label may be an element */;
-  noWrap?: MLinkProps["noWrap"];
   onClick?: () => void;
   target?: ANCHOR_TARGET;
   TypographyProps?: TypographyProps;
@@ -55,19 +56,19 @@ export const Link = ({
       /* Client-side navigation */
       return (
         <>
-          <NLink href={url} legacyBehavior passHref>
-            <MLink
-              className={className}
-              rel={REL_ATTRIBUTE.NO_OPENER}
-              noWrap={noWrap}
-              target={target || ANCHOR_TARGET.SELF}
-              onClick={onClick}
-              {...TypographyProps}
-              {...props}
-            >
-              {label}
-            </MLink>
-          </NLink>
+          <MLink
+            className={className}
+            component={NLink}
+            href={url}
+            noWrap={noWrap}
+            onClick={onClick}
+            rel={REL_ATTRIBUTE.NO_OPENER}
+            target={target || ANCHOR_TARGET.SELF}
+            {...TypographyProps}
+            {...props}
+          >
+            {label}
+          </MLink>
           {copyable && <CopyToClipboard copyStr={url} />}
         </>
       );

package/src/components/common/Alert/alert.styles.ts

@@ -1,28 +1,25 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { TABLET } from "../../../theme/common/breakpoints";
-import { Alert } from "./alert";
+import { Alert } from "@mui/material";
+import { SIZE } from "../../../styles/common/constants/size";
+import {
+  textBody4002Lines,
+  textBodyLarge500,
+} from "../../../styles/common/mixins/fonts";
 
-/**
- * Flat alert - typically used when in full stretch or full "bleed" across a container.
- * e.g. the entire width of mobile viewports.
- */
-export const FlatAlert = styled(Alert)`
-  border-left: none;
-  border-radius: 0;
-  border-right: none;
-  box-shadow: none;
-`;
-
-/* eslint-disable valid-jsdoc -- disable require param */
-/**
- * Fluid alert - typically used to transition between flat paper (mobile) and rounded paper (tablet or desktop).
- */
-/* eslint-enable valid-jsdoc -- disable require param */
-export const FluidAlert = styled(Alert)`
-  ${({ theme }) => theme.breakpoints.down(TABLET)} {
-    border-left: none;
-    border-radius: 0;
-    border-right: none;
-    box-shadow: none;
-  }
+export const StyledAlert = styled(Alert)`
+  ${(props) =>
+    props.size === SIZE.LARGE &&
+    css`
+      padding: 20px;
+      .MuiAlert-icon {
+        padding: 2px 0;
+      }
+      .MuiAlert-message {
+        ${textBody4002Lines(props)};
+        .MuiAlertTitle-root {
+          ${textBodyLarge500(props)};
+        }
+      }
+    `}
 `;