@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/components/Support/components/SupportRequest/components/Dialog/dialog.styles.ts

@@ -1,10 +1,9 @@
 import styled from "@emotion/styled";
 import { Fab as MFab, Popover as MPopover } from "@mui/material";
 import { COLOR_MIXES } from "../../../../../../styles/common/constants/colorMixes";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import { SHADOWS } from "../../../../../../styles/common/constants/shadows";
-import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
-import { smokeMain } from "../../../../../../styles/common/mixins/colors";
-import { tabletUp } from "../../../../../../theme/common/breakpoints";
+import { bpUpSm } from "../../../../../../styles/common/mixins/breakpoints";
 
 interface Props {
   open: boolean;
@@ -17,7 +16,7 @@ export const Fab = styled(MFab)<Props>`
   right: 16px;
   z-index: ${({ open }) => (open ? 1350 : 1050)}; // Above backdrop component.
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     bottom: 72px;
   }
 `;
@@ -27,11 +26,11 @@ export const Popover = styled(MPopover)`
     background-color: ${COLOR_MIXES.INK_MAIN_80};
 
     > .MuiPaper-root {
-      border: 1px solid ${smokeMain};
+      border: 1px solid ${PALETTE.SMOKE_MAIN};
       border-radius: 8px;
       width: 100%;
 
-      ${tabletUp} {
+      ${bpUpSm} {
         max-width: 496px;
       }
     }

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import { textHeadingSmall } from "../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../styles/common/constants/font";
 import { GridPaperSection } from "../../../../../common/Section/section.styles";
 
 export const Title = styled.h3`
-  ${textHeadingSmall};
+  font: ${FONT.HEADING_SMALL};
   margin: 0;
 `;
 

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.tsx

@@ -8,7 +8,7 @@ import React, {
 } from "react";
 import { FileRejection } from "react-dropzone";
 import { ValidationError } from "yup";
-import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { Input } from "../../../../../common/Form/components/Input/input";
 import { Select } from "../../../../../common/Form/components/Select/select";
@@ -184,7 +184,10 @@ export const SupportRequestForm = ({
           <Section>
             <SectionContent>
               <Title>Contact Us</Title>
-              <Typography color="ink.light" variant={TEXT_BODY_400}>
+              <Typography
+                color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+                variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+              >
                 We’re here to help and answer any questions you might have. We
                 look forward to hearing from you!
               </Typography>

package/src/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.tsx

@@ -1,9 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { ReactNode } from "react";
-import {
-  TEXT_BODY_400,
-  TEXT_HEADING_SMALL,
-} from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { EmailReadIcon } from "../../../../../common/CustomIcon/components/EmailReadIcon/emailReadIcon";
 import {
   ICON_BADGE_COLOR,
@@ -27,8 +24,13 @@ export const SupportRequestSubmitted = ({
     <Section>
       <SectionContent>
         <IconBadge color={ICON_BADGE_COLOR.SUCCESS} Icon={EmailReadIcon} />
-        <Typography variant={TEXT_HEADING_SMALL}>{title}</Typography>
-        <Typography color="ink.light" variant={TEXT_BODY_400}>
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}>
+          {title}
+        </Typography>
+        <Typography
+          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+        >
           {description}
         </Typography>
       </SectionContent>

package/src/components/Support/components/ViewSupport/viewSupport.styles.ts

@@ -1,20 +1,16 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { SHADOWS } from "../../../../styles/common/constants/shadows";
-import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
-import {
-  primaryDark,
-  primaryMain,
-  white,
-} from "../../../../styles/common/mixins/colors";
+import { bpUpSm } from "../../../../styles/common/mixins/breakpoints";
 
 export const Fab = styled("a")`
   align-items: center;
-  background-color: ${primaryMain};
+  background-color: ${PALETTE.PRIMARY_MAIN};
   border: none;
   border-radius: 50%;
   bottom: 16px;
   box-shadow: ${SHADOWS["02"]};
-  color: ${white};
+  color: ${PALETTE.COMMON_WHITE};
   cursor: pointer;
   display: flex;
   font-size: 28px; // Determines the size of the support icon.
@@ -26,10 +22,10 @@ export const Fab = styled("a")`
   z-index: 100; // Above loading component.
 
   &:hover {
-    background-color: ${primaryDark};
+    background-color: ${PALETTE.PRIMARY_DARK};
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     bottom: 72px;
   }
 `;

package/src/components/Table/common/gridTable.styles.ts

@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 import { Table as MTable } from "@mui/material";
 import { PALETTE } from "../../../styles/common/constants/palette";
-import { white } from "../../../styles/common/mixins/colors";
 
 export interface GridTableProps {
   gridTemplateColumns: string;
@@ -25,7 +24,7 @@ export const GridTable = styled(MTable, {
   }
 
   tr {
-    background-color: ${white};
+    background-color: ${PALETTE.COMMON_WHITE};
   }
 
   td {

package/src/components/Table/components/DownloadEntityResults/downloadEntityResults.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
-import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../styles/common/mixins/breakpoints";
 
 export const StyledButton = styled(Button)`
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     display: none;
   }
 `;

package/src/components/Table/components/PaginationSummary/paginationSummary.tsx

@@ -1,5 +1,6 @@
 import { Fade, Typography } from "@mui/material";
 import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { TEST_IDS } from "../../../../tests/testIds";
 
 export interface PaginationSummaryProps {
@@ -16,12 +17,16 @@ export const PaginationSummary = ({
   return (
     <Fade in={totalResult > 0} unmountOnExit>
       <div data-testid={TEST_IDS.TABLE_PAGINATION_RESULTS}>
-        <Typography variant="text-body-400">Results </Typography>
-        <Typography variant="text-body-small-500">
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+          Results
+        </Typography>
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
           {firstResult} - {lastResult}
         </Typography>
-        <Typography variant="text-body-400"> of </Typography>
-        <Typography variant="text-body-small-500">{totalResult}</Typography>
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>of</Typography>
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
+          {totalResult}
+        </Typography>
       </div>
     </Fade>
   );

package/src/components/Table/components/TableCell/components/BasicCell/basicCell.tsx

@@ -1,6 +1,7 @@
 import { Typography } from "@mui/material";
 import React, { Fragment, ReactNode } from "react";
 import { LABEL } from "../../../../../../apis/azul/common/entities";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { TypographyProps } from "../../../../../common/Typography/common/entities";
 
 export interface BasicCellProps {
@@ -14,7 +15,10 @@ export const BasicCell = ({
 }: BasicCellProps): JSX.Element | null => {
   if (isValueNumberOrString(value)) {
     return (
-      <Typography variant="inherit" {...TypographyProps}>
+      <Typography
+        variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}
+        {...TypographyProps}
+      >
         {value}
       </Typography>
     );
@@ -23,7 +27,11 @@ export const BasicCell = ({
     return (
       <Fragment>
         {value.map((v: number | string) => (
-          <Typography key={v} variant="inherit" {...TypographyProps}>
+          <Typography
+            key={v}
+            variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}
+            {...TypographyProps}
+          >
             {v}
           </Typography>
         ))}

package/src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.ts

@@ -1,8 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TableCell as MTableCell } from "@mui/material";
-import { smokeLightest } from "../../../../../../styles/common/mixins/colors";
-import { textBody4002Lines } from "../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 
 interface Props {
   isExpanded: boolean;
@@ -18,11 +18,11 @@ export const TableCell = styled(MTableCell, {
   }
 
   // Expanded.
-  ${({ isExpanded, ...props }) =>
+  ${({ isExpanded }) =>
     isExpanded &&
     css`
       && {
-        background-color: ${smokeLightest(props)};
+        background-color: ${PALETTE.SMOKE_LIGHTEST};
       }
     `};
 }
@@ -42,8 +42,8 @@ export const PinnedCell = styled.div`
 `;
 
 export const CollapsedContents = styled.div`
-  ${textBody4002Lines};
   display: grid;
+  font: ${FONT.BODY_400_2_LINES};
   gap: 12px;
   justify-items: flex-start;
   padding: 0 16px 12px;

package/src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.tsx

@@ -1,7 +1,7 @@
 import { Collapse, IconButton, Typography } from "@mui/material";
 import { Cell, flexRender, Row, RowData } from "@tanstack/react-table";
 import React from "react";
-import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
 import { getPinnedCellIndex } from "../../../../common/utils";
 import {
@@ -46,9 +46,9 @@ export const CollapsableCell = <T extends RowData>({
                 <Content key={cell.id}>
                   {header && (
                     <Typography
+                      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
                       component="div"
-                      color="ink.light"
-                      variant={TEXT_BODY_400_2_LINES}
+                      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
                     >
                       {header}
                     </Typography>

package/src/components/Table/components/TableCell/components/LinkCell/stories/args.ts

@@ -30,6 +30,6 @@ export const WITH_CUSTOM_STYLE_ARGS: Partial<ComponentProps<typeof LinkCell>> =
       color: "success",
       href: "/",
       underline: "none",
-      variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400,
+      variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400,
     })) as GetValue,
   };

package/src/components/Table/components/TableCell/components/NTagCell/nTagCell.tsx

@@ -4,7 +4,7 @@ import {
   Typography,
 } from "@mui/material";
 import React, { forwardRef } from "react";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { TypographyProps } from "../../../../../common/Typography/common/entities";
 import { NTag } from "./components/NTag/nTag";
 
@@ -49,7 +49,10 @@ export const NTagCell = ({
         <NTag
           Tag={<Tag label={`${metadataCount} ${label}`} variant="ntag" />}
           TooltipTitle={
-            <Typography display="block" variant={TEXT_BODY_SMALL_400}>
+            <Typography
+              display="block"
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
+            >
               {stringifyMetadataValues(values)}
             </Typography>
           }
@@ -58,7 +61,7 @@ export const NTagCell = ({
         values.map((value, v) => (
           <Typography
             key={`${value}${v}`}
-            variant="inherit"
+            variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}
             {...TypographyProps}
           >
             {value}

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -94,7 +94,7 @@ export const ColumnFilter = <T extends RowData>({
                 ? TYPOGRAPHY_PROPS.COLOR.PRIMARY
                 : TYPOGRAPHY_PROPS.COLOR.INHERIT
             }
-            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
           >
             Clear All
           </Typography>

package/src/components/Table/components/TablePagination/tablePagination.tsx

@@ -31,7 +31,7 @@ export const TablePagination = ({
       </IconButton>
       <Typography
         data-testid={TEST_IDS.TABLE_PAGINATION_PAGE}
-        variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500}
+        variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
       >
         Page {currentPage} of {totalPage}
       </Typography>

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -1,8 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TableRow as MTableRow } from "@mui/material";
+import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
 
 export interface StyledTableRowProps {
   canExpand?: boolean;
@@ -27,8 +27,8 @@ export const StyledTableRow = styled(MTableRow, {
         background-color: ${PALETTE.SMOKE_LIGHTEST};
 
         td {
-          ${textBodySmall500(props)};
           background-color: inherit;
+          font: ${FONT.BODY_SMALL_500};
           grid-column: 1 / -1;
         }
       `}

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
-import { smokeMain } from "../../../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../../../styles/common/constants/palette";
+import { bpUpSm } from "../../../../../../../../styles/common/mixins/breakpoints";
 import { DrawerTitle as DXDrawerTitle } from "../../../../../../../common/Drawer/components/DrawerTitle/drawerTitle";
 import { Drawer as DXDrawer } from "../../../../../../../common/Drawer/drawer";
 
@@ -9,14 +9,14 @@ export const Drawer = styled(DXDrawer)`
     pointer-events: none;
 
     .MuiDrawer-paper {
-      border-left: 1px solid ${smokeMain};
+      border-left: 1px solid ${PALETTE.SMOKE_MAIN};
       box-shadow: -8px 0 8px -4px #10182808, 0 20px 24px -4px #10182814;
       pointer-events: all;
       max-width: min(506px, 84vw);
       width: 100%;
     }
 
-    ${mediaTabletUp} {
+    ${bpUpSm} {
       .MuiDrawer-paper {
         max-width: min(506px, 50vw);
       }
@@ -25,7 +25,7 @@ export const Drawer = styled(DXDrawer)`
 `;
 
 export const DrawerTitle = styled(DXDrawerTitle)`
-  .MuiTypography-text-heading-small {
+  .MuiTypography-heading-small {
     font-size: 20px;
   }
 `;

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.tsx

@@ -5,7 +5,7 @@ import {
 } from "@mui/material";
 import { RowData, Table } from "@tanstack/react-table";
 import React, { ReactNode } from "react";
-import { TEXT_HEADING_SMALL } from "../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
 import { DrawerContent } from "../../../../../../../common/Drawer/components/drawer.styles";
 import { DEFAULT_DRAWER_PROPS } from "./common/constants";
 import { Drawer, DrawerTitle } from "./rowDrawer.styles";
@@ -38,7 +38,11 @@ export const RowDrawer = <T extends RowData>({
         onClose={(): void => toggleRowPreview?.()}
         title={
           typeof title === "string" ? (
-            <MTypography component="div" noWrap variant={TEXT_HEADING_SMALL}>
+            <MTypography
+              component="div"
+              noWrap
+              variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}
+            >
               {title}
             </MTypography>
           ) : (

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.styles.ts

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
+import { FONT } from "../../../../../../../../../../styles/common/constants/font";
 import {
-  mediaDesktopSmallUp,
-  mediaTabletUp,
+  bpUpMd,
+  bpUpSm,
 } from "../../../../../../../../../../styles/common/mixins/breakpoints";
-import { textBody400 } from "../../../../../../../../../../styles/common/mixins/fonts";
 
 export const Section = styled.div`
-  ${textBody400};
   display: grid;
+  font: ${FONT.BODY_400};
   gap: 16px;
   grid-auto-rows: minmax(40px, auto);
   grid-template-columns: minmax(0, 1fr);
@@ -28,7 +28,7 @@ export const Section = styled.div`
     text-transform: none;
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     gap: 0 8px;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     padding: 8px 24px;
@@ -42,7 +42,7 @@ export const Section = styled.div`
     }
   }
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     grid-template-columns: 194px minmax(0, 1fr);
   }
 `;

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.tsx

@@ -2,7 +2,7 @@ import { Grid, Typography } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { ListConfig } from "../../../../../../../../../../config/entities";
-import { TEXT_BODY_400 } from "../../../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../../../styles/common/mui/typography";
 import { ButtonTextPrimary } from "../../../../../../../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 import { ComponentCreator } from "../../../../../../../../../ComponentCreator/ComponentCreator";
 import { Section } from "./rowDetail.styles";
@@ -34,8 +34,8 @@ export const RowDetail = <T extends RowData>({
       {visibleColumns.map(({ componentConfig, header }, i) => (
         <Grid key={i}>
           <Typography
-            color="ink.light"
-            variant={TEXT_BODY_400}
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
             {...componentConfig.props?.TypographyProps}
           >
             {header}

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.styles.ts

@@ -5,7 +5,7 @@ export const Section = styled.div`
   gap: 16px;
   padding: 16px 24px 24px;
 
-  .MuiTypography-text-heading-small {
+  .MuiTypography-heading-small {
     font-size: 18px;
     line-height: 26px;
   }

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { ReactNode } from "react";
-import { TEXT_HEADING_SMALL } from "../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
 import { Section as PreviewSection } from "./section.styles";
 
 export interface SectionProps {
@@ -16,7 +16,10 @@ export const Section = ({
 }: SectionProps): JSX.Element => {
   return (
     <PreviewSection className={className}>
-      <Typography component="div" variant={TEXT_HEADING_SMALL}>
+      <Typography
+        component="div"
+        variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}
+      >
         {title}
       </Typography>
       {children}

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.tsx

@@ -2,7 +2,7 @@ import { Typography } from "@mui/material";
 import { Row, RowData } from "@tanstack/react-table";
 import React from "react";
 import { ComponentsConfig } from "../../../../../../config/entities";
-import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
 import { RowSelection as RowSelectionActions } from "./rowSelection.styles";
 
@@ -19,7 +19,7 @@ export const RowSelection = <T extends RowData>({
 }: RowSelectionProps<T>): JSX.Element | null => {
   return (
     <RowSelectionActions className={className}>
-      <Typography variant={TEXT_BODY_400}>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
         {rows.length} items selected:
       </Typography>
       {rowSelectionView ? (

package/src/components/Table/table.styles.ts

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { PALETTE } from "../../styles/common/constants/palette";
-import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../styles/common/mixins/breakpoints";
 import { GridTable as Table } from "./common/gridTable.styles";
 
 interface Props {
@@ -26,7 +26,7 @@ export const GridTable = styled(Table, {
   shouldForwardProp: (prop) => prop !== "collapsable",
 })<Props>`
   // Collapsable.
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     ${({ collapsable }) =>
       collapsable &&
       css`

package/src/components/Table/table.tsx

@@ -15,7 +15,6 @@ import {
 import { useExploreMode } from "../../hooks/useExploreMode/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
 import { ExploreActionKind } from "../../providers/exploreState";
-import { TABLET } from "../../theme/common/breakpoints";
 import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
 import { NoResults } from "../NoResults/noResults";
 import { getColumnTrackSizing } from "../TableCreator/options/columnTrackSizing/utils";
@@ -39,14 +38,14 @@ export const Table = <T extends RowData>({
   loading,
   table,
 }: TableProps<T>): JSX.Element => {
-  const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+  const bpDownSm = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
   const exploreMode = useExploreMode();
   const { exploreDispatch, exploreState } = useExploreState();
   const { paginationState } = exploreState;
   const { currentPage, pages } = paginationState;
   const { disablePagination = false } = listView || {};
   const clientFiltering = isClientFilteringEnabled(exploreMode);
-  const rowDirection = tabletDown
+  const rowDirection = bpDownSm
     ? ROW_DIRECTION.VERTICAL
     : ROW_DIRECTION.DEFAULT;
   const { rows, scrollElementRef, virtualizer } = useVirtualization({

package/src/components/common/Accordion/accordion.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
 } from "@mui/material";
 import React, { ReactNode, useState } from "react";
-import { TEXT_BODY_LARGE_500 } from "../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
 import { AddIcon } from "../CustomIcon/components/AddIcon/addIcon";
 import { RemoveIcon } from "../CustomIcon/components/RemoveIcon/removeIcon";
 
@@ -33,7 +33,9 @@ export const Accordion = ({
   return (
     <MAccordion expanded={isExpanded} onChange={onToggleExpanded} {...props}>
       <AccordionSummary expandIcon={isExpanded ? collapseIcon : expandIcon}>
-        <Typography variant={TEXT_BODY_LARGE_500}>{title}</Typography>
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}>
+          {title}
+        </Typography>
       </AccordionSummary>
       <AccordionDetails>{children}</AccordionDetails>
     </MAccordion>

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

@@ -1,11 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Alert } from "@mui/material";
+import { FONT } from "../../../styles/common/constants/font";
 import { SIZE } from "../../../styles/common/constants/size";
-import {
-  textBody4002Lines,
-  textBodyLarge500,
-} from "../../../styles/common/mixins/fonts";
 
 export const StyledAlert = styled(Alert)`
   ${(props) =>
@@ -16,9 +13,9 @@ export const StyledAlert = styled(Alert)`
         padding: 2px 0;
       }
       .MuiAlert-message {
-        ${textBody4002Lines(props)};
+        font: ${FONT.BODY_400_2_LINES};
         .MuiAlertTitle-root {
-          ${textBodyLarge500(props)};
+          font: ${FONT.BODY_LARGE_500};
         }
       }
     `}