@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/components/common/Accordion/accordion.js

@@ -1,6 +1,6 @@
 import { AccordionDetails, AccordionSummary, Accordion as MAccordion, Typography, } from "@mui/material";
 import React, { useState } from "react";
-import { TEXT_BODY_LARGE_500 } from "../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
 import { AddIcon } from "../CustomIcon/components/AddIcon/addIcon";
 import { RemoveIcon } from "../CustomIcon/components/RemoveIcon/removeIcon";
 export const Accordion = ({ children, collapseIcon = React.createElement(RemoveIcon, { color: "primary", fontSize: "medium" }), expanded, expandIcon = React.createElement(AddIcon, { color: "primary", fontSize: "medium" }), title, ...props /* Spread props to allow for Accordion specific props AccordionProps e.g. "disabled". */ }) => {
@@ -10,6 +10,6 @@ export const Accordion = ({ children, collapseIcon = React.createElement(RemoveI
     };
     return (React.createElement(MAccordion, { expanded: isExpanded, onChange: onToggleExpanded, ...props },
         React.createElement(AccordionSummary, { expandIcon: isExpanded ? collapseIcon : expandIcon },
-            React.createElement(Typography, { variant: TEXT_BODY_LARGE_500 }, title)),
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500 }, title)),
         React.createElement(AccordionDetails, null, children)));
 };

package/lib/components/common/Alert/alert.styles.js

@@ -1,8 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Alert } from "@mui/material";
+import { FONT } from "../../../styles/common/constants/font";
 import { SIZE } from "../../../styles/common/constants/size";
-import { textBody4002Lines, textBodyLarge500, } from "../../../styles/common/mixins/fonts";
 export const StyledAlert = styled(Alert) `
   ${(props) => props.size === SIZE.LARGE &&
     css `
@@ -11,9 +11,9 @@ export const StyledAlert = styled(Alert) `
         padding: 2px 0;
       }
       .MuiAlert-message {
-        ${textBody4002Lines(props)};
+        font: ${FONT.BODY_400_2_LINES};
         .MuiAlertTitle-root {
-          ${textBodyLarge500(props)};
+          font: ${FONT.BODY_LARGE_500};
         }
       }
     `}

package/lib/components/common/Banner/banner.styles.js

@@ -1,16 +1,16 @@
 import styled from "@emotion/styled";
 import { Alert } from "@mui/material";
-import { mediaDesktopUp } from "../../../styles/common/mixins/breakpoints";
-import { textBodySmall400 } from "../../../styles/common/mixins/fonts";
+import { FONT } from "../../../styles/common/constants/font";
+import { bpUpLg } from "../../../styles/common/mixins/breakpoints";
 export const StyledAlert = styled(Alert) `
   justify-content: center;
   padding: 8px 12px;
   text-align: center;
 
   .MuiAlert-message {
-    ${textBodySmall400};
     align-self: center;
     flex: 1;
+    font: ${FONT.BODY_SMALL_400};
 
     .MuiLink-root {
       color: inherit;
@@ -22,7 +22,7 @@ export const StyledAlert = styled(Alert) `
     padding: 0;
   }
 
-  ${mediaDesktopUp} {
+  ${bpUpLg} {
     padding: 8px 16px;
   }
 `;

package/lib/components/common/Banner/components/CookieBanner/cookieBanner.styles.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Alert } from "@mui/material";
-import { mediaTabletUp } from "../../../../../styles/common/mixins/breakpoints";
-import { textBody400 } from "../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../styles/common/constants/font";
+import { bpUpSm } from "../../../../../styles/common/mixins/breakpoints";
 export const StyledAlert = styled(Alert) `
   bottom: 0;
   flex-direction: column;
@@ -13,7 +13,7 @@ export const StyledAlert = styled(Alert) `
   z-index: 1100; // Above support fab, below support form.
 
   .MuiAlert-message {
-    ${textBody400};
+    font: ${FONT.BODY_400};
   }
 
   .MuiAlert-action {
@@ -24,7 +24,7 @@ export const StyledAlert = styled(Alert) `
     padding: 0;
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     box-sizing: content-box;
     margin: 16px;
     max-width: 400px;

package/lib/components/common/Button/components/DropdownButton/dropdownButton.styles.d.ts

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

package/lib/components/common/Button/components/HelpIconButton/helpIconButton.styles.js

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
 import { ButtonBase } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 export const HelpIconButton = styled(ButtonBase) `
   align-self: flex-start;
-  color: ${({ theme }) => theme.palette.ink.light};
+  color: ${PALETTE.INK_LIGHT};
   vertical-align: bottom; // Vertical alignment is required to align the icon with text styles "textBody400".
 `;

package/lib/components/common/Button/components/NavigationButton/navigationButton.styles.js

@@ -1,22 +1,23 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 import { Button as DXButton } from "../../button";
 export const Button = styled(DXButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
 }) `
-  background-color: ${({ theme }) => theme.palette.common.white};
+  background-color: ${PALETTE.COMMON_WHITE};
   color: inherit;
   padding: 6px 6px 6px 12px;
 
   &:active,
   &:hover {
-    background-color: ${({ theme }) => theme.palette.smoke.light};
+    background-color: ${PALETTE.SMOKE_LIGHT};
   }
 
   // Button is "active" i.e. menu is open.
-  ${({ isActive, theme }) => isActive &&
+  ${({ isActive }) => isActive &&
     css `
-      background-color: ${theme.palette.smoke.light};
+      background-color: ${PALETTE.SMOKE_LIGHT};
     `};
 
   .MuiButton-endIcon {

package/lib/components/common/Card/card.styles.js

@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
-import { TABLET } from "../../../theme/common/breakpoints";
+import { bpUpSm } from "../../../styles/common/mixins/breakpoints";
 import { SectionContent } from "../Section/section.styles";
 export const CardSection = styled.div `
   display: grid;
   gap: 16px;
   padding: 20px 16px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 20px;
   }
 `;

package/lib/components/common/Card/components/CardActions/cardActions.styles.js

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
-import { textBody500 } from "../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../styles/common/constants/font";
 export const CardActions = styled.div `
-  ${textBody500};
   align-items: center;
   display: flex;
+  font: ${FONT.BODY_500};
   gap: 16px;
 `;

package/lib/components/common/Card/components/CardSecondaryText/cardSecondaryText.d.ts

@@ -1,5 +1,2 @@
-import { ReactNode } from "react";
-export interface CardSecondaryTextProps {
-    children: ReactNode;
-}
-export declare const CardSecondaryText: ({ children, ...props }: CardSecondaryTextProps) => JSX.Element;
+import { TypographyProps } from "@mui/material";
+export declare const CardSecondaryText: (props: TypographyProps) => JSX.Element;

package/lib/components/common/Card/components/CardSecondaryText/cardSecondaryText.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../theme/common/typography";
-export const CardSecondaryText = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
-    return (React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400_2_LINES, ...props }, children));
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+export const CardSecondaryText = (props) => {
+    return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES, ...props }));
 };

package/lib/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.d.ts

@@ -1,5 +1,2 @@
-import { ReactNode } from "react";
-export interface CardSecondaryTitleProps {
-    children: ReactNode;
-}
-export declare const CardSecondaryTitle: ({ children, ...props }: CardSecondaryTitleProps) => JSX.Element;
+import { TypographyProps } from "@mui/material";
+export declare const CardSecondaryTitle: (props: TypographyProps) => JSX.Element;

package/lib/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../theme/common/typography";
-import { CardSecondaryTitle as SecondaryTitle } from "./cardSecondaryTitle.styles";
-export const CardSecondaryTitle = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
-    return (React.createElement(SecondaryTitle, { color: "ink.light", variant: TEXT_BODY_SMALL_400_2_LINES, ...props }, children));
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+import { StyledTypography } from "./cardSecondaryTitle.styles";
+export const CardSecondaryTitle = (props) => {
+    return (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES, ...props }));
 };

package/lib/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const CardSecondaryTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+export declare const StyledTypography: import("@emotion/styled").StyledComponent<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" | "color" | "fontSize" | "sx" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "align" | "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" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "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"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-export const CardSecondaryTitle = styled(Typography) `
+export const StyledTypography = styled(Typography) `
   margin-top: -4px;
 `;

package/lib/components/common/Card/components/CardText/cardText.d.ts

@@ -1,5 +1,2 @@
-import { ReactNode } from "react";
-export interface CardTextProps {
-    children: ReactNode;
-}
-export declare const CardText: ({ children, ...props }: CardTextProps) => JSX.Element;
+import { TypographyProps } from "@mui/material";
+export declare const CardText: (props: TypographyProps) => JSX.Element;

package/lib/components/common/Card/components/CardText/cardText.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_400_2_LINES } from "../../../../../theme/common/typography";
-export const CardText = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
-    return (React.createElement(Typography, { variant: TEXT_BODY_400_2_LINES, ...props }, children));
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+export const CardText = (props) => {
+    return (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, ...props }));
 };

package/lib/components/common/Card/components/CardTitle/cardTitle.d.ts

@@ -1,5 +1,2 @@
-import { ReactNode } from "react";
-export interface CardTitleProps {
-    children: ReactNode;
-}
-export declare const CardTitle: ({ children, ...props }: CardTitleProps) => JSX.Element;
+import { TypographyProps } from "@mui/material";
+export declare const CardTitle: (props: TypographyProps) => JSX.Element;

package/lib/components/common/Card/components/CardTitle/cardTitle.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_LARGE_500 } from "../../../../../theme/common/typography";
-export const CardTitle = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
-    return (React.createElement(Typography, { component: "h4", variant: TEXT_BODY_LARGE_500, ...props }, children));
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+export const CardTitle = (props) => {
+    return (React.createElement(Typography, { component: "h4", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500, ...props }));
 };

package/lib/components/common/Code/code.styles.js

@@ -1,14 +1,15 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { textBody500 } from "../../../styles/common/mixins/fonts";
+import { COLOR_MIXES } from "../../../styles/common/constants/colorMixes";
+import { FONT } from "../../../styles/common/constants/font";
+import { PALETTE } from "../../../styles/common/constants/palette";
 const copy = (props) => css `
-  ${textBody500(props)};
   align-items: center;
   border-radius: inherit;
-  color: ${props.theme.palette.common.white};
+  color: ${PALETTE.COMMON_WHITE};
   content: "";
   display: flex;
-  font-family: ${props.theme.typography.fontFamily};
+  font: ${FONT.BODY_500};
   height: 100%;
   justify-content: center;
   left: 0;
@@ -19,7 +20,7 @@ const copy = (props) => css `
   width: 100%;
 `;
 export const CodeBlock = styled("pre") `
-  background-color: ${({ theme }) => theme.palette.info.lightest};
+  background-color: ${PALETTE.INFO_LIGHTEST};
   border-radius: 4px;
   cursor: pointer;
   margin: 16px 0;
@@ -31,20 +32,20 @@ export const CodeBlock = styled("pre") `
   }
 
   // Copy to Clipboard!
-  ${({ copied, theme }) => !copied &&
+  ${({ copied }) => !copied &&
     css `
       &:hover::after {
-        background-color: ${theme.palette.primary.main}e6;
+        background-color: ${COLOR_MIXES.PRIMARY_MAIN_90};
         content: "Copy to Clipboard";
         opacity: 1;
       }
     `};
 
   // Copied!
-  ${({ copied, theme }) => copied &&
+  ${({ copied }) => copied &&
     css `
       &::after {
-        background-color: ${theme.palette.primary.main};
+        background-color: ${PALETTE.PRIMARY_MAIN};
         content: "Copied!";
         opacity: 1;
       }

package/lib/components/common/Dot/dot.styles.js

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../styles/common/constants/palette";
 export const DotSeparator = styled("span") `
   align-self: center;
-  background-color: ${({ theme }) => theme.palette.ink.light};
+  background-color: ${PALETTE.INK_LIGHT};
   border-radius: 50%;
   display: block;
   flex: none;

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

@@ -1,9 +1,9 @@
 import { OutlinedInput, 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 "./input.styles";
 export const Input = ({ className, isFilled, label, ...props /* Spread props to allow for Mui OutlinedInputProps 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(OutlinedInput, { fullWidth: true, inputProps: { autoComplete: "off", spellCheck: false }, size: "small", ...props })));
 };

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

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 {};