@databiosphere/findable-ui 10.2.0 → 12.0.0

package/lib/theme/common/palette.js

@@ -1,108 +1,96 @@
 /**
  * Palette "Alert"
  */
-var ALERT;
-(function (ALERT) {
-    ALERT["LIGHT"] = "#FED3D1";
-    ALERT["LIGHTEST"] = "#FFF4F4";
-    ALERT["MAIN"] = "#B42318";
-})(ALERT || (ALERT = {}));
+const ALERT = {
+    LIGHT: "#FED3D1",
+    LIGHTEST: "#FFF4F4",
+    MAIN: "#B42318",
+};
 /**
  * Palette "Background"
  */
-var BACKGROUND;
-(function (BACKGROUND) {
-    BACKGROUND["DEFAULT"] = "#F6F6F7";
-})(BACKGROUND || (BACKGROUND = {}));
+const BACKGROUND = {
+    DEFAULT: "#F6F6F7",
+};
 /**
  * Palette "Info"
  */
-var INFO;
-(function (INFO) {
-    INFO["CONTRAST_TEXT"] = "#00729C";
-    INFO["LIGHT"] = "#97D6EA";
-    INFO["LIGHTEST"] = "#F2FAFC";
-    INFO["MAIN"] = "#00729C";
-})(INFO || (INFO = {}));
+const INFO = {
+    CONTRAST_TEXT: "#00729C",
+    LIGHT: "#97D6EA",
+    LIGHTEST: "#F2FAFC",
+    MAIN: "#00729C",
+};
 /**
  * Palette "Ink"
  */
-var INK;
-(function (INK) {
-    INK["LIGHT"] = "#637381";
-    INK["MAIN"] = "#212B36";
-})(INK || (INK = {}));
+const INK = {
+    LIGHT: "#637381",
+    MAIN: "#212B36",
+};
 /**
  * Palette "Primary"
  */
-var PRIMARY;
-(function (PRIMARY) {
-    PRIMARY["DARK"] = "#005EA9";
-    PRIMARY["LIGHTEST"] = "#E6EFF6";
-    PRIMARY["MAIN"] = "#1C7CC7";
-})(PRIMARY || (PRIMARY = {}));
+const PRIMARY = {
+    DARK: "#005EA9",
+    LIGHTEST: "#E6EFF6",
+    MAIN: "#1C7CC7",
+};
 /**
  * Palette "Smoke"
  */
-var SMOKE;
-(function (SMOKE) {
-    SMOKE["DARK"] = "#C4CDD5";
-    SMOKE["LIGHT"] = "#F6F6F7";
-    SMOKE["LIGHTEST"] = "#FAFBFB";
-    SMOKE["MAIN"] = "#E1E3E5";
-})(SMOKE || (SMOKE = {}));
+const SMOKE = {
+    DARK: "#C4CDD5",
+    LIGHT: "#F6F6F7",
+    LIGHTEST: "#FAFBFB",
+    MAIN: "#E1E3E5",
+};
 /**
  * Palette "Success"
  */
-var SUCCESS;
-(function (SUCCESS) {
-    SUCCESS["LIGHT"] = "#AEE9D1";
-    SUCCESS["LIGHTEST"] = "#F1F8F5";
-    SUCCESS["MAIN"] = "#287555";
-})(SUCCESS || (SUCCESS = {}));
+const SUCCESS = {
+    LIGHT: "#AEE9D1",
+    LIGHTEST: "#F1F8F5",
+    MAIN: "#287555",
+};
 /**
  * Palette "Text"
  */
-var TEXT;
-(function (TEXT) {
-    TEXT["PRIMARY"] = "#212B36";
-})(TEXT || (TEXT = {}));
+const TEXT = {
+    PRIMARY: "#212B36",
+};
 /**
  * Palette "Warning"
  */
-var WARNING;
-(function (WARNING) {
-    WARNING["CONTRAST_TEXT"] = "#B54708";
-    WARNING["LIGHT"] = "#FFD79D";
-    WARNING["LIGHTEST"] = "#FFFAEB";
-    WARNING["MAIN"] = "#B54708";
-})(WARNING || (WARNING = {}));
+const WARNING = {
+    CONTRAST_TEXT: "#B54708",
+    LIGHT: "#FFD79D",
+    LIGHTEST: "#FFFAEB",
+    MAIN: "#B54708",
+};
 /**
  * Default "Black"
  */
-var BLACK;
-(function (BLACK) {
-    BLACK["DEFAULT"] = "#000000";
-})(BLACK || (BLACK = {}));
+const BLACK = {
+    DEFAULT: "#000000",
+};
 /**
  * Default "White"
  */
-var WHITE;
-(function (WHITE) {
-    WHITE["DEFAULT"] = "#ffffff";
-})(WHITE || (WHITE = {}));
+const WHITE = {
+    DEFAULT: "#ffffff",
+};
 /**
  * Color alpha
  */
-var ALPHA;
-(function (ALPHA) {
-    ALPHA["A04"] = "0a";
-    ALPHA["A08"] = "14";
-    ALPHA["A32"] = "52";
-    ALPHA["A60"] = "99";
-    ALPHA["A64"] = "a3";
-    ALPHA["A80"] = "cc";
-})(ALPHA || (ALPHA = {}));
+const ALPHA = {
+    A04: "0a",
+    A08: "14",
+    A32: "52",
+    A60: "99",
+    A64: "a3",
+    A80: "cc",
+};
 /**
  * Color constants
  */

package/lib/types/error.d.ts

@@ -1,4 +1,4 @@
-declare type ErrorType = Error & any;
+type ErrorType = Error & any;
 export declare class DataExplorerError extends Error {
     statusCode?: string | number;
     requestUrlMessage?: string;

package/lib/utils/tests.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Returns anchor element by id.
+ * @param id - ID.
+ * @returns anchor element.
+ */
+export declare function getAnchorEl(id: string): HTMLAnchorElement;
+/**
+ * Returns button element by id.
+ * @param id - ID.
+ * @returns HTML button element.
+ */
+export declare function getButtonById(id: string): HTMLButtonElement;

package/lib/utils/tests.js

@@ -0,0 +1,17 @@
+import { screen } from "@testing-library/react";
+/**
+ * Returns anchor element by id.
+ * @param id - ID.
+ * @returns anchor element.
+ */
+export function getAnchorEl(id) {
+    return screen.getByTestId(id);
+}
+/**
+ * Returns button element by id.
+ * @param id - ID.
+ * @returns HTML button element.
+ */
+export function getButtonById(id) {
+    return screen.getByTestId(id);
+}

package/lib/viewModelBuilders/common/entities.d.ts

@@ -1,4 +1,4 @@
 /**
  * Map of category key to category label.
  */
-export declare type CategoryKeyLabel = Map<string, string>;
+export type CategoryKeyLabel = Map<string, string>;

package/lib/views/ContentView/contentView.stories.d.ts

@@ -1,6 +1,6 @@
-import { StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { ContentView } from "./contentView";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./contentView").ContentViewProps>;
+declare const _default: Meta<typeof ContentView>;
 export default _default;
-declare type Story = StoryObj<typeof ContentView>;
+type Story = StoryObj<typeof ContentView>;
 export declare const ContentViewStory: Story;

package/lib/views/EntityDetailView/entityDetailView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface EntityDetailViewProps<T = any> {
     data?: T;
     entityListType: string;

package/lib/views/ExploreView/exploreView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AzulEntitiesStaticResponse } from "../../apis/azul/common/entities";
 export interface ExploreViewProps extends AzulEntitiesStaticResponse {
     className?: string;

package/lib/views/ExportMethodView/exportMethodView.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ExportMethodView: () => JSX.Element;

package/lib/views/ExportView/exportView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AzulEntityStaticResponse } from "../../apis/azul/common/entities";
-export declare type ExportViewProps = AzulEntityStaticResponse;
+export type ExportViewProps = AzulEntityStaticResponse;
 export declare const ExportView: (props: ExportViewProps) => JSX.Element;

package/lib/views/LoginView/loginView.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const LoginView: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "10.2.0",
+  "version": "12.0.0",
   "description": "",
   "scripts": {
     "test": "jest",
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
+    "@mui/types": "^7.2.16",
     "@next/eslint-plugin-next": "^14.1.0",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
@@ -34,15 +35,16 @@
     "@storybook/react": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/types": "^7.6.17",
+    "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.4.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-window": "^1.8.5",
     "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
     "eslint": "^8.33.0",
-    "eslint-config-next": "^14.1.0",
+    "eslint-config-next": "^14.2.13",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsdoc": "^48.1.0",
@@ -51,29 +53,29 @@
     "eslint-plugin-sonarjs": "^0.18.0",
     "eslint-plugin-sort-destructure-keys": "^1.4.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-typescript-sort-keys": "^2.3.0",
+    "eslint-plugin-typescript-sort-keys": "^3.2.0",
     "husky": "^8.0.3",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
     "storybook": "^7.6.17",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4.6.4"
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
-    "@mui/icons-material": "5.14.1",
-    "@mui/material": "5.14.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "axios": "^1.6.7",
     "copy-to-clipboard": "3.3.1",
     "isomorphic-dompurify": "0.24.0",
     "next": "^14.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-gtm-module": "2.0.11",
     "react-idle-timer": "^5.6.2",

package/src/apis/azul/common/constants.ts

@@ -1,8 +1,3 @@
-/**
- * Path to add to file URL when requesting file location.
- */
-export const API_FILE_LOCATION_FETCH = "fetch";
-
 export const FILE_LOCATION_SUCCESSFULLY = 302;
 export const FILE_LOCATION_PENDING = 301;
 

package/src/apis/azul/common/filterTransformer.ts

@@ -10,10 +10,10 @@ import {
   PaginationResponse,
 } from "../../../providers/exploreState";
 import {
+  AZUL_FILTER_OPERATOR,
   AzulPaginationResponse,
   AzulSearchIndex,
   AzulTermFacets,
-  AZUL_FILTER_OPERATOR,
   LABEL,
 } from "./entities";
 import { getFilterParameterValue } from "./utils";

package/src/common/analytics/analytics.ts

@@ -1,5 +1,5 @@
 import { getConfig } from "../../config/config";
-import { DataLayer, EventParams, EVENT_NAME } from "./entities";
+import { DataLayer, EVENT_NAME, EventParams } from "./entities";
 
 /**
  * Returns the GTM data layer for the environment, if enabled.

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

@@ -0,0 +1,15 @@
+# Findable-UI Analytics Readme
+
+Findable-UI reports various events using Google Analytics 4.
+All events are defined in `entities.ts` and can be trigged using the `track` function in `analytics.ts`.
+See below a list of the currently available events.
+
+### GA4 Event Inventory
+
+| Event                     | Parameters                                                      | Description                                                     |
+| ------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------- |
+| `bulk_download_requested` | `catalog`, `current_query`, `entity_type`, `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_directed`                            | 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                             |

package/src/components/Detail/components/Table/table.tsx

@@ -1,8 +1,8 @@
 import {
   TableCellProps as MTableCellProps,
-  TableContainer,
   TableContainerProps as MTableContainerProps,
   TableProps as MTableProps,
+  TableContainer,
 } from "@mui/material";
 import {
   ColumnDef,

package/src/components/Error/error.tsx

@@ -9,8 +9,8 @@ import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
 import { Grid } from "../common/Grid/grid";
 import { RoundedPaper } from "../common/Paper/paper.styles";
 import {
-  SectionActions,
   SectionContent as Content,
+  SectionActions,
 } from "../common/Section/section.styles";
 import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
 import {

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

@@ -3,8 +3,8 @@ import { MANIFEST_DOWNLOAD_FORMAT } from "../../../../apis/azul/common/entities"
 import { Filters } from "../../../../common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import {
-  FileManifestType,
   FILE_MANIFEST_TYPE,
+  FileManifestType,
 } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
 import { useRequestFileManifest } from "../../../../hooks/useFileManifest/useRequestFileManifest";

package/src/components/Export/components/ExportForm/components/ExportFileSummaryForm/exportFileSummaryForm.tsx

@@ -20,8 +20,8 @@ import { FileSummaryFacet } from "../../../../common/entities";
 import { OnFilterFn, OnUpdateFilterFacet } from "../../common/entities";
 import { ERROR, OnClearError } from "../../exportForm";
 import {
-  GridPaper,
   TableFormControl as FormControl,
+  GridPaper,
 } from "../../exportForm.styles";
 
 export interface ExportFileSummaryFormProps {

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx

@@ -1,8 +1,8 @@
 import { Typography } from "@mui/material";
 import React from "react";
 import {
-  OnboardingStatus,
   ONBOARDING_STEP,
+  OnboardingStatus,
   useAuthenticationForm,
 } from "../../../../../../hooks/useAuthentication/useAuthenticationForm";
 import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.tsx

@@ -10,8 +10,8 @@ import React, {
   useState,
 } from "react";
 import {
-  ListChildComponentProps,
   VariableSizeList as List,
+  ListChildComponentProps,
   VariableSizeListProps as ListProps,
 } from "react-window";
 import { SelectCategoryView } from "../../../../../../common/entities";

package/src/components/Filter/components/VariableSizeList/VariableSizeList.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
-  ListChildComponentProps,
   VariableSizeList as List,
+  ListChildComponentProps,
   VariableSizeListProps as ListProps,
 } from "react-window";
 import { CategoryKey } from "../../../../common/entities";

package/src/components/Index/components/AzulFileDownload/azulFileDownload.tsx

@@ -1,11 +1,15 @@
 import { Box } from "@mui/material";
-import React, { useEffect, useRef, useState } from "react";
-import { API_FILE_LOCATION_FETCH } from "../../../../apis/azul/common/constants";
-import { useRequestFileLocation } from "../../../../hooks/useRequestFileLocation";
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import { useFileLocation } from "../../../../hooks/useFileLocation";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { IconButton } from "../../../common/IconButton/iconButton";
 import { StyledIconButton } from "./azulFileDownload.styles";
+import {
+  AZUL_FILE_DOWNLOAD_TEST_ID,
+  AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID,
+  AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID,
+} from "./common/constants";
 
 export interface AzulFileDownloadProps {
   url?: string; // Original "file fetch URL" as returned from Azul endpoint.
@@ -14,72 +18,49 @@ export interface AzulFileDownloadProps {
 export const AzulFileDownload = ({
   url,
 }: AzulFileDownloadProps): JSX.Element => {
+  const { fileUrl, isLoading, run } = useFileLocation(url);
   const downloadRef = useRef<HTMLAnchorElement>(null);
-  // Used to prevent the download button from being clicked twice
-  const [isDownloading, setIsDownloading] = useState(false);
-  // Correct the file fetch URL as per the Azul spec.
-  const azulFetchUrl = buildFetchFileUrl(url);
-  const { data, isLoading, isSuccess, run } =
-    useRequestFileLocation(azulFetchUrl);
-  const fileLocation = data?.location;
+  const [isRequestPending, setIsRequestPending] = useState(false);
 
   // Initiates file download when file location request is successful.
   useEffect(() => {
-    if (isSuccess && fileLocation && downloadRef.current) {
-      const downloadEl = downloadRef.current;
-      downloadEl.href = fileLocation;
-      downloadEl.click();
-      setIsDownloading(false);
-    }
-  }, [fileLocation, isLoading, isSuccess]);
-
-  /**
-   * Initiate file location request.
-   */
-  const onFileLocationRequested = async (): Promise<void> => {
-    // Prevent duplicate downloads
-    setIsDownloading(true);
-    run();
-  };
-
-  if (isDownloading)
-    return (
-      <StyledIconButton color="primary" Icon={LoadingIcon} size="medium" />
-    );
+    if (!fileUrl) return;
+    if (!downloadRef.current) return;
+    const downloadEl = downloadRef.current;
+    downloadEl.href = fileUrl;
+    downloadEl.click();
+    setIsRequestPending(false);
+  }, [fileUrl]);
 
   return (
-    <>
-      <IconButton
-        color="primary"
-        disabled={!url}
-        Icon={isLoading ? LoadingIcon : DownloadIcon}
-        onClick={onFileLocationRequested}
-        size="medium"
+    <Fragment>
+      {isRequestPending ? (
+        <StyledIconButton
+          color="primary"
+          data-testid={AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID}
+          Icon={LoadingIcon}
+          size="medium"
+        />
+      ) : (
+        <IconButton
+          color="primary"
+          data-testid={AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID}
+          disabled={!url}
+          Icon={isLoading ? LoadingIcon : DownloadIcon}
+          onClick={(): void => {
+            setIsRequestPending(true);
+            run();
+          }}
+          size="medium"
+        />
+      )}
+      <Box
+        component="a"
+        data-testid={AZUL_FILE_DOWNLOAD_TEST_ID}
+        download
+        ref={downloadRef}
+        sx={{ display: "none" }}
       />
-      <Box component="a" download ref={downloadRef} sx={{ display: "none" }} />
-    </>
+    </Fragment>
   );
 };
-
-/**
- * Prepend "/fetch" to the path of the specified file URL, if not already included. See #1596.
- * @param fileUrl - Original file URL as returned from Azul.
- * @returns Complete and correct URL to use when requesting file location from Azul or undefined if no fileUrl is passed.
- */
-function buildFetchFileUrl(fileUrl?: string): string | undefined {
-  if (!fileUrl) {
-    return;
-  }
-
-  try {
-    const url = new URL(fileUrl);
-    const path = url.pathname;
-    if (!path.includes(API_FILE_LOCATION_FETCH)) {
-      url.pathname = `${API_FILE_LOCATION_FETCH}${path}`;
-    }
-    return url.toString();
-  } catch (error) {
-    //console.log("error parsing file URL", fileUrl);
-    return;
-  }
-}

package/src/components/Index/components/AzulFileDownload/common/constants.ts

@@ -0,0 +1,4 @@
+export const AZUL_FILE_DOWNLOAD_TEST_ID = "azul-file-download";
+export const AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID =
+  "azul-file-request-download-pending";
+export const AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID = "azul-file-request-download";

package/src/components/Index/components/NTag/components/Tooltip/tooltip.tsx

@@ -1,7 +1,7 @@
 import {
-  PopperProps,
   Tooltip as MTooltip,
   TooltipProps as MTooltipProps,
+  PopperProps,
 } from "@mui/material";
 import { detectOverflow } from "@popperjs/core";
 import { State } from "@popperjs/core/lib/types";

package/src/components/Layout/components/BackPage/backPageView.tsx

@@ -4,8 +4,8 @@ import {
   BackPageContentMainColumn,
   BackPageContentSideColumn,
   BackPageHero,
-  BackPageTabs,
   BackPageView as BackPageLayout,
+  BackPageTabs,
   DetailPageOverviewContent,
   DetailPageOverviewContentMainColumn,
   DetailPageOverviewContentSideColumn,

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
-import { TABLET } from "../../../../../../theme/common/breakpoints";
+import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
 import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
 
 export const BackPageHeroHeadline = styled.div`
@@ -10,7 +10,7 @@ export const BackPageHeroHeadline = styled.div`
     grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     display: flex;
     flex: 1;
     gap: 88px;
@@ -29,7 +29,7 @@ export const CallToActionButton = styled(CTAButton)`
   align-self: center;
   justify-self: flex-start;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     justify-self: flex-end;
   }
 `;