@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & 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" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
+}, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.styles.js

@@ -1,10 +1,10 @@
 import styled from "@emotion/styled";
 import { ButtonBase } from "@mui/material";
-import { textBodyLarge500 } from "../../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../../styles/common/constants/font";
 export const StyledButtonBase = styled(ButtonBase) `
-  ${textBodyLarge500}
   align-items: center;
   display: flex;
+  font: ${FONT.BODY_LARGE_500};
   gap: 8px;
   justify-content: flex-start;
   padding: 12px 16px;

package/lib/components/Filter/components/surfaces/drawer/components/IconButton/iconButton.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & 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" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "edge"> & {
+}, "style" | "size" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Filter/components/views/select/components/ListItemButton/listItemButton.d.ts

@@ -2,6 +2,6 @@ import React from "react";
 import { BaseComponentProps, TestIdProps } from "../../../../../../types";
 export declare const ListItemButton: React.ForwardRefExoticComponent<Omit<BaseComponentProps & import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "autoFocus" | "disabled" | "action" | "selected" | "alignItems" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider"> & {
+}, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "alignItems" | "selected" | "disableGutters" | "dense" | "divider"> & {
     component?: React.ElementType;
 } & TestIdProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Filter/components/views/select/components/ListItemButton/listItemButton.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
-}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "autoFocus" | "disabled" | "action" | "selected" | "alignItems" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider"> & {
+}, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "alignItems" | "selected" | "disableGutters" | "dense" | "divider"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Filter/components/views/select/components/ListItemText/components/Count/count.js

@@ -2,5 +2,5 @@ import { Typography } from "@mui/material";
 import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../../../../styles/common/mui/typography";
 export const Count = ({ className, testId, ...props /* MuiTypographyProps */ }) => {
-    return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, "data-testid": testId, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400, ...props }));
+    return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, "data-testid": testId, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400, ...props }));
 };

package/lib/components/Filter/components/views/select/components/ListItemText/components/Term/term.js

@@ -2,5 +2,5 @@ import { Typography } from "@mui/material";
 import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../../../../styles/common/mui/typography";
 export const Term = ({ className, testId, ...props /* MuiTypographyProps */ }) => {
-    return (React.createElement(Typography, { className: className, "data-testid": testId, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400, ...props }));
+    return (React.createElement(Typography, { className: className, "data-testid": testId, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, ...props }));
 };

package/lib/components/Index/components/EntityView/components/controls/ExportButton/exportButton.styles.js

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

package/lib/components/Index/components/EntityView/components/controls/FilterButton/filterButton.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/Index/components/EntityView/components/controls/FilterButton/filterButton.styles.js

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

package/lib/components/Index/components/EntityView/components/layout/Summary/summary.js

@@ -11,6 +11,6 @@ export const Summary = ({ className, }) => {
         return null;
     return (React.createElement(StyledGrid, { ...GRID_PROPS, className: className, "data-testid": TEST_IDS.ENTITY_SUMMARY }, summaries.map(([count, label], i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(StyledDot, null),
-        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_500 }, count),
-        React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, label))))));
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 }, count),
+        React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, label))))));
 };

package/lib/components/Index/components/EntityView/components/layout/Summary/summary.styles.d.ts

@@ -2,7 +2,7 @@ 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;
 }, {}, {}>;
 export declare const StyledDot: import("@emotion/styled").StyledComponent<import("../../../../../../types").BaseComponentProps & {

package/lib/components/Index/components/EntityView/components/layout/Summary/summary.styles.js

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
+import { bpDown1024 } from "../../../../../../../styles/common/mixins/breakpoints";
 import { Dot } from "../../../../../../common/Dot/dot";
 export const StyledGrid = styled(Grid) `
   display: grid;
@@ -8,7 +9,7 @@ export const StyledGrid = styled(Grid) `
   max-width: fit-content;
   padding: 12px 16px;
 
-  ${({ theme }) => theme.breakpoints.down(1024)} {
+  ${bpDown1024} {
     display: none;
   }
 `;

package/lib/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.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/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
-import { mediaTabletDown } from "../../../../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../../../../styles/common/mixins/breakpoints";
 export const StyledGrid = styled(Grid) `
   display: grid;
   gap: 16px;
@@ -10,7 +10,7 @@ export const StyledGrid = styled(Grid) `
     display: none;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 16px 0;
   }
 `;

package/lib/components/Index/components/EntityView/components/views/ChartView/chartView.js

@@ -16,7 +16,7 @@ export const ChartView = ({ categoryFilters, entityName, loading, testId, }) =>
             React.createElement(ViewToggle, null)),
         React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
         React.createElement(StyledGrid, { "data-testid": testId, ref: chartViewRef }, selectCategoryViews.map(({ key, label, values }) => (React.createElement(StyledGridPaperSection, { key: key },
-            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL },
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL },
                 entityName,
                 " by ",
                 label),

package/lib/components/Index/components/EntityView/components/views/ChartView/chartView.styles.d.ts

@@ -2,7 +2,7 @@ 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;
 }, {}, {}>;
 export declare const StyledGridPaperSection: import("@emotion/styled").StyledComponent<{

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.styles.d.ts

@@ -3,6 +3,6 @@ export declare const StyledBarX: import("@emotion/styled").StyledComponent<impor
 }, {}, {}>;
 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/Index/components/EntityView/components/views/ChartView/components/Chart/chart.styles.js

@@ -1,10 +1,10 @@
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
-import { mediaTabletDown } from "../../../../../../../../../styles/common/mixins/breakpoints";
-import { textBodySmall400 } from "../../../../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../../../../styles/common/constants/font";
+import { bpDownSm } from "../../../../../../../../../styles/common/mixins/breakpoints";
 import { BarX } from "../../../../../../../../Plot/components/BarX/barX";
 export const StyledBarX = styled(BarX) `
-  ${textBodySmall400};
+  font: ${FONT.BODY_SMALL_400};
 
   svg {
     g.x-axis {
@@ -17,7 +17,7 @@ export const StyledBarX = styled(BarX) `
           text-anchor: end;
         }
 
-        ${mediaTabletDown} {
+        ${bpDownSm} {
           display: none;
           &:nth-of-type(1),
           &:nth-last-of-type(1) {

package/lib/components/Index/index.styles.d.ts

@@ -3,19 +3,19 @@ export declare const StyledGridEntityView: import("@emotion/styled").StyledCompo
     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;
 } & LayoutSpacing, {}, {}>;
 export declare const StyledGridEntityLayout: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
     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;
 }, {}, {}>;
 export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../types").BaseComponentProps & import("@mui/material").PaperOwnProps & 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;
-}, "style" | "className" | "classes" | "children" | "sx" | "elevation" | "square" | "variant"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "square" | "elevation" | "variant"> & {
     component?: React.ElementType;
 } & {
     theme?: import("@emotion/react").Theme;
@@ -24,6 +24,6 @@ export declare const StyledGridEntityList: import("@emotion/styled").StyledCompo
     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/Index/index.styles.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
 import { PALETTE } from "../../styles/common/constants/palette";
-import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
 export const StyledGridEntityView = styled(Grid, {
     shouldForwardProp: (prop) => prop !== "bottom" && prop !== "top",
@@ -58,7 +58,7 @@ export const StyledGridEntityList = styled(Grid) `
   margin: 16px;
   overflow: hidden;
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 16px 0;
   }
 `;

package/lib/components/Layout/components/BackPage/backPageView.styles.js

@@ -1,6 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { TABLET } from "../../../../theme/common/breakpoints";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { bpDownSm, bpUpSm } from "../../../../styles/common/mixins/breakpoints";
 import { Sections } from "../../../common/Sections/sections";
 export const BackPageView = styled.div `
   display: grid;
@@ -10,7 +11,7 @@ export const BackPageView = styled.div `
   margin: 0 16px;
   padding: 24px 0;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     grid-template-columns: repeat(12, 1fr);
     margin: 0 auto;
     max-width: min(calc(100% - 32px), 1232px);
@@ -26,7 +27,7 @@ export const BackPageHero = styled.div `
 export const BackPageTabs = styled.div `
   grid-column: 1 / -1;
 
-  ${({ theme }) => theme.breakpoints.down(TABLET)} {
+  ${bpDownSm} {
     margin-left: -16px;
     margin-right: -16px;
   }
@@ -41,7 +42,7 @@ export const BackPageContent = styled.div `
   margin-left: -16px;
   margin-right: -16px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     display: grid;
     gap: 16px;
     grid-template-columns: inherit;
@@ -56,11 +57,11 @@ export const BackPageContent = styled.div `
 // - mobile - a gridded, flat paper environment, each section stacked with a 1px gap, and
 // - tablet - a main and side column arrangement, and within each column, a gridded, rounded paper environment, each section stacked with a 1px gap.
 export const DetailPageOverviewContent = styled(BackPageContent) `
-  background-color: ${({ theme }) => theme.palette.smoke.main};
+  background-color: ${PALETTE.SMOKE_MAIN};
   gap: 1px;
   padding: 1px 0;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     background-color: transparent;
     padding: 0;
   }
@@ -83,13 +84,13 @@ export const BackPageContentSingleColumn = styled(BackPageContentColumn) `
 `;
 // Main column.
 export const BackPageContentMainColumn = styled(BackPageContentColumn) `
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     ${mainColumn};
   }
 `;
 // Side column.
 export const BackPageContentSideColumn = styled(BackPageContentColumn) `
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     ${sideColumn};
   }
 `;
@@ -103,7 +104,7 @@ export const DetailPageOverviewContentMainColumn = styled(Sections) `
     display: contents; // required to override nested GridPaper.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     align-self: flex-start;
     display: grid;
     ${mainColumn};
@@ -124,7 +125,7 @@ export const DetailPageOverviewContentSideColumn = styled(Sections) `
     display: contents; // required to override nested GridPaper.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     align-self: flex-start;
     display: grid;
     ${sideColumn};

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.js

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

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { bpUpSm } from "../../../../../../../../styles/common/mixins/breakpoints";
 export const BackPageHeroActions = styled.div `
   align-items: center;
   align-self: center;
@@ -7,7 +7,7 @@ export const BackPageHeroActions = styled.div `
   gap: 16px;
   justify-self: flex-start;
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     justify-self: flex-end;
   }
 `;

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
 export const SubTitle = ({ subTitle, ...props /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */ }) => {
-    return (React.createElement(React.Fragment, null, typeof subTitle === "string" ? (React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400, ...props }, subTitle)) : (subTitle)));
+    return (React.createElement(React.Fragment, null, typeof subTitle === "string" ? (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400, ...props }, subTitle)) : (subTitle)));
 };

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.js

@@ -1,19 +1,19 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { media1366Up, mediaDesktopSmallUp, mediaTabletDown, } from "../../../../styles/common/mixins/breakpoints";
-import { smokeLight, smokeLightest, smokeMain, white, } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { bpDownSm, bpUp1366, bpUpMd, } from "../../../../styles/common/mixins/breakpoints";
 const CONTENT_MAX_WIDTH = 756;
 const NAV_GRID_WIDTH = 280;
 const NAV_MAX_WIDTH = 232;
 const PADDING = 24;
 const PADDING_Y = PADDING;
 const COLOR = {
-    DEFAULT: white,
-    SMOKE_LIGHT: smokeLight,
-    SMOKE_LIGHTEST: smokeLightest,
+    DEFAULT: PALETTE.COMMON_WHITE,
+    SMOKE_LIGHT: PALETTE.SMOKE_LIGHT,
+    SMOKE_LIGHTEST: PALETTE.SMOKE_LIGHTEST,
 };
 export const ContentLayout = styled.div `
-  background-color: ${({ panelColor, theme }) => getPanelBackgroundColor(theme, panelColor)};
+  background-color: ${({ panelColor }) => getPanelBackgroundColor(panelColor)};
   display: grid;
   flex: 1;
   grid-template-areas: "content";
@@ -21,7 +21,7 @@ export const ContentLayout = styled.div `
   height: 100%;
   margin: 0 auto;
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     ${({ hasNavigation }) => hasNavigation
     ? css `
             grid-template-areas: "navigation content";
@@ -35,7 +35,7 @@ export const ContentLayout = styled.div `
           `};
   }
 
-  ${media1366Up} {
+  ${bpUp1366} {
     grid-template-areas: "navigation content outline";
     grid-template-columns:
       ${NAV_GRID_WIDTH}px
@@ -43,12 +43,12 @@ export const ContentLayout = styled.div `
       ${NAV_GRID_WIDTH}px;
   }
 `;
-const content = ({ headerHeight, panelColor, theme, }) => css `
-  background-color: ${getPanelBackgroundColor(theme, panelColor)};
+const content = ({ headerHeight, panelColor }) => css `
+  background-color: ${getPanelBackgroundColor(panelColor)};
   padding-top: ${headerHeight}px;
 `;
-const navigation = ({ panelColor, theme }) => css `
-  background-color: ${getPanelBackgroundColor(theme, panelColor)};
+const navigation = ({ panelColor }) => css `
+  background-color: ${getPanelBackgroundColor(panelColor)};
 `;
 const positioner = ({ headerHeight }) => css `
   max-height: 100vh;
@@ -59,11 +59,11 @@ const positioner = ({ headerHeight }) => css `
 `;
 export const NavigationGrid = styled.div `
   ${navigation};
-  box-shadow: inset -1px 0 ${smokeMain};
+  box-shadow: inset -1px 0 ${PALETTE.SMOKE_MAIN};
   display: none;
   grid-area: navigation;
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     display: block;
   }
 `;
@@ -77,7 +77,7 @@ export const OutlineGrid = styled("div") `
   display: none;
   grid-area: outline;
 
-  ${media1366Up} {
+  ${bpUp1366} {
     display: block;
   }
 `;
@@ -97,7 +97,7 @@ export const Content = styled.div `
   max-width: ${CONTENT_MAX_WIDTH}px;
   padding: ${PADDING_Y}px 40px;
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     padding: ${PADDING_Y}px 16px;
   }
 `;
@@ -109,10 +109,9 @@ export const Outline = styled.div `
 `;
 /**
  * Returns the background color for the panel.
- * @param theme - Theme.
  * @param panelColor - Panel color.
  * @returns background color for the panel.
  */
-function getPanelBackgroundColor(theme, panelColor) {
-    return panelColor ? COLOR[panelColor]({ theme }) : undefined;
+function getPanelBackgroundColor(panelColor) {
+    return panelColor ? COLOR[panelColor] : undefined;
 }