@databiosphere/findable-ui 41.1.0 → 42.0.0

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

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl } from "@mui/material";
-import { inkLight, inkMain } from "../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 export const InputFormControl = styled(FormControl, {
     shouldForwardProp: (prop) => prop !== "isFilled",
 }) `
@@ -20,7 +20,7 @@ export const InputFormControl = styled(FormControl, {
 
     input::placeholder,
     textarea::placeholder {
-      color: ${inkLight};
+      color: ${PALETTE.INK_LIGHT};
       opacity: 0.8;
     }
 
@@ -32,11 +32,11 @@ export const InputFormControl = styled(FormControl, {
     }
 
     // Input filled.
-    ${({ isFilled, ...props }) => isFilled &&
+    ${({ isFilled }) => isFilled &&
     css `
         & .MuiOutlinedInput-input,
         .MuiSvgIcon-root {
-          color: ${inkMain(props)};
+          color: ${PALETTE.INK_MAIN};
         }
       `};
   }

package/lib/components/common/Form/components/Select/select.js

@@ -1,9 +1,9 @@
 import { Select as MSelect, 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 { InputFormControl } from "./select.styles";
 export const Select = ({ children, className, isFilled, label, onBlur, ...props /* Spread props to allow for Mui SelectProps specific prop overrides e.g. "disabled". */ }) => {
     return (React.createElement(InputFormControl, { className: className, isFilled: isFilled },
-        label && React.createElement(Typography, { variant: TEXT_BODY_400 }, label),
+        label && (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, label)),
         React.createElement(MSelect, { fullWidth: true, inputProps: { onBlur }, size: "small", ...props }, children)));
 };

package/lib/components/common/Form/components/Select/select.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;
 } & Props, {}, {}>;
 export {};

package/lib/components/common/Form/components/Select/select.styles.js

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl } from "@mui/material";
-import { inkMain } from "../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 export const InputFormControl = styled(FormControl, {
     shouldForwardProp: (prop) => prop !== "isFilled",
 }) `
@@ -10,11 +10,11 @@ export const InputFormControl = styled(FormControl, {
   gap: 4px;
 
   // Input filled.
-  ${({ isFilled, ...props }) => isFilled &&
+  ${({ isFilled }) => isFilled &&
     css `
       & .MuiOutlinedInput-input,
       .MuiSvgIcon-root {
-        color: ${inkMain(props)};
+        color: ${PALETTE.INK_MAIN};
       }
     `};
 `;

package/lib/components/common/Form/components/UploadFile/uploadFile.js

@@ -1,7 +1,7 @@
 import { CloseRounded } from "@mui/icons-material";
 import { FormHelperText, 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 { Loading, LOADING_PANEL_STYLE } from "../../../../Loading/loading";
 import { ErrorIcon } from "../../../CustomIcon/components/ErrorIcon/errorIcon";
 import { InputFormControl } from "../Input/input.styles";
@@ -10,10 +10,10 @@ export const UploadFile = ({ attachmentName, attachmentRejected, attachmentRejec
     const error = attachmentRejected;
     const isAttached = Boolean(attachmentToken);
     return (React.createElement(InputFormControl, { className: className, error: error },
-        label && React.createElement(Typography, { variant: TEXT_BODY_400 }, label),
+        label && (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, label)),
         React.createElement(Button, { isAttached: isAttached, isDragActive: isDragActive, isError: error, onClick: attachmentToken ? onAttachmentDeleted : open },
             React.createElement(Loading, { iconSize: "small", loading: attachmentUploading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-            React.createElement(Typography, { variant: TEXT_BODY_400 }, isAttached ? (attachmentName) : (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, isAttached ? (attachmentName) : (React.createElement(React.Fragment, null,
                 "Drag or ",
                 React.createElement(Underline, null, "Click"),
                 " to attach file"))),

package/lib/components/common/Form/components/UploadFile/uploadFile.styles.d.ts

@@ -5,7 +5,7 @@ interface Props {
 }
 export declare const Button: 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;
 } & Props, {}, {}>;
 export declare const Underline: import("@emotion/styled").StyledComponent<{

package/lib/components/common/Form/components/UploadFile/uploadFile.styles.js

@@ -1,13 +1,13 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { ButtonBase } from "@mui/material";
-import { errorMain, infoLightest, infoMain, inkMain, smokeDark, smokeLight, } from "../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 export const Button = styled(ButtonBase, {
     shouldForwardProp: (prop) => prop !== "isAttached" && prop !== "isDragActive" && prop !== "isError",
 }) `
   align-items: center;
-  background-color: ${smokeLight};
-  border: 1px dashed ${smokeDark};
+  background-color: ${PALETTE.SMOKE_LIGHT};
+  border: 1px dashed ${PALETTE.SMOKE_DARK};
   border-radius: 4px;
   display: flex;
   gap: 8px;
@@ -16,21 +16,21 @@ export const Button = styled(ButtonBase, {
   padding: 10px 12px;
 
   // Drag active.
-  ${({ isDragActive, theme }) => isDragActive &&
+  ${({ isDragActive }) => isDragActive &&
     css `
-      background-color: ${infoLightest({ theme })};
-      border: 1px dashed ${infoMain({ theme })};
+      background-color: ${PALETTE.INFO_LIGHTEST};
+      border: 1px dashed ${PALETTE.INFO_MAIN};
     `};
 
   // Error.
-  ${({ isDragActive, isError, theme }) => isError &&
+  ${({ isDragActive, isError }) => isError &&
     !isDragActive &&
     css `
-      border: 1px dashed ${errorMain({ theme })};
+      border: 1px dashed ${PALETTE.ERROR_MAIN};
     `};
 
-  .MuiTypography-text-body-400 {
-    color: ${inkMain};
+  .MuiTypography-body-400 {
+    color: ${PALETTE.INK_MAIN};
     opacity: 0.8;
     overflow: hidden;
     text-overflow: ellipsis;

package/lib/components/common/IconBadge/iconBadge.styles.js

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { alertLightest, alertMain, infoLightest, infoMain, successLightest, successMain, warningLightest, warningMain, } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 import { ICON_BADGE_COLOR } from "./iconBadge";
 export const Circle = styled.div `
   border-radius: 50%;
@@ -11,30 +11,30 @@ export const Circle = styled.div `
   width: 72px;
 
   // Alert.
-  ${({ color, ...props }) => color === ICON_BADGE_COLOR.ALERT &&
+  ${({ color }) => color === ICON_BADGE_COLOR.ALERT &&
     css `
-      background-color: ${alertLightest(props)};
-      color: ${alertMain(props)};
+      background-color: ${PALETTE.ALERT_LIGHTEST};
+      color: ${PALETTE.ALERT_MAIN};
     `};
 
   // Info.
-  ${({ color, ...props }) => color === ICON_BADGE_COLOR.INFO &&
+  ${({ color }) => color === ICON_BADGE_COLOR.INFO &&
     css `
-      background-color: ${infoLightest(props)};
-      color: ${infoMain(props)};
+      background-color: ${PALETTE.INFO_LIGHTEST};
+      color: ${PALETTE.INFO_MAIN};
     `};
 
   // Success.
-  ${({ color, ...props }) => color === ICON_BADGE_COLOR.SUCCESS &&
+  ${({ color }) => color === ICON_BADGE_COLOR.SUCCESS &&
     css `
-      background-color: ${successLightest(props)};
-      color: ${successMain(props)};
+      background-color: ${PALETTE.SUCCESS_LIGHTEST};
+      color: ${PALETTE.SUCCESS_MAIN};
     `};
 
   // Warning.
-  ${({ color, ...props }) => color === ICON_BADGE_COLOR.WARNING &&
+  ${({ color }) => color === ICON_BADGE_COLOR.WARNING &&
     css `
-      background-color: ${warningLightest(props)};
-      color: ${warningMain(props)};
+      background-color: ${PALETTE.WARNING_LIGHTEST};
+      color: ${PALETTE.WARNING_MAIN};
     `};
 `;

package/lib/components/common/IconButton/iconButton.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const Button: 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;
 } & Props, {}, {}>;
 export {};

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;