@databiosphere/findable-ui 41.1.0 → 42.0.0

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.d.ts

@@ -4,6 +4,6 @@ export declare const Slogan: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Divider: import("@emotion/styled").StyledComponent<import("@mui/material").DividerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
     ref?: ((instance: HTMLHRElement | 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<HTMLHRElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "orientation" | "textAlign" | "variant" | "absolute" | "light" | "flexItem"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "textAlign" | "variant" | "absolute" | "orientation" | "flexItem" | "light"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.js

@@ -1,18 +1,18 @@
 import styled from "@emotion/styled";
 import { Divider as MDivider } from "@mui/material";
-import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { bpUpMd } from "../../../../../../../../styles/common/mixins/breakpoints";
 export const Slogan = styled.div `
   padding: 8px 24px;
 
-  .MuiTypography-text-body-400 {
+  .MuiTypography-body-400 {
     display: block;
   }
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     flex: none;
     padding: 0;
 
-    .MuiTypography-text-body-400 {
+    .MuiTypography-body-400 {
       font-size: 12px;
       line-height: 18px;
       max-width: 180px;

package/lib/components/Layout/components/Header/header.styles.js

@@ -1,13 +1,13 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
-import { smokeMain } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { HEADER_HEIGHT } from "./common/constants";
 // See https://github.com/emotion-js/emotion/issues/1105.
 // See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
 const ignoreSsrWarning = "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
 export const AppBar = styled(MAppBar) `
-  border-bottom: 1px solid ${smokeMain};
+  border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
 
   &.MuiPaper-elevation0 {
     border-bottom: 1px solid transparent;

package/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero.styles.js

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 export const NavBarHero = styled.div `
   display: grid;
   gap: 8px 0;
@@ -15,7 +16,7 @@ export const HeroLogo = styled.span `
   }
 `;
 export const HeroText = styled.span `
-  color: ${({ theme }) => theme.palette.ink.light};
+  color: ${PALETTE.INK_LIGHT};
   display: block;
   font-size: 12px;
   line-height: 18px;

package/lib/components/Layout/components/Nav/nav.styles.d.ts

@@ -4,6 +4,6 @@ export declare const NavBar: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const List: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
     ref?: ((instance: HTMLUListElement | 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<HTMLUListElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "dense" | "subheader" | "disablePadding"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Nav/nav.styles.js

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { List as MList } from "@mui/material";
-import { textBody400, textBody500, textUppercase500, } from "../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const NavBar = styled.div `
   .MuiDivider-root {
     margin: 20px 0;
@@ -24,24 +25,25 @@ export const List = styled(MList) `
       }
 
       .MuiListItemText-root {
-        ${textBody400};
+        font: ${FONT.BODY_400};
       }
 
       &.Mui-disabled {
-        color: ${({ theme }) => theme.palette.ink.light};
+        color: ${PALETTE.INK_LIGHT};
         margin-top: 20px;
         opacity: 1;
 
         .MuiListItemText-root {
-          ${textUppercase500};
+          font: ${FONT.UPPERCASE_500};
+          text-transform: uppercase;
         }
       }
 
       &.Mui-selected {
-        color: ${({ theme }) => theme.palette.primary.main};
+        color: ${PALETTE.PRIMARY_MAIN};
 
         .MuiListItemText-root {
-          ${textBody500};
+          font: ${FONT.BODY_500};
         }
       }
     }

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.d.ts

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

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.js

@@ -1,16 +1,17 @@
 import styled from "@emotion/styled";
 import { Tab } from "@mui/material";
-import { inkLight } from "../../../../../../styles/common/mixins/colors";
-import { textUppercase500 } from "../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import { tab } from "../../outline.styles";
 export const StyledTab = styled(Tab) `
   ${tab};
 
   && {
-    ${textUppercase500};
     align-items: center;
     align-self: flex-start;
-    color: ${inkLight};
+    color: ${PALETTE.INK_LIGHT};
+    font: ${FONT.UPPERCASE_500};
     pointer-events: none;
+    text-transform: uppercase;
   }
 `;

package/lib/components/Layout/components/Outline/outline.styles.d.ts

@@ -5,12 +5,12 @@ interface Props extends TabProps {
 export declare const tab: import("@emotion/react").SerializedStyles;
 export declare const StyledTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & 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" | "value" | "className" | "classes" | "children" | "sx" | "orientation" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "variant" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+}, "style" | "value" | "className" | "classes" | "action" | "children" | "sx" | "aria-label" | "aria-labelledby" | "onChange" | "variant" | "slots" | "slotProps" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & 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;
-}, "label" | "style" | "value" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "value" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "iconPosition" | "wrapped"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/Layout/components/Outline/outline.styles.js

@@ -1,8 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Tab as MTab, Tabs as MTabs } from "@mui/material";
-import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
-import { textBody500, textBodySmall400, } from "../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const tab = css `
   align-items: flex-start;
   margin: 0;
@@ -16,7 +16,7 @@ export const tab = css `
 `;
 export const StyledTabs = styled(MTabs) `
   align-self: flex-start;
-  box-shadow: inset 1px 0 ${smokeMain};
+  box-shadow: inset 1px 0 ${PALETTE.SMOKE_MAIN};
   margin: 0;
   max-width: 242px;
   padding: 0;
@@ -39,16 +39,16 @@ export const StyledTab = styled(MTab, {
     shouldForwardProp: (prop) => prop !== "depth",
 }) `
   ${tab};
-  color: ${inkMain};
+  color: ${PALETTE.INK_MAIN};
 
-  ${(props) => props.depth === 2 &&
+  ${({ depth }) => depth === 2 &&
     css `
-      ${textBody500(props)};
+      font: ${FONT.BODY_500};
     `};
 
-  ${(props) => props.depth === 3 &&
+  ${({ depth }) => depth === 3 &&
     css `
-      ${textBodySmall400(props)};
+      font: ${FONT.BODY_SMALL_400};
       margin-left: 16px;
       padding: 8px 24px;
     `};

package/lib/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.styles.js

@@ -1,25 +1,25 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp, mediaTabletUp, } from "../../../../../../styles/common/mixins/breakpoints";
-import { primaryMain, white, } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { bpUpMd, bpUpSm, } from "../../../../../../styles/common/mixins/breakpoints";
 import { ButtonSecondary } from "../../../../../common/Button/components/ButtonSecondary/buttonSecondary";
 export const SidebarButton = styled(ButtonSecondary) `
   grid-column: 1 / -1;
   padding: 10px;
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     grid-column: 2;
     justify-self: flex-end;
   }
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     display: none;
   }
 `;
 export const Badge = styled.div `
   align-items: center;
-  background-color: ${primaryMain};
+  background-color: ${PALETTE.PRIMARY_MAIN};
   border-radius: 10px;
-  color: ${white};
+  color: ${PALETTE.COMMON_WHITE};
   display: flex;
   flex: none;
   font-size: 12px;

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import { Popover as MPopover } from "@mui/material";
-import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
-import { smokeLight, white, } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
 import { IconButton as DXIconButton } from "../../../../../common/IconButton/iconButton";
 export const TemporarySidebar = styled(MPopover) `
   &.MuiPopover-root {
-    ${mediaDesktopSmallDown} {
+    ${bpDownMd} {
       & .MuiPaper-root {
-        background-color: ${smokeLight};
+        background-color: ${PALETTE.SMOKE_LIGHT};
         box-shadow: 0 1px 4px 0 transparent; // required; possible bug - box shadow "none" affects rendering of main content.
         height: 100%;
         max-height: 100%;
@@ -18,7 +18,7 @@ export const TemporarySidebar = styled(MPopover) `
   }
 `;
 export const IconButton = styled(DXIconButton) `
-  color: ${white};
+  color: ${PALETTE.COMMON_WHITE};
   left: calc(100% + 4px);
   position: absolute;
   top: 4px;

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_LARGE_500 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 export const SidebarLabel = ({ label }) => {
-    return (React.createElement(Typography, { component: "div", variant: TEXT_BODY_LARGE_500 }, label));
+    return (React.createElement(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500 }, label));
 };

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.js

@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
 export const SidebarPositioner = styled("div") `
   box-sizing: border-box;
   height: 100%;
   overflow: visible;
   padding: 16px 0;
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     max-height: 100vh;
     overflow: auto;
     padding: ${({ headerHeight }) => headerHeight}px 0 0;

package/lib/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
 export const SidebarTools = styled.div `
   display: grid;
   gap: 8px 0;
@@ -11,7 +11,7 @@ export const SidebarTools = styled.div `
     grid-column: 1 / -1; // SearchAllFilters component to utilize full width of the grid.
   }
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     padding: 8px 16px;
   }
 `;

package/lib/components/Layout/components/Sidebar/sidebar.js

@@ -1,25 +1,24 @@
 import React, { useEffect } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { SidebarDrawer } from "./components/SidebarDrawer/sidebarDrawer";
 import { SidebarPositioner } from "./components/SidebarPositioner/sidebarPositioner";
 import { Sidebar as PermanentSidebar } from "./sidebar.styles";
 export const Sidebar = ({ children }) => {
     const { onClose, open } = useDrawer();
-    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
-    const drawerSidebar = desktopSmDown;
+    const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
+    const drawerSidebar = bpDownMd;
     const Bar = drawerSidebar ? SidebarDrawer : PermanentSidebar;
     const barProps = drawerSidebar
         ? { onClose, open }
         : { "data-testid": TEST_IDS.SIDEBAR };
     // Closes an open, controlled drawer sidebar with a change of breakpoint.
     useEffect(() => {
-        if (open && !desktopSmDown) {
+        if (open && !bpDownMd) {
             onClose();
         }
-    }, [desktopSmDown, onClose, open]);
+    }, [bpDownMd, onClose, open]);
     return (React.createElement(Bar, { ...barProps },
         React.createElement(SidebarPositioner, null, children)));
 };

package/lib/components/Layout/components/Sidebar/sidebar.styles.js

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
-import { smokeMain } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const Sidebar = styled.div `
   align-self: stretch;
-  border-right: 1px solid ${smokeMain};
+  border-right: 1px solid ${PALETTE.SMOKE_MAIN};
   box-sizing: content-box;
   width: 264px;
 `;

package/lib/components/Links/components/Link/link.js

@@ -2,6 +2,7 @@ import { Link as MLink, Typography as MTypography, } from "@mui/material";
 import NLink from "next/link";
 import React from "react";
 import { isValidUrl } from "../../../../common/utils";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
 import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../common/entities";
 import { isClientSideNavigation, isURLObjectWithHrefAndQuery, isURLString, } from "../../common/utils";
@@ -26,5 +27,5 @@ export const Link = ({ className, copyable = false, label, noWrap = false, onCli
         }
     }
     /* Invalid URL */
-    return (React.createElement(MTypography, { component: "span", variant: "inherit", ...TypographyProps, ...props }, label));
+    return (React.createElement(MTypography, { component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps, ...props }, label));
 };

package/lib/components/Loading/loading.js

@@ -1,5 +1,6 @@
 import { Fade, Typography } from "@mui/material";
 import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { LoadingIcon } from "../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { LoadingPaper, LoadingPositioner } from "./loading.styles";
@@ -15,7 +16,7 @@ export const Loading = ({ appear = true, autoPosition = true, iconSize = "large"
         React.createElement(LoadingPositioner, { panelStyle: panelStyle },
             React.createElement(LoadingPaper, { panelStyle: panelStyle },
                 React.createElement(LoadingIcon, { color: "primary", fontSize: iconSize }),
-                text && React.createElement(Typography, { variant: "text-body-400" }, text)))));
+                text && (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, text))))));
 };
 /**
  * Callback fired before the "entering" status is applied.

package/lib/components/Loading/loading.styles.js

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
-import { TABLET } from "../../theme/common/breakpoints";
+import { bpDownSm } from "../../styles/common/mixins/breakpoints";
 import { Paper, PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { LOADING_PANEL_STYLE } from "./loading";
 export const LoadingPositioner = styled.div `
@@ -40,7 +40,7 @@ export const LoadingPaper = styled(Paper) `
     css `
       border-radius: 8px;
 
-      ${theme.breakpoints.down(TABLET)} {
+      ${bpDownSm({ theme })} {
         border-left: none;
         border-radius: 0;
         border-right: none;

package/lib/components/Login/components/Button/button.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/Login/components/Section/components/Consent/consent.js

@@ -1,6 +1,6 @@
 import { Checkbox, 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 { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -10,5 +10,5 @@ export const Consent = ({ children, className, handleConsent, isDisabled, isErro
         return null;
     return (React.createElement(StyledGrid, { className: className, ...props },
         React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleConsent }),
-        React.createElement(Typography, { variant: TEXT_BODY_400 }, children)));
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, children)));
 };

package/lib/components/Login/components/Section/components/Consent/consent.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/Login/components/Section/components/Consent/consent.styles.js

@@ -6,7 +6,7 @@ export const StyledGrid = styled(Grid) `
   display: flex;
   gap: 12px;
 
-  .MuiTypography-text-body-400 {
+  .MuiTypography-body-400 {
     .MuiLink-root {
       color: inherit;
     }

package/lib/components/Login/components/Section/components/Warning/warning.js

@@ -4,5 +4,5 @@ import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography
 export const Warning = ({ children, className, ...props /* Mui TypographyOwnProps */ }) => {
     if (!children)
         return null;
-    return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, mt: 6, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400, ...props }, children));
+    return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, mt: 6, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400, ...props }, children));
 };

package/lib/components/Login/login.js

@@ -1,13 +1,14 @@
 import { Checkbox, Typography } from "@mui/material";
 import React, { useCallback, useState } from "react";
 import { useAuth } from "../../providers/authentication/auth/hook";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { CheckedIcon } from "../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedErrorIcon } from "../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { RoundedPaper } from "../common/Paper/paper.styles";
 import { SectionContent } from "../common/Section/section.styles";
 import { Button } from "./components/Button/button";
-import { LoginAgreement, LoginSection, LoginSectionActions, LoginText, LoginWarning, LoginWrapper, TermsOfService, } from "./login.styles";
+import { LoginAgreement, LoginSection, LoginSectionActions, LoginWrapper, StyledTypography, } from "./login.styles";
 export const Login = ({ providers = [], termsOfService, text, title, warning, }) => {
     const { service: { requestLogin } = {} } = useAuth();
     const [isError, setIsError] = useState(false);
@@ -31,12 +32,12 @@ export const Login = ({ providers = [], termsOfService, text, title, warning, })
         React.createElement(RoundedPaper, null,
             React.createElement(LoginSection, null,
                 React.createElement(SectionContent, null,
-                    React.createElement(Typography, { color: "ink.main", component: "h3", variant: "text-heading" }, title),
-                    text && React.createElement(LoginText, null, text)),
+                    React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_MAIN, component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING }, title),
+                    text && (React.createElement(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, text))),
                 React.createElement(LoginSectionActions, null,
                     termsOfService && (React.createElement(LoginAgreement, null,
                         React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleChange }),
-                        React.createElement(TermsOfService, null, termsOfService))),
+                        React.createElement(StyledTypography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, termsOfService))),
                     providers?.map((provider) => (React.createElement(Button, { key: provider.id, endIcon: "icon" in provider && provider.icon, onClick: () => onLogin(provider.id) }, provider.name)))))),
-        warning && React.createElement(LoginWarning, null, warning)));
+        warning && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, warning))));
 };

package/lib/components/Login/login.styles.d.ts

@@ -1,3 +1,4 @@
+import { Typography } from "@mui/material";
 export declare const LoginWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -18,15 +19,4 @@ export declare const LoginSectionActions: import("@emotion/styled").StyledCompon
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const LoginText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TermsOfService: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LoginWarning: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTypography: typeof Typography;

package/lib/components/Login/login.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { textBody400, textBodySmall400, } from "../../styles/common/mixins/fonts";
-import { TABLET } from "../../theme/common/breakpoints";
+import { Typography } from "@mui/material";
+import { bpUpSm } from "../../styles/common/mixins/breakpoints";
 import { Section, SectionActions } from "../common/Section/section.styles";
 export const LoginWrapper = styled.div `
   box-sizing: content-box;
@@ -15,7 +15,7 @@ export const LoginSection = styled(Section) `
   gap: 24px 0;
   padding: 32px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 32px;
   }
 `;
@@ -29,18 +29,9 @@ export const LoginSectionActions = styled(SectionActions) `
   flex-direction: column;
   gap: 16px 0;
 `;
-export const LoginText = styled.div `
-  ${textBody400};
-`;
-export const TermsOfService = styled.div `
-  ${textBody400};
-
+export const StyledTypography = styled(Typography) `
   a {
     color: inherit;
     text-decoration: underline;
   }
 `;
-export const LoginWarning = styled.div `
-  ${textBodySmall400};
-  color: ${({ theme }) => theme.palette.ink.light};
-`;

package/lib/components/MarkdownRenderer/components/Table/table.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
+import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { textBody500 } from "../../../../styles/common/mixins/fonts";
 export const StyledTable = styled("table") `
   border-collapse: collapse;
   margin: 16px 0;
@@ -29,8 +29,8 @@ export const StyledTable = styled("table") `
   }
 
   th {
-    ${textBody500}
     border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    font: ${FONT.BODY_500};
   }
 
   td {

package/lib/components/MarkdownRenderer/markdownRenderer.js

@@ -54,6 +54,6 @@ export const MarkdownRenderer = ({ className, components: componentOptions = COM
         };
     }, [components, regex, value]);
     if (error)
-        return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, error));
+        return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, error));
     return React.createElement(StyledContainer, { className: className }, element);
 };

package/lib/components/NoResults/noResults.js

@@ -13,6 +13,6 @@ export const NoResults = ({ actions, description, Paper, title, }) => {
             React.createElement(StatusIcon, { priority: PRIORITY.LOW, StatusIcon: SearchOffIcon }),
             React.createElement(StyledSectionContent, null,
                 React.createElement(SectionTitle, { title: title }),
-                description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, description))),
+                description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, description))),
             actions && React.createElement(SectionActions, null, actions))));
 };