@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/components/common/IconButton/iconButton.styles.js

@@ -1,14 +1,14 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
-import { smokeLightest } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 export const Button = styled(MIconButton, {
     shouldForwardProp: (prop) => prop !== "open",
 }) `
-  ${({ open, ...props }) => open &&
+  ${({ open }) => open &&
     css `
       &.MuiIconButton-root {
-        background-color: ${smokeLightest(props)};
+        background-color: ${PALETTE.SMOKE_LIGHTEST};
       }
     `}
 `;

package/lib/components/common/Input/input.js

@@ -1,6 +1,6 @@
 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 { InputField, InputFormControl } from "./input.styles";
 /**
  * Callback fired when the search term is changed.
@@ -14,6 +14,6 @@ function onChangeInputField(changeEvent, setSearchTerm) {
 }
 export const Input = ({ className, label, placeholder, searchTerm, setSearchTerm, StartAdornment, ...props /* Spread props to allow for Mui OutlinedInputProps specific prop overrides e.g. "disabled". */ }) => {
     return (React.createElement(InputFormControl, { className: className },
-        label && React.createElement(Typography, { variant: TEXT_BODY_400 }, label),
+        label && (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, label)),
         React.createElement(InputField, { autoFocus: true, fullWidth: true, inputProps: { spellCheck: false }, isFilled: !!searchTerm, onChange: (event) => onChangeInputField(event, setSearchTerm), placeholder: placeholder, size: "small", startAdornment: StartAdornment ? React.createElement(StartAdornment, { fontSize: "small" }) : undefined, value: searchTerm, ...props })));
 };

package/lib/components/common/Input/input.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const InputFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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" | "size" | "className" | "classes" | "children" | "color" | "sx" | "disabled" | "required" | "error" | "margin" | "fullWidth" | "variant" | "hiddenLabel" | "focused"> & {
+}, "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "color" | "margin" | "error" | "variant" | "required" | "fullWidth" | "focused" | "hiddenLabel"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const InputField: import("@emotion/styled").StyledComponent<import("@mui/material").OutlinedInputProps & {

package/lib/components/common/Input/input.styles.js

@@ -1,6 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl, OutlinedInput } from "@mui/material";
+import { PALETTE } from "../../../styles/common/constants/palette";
 // Input form control
 export const InputFormControl = styled(FormControl) `
   display: flex;
@@ -19,11 +20,11 @@ export const InputField = styled(OutlinedInput, {
   }
 
   // Input filled.
-  ${({ isFilled, theme }) => isFilled &&
+  ${({ isFilled }) => isFilled &&
     css `
       .MuiOutlinedInput-input,
       .MuiSvgIcon-root {
-        color: ${theme.palette.ink.main};
+        color: ${PALETTE.INK_MAIN};
       }
     `};
 `;

package/lib/components/common/KeyValuePairs/components/KeyElType/keyElType.js

@@ -4,6 +4,6 @@ import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 /**
  * Basic KeyValuePairs "key" wrapper component.
  */
-export const KeyElType = ({ children, color = TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component = "div", variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES, ...props /* MuiTypographyProps */ }) => {
+export const KeyElType = ({ children, color = TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component = "div", variant = TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, ...props /* MuiTypographyProps */ }) => {
     return (React.createElement(Typography, { color: color, component: component, variant: variant, ...props }, children));
 };

package/lib/components/common/KeyValuePairs/components/ValueElType/valueElType.js

@@ -4,6 +4,6 @@ import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 /**
  * Basic KeyValuePairs "value" wrapper component.
  */
-export const ValueElType = ({ children, component = "div", variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES, ...props /* MuiTypographyProps */ }) => {
+export const ValueElType = ({ children, component = "div", variant = TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, ...props /* MuiTypographyProps */ }) => {
     return (React.createElement(Typography, { component: component, variant: variant, ...props }, children));
 };

package/lib/components/common/LoginDialog/constants.js

@@ -3,13 +3,13 @@ import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
 export const DIALOG_CONTENT_TEXT_PROPS = {
     color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
     component: "div",
-    variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
+    variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400,
 };
 export const DIALOG_PROPS = {
     PaperProps: { elevation: 0 },
 };
 export const DIALOG_TITLE_PROPS = {
-    variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL,
+    variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL,
 };
 export const ICON_BUTTON_PROPS = {
     color: "inkLight",

package/lib/components/common/MDXMarkdown/components/Section/mdxSection.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { textBody4002Lines, textBody500, textBodyLarge500, } from "../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../styles/common/constants/font";
 export const SectionContent = styled.div `
   h3,
   h4 {
@@ -7,16 +7,16 @@ export const SectionContent = styled.div `
   }
 
   h3 {
-    ${textBodyLarge500};
+    font: ${FONT.BODY_LARGE_500};
   }
 
   h4 {
-    ${textBody500};
+    font: ${FONT.BODY_500};
     margin-top: 20px;
   }
 
   p {
-    ${textBody4002Lines};
+    font: ${FONT.BODY_400_2_LINES};
     margin: 0 0 8px;
   }
 

package/lib/components/common/Paper/components/FlatPaper/flatPaper.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledPaper: import("@emotion/styled").StyledComponent<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"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Paper/components/FluidPaper/fluidPaper.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const StyledPaper: 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;

package/lib/components/common/Paper/components/FluidPaper/fluidPaper.styles.js

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../../styles/common/mixins/breakpoints";
 import { RoundedPaper } from "../RoundedPaper/roundedPaper";
 export const StyledPaper = styled(RoundedPaper) `
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     border-left: none;
     border-radius: 0;
     border-right: none;

package/lib/components/common/Paper/components/RoundedPaper/roundedPaper.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledPaper: import("@emotion/styled").StyledComponent<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"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Paper/paper.styles.js

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
-import { TABLET } from "../../../theme/common/breakpoints";
+import { PALETTE } from "../../../styles/common/constants/palette";
+import { bpDownSm } from "../../../styles/common/mixins/breakpoints";
 import { Paper } from "./paper";
 /**
  * Flat paper - typically used when in full stretch or full "bleed" across a container.
@@ -32,7 +33,7 @@ export const RoundedPaper = styled(Paper) `
 /* eslint-enable valid-jsdoc -- disable require param */
 export const FluidPaper = styled(RoundedPaper) `
   & {
-    ${({ theme }) => theme.breakpoints.down(TABLET)} {
+    ${bpDownSm} {
       border-left: none;
       border-radius: 0;
       border-right: none;
@@ -47,25 +48,24 @@ const ignoreSsrWarning = "/* emotion-disable-server-rendering-unsafe-selector-wa
  * Grid paper - typically used as a parent (grid) container.
  * The background color with the grid cap property create the grid "lines" between each grid item.
  */
-export const GridPaper = styled.div(({ theme }) => ({
-    backgroundColor: `${theme.palette.smoke.main}`,
-    borderRadius: "inherit", // Inherit parent container border radius.
-    display: "grid",
-    gap: "1px",
-    // First child - not <style/> - inherits top left and right border radius.
-    [`> *:first-child:not(style)${ignoreSsrWarning}`]: {
-        borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit",
-    },
-    // First child - after <style/> - inherits top left and right border radius.
-    [`> style:first-child + *${ignoreSsrWarning}`]: {
-        borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit",
-    },
-    // Last child inherits bottom left and right border radius.
-    // eslint-disable-next-line sort-keys -- disabling key order for readability
-    "> *:last-child": {
-        borderBottomLeftRadius: "inherit",
-        borderBottomRightRadius: "inherit",
-    },
-}));
+export const GridPaper = styled.div `
+  background-color: ${PALETTE.SMOKE_MAIN};
+  border-radius: inherit;
+  display: grid;
+  gap: 1px;
+
+  > *:first-child:not(style)${ignoreSsrWarning} {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  > style:first-child + *${ignoreSsrWarning} {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  > *:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.styles.js

@@ -1,26 +1,26 @@
 import styled from "@emotion/styled";
 import { CircularProgress as MCircularProgress } from "@mui/material";
-import { alertLight, infoLight, smokeLight, successLight, warningLight, } from "../../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
 export const CircularProgress = styled(MCircularProgress) `
-  color: ${smokeLight};
+  color: ${PALETTE.SMOKE_LIGHT};
   left: 0;
   position: absolute;
   top: 0;
   z-index: 0;
 
   &.MuiCircularProgress-colorAlert {
-    color: ${alertLight};
+    color: ${PALETTE.ALERT_LIGHT};
   }
 
   &.MuiCircularProgress-colorInfo {
-    color: ${infoLight};
+    color: ${PALETTE.INFO_LIGHT};
   }
 
   &.MuiCircularProgress-colorSuccess {
-    color: ${successLight};
+    color: ${PALETTE.SUCCESS_LIGHT};
   }
 
   &.MuiCircularProgress-colorWarning {
-    color: ${warningLight};
+    color: ${PALETTE.WARNING_LIGHT};
   }
 `;

package/lib/components/common/Section/components/CollapsableSection/collapsableSection.js

@@ -2,28 +2,28 @@ import { AddRounded, RemoveRounded } from "@mui/icons-material";
 import { Collapse } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../hooks/useBreakpointHelper";
-import { TABLET } from "../../../../../theme/common/breakpoints";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { SectionTitle } from "../SectionTitle/sectionTitle";
 import { CollapsableSection as Section, SectionSummary, SectionText, } from "./collapsableSection.styles";
 export const CollapsableSection = ({ children, collapsable = false, title, }) => {
-    const mobile = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+    const bpDownSm = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
     const [expanded, setExpanded] = useState(false);
     const [transitionDuration, setTransitionDuration] = useState(0);
-    const disabled = !mobile || !collapsable;
+    const disabled = !bpDownSm || !collapsable;
     const ExpandIcon = expanded ? RemoveRounded : AddRounded;
-    const SectionContent = (React.createElement(SectionText, { component: "div", variant: "text-body-400-2lines" }, children));
+    const SectionContent = (React.createElement(SectionText, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, children));
     const onToggleExpanded = () => {
         setExpanded((expanded) => !expanded);
     };
     // Toggles expanded state on change of media breakpoint.
     useEffect(() => {
-        setExpanded(!mobile);
-    }, [mobile]);
+        setExpanded(!bpDownSm);
+    }, [bpDownSm]);
     // Sets collapseTimeout state on change of media breakpoint.
     // Delays setting transitionDuration state for mobile breakpoint to facilitate the immediate transition from
     // tablet to mobile.
     useEffect(() => {
-        if (mobile) {
+        if (bpDownSm) {
             const duration = setTimeout(() => {
                 setTransitionDuration("auto");
             }, 100);
@@ -34,7 +34,7 @@ export const CollapsableSection = ({ children, collapsable = false, title, }) =>
         else {
             setTransitionDuration(0);
         }
-    }, [mobile]);
+    }, [bpDownSm]);
     return (React.createElement(Section, null,
         React.createElement(SectionSummary, { disabled: disabled, onClick: onToggleExpanded },
             React.createElement(SectionTitle, { title: title }),

package/lib/components/common/Section/components/CollapsableSection/collapsableSection.styles.d.ts

@@ -5,7 +5,7 @@ export declare const CollapsableSection: import("@emotion/styled").StyledCompone
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SectionSummary: 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;
 }, {}, {}>;
 export declare const SectionText: typeof Typography;

package/lib/components/common/Section/components/CollapsableSection/collapsableSection.styles.js

@@ -1,14 +1,15 @@
 import styled from "@emotion/styled";
 import { ButtonBase, Typography } from "@mui/material";
-import { TABLET } from "../../../../../theme/common/breakpoints";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { bpUpSm } from "../../../../../styles/common/mixins/breakpoints";
 export const CollapsableSection = styled.div `
-  background-color: ${({ theme }) => theme.palette.common.white};
+  background-color: ${PALETTE.COMMON_WHITE};
   display: flex;
   flex-direction: column;
   min-width: 0; /* required to ellipsis any flex child */
   padding: 4px 0;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     gap: 8px;
     padding: 20px;
   }
@@ -18,7 +19,7 @@ export const SectionSummary = styled(ButtonBase) `
   justify-content: space-between;
   padding: 16px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 0;
   }
 `;
@@ -29,7 +30,7 @@ export const SectionText = styled(Typography) `
   gap: 16px;
   padding: 0 16px 16px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 0;
   }
 `;

package/lib/components/common/Section/components/SectionTitle/sectionTitle.js

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 export const SectionTitle = ({ className, title, }) => {
-    return (React.createElement(Typography, { align: "left", className: className, color: "ink.main", component: "h3", variant: "text-body-large-500" }, title));
+    return (React.createElement(Typography, { align: "left", className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_MAIN, component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500 }, title));
 };

package/lib/components/common/Section/section.styles.d.ts

@@ -1,5 +1,5 @@
 import { Typography } from "@mui/material";
-import { ThemeProps } from "../../../theme/theme";
+import { ThemeProps } from "../../../theme/types";
 export declare const sectionMargin: import("@emotion/react").SerializedStyles;
 export declare const sectionMarginSm: import("@emotion/react").SerializedStyles;
 export declare const sectionMarginXsm: import("@emotion/react").SerializedStyles;

package/lib/components/common/Section/section.styles.js

@@ -1,8 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-import { mediaTabletUp } from "../../../styles/common/mixins/breakpoints";
-import { white } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
+import { bpUpSm } from "../../../styles/common/mixins/breakpoints";
 export const sectionMargin = css `
   margin: 20px 16px;
 `;
@@ -15,7 +15,7 @@ export const sectionMarginXsm = css `
 export const sectionPadding = ({ theme }) => css `
   padding: 20px 16px;
 
-  ${mediaTabletUp({ theme })} {
+  ${bpUpSm({ theme })} {
     padding: 20px;
   }
 `;
@@ -27,7 +27,7 @@ export const Section = styled.div `
 `;
 // Basic section with white background - typically used as a direct descendant of GridPaper component.
 export const GridPaperSection = styled(Section) `
-  background-color: ${white};
+  background-color: ${PALETTE.COMMON_WHITE};
 `;
 export const SectionContent = styled.div `
   display: flex;

package/lib/components/common/Socials/socials.styles.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
-import { inkLight, smokeLight } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 export const Socials = styled.div `
   display: flex;
 `;
 export const IconButton = styled(MIconButton) `
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
 
   &:hover {
-    background-color: ${smokeLight};
+    background-color: ${PALETTE.SMOKE_LIGHT};
   }
 `;

package/lib/components/common/StatusIcon/statusIcon.styles.js

@@ -1,5 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../styles/common/constants/palette";
 import { PRIORITY } from "./statusIcon";
 export const StatusCircle = styled.div `
   border-radius: 50%;
@@ -10,32 +11,32 @@ export const StatusCircle = styled.div `
   width: 72px;
 
   // Normal priority.
-  ${({ priority, theme }) => priority === PRIORITY.NORMAL &&
+  ${({ priority }) => priority === PRIORITY.NORMAL &&
     css `
-      background-color: ${theme.palette.info.lightest};
-      color: ${theme.palette.info.main};
+      background-color: ${PALETTE.INFO_LIGHTEST};
+      color: ${PALETTE.INFO_MAIN};
     `};
 
   // Low priority.
-  ${({ priority, theme }) => priority === PRIORITY.LOW &&
+  ${({ priority }) => priority === PRIORITY.LOW &&
     css `
-      background-color: ${theme.palette.warning.lightest};
-      color: ${theme.palette.warning.main};
+      background-color: ${PALETTE.WARNING_LIGHTEST};
+      color: ${PALETTE.WARNING_MAIN};
     `};
 
   // Medium priority.
-  ${({ priority, theme }) => priority === PRIORITY.MEDIUM &&
+  ${({ priority }) => priority === PRIORITY.MEDIUM &&
     css `
-      background-color: ${theme.palette.warning.light};
+      background-color: ${PALETTE.WARNING_LIGHT};
       border: 3px solid white;
-      color: ${theme.palette.warning.main};
+      color: ${PALETTE.WARNING_MAIN};
     `};
 
   // High priority.
-  ${({ priority, theme }) => priority === PRIORITY.HIGH &&
+  ${({ priority }) => priority === PRIORITY.HIGH &&
     css `
-      background-color: ${theme.palette.alert.light};
+      background-color: ${PALETTE.ALERT_LIGHT};
       border: 3px solid white;
-      color: ${theme.palette.alert.main};
+      color: ${PALETTE.ALERT_MAIN};
     `};
 `;

package/lib/components/common/Tabs/tabs.styles.d.ts

@@ -9,7 +9,7 @@ export declare const TabScrollFuzz: import("@emotion/styled").StyledComponent<{
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const Tab: 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;
 }, {}, {}>;
 export {};

package/lib/components/common/Tag/tag.d.ts

@@ -1,6 +1,3 @@
-import { ReactNode } from "react";
-export interface TagProps {
-    children: ReactNode;
-    className?: string;
-}
-export declare const Tag: ({ children, className }: TagProps) => JSX.Element;
+import { TypographyProps } from "@mui/material";
+import { BaseComponentProps } from "../../types";
+export declare const Tag: ({ className, ...props }: BaseComponentProps & TypographyProps) => JSX.Element;

package/lib/components/common/Tag/tag.js

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-export const Tag = ({ children, className }) => {
-    return (React.createElement(Typography, { className: className, component: "span", variant: "text-body-500" }, children));
+import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
+export const Tag = ({ className, ...props }) => {
+    return (React.createElement(Typography, { className: className, component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500, ...props }));
 };

package/lib/components/common/Tag/tag.stories.d.ts

@@ -7,7 +7,7 @@ declare const meta: {
             };
         };
     };
-    component: ({ children, className }: import("./tag").TagProps) => JSX.Element;
+    component: ({ className, ...props }: import("../../types").BaseComponentProps & import("@mui/material").TypographyProps) => JSX.Element;
     title: string;
 };
 export default meta;

package/lib/components/common/Tag/tag.styles.d.ts

@@ -1,6 +1,14 @@
-export declare const TagDefault: import("@emotion/styled").StyledComponent<import("./tag").TagProps & {
+export declare const TagDefault: import("@emotion/styled").StyledComponent<import("../../types").BaseComponentProps & import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "sx" | "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" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: React.ElementType;
+} & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const TagWarning: import("@emotion/styled").StyledComponent<import("./tag").TagProps & {
+export declare const TagWarning: import("@emotion/styled").StyledComponent<import("../../types").BaseComponentProps & import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "sx" | "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" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: React.ElementType;
+} & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Tag/tag.styles.js

@@ -1,11 +1,12 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../styles/common/constants/palette";
 import { Tag } from "./tag";
 export const TagDefault = styled(Tag) `
-  background-color: ${({ theme }) => theme.palette.smoke.main};
+  background-color: ${PALETTE.SMOKE_MAIN};
   border-radius: 4px;
   padding: 2px 6px;
 `;
 export const TagWarning = styled(TagDefault) `
-  background-color: ${({ theme }) => theme.palette.warning.light};
-  color: ${({ theme }) => theme.palette.warning.main};
+  background-color: ${PALETTE.WARNING_LIGHT};
+  color: ${PALETTE.WARNING_MAIN};
 `;

package/lib/components/common/Title/title.js

@@ -6,5 +6,5 @@ export const Title = ({ children, className, ...props /* Mui Typography props */
         return null;
     if (typeof children !== "string")
         return React.createElement(Fragment, null, children);
-    return (React.createElement(StyledTypography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_MAIN, component: "h1", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_LARGE, ...props }, children));
+    return (React.createElement(StyledTypography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_MAIN, component: "h1", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_LARGE, ...props }, children));
 };

package/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak.js

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 export const TypographyWordBreak = ({ children, ...props /* Spread props to allow for Typography specific props e.g. "color". */ }) => {
-    return (React.createElement(Typography, { component: "span", sx: { wordBreak: "break-word" }, variant: "inherit", ...props }, children));
+    return (React.createElement(Typography, { component: "span", sx: { wordBreak: "break-word" }, variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...props }, children));
 };

package/lib/styles/common/constants/app.d.ts

@@ -0,0 +1,3 @@
+export declare const APP: {
+    readonly FONT_FAMILY: "var(--app-fontFamily)";
+};

package/lib/styles/common/constants/app.js

@@ -0,0 +1,3 @@
+export const APP = {
+    FONT_FAMILY: `var(--app-fontFamily)`,
+};

package/lib/styles/common/constants/colorMixes.d.ts

@@ -15,6 +15,7 @@ export declare const COLOR_MIXES: {
     INK_MAIN_64: string;
     INK_MAIN_80: string;
     PRIMARY_DARK_08: string;
+    PRIMARY_MAIN_90: string;
     SUCCESS_MAIN_32: string;
     WARNING_MAIN_32: string;
 };