@databiosphere/findable-ui 24.0.0 → 25.1.0

package/src/components/TableCreator/tableCreator.tsx

@@ -6,15 +6,12 @@ import {
 } from "@tanstack/react-table";
 import React, { useMemo } from "react";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
-import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
-import { Loading } from "../Loading/loading";
 import { COLUMN_DEF } from "../Table/common/columnDef";
 import { arrIncludesSome, sortingFn } from "../Table/common/utils";
 import { Table } from "../Table/table";
 import { buildBaseColumnDef } from "./common/utils";
 import { useTableOptions } from "./options/hook";
-import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 
 export interface TableCreatorProps<T> {
   columns: ColumnConfig<T>[];
@@ -67,20 +64,13 @@ export const TableCreator = <T extends RowData>({
     [columns]
   );
   return (
-    <TableCreatorContainer>
-      <Loading
-        appear={false}
-        loading={loading || false}
-        panelStyle={PAPER_PANEL_STYLE.FLUID}
-      />
-      <Table<T>
-        columns={columnDefs}
-        getRowId={getRowId}
-        items={items}
-        listView={listView}
-        loading={loading}
-        tableOptions={tableOptions}
-      />
-    </TableCreatorContainer>
+    <Table<T>
+      columns={columnDefs}
+      getRowId={getRowId}
+      items={items}
+      listView={listView}
+      loading={loading}
+      tableOptions={tableOptions}
+    />
   );
 };

package/src/components/common/AnchorLink/anchorLink.tsx

@@ -1,4 +1,4 @@
-import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
+import { LinkRounded } from "@mui/icons-material";
 import React from "react";
 import { AnchorLink as Link } from "./anchorLink.styles";
 
@@ -20,7 +20,7 @@ export const AnchorLink = ({
 }: AnchorLinkProps): JSX.Element => {
   return (
     <Link aria-label={anchorLink} className={className} href={`#${anchorLink}`}>
-      <LinkRoundedIcon fontSize="xsmall" />
+      <LinkRounded fontSize="xsmall" />
     </Link>
   );
 };

package/src/components/common/Breadcrumbs/breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
+import { ChevronRightRounded } from "@mui/icons-material";
 import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
 import NLink from "next/link";
 import React, { ReactNode } from "react";
@@ -18,7 +18,7 @@ export interface BreadcrumbsProps extends BaseComponentProps {
 export const Breadcrumbs = ({
   breadcrumbs,
   className,
-  Separator = <ChevronRightRoundedIcon fontSize="xxsmall" />,
+  Separator = <ChevronRightRounded fontSize="xxsmall" />,
 }: BreadcrumbsProps): JSX.Element => {
   return (
     <>

package/src/components/common/Breadcrumbs/typeGuard.ts

@@ -0,0 +1,24 @@
+import { Breadcrumb } from "./breadcrumbs";
+
+/**
+ * Checks if the given value is an array of breadcrumbs.
+ * @param value - Value.
+ * @returns True if the value is an array of breadcrumbs.
+ */
+export function isBreadcrumbArray(value: unknown): value is Breadcrumb[] {
+  return Array.isArray(value) && value.every(isBreadcrumb);
+}
+
+/**
+ * Checks if the given value is a breadcrumb.
+ * @param value - Value.
+ * @returns True if the value is a breadcrumb.
+ */
+export function isBreadcrumb(value: unknown): value is Breadcrumb {
+  if (value === null) return false;
+  if (typeof value !== "object") return false;
+  if ("path" in value && "text" in value) {
+    return typeof value.path === "string" && typeof value.text === "string";
+  }
+  return false;
+}

package/src/components/common/Button/components/DropdownButton/dropdownButton.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { ButtonProps } from "../../button";
 import { DropdownButton as Button } from "./dropdownButton.styles";
@@ -16,7 +16,7 @@ export const DropdownButton = ({
   return (
     <Button
       disabled={disabled}
-      EndIcon={ArrowDropDownRoundedIcon}
+      EndIcon={ArrowDropDownRounded}
       open={open}
       {...props}
     >

package/src/components/common/Button/components/NavigationButton/navigationButton.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { ButtonProps } from "../../button";
 import { Button } from "./navigationButton.styles";
@@ -15,7 +15,7 @@ export const NavigationButton = ({
 }: NavigationButtonProps): JSX.Element => {
   return (
     <Button
-      EndIcon={ArrowDropDownRoundedIcon}
+      EndIcon={ArrowDropDownRounded}
       isActive={isActive}
       variant="nav"
       {...props}

package/src/components/common/CopyToClipboard/copyToClipboard.tsx

@@ -1,4 +1,4 @@
-import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import { ContentCopyRounded } from "@mui/icons-material";
 import { IconButton, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
 import React, { useEffect } from "react";
@@ -43,7 +43,7 @@ export const CopyToClipboard = ({
         onClick={(): void => onCopyToClipboard(copyStr)}
         size="xxsmall"
       >
-        <ContentCopyRoundedIcon color="primary" fontSize="small" />
+        <ContentCopyRounded color="primary" fontSize="small" />
       </IconButton>
     </Tooltip>
   );

package/src/components/common/Dialog/components/DialogTitle/dialogTitle.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton, DialogTitle as MDialogTitle } from "@mui/material";
 import React, { ReactNode } from "react";
 
@@ -18,7 +18,7 @@ export const DialogTitle = ({
       {title}
       {onClose && (
         <IconButton color="ink" edge="end" onClick={onClose} size="xsmall">
-          <CloseRoundedIcon />
+          <CloseRounded />
         </IconButton>
       )}
     </MDialogTitle>

package/src/components/common/Drawer/components/DrawerTitle/drawerTitle.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import React, { ReactNode } from "react";
 import { DrawerTitle as Title } from "./drawerTitle.styles";
@@ -19,7 +19,7 @@ export const DrawerTitle = ({
       {title}
       {onClose && (
         <IconButton color="ink" edge="end" onClick={onClose} size="xsmall">
-          <CloseRoundedIcon color="inkLight" fontSize="small" />
+          <CloseRounded color="inkLight" fontSize="small" />
         </IconButton>
       )}
     </Title>

package/src/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.tsx

@@ -1,10 +1,9 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
+import { SvgIconProps } from "@mui/material";
 import React from "react";
 
 export const DropDownIcon = ({
-  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
-}): JSX.Element => {
-  return (
-    <ArrowDropDownRoundedIcon color="inkMain" fontSize="small" {...props} />
-  );
+  ...props /* MuiSvgIconProps */
+}: SvgIconProps): JSX.Element => {
+  return <ArrowDropDownRounded color="inkMain" fontSize="small" {...props} />;
 };

package/src/components/common/Form/components/Select/select.tsx

@@ -5,7 +5,6 @@ import {
 } from "@mui/material";
 import React, { ReactNode } from "react";
 import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
-import { DropDownIcon } from "./components/DropDownIcon/dropDownIcon";
 import { InputFormControl } from "./select.styles";
 
 /**
@@ -30,13 +29,7 @@ export const Select = ({
   return (
     <InputFormControl className={className} isFilled={isFilled}>
       {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
-      <MSelect
-        fullWidth
-        IconComponent={DropDownIcon}
-        inputProps={{ onBlur }}
-        size="small"
-        {...props}
-      >
+      <MSelect fullWidth inputProps={{ onBlur }} size="small" {...props}>
         {children}
       </MSelect>
     </InputFormControl>

package/src/components/common/Form/components/UploadFile/uploadFile.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { FormHelperText, Typography } from "@mui/material";
 import React from "react";
 import { DropzoneState } from "react-dropzone";
@@ -59,7 +59,7 @@ export const UploadFile = ({
             </>
           )}
         </Typography>
-        {isAttached && <CloseRoundedIcon fontSize="small" />}
+        {isAttached && <CloseRounded fontSize="small" />}
       </Button>
       {error && (
         <FormHelperText>

package/src/components/common/LoginDialog/loginDialog.styles.ts

@@ -36,7 +36,7 @@ export const StyledDialog = styled(Dialog)`
           margin: 8px 0;
         }
 
-        .MuiGrid2-root {
+        .MuiGrid-root {
           margin: 24px 0;
         }
       }

package/src/components/common/Paper/paper.tsx

@@ -1,5 +1,6 @@
 import { Paper as MPaper, PaperProps as MPaperProps } from "@mui/material";
 import React, { forwardRef, ReactNode } from "react";
+import { TestIdProps } from "../../types";
 
 /**
  * An extension of the basic Mui Paper component with custom variants e.g. "panel".
@@ -20,18 +21,23 @@ export enum PAPER_PANEL_STYLE {
   ROUNDED = "ROUNDED",
 }
 
-export interface PaperProps {
+export interface PaperProps extends TestIdProps {
   children: ReactNode | ReactNode[];
   className?: string;
   variant?: MPaperProps["variant"];
 }
 
 export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
-  { children, className, variant = "panel" }: PaperProps,
+  { children, className, testId, variant = "panel" }: PaperProps,
   ref
 ): JSX.Element {
   return (
-    <MPaper className={className} ref={ref} variant={variant}>
+    <MPaper
+      className={className}
+      data-testid={testId}
+      ref={ref}
+      variant={variant}
+    >
       {children}
     </MPaper>
   );

package/src/components/common/Section/components/CollapsableSection/collapsableSection.tsx

@@ -1,5 +1,4 @@
-import AddRoundedIcon from "@mui/icons-material/AddRounded";
-import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
+import { AddRounded, RemoveRounded } from "@mui/icons-material";
 import { Collapse, CollapseProps } from "@mui/material";
 import React, { ReactNode, useEffect, useState } from "react";
 import {
@@ -30,7 +29,7 @@ export const CollapsableSection = ({
   const [transitionDuration, setTransitionDuration] =
     useState<CollapseProps["timeout"]>(0);
   const disabled = !mobile || !collapsable;
-  const ExpandIcon = expanded ? RemoveRoundedIcon : AddRoundedIcon;
+  const ExpandIcon = expanded ? RemoveRounded : AddRounded;
   const SectionContent = (
     <SectionText component="div" variant="text-body-400-2lines">
       {children}

package/src/components/common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook.ts

@@ -0,0 +1,17 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { MouseEvent, useCallback, useState } from "react";
+
+export const useToggleButtonGroup = <
+  TValue extends ToggleButtonGroupProps["value"]
+>(
+  initialValue: TValue | null = null
+): ToggleButtonGroupProps => {
+  const [value, setValue] = useState<TValue | null>(initialValue);
+
+  const onChange = useCallback((_: MouseEvent, value: TValue) => {
+    if (!value) return;
+    setValue(value);
+  }, []);
+
+  return { onChange, value };
+};

package/src/components/types.ts

@@ -4,6 +4,10 @@ export interface BaseComponentProps {
   className?: string;
 }
 
+export interface ChildrenProps {
+  children?: ReactNode;
+}
+
 export interface ContentProps {
   content?: ReactNode;
 }

package/src/config/entities.ts

@@ -93,6 +93,7 @@ export interface CategoryGroup {
  */
 export interface CategoryConfig {
   annotation?: DataDictionaryAnnotation;
+  enableChartView?: boolean;
   key: string;
   label: string;
   mapSelectCategoryValue?: (
@@ -376,6 +377,7 @@ export interface SiteConfig {
   contentThemeOptionsFn?: ThemeOptionsFn;
   dataDictionary?: DataDictionary;
   dataSource: DataSourceConfig;
+  enableEntitiesView?: boolean; // Toggle entities view - list or filter summary
   entities: EntityConfig[];
   explorerTitle: HeroTitle;
   export?: ExportConfig;

package/src/hooks/useCategoryFilter.ts

@@ -78,6 +78,7 @@ function buildCategoryView(
     categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
     annotation: categoryConfig?.annotation,
+    enableChartView: categoryConfig?.enableChartView,
     isDisabled: false,
     key: category.key,
     label: getCategoryLabel(category.key, categoryConfig),

package/src/hooks/useResizeObserver.ts

@@ -15,11 +15,13 @@ export type ElementRect = {
  * Element resizing and repositioning observer.
  * @param ref - element to be observed for changes to its size or position.
  * @param onResizeFn - action to be performed when the observed element is resized or repositioned.
+ * @param shouldObserve - boolean flag to determine if the observer should be active.
  * @returns Element size and position properties for the given element.
  */
 export function useResizeObserver(
   ref: RefObject<HTMLElement>,
-  onResizeFn: (entries: ResizeObserverEntry[]) => Partial<ElementRect>
+  onResizeFn: (entries: ResizeObserverEntry[]) => Partial<ElementRect>,
+  shouldObserve: boolean = true
 ): Partial<ElementRect> | undefined {
   const [elementRect, setElementRect] = useState<Partial<ElementRect>>();
   const observerRef = useRef<ResizeObserver>();
@@ -38,6 +40,7 @@ export function useResizeObserver(
   // Creates a new ResizeObserver object which can be used to report changes to an "observed" element's dimensions or position.
   useEffect(() => {
     if (!ref.current) return;
+    if (!shouldObserve) return;
     observerRef.current = new ResizeObserver(onResize);
     const observer = observerRef.current;
     const observedEl = ref.current;
@@ -45,7 +48,7 @@ export function useResizeObserver(
     return (): void => {
       observer.unobserve(observedEl);
     };
-  }, [onResize, ref]);
+  }, [onResize, ref, shouldObserve]);
 
   return elementRect;
 }

package/src/styles/common/mui/palette.ts

@@ -0,0 +1,47 @@
+export const PALETTE = {
+  ALERT_LIGHT: `var(--mui-palette-alert-light)`,
+  ALERT_LIGHTEST: `var(--mui-palette-alert-lightest)`,
+  ALERT_MAIN: `var(--mui-palette-alert-main)`,
+  BACKGROUND_DEFAULT: `var(--mui-palette-background-default)`,
+  BACKGROUND_PAPER: `var(--mui-palette-background-paper)`,
+  COMMON_BACKGROUND: `var(--mui-palette-common-background)`,
+  COMMON_BLACK: `var(--mui-palette-common-black)`,
+  COMMON_WHITE: `var(--mui-palette-common-white)`,
+  ERROR_CONTRAST_TEXT: `var(--mui-palette-error-contrastText)`,
+  ERROR_DARK: `var(--mui-palette-error-dark)`,
+  ERROR_LIGHT: `var(--mui-palette-error-light)`,
+  ERROR_MAIN: `var(--mui-palette-error-main)`,
+  INFO_CONTRAST_TEXT: `var(--mui-palette-info-contrastText)`,
+  INFO_DARK: `var(--mui-palette-info-dark)`,
+  INFO_LIGHT: `var(--mui-palette-info-light)`,
+  INFO_LIGHTEST: `var(--mui-palette-info-lightest)`,
+  INFO_MAIN: `var(--mui-palette-info-main)`,
+  INK_LIGHT: `var(--mui-palette-ink-light)`,
+  INK_MAIN: `var(--mui-palette-ink-main)`,
+  PRIMARY_CONTRAST_TEXT: `var(--mui-palette-primary-contrastText)`,
+  PRIMARY_DARK: `var(--mui-palette-primary-dark)`,
+  PRIMARY_LIGHT: `var(--mui-palette-primary-light)`,
+  PRIMARY_LIGHTEST: `var(--mui-palette-primary-lightest)`,
+  PRIMARY_MAIN: `var(--mui-palette-primary-main)`,
+  SECONDARY_CONTRAST_TEXT: `var(--mui-palette-secondary-contrastText)`,
+  SECONDARY_DARK: `var(--mui-palette-secondary-dark)`,
+  SECONDARY_LIGHT: `var(--mui-palette-secondary-light)`,
+  SECONDARY_MAIN: `var(--mui-palette-secondary-main)`,
+  SMOKE_DARK: `var(--mui-palette-smoke-dark)`,
+  SMOKE_LIGHT: `var(--mui-palette-smoke-light)`,
+  SMOKE_LIGHTEST: `var(--mui-palette-smoke-lightest)`,
+  SMOKE_MAIN: `var(--mui-palette-smoke-main)`,
+  SUCCESS_CONTRAST_TEXT: `var(--mui-palette-success-contrastText)`,
+  SUCCESS_DARK: `var(--mui-palette-success-dark)`,
+  SUCCESS_LIGHT: `var(--mui-palette-success-light)`,
+  SUCCESS_LIGHTEST: `var(--mui-palette-success-lightest)`,
+  SUCCESS_MAIN: `var(--mui-palette-success-main)`,
+  TEXT_DISABLED: `var(--mui-palette-text-disabled)`,
+  TEXT_PRIMARY: `var(--mui-palette-text-primary)`,
+  TEXT_SECONDARY: `var(--mui-palette-text-secondary)`,
+  WARNING_CONTRAST_TEXT: `var(--mui-palette-warning-contrastText)`,
+  WARNING_DARK: `var(--mui-palette-warning-dark)`,
+  WARNING_LIGHT: `var(--mui-palette-warning-light)`,
+  WARNING_LIGHTEST: `var(--mui-palette-warning-lightest)`,
+  WARNING_MAIN: `var(--mui-palette-warning-main)`,
+} as const;

package/src/tests/testIds.ts

@@ -0,0 +1,18 @@
+export const TEST_IDS = {
+  CLEAR_ALL_FILTERS: "clear-all-filters",
+  ENTITIES_VIEW: "entities-view",
+  EXPORT_BUTTON: "export-button",
+  FILTERS: "filters",
+  FILTER_CONTROLS: "filter-controls",
+  FILTER_COUNT: "filter-count",
+  FILTER_ITEM: "filter-item",
+  FILTER_POPOVER: "filter-popover",
+  FILTER_TERM: "filter-term",
+  SEARCH_ALL_FILTERS: "search-all-filters",
+  SIDEBAR: "sidebar",
+  SIDEBAR_DRAWER: "sidebar-drawer",
+  TABLE_FIRST_CELL: "table-first-cell",
+  TABLE_PAGINATION: "table-pagination",
+  TABLE_PAGINATION_PAGE: "table-pagination-page",
+  TABLE_PAGINATION_RESULTS: "table-pagination-results",
+};

package/src/theme/common/components.ts

@@ -1,4 +1,5 @@
 import { Components, Theme } from "@mui/material";
+import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
@@ -1179,6 +1180,9 @@ export const MuiRadio = (theme: Theme): Components["MuiRadio"] => {
  * MuiSelect Component
  */
 export const MuiSelect: Components["MuiSelect"] = {
+  defaultProps: {
+    IconComponent: DropDownIcon,
+  },
   styleOverrides: {
     select: {
       minHeight: "unset",

package/src/theme/common/typography.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "@mui/material/styles/createTypography";
+import { CSSProperties } from "@mui/material";
 import { tabletUp } from "./breakpoints";
 
 /**

package/src/theme/theme.ts

@@ -1,4 +1,5 @@
 import { createTheme, Shadows, Theme, ThemeOptions } from "@mui/material";
+import { deepmerge } from "@mui/utils";
 import * as B from "./common/breakpoints";
 import * as C from "./common/components";
 import * as P from "./common/palette";
@@ -15,52 +16,55 @@ export interface ThemeProps {
  * @param customOptions - Custom theme option overrides.
  * @returns theme with custom theme overrides.
  */
-export function createAppTheme(customOptions?: ThemeOptions): Theme {
+export function createAppTheme(customOptions: ThemeOptions = {}): Theme {
   // Generate default theme with custom overrides.
   const theme = createTheme(
-    {
-      breakpoints: {
-        values: {
-          lg: B.desktop,
-          md: B.desktopSm,
-          sm: B.tablet,
-          xs: B.mobile,
+    deepmerge(
+      {
+        breakpoints: {
+          values: {
+            lg: B.desktop,
+            md: B.desktopSm,
+            sm: B.tablet,
+            xs: B.mobile,
+          },
+        },
+        cssVariables: true,
+        palette: {
+          alert: P.alert,
+          background: P.background,
+          common: P.common,
+          info: P.info,
+          ink: P.ink,
+          primary: P.primary,
+          smoke: P.smoke,
+          success: P.success,
+          text: P.text,
+          warning: P.warning,
+        },
+        spacing: 4,
+        typography: {
+          [T.TEXT_BODY_400]: T.textBody400,
+          [T.TEXT_BODY_400_2_LINES]: T.textBody4002Lines,
+          [T.TEXT_BODY_500]: T.textBody500,
+          [T.TEXT_BODY_500_2_LINES]: T.textBody5002Lines,
+          [T.TEXT_BODY_LARGE_400]: T.textBodyLarge400,
+          [T.TEXT_BODY_LARGE_400_2_LINES]: T.textBodyLarge4002Lines,
+          [T.TEXT_BODY_LARGE_500]: T.textBodyLarge500,
+          [T.TEXT_BODY_SMALL_400]: T.textBodySmall400,
+          [T.TEXT_BODY_SMALL_400_2_LINES]: T.textBodySmall4002Lines,
+          [T.TEXT_BODY_SMALL_500]: T.textBodySmall500,
+          [T.TEXT_HEADING]: T.textHeading,
+          [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
+          [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
+          [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
+          [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
+          [T.TEXT_UPPERCASE_500]: T.textUppercase500,
+          fontFamily: T.fontFamily,
         },
       },
-      palette: {
-        alert: P.alert,
-        background: P.background,
-        common: P.common,
-        info: P.info,
-        ink: P.ink,
-        primary: P.primary,
-        smoke: P.smoke,
-        success: P.success,
-        text: P.text,
-        warning: P.warning,
-      },
-      spacing: 4,
-      typography: {
-        [T.TEXT_BODY_400]: T.textBody400,
-        [T.TEXT_BODY_400_2_LINES]: T.textBody4002Lines,
-        [T.TEXT_BODY_500]: T.textBody500,
-        [T.TEXT_BODY_500_2_LINES]: T.textBody5002Lines,
-        [T.TEXT_BODY_LARGE_400]: T.textBodyLarge400,
-        [T.TEXT_BODY_LARGE_400_2_LINES]: T.textBodyLarge4002Lines,
-        [T.TEXT_BODY_LARGE_500]: T.textBodyLarge500,
-        [T.TEXT_BODY_SMALL_400]: T.textBodySmall400,
-        [T.TEXT_BODY_SMALL_400_2_LINES]: T.textBodySmall4002Lines,
-        [T.TEXT_BODY_SMALL_500]: T.textBodySmall500,
-        [T.TEXT_HEADING]: T.textHeading,
-        [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
-        [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
-        [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
-        [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
-        [T.TEXT_UPPERCASE_500]: T.textUppercase500,
-        fontFamily: T.fontFamily,
-      },
-    },
-    { ...customOptions }
+      customOptions
+    )
   );
 
   // Default shadow overrides.