@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/components/Stepper/components/Step/step.styles.js

@@ -1,12 +1,12 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Step } from "@mui/material";
-import { smokeLightest, white } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { sectionPadding } from "../../../common/Section/section.styles";
 export const StyledStep = styled(Step) `
   &.MuiStep-root {
     &.MuiStep-vertical {
-      background-color: ${smokeLightest};
+      background-color: ${PALETTE.SMOKE_LIGHTEST};
 
       .MuiStepLabel-root {
         ${sectionPadding};
@@ -19,12 +19,12 @@ export const StyledStep = styled(Step) `
       }
 
       &.Mui-completed {
-        background-color: ${white};
+        background-color: ${PALETTE.COMMON_WHITE};
       }
 
-      ${(props) => props.active &&
+      ${({ active }) => active &&
     css `
-          background-color: ${white(props)};
+          background-color: ${PALETTE.COMMON_WHITE};
         `};
     }
   }

package/lib/components/Support/components/SupportRequest/components/Dialog/dialog.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const Fab: import("@emotion/styled").StyledComponent<import("@mui/material").FabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "variant"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export declare const Popover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & {

package/lib/components/Support/components/SupportRequest/components/Dialog/dialog.styles.js

@@ -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";
 export const Fab = styled(MFab) `
   bottom: 16px;
   box-shadow: ${SHADOWS["02"]};
@@ -12,7 +11,7 @@ export const Fab = styled(MFab) `
   right: 16px;
   z-index: ${({ open }) => (open ? 1350 : 1050)}; // Above backdrop component.
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     bottom: 72px;
   }
 `;
@@ -21,11 +20,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/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.js

@@ -1,6 +1,6 @@
 import { MenuItem, Typography } from "@mui/material";
 import React, { useState, } from "react";
-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";
@@ -133,7 +133,7 @@ export const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
         React.createElement(Section, null,
             React.createElement(SectionContent, null,
                 React.createElement(Title, null, "Contact Us"),
-                React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_400 }, "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!"))),
+                React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!"))),
         React.createElement(Section, null,
             React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[FORM_CONTROL_NAME.NAME]), label: FORM_CONTROL_LABEL.NAME, name: FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }),
             React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.EMAIL), isFilled: Boolean(formState[FORM_CONTROL_NAME.EMAIL]), label: FORM_CONTROL_LABEL.EMAIL, name: FORM_CONTROL_NAME.EMAIL, onBlur: onBlur, onChange: onInputChange }),

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.styles.js

@@ -1,8 +1,8 @@
 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;
 `;
 export const Section = styled(GridPaperSection) `

package/lib/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React 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, IconBadge, } from "../../../../../common/IconBadge/iconBadge";
 import { Section, SectionContent, } from "../../../../../common/Section/section.styles";
@@ -8,6 +8,6 @@ export const SupportRequestSubmitted = ({ description = "Your request has been s
     return (React.createElement(Section, null,
         React.createElement(SectionContent, null,
             React.createElement(IconBadge, { color: ICON_BADGE_COLOR.SUCCESS, Icon: EmailReadIcon }),
-            React.createElement(Typography, { variant: TEXT_HEADING_SMALL }, title),
-            React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_400 }, description))));
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL }, title),
+            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, description))));
 };

package/lib/components/Support/components/ViewSupport/viewSupport.styles.js

@@ -1,15 +1,15 @@
 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.
@@ -21,10 +21,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/lib/components/Table/common/gridTable.styles.js

@@ -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 const GridTable = styled(MTable, {
     shouldForwardProp: (prop) => prop !== "gridTemplateColumns",
 }) `
@@ -20,7 +19,7 @@ export const GridTable = styled(MTable, {
   }
 
   tr {
-    background-color: ${white};
+    background-color: ${PALETTE.COMMON_WHITE};
   }
 
   td {

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "loading" | "loadingIndicator" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.styles.js

@@ -1,8 +1,8 @@
 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/lib/components/Table/components/PaginationSummary/paginationSummary.js

@@ -1,14 +1,15 @@
 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 const PaginationSummary = ({ firstResult, lastResult, totalResult, }) => {
     return (React.createElement(Fade, { in: totalResult > 0, unmountOnExit: true },
         React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_RESULTS },
-            React.createElement(Typography, { variant: "text-body-400" }, "Results "),
-            React.createElement(Typography, { variant: "text-body-small-500" },
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "Results"),
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 },
                 firstResult,
                 " - ",
                 lastResult),
-            React.createElement(Typography, { variant: "text-body-400" }, " of "),
-            React.createElement(Typography, { variant: "text-body-small-500" }, totalResult))));
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "of"),
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 }, totalResult))));
 };

package/lib/components/Table/components/TableCell/components/BasicCell/basicCell.js

@@ -1,12 +1,13 @@
 import { Typography } from "@mui/material";
 import React, { Fragment } from "react";
 import { LABEL } from "../../../../../../apis/azul/common/entities";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 export const BasicCell = ({ TypographyProps, value = LABEL.UNSPECIFIED, }) => {
     if (isValueNumberOrString(value)) {
-        return (React.createElement(Typography, { variant: "inherit", ...TypographyProps }, value));
+        return (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps }, value));
     }
     if (isValueArray(value)) {
-        return (React.createElement(Fragment, null, value.map((v) => (React.createElement(Typography, { key: v, variant: "inherit", ...TypographyProps }, v)))));
+        return (React.createElement(Fragment, null, value.map((v) => (React.createElement(Typography, { key: v, variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps }, v)))));
     }
     return null;
 };

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & {
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.js

@@ -1,7 +1,7 @@
 import { Collapse, IconButton, Typography } from "@mui/material";
 import { flexRender } 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 { CollapsedContents, Content, PinnedCell, TableCell, } from "./collapsableCell.styles";
@@ -20,7 +20,7 @@ export const CollapsableCell = ({ isDisabled = false, row, }) => {
                     return null; // Display of placeholder cells is currently not supported.
                 const header = cell.column.columnDef.meta?.header;
                 return (i !== pinnedIndex && (React.createElement(Content, { key: cell.id },
-                    header && (React.createElement(Typography, { component: "div", color: "ink.light", variant: TEXT_BODY_400_2_LINES }, header)),
+                    header && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, header)),
                     flexRender(cell.column.columnDef.cell, cell.getContext()))));
             })))));
 };

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.js

@@ -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";
 export const TableCell = styled(MTableCell, {
     shouldForwardProp: (prop) => prop !== "isExpanded",
 }) `
@@ -13,10 +13,10 @@ export const TableCell = styled(MTableCell, {
   }
 
   // Expanded.
-  ${({ isExpanded, ...props }) => isExpanded &&
+  ${({ isExpanded }) => isExpanded &&
     css `
       && {
-        background-color: ${smokeLightest(props)};
+        background-color: ${PALETTE.SMOKE_LIGHTEST};
       }
     `};
 }
@@ -34,8 +34,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/lib/components/Table/components/TableCell/components/LinkCell/stories/args.js

@@ -22,6 +22,6 @@ export const WITH_CUSTOM_STYLE_ARGS = {
         color: "success",
         href: "/",
         underline: "none",
-        variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400,
+        variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400,
     })),
 };

package/lib/components/Table/components/TableCell/components/NTagCell/nTagCell.js

@@ -1,6 +1,6 @@
 import { Chip as MChip, 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 { NTag } from "./components/NTag/nTag";
 // Template constants
 const MAX_DISPLAYABLE_VALUES = 1;
@@ -22,5 +22,5 @@ const Tag = forwardRef(function Tag(props, ref) {
 export const NTagCell = ({ label, TypographyProps, values, }) => {
     const metadataCount = values.length;
     const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
-    return (React.createElement(React.Fragment, null, showNTag ? (React.createElement(NTag, { Tag: React.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: React.createElement(Typography, { display: "block", variant: TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (React.createElement(Typography, { key: `${value}${v}`, variant: "inherit", ...TypographyProps }, value))))));
+    return (React.createElement(React.Fragment, null, showNTag ? (React.createElement(NTag, { Tag: React.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: React.createElement(Typography, { display: "block", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (React.createElement(Typography, { key: `${value}${v}`, variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps }, value))))));
 };

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.js

@@ -49,5 +49,5 @@ export const ColumnFilter = ({ Button = StyledButton, className, column, ...prop
             React.createElement(ListItemButton, { disabled: !column.getIsFiltered(), onClick: () => column.setFilterValue(undefined) },
                 React.createElement(Typography, { color: column.getIsFiltered()
                         ? TYPOGRAPHY_PROPS.COLOR.PRIMARY
-                        : TYPOGRAPHY_PROPS.COLOR.INHERIT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500 }, "Clear All")))));
+                        : TYPOGRAPHY_PROPS.COLOR.INHERIT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500 }, "Clear All")))));
 };

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "loading" | "loadingIndicator" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & {
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Table/components/TablePagination/tablePagination.js

@@ -10,7 +10,7 @@ export const TablePagination = ({ canNextPage = true, canPreviousPage = true, cu
     return (React.createElement(StyledGrid, { className: tablePaginationClasses.root, container: true, "data-testid": TEST_IDS.TABLE_PAGINATION },
         React.createElement(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: !canPreviousPage, onClick: onPreviousPage },
             React.createElement(WestRounded, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL })),
-        React.createElement(Typography, { "data-testid": TEST_IDS.TABLE_PAGINATION_PAGE, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500 },
+        React.createElement(Typography, { "data-testid": TEST_IDS.TABLE_PAGINATION_PAGE, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500 },
             "Page ",
             currentPage,
             " of ",

package/lib/components/Table/components/TablePagination/tablePagination.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -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 const StyledTableRow = styled(MTableRow, {
     shouldForwardProp: (prop) => prop !== "canExpand" &&
         prop !== "isExpanded" &&
@@ -17,8 +17,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/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.js

@@ -1,13 +1,13 @@
 import { Divider, Typography as MTypography, } from "@mui/material";
 import React 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";
 export const RowDrawer = ({ children, className, tableInstance, title, ...props /* Spread props to allow for Mui Drawer specific prop overrides. */ }) => {
     const { getIsRowPreview, resetRowPreview, toggleRowPreview } = tableInstance || {};
     return (React.createElement(Drawer, { ...DEFAULT_DRAWER_PROPS, className: className, onTransitionExited: resetRowPreview, open: getIsRowPreview?.(), ...props },
-        React.createElement(DrawerTitle, { onClose: () => toggleRowPreview?.(), title: typeof title === "string" ? (React.createElement(MTypography, { component: "div", noWrap: true, variant: TEXT_HEADING_SMALL }, title)) : (title) }),
+        React.createElement(DrawerTitle, { onClose: () => toggleRowPreview?.(), title: typeof title === "string" ? (React.createElement(MTypography, { component: "div", noWrap: true, variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL }, title)) : (title) }),
         React.createElement(Divider, null),
         React.createElement(DrawerContent, null, children)));
 };

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.styles.js

@@ -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";
 export const Drawer = styled(DXDrawer) `
@@ -8,14 +8,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);
       }
@@ -23,7 +23,7 @@ export const Drawer = styled(DXDrawer) `
   }
 `;
 export const DrawerTitle = styled(DXDrawerTitle) `
-  .MuiTypography-text-heading-small {
+  .MuiTypography-heading-small {
     font-size: 20px;
   }
 `;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.js

@@ -1,6 +1,6 @@
 import { Grid, Typography } from "@mui/material";
 import React from "react";
-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";
@@ -14,7 +14,7 @@ export const RowDetail = ({ className, columns, expanded = true, minColumns = MI
         return null;
     return (React.createElement(Section, { className: className },
         visibleColumns.map(({ componentConfig, header }, i) => (React.createElement(Grid, { key: i },
-            React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_400, ...componentConfig.props?.TypographyProps }, header),
+            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, ...componentConfig.props?.TypographyProps }, header),
             React.createElement(ComponentCreator, { components: [componentConfig], response: rowData })))),
         React.createElement(ButtonTextPrimary, { onClick: onToggleShowMore }, buttonText)));
 };

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.styles.js

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp, mediaTabletUp, } from "../../../../../../../../../../styles/common/mixins/breakpoints";
-import { textBody400 } from "../../../../../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../../../../../styles/common/constants/font";
+import { bpUpMd, bpUpSm, } from "../../../../../../../../../../styles/common/mixins/breakpoints";
 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);
@@ -24,7 +24,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;
@@ -38,7 +38,7 @@ export const Section = styled.div `
     }
   }
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     grid-template-columns: 194px minmax(0, 1fr);
   }
 `;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.js

@@ -1,9 +1,9 @@
 import { Typography } from "@mui/material";
 import React 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 const Section = ({ children, className, title, }) => {
     return (React.createElement(PreviewSection, { className: className },
-        React.createElement(Typography, { component: "div", variant: TEXT_HEADING_SMALL }, title),
+        React.createElement(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL }, title),
         children));
 };

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.styles.js

@@ -4,7 +4,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/lib/components/Table/components/TableToolbar/components/RowSelection/rowSelection.js

@@ -1,11 +1,11 @@
 import { Typography } from "@mui/material";
 import React from "react";
-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";
 export const RowSelection = ({ className, rows, rowSelectionView, }) => {
     return (React.createElement(RowSelectionActions, { className: className },
-        React.createElement(Typography, { variant: TEXT_BODY_400 },
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 },
             rows.length,
             " items selected:"),
         rowSelectionView ? (React.createElement(ComponentCreator, { components: rowSelectionView, response: rows })) : null));

package/lib/components/Table/table.js

@@ -6,7 +6,6 @@ import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpo
 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";
@@ -19,14 +18,14 @@ import { TableToolbar } from "./components/TableToolbar/tableToolbar";
 import { useVirtualization } from "./hooks/UseVirtualization/hook";
 import { GridTable } from "./table.styles";
 export const Table = ({ listView, loading, table, }) => {
-    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/lib/components/Table/table.styles.js

@@ -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";
 /**
  * Styles for a collapsible table with support for virtualization.
@@ -20,7 +20,7 @@ export const GridTable = styled(Table, {
     shouldForwardProp: (prop) => prop !== "collapsable",
 }) `
   // Collapsable.
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     ${({ collapsable }) => collapsable &&
     css `
         && {