@databiosphere/findable-ui 41.2.0 → 42.0.1

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.js

@@ -3,7 +3,7 @@ import React from "react";
 import { ONBOARDING_STEP, useAuthenticationForm, } from "../../../../../../hooks/authentication/terra/useAuthenticationForm";
 import { useAuth } from "../../../../../../providers/authentication/auth/hook";
 import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
-import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { FluidPaper, GridPaper, } from "../../../../../common/Paper/paper.styles";
 import { SectionTitle } from "../../../../../common/Section/components/SectionTitle/sectionTitle";
 import { AcceptTerraTOS } from "./components/FormStep/components/AcceptTerraTOS/acceptTerraTOS";
@@ -22,7 +22,7 @@ export const TerraSetUpForm = () => {
             React.createElement(Section, null,
                 React.createElement(SectionContent, null,
                     React.createElement(SectionTitle, { title: "Complete your setup" }),
-                    React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_400_2_LINES }, "Follow these steps to unlock the full potential of the data explorer."))),
+                    React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, "Follow these steps to unlock the full potential of the data explorer."))),
             React.createElement(CreateTerraAccount, { active: isStepActive(onboardingStatusByStep, ONBOARDING_STEP.TERRA_ACCOUNT), completed: isStepCompleted(onboardingStatusByStep, ONBOARDING_STEP.TERRA_ACCOUNT), step: ONBOARDING_STEP.TERRA_ACCOUNT }),
             React.createElement(AcceptTerraTOS, { active: isStepActive(onboardingStatusByStep, ONBOARDING_STEP.TERRA_TOS), completed: isStepCompleted(onboardingStatusByStep, ONBOARDING_STEP.TERRA_TOS), step: ONBOARDING_STEP.TERRA_TOS }),
             onboardingStatusByStep.has(ONBOARDING_STEP.NIH_ACCOUNT) && (React.createElement(ConnectTerraToNIHAccount, { active: isStepActive(onboardingStatusByStep, ONBOARDING_STEP.NIH_ACCOUNT), completed: isStepCompleted(onboardingStatusByStep, ONBOARDING_STEP.NIH_ACCOUNT), step: ONBOARDING_STEP.NIH_ACCOUNT })))));

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.styles.js

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import { inkLight, smokeMain, successMain, white, } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import { sectionPadding } from "../../../../../common/Section/section.styles";
 export const Section = styled("div") `
   ${sectionPadding};
-  background-color: ${white};
+  background-color: ${PALETTE.COMMON_WHITE};
   display: grid;
   gap: 16px;
   grid-template-columns: auto 1fr;
@@ -13,7 +13,7 @@ export const SectionContent = styled("div") `
   gap: 4px;
   grid-row: 1;
 
-  .MuiTypography-text-body-400-2lines {
+  .MuiTypography-body-400-2lines {
     p {
       margin: 0;
     }
@@ -26,27 +26,27 @@ export const SectionStatus = styled("div") `
   line-height: 0;
 
   .MuiSvgIcon-fontSizeMedium {
-    color: ${successMain};
+    color: ${PALETTE.SUCCESS_MAIN};
   }
 
   .MuiStepIcon-root {
-    border: 2px solid ${smokeMain};
+    border: 2px solid ${PALETTE.SMOKE_MAIN};
     border-radius: 50%;
-    color: ${white};
+    color: ${PALETTE.COMMON_WHITE};
 
     .MuiStepIcon-text {
-      fill: ${smokeMain};
+      fill: ${PALETTE.SMOKE_MAIN};
       font-size: 14px;
       font-weight: 700;
       line-height: 20px;
     }
 
     &.Mui-active {
-      border: 2px solid ${inkLight};
-      color: ${white};
+      border: 2px solid ${PALETTE.INK_LIGHT};
+      color: ${PALETTE.COMMON_WHITE};
 
       .MuiStepIcon-text {
-        fill: ${inkLight};
+        fill: ${PALETTE.INK_LIGHT};
       }
     }
   }

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/manifestDownloadEntity.styles.js

@@ -1,15 +1,15 @@
 import styled from "@emotion/styled";
 import { TableContainer as MTableContainer } from "@mui/material";
-import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
-import { white } from "../../../../../../styles/common/mixins/colors";
-import { textBodyLarge500 } from "../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { bpUpSm } from "../../../../../../styles/common/mixins/breakpoints";
 export const SectionTitle = styled("h4") `
-  ${textBodyLarge500}
-  background-color: ${white};
+  background-color: ${PALETTE.COMMON_WHITE};
+  font: ${FONT.BODY_LARGE_500};
   margin: 0;
   padding: 20px 16px;
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     padding: 20px;
   }
 `;
@@ -23,7 +23,7 @@ export const TableContainer = styled(MTableContainer) `
     min-height: 56px;
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     td,
     th {
       padding: 12px 20px;

package/lib/components/Export/export.styles.d.ts

@@ -1,4 +1,4 @@
-import { ThemeProps } from "../../theme/theme";
+import { ThemeProps } from "../../theme/types";
 export declare const sectionMargin: ({ theme }: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const Section: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/lib/components/Export/export.styles.js

@@ -1,13 +1,13 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { mediaTabletUp } from "../../styles/common/mixins/breakpoints";
-import { inkLight } from "../../styles/common/mixins/colors";
-import { textBodySmall4002Lines } from "../../styles/common/mixins/fonts";
+import { FONT } from "../../styles/common/constants/font";
+import { PALETTE } from "../../styles/common/constants/palette";
+import { bpUpSm } from "../../styles/common/mixins/breakpoints";
 import { SectionContent as MDXSectionContent } from "../common/MDXMarkdown/components/Section/mdxSection.styles";
 import { SectionActions as DXSectionActions, sectionMarginXsm, } from "../common/Section/section.styles";
 export const sectionMargin = ({ theme }) => css `
   ${sectionMarginXsm}
-  ${mediaTabletUp({ theme })} {
+  ${bpUpSm({ theme })} {
     margin: 16px 20px;
   }
 `;
@@ -25,6 +25,6 @@ export const SectionActions = styled(DXSectionActions) `
 `;
 export const SectionFootnote = styled.div `
   ${sectionMargin}
-  ${textBodySmall4002Lines}
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
+  font: ${FONT.BODY_SMALL_400_2_LINES};
 `;

package/lib/components/Filter/components/ClearAllFilters/clearAllFilters.styles.d.ts

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

package/lib/components/Filter/components/FilterCountChip/filterCountChip.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & 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" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -1,6 +1,6 @@
 import { FilterLabelProps } from "./filterLabel";
 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;
 } & Pick<FilterLabelProps, "isOpen" | "surfaceType">, {}, {}>;

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.js

@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { inkLight, smokeMain } from "../../../../styles/common/mixins/colors";
 import { SURFACE_TYPE } from "../surfaces/types";
 export const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "surfaceType",
@@ -15,7 +14,7 @@ export const StyledButton = styled(Button, {
   text-align: left;
 
   :hover {
-    background-color: ${smokeMain};
+    background-color: ${PALETTE.SMOKE_MAIN};
   }
 
   &.Mui-disabled {
@@ -23,7 +22,7 @@ export const StyledButton = styled(Button, {
   }
 
   & .MuiButton-endIcon {
-    color: ${inkLight};
+    color: ${PALETTE.INK_LIGHT};
     margin-right: -4px;
     transform: rotate(-90deg);
   }

package/lib/components/Filter/components/FilterList/filterList.styles.d.ts

@@ -2,6 +2,6 @@ export declare const MuiListItemButtonRoot: import("@emotion/react").SerializedS
 export declare const MuiListItemTextRoot: import("@emotion/react").SerializedStyles;
 export declare const StyledList: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
     ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "dense" | "subheader" | "disablePadding"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.styles.js

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { inkLight } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { Input } from "../../../common/Input/input";
 import { SURFACE_TYPE } from "../surfaces/types";
 export const StyledInput = styled(Input, {
@@ -9,7 +9,7 @@ export const StyledInput = styled(Input, {
   padding: 0 16px;
 
   .MuiOutlinedInput-input {
-    color: ${inkLight};
+    color: ${PALETTE.INK_LIGHT};
   }
 
   ${({ surfaceType }) => surfaceType === SURFACE_TYPE.MENU &&

package/lib/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.js

@@ -1,10 +1,11 @@
 import { Typography } from "@mui/material";
 import React, { forwardRef } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 import { FilterNoResultsFound as FilterNoResults } from "./filterNoResultsFound.styles";
 export const FilterNoResultsFound = forwardRef(function FilterNoResultsFound({ onClearSearchTerm }, ref) {
     return (React.createElement(FilterNoResults, { ref: ref },
-        React.createElement(Typography, { component: "div", variant: "text-body-500" }, "No results found!"),
-        React.createElement(Typography, { component: "div", color: "ink.light", mb: onClearSearchTerm ? 2 : 0, mt: 1, variant: "text-body-400" }, "Try adjusting your search or filter to find what you\u2019re looking for."),
+        React.createElement(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500 }, "No results found!"),
+        React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", mb: onClearSearchTerm ? 2 : 0, mt: 1, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "Try adjusting your search or filter to find what you\u2019re looking for."),
         onClearSearchTerm && (React.createElement(ButtonTextPrimary, { onClick: onClearSearchTerm }, "Clear Search"))));
 });

package/lib/components/Filter/components/FilterRange/filterRange.styles.js

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { textBody400 } from "../../../../styles/common/mixins/fonts";
 import { SURFACE_TYPE } from "../surfaces/types";
 export const StyledForm = styled("form") `
   padding: 16px;
@@ -42,8 +42,8 @@ export const StyledForm = styled("form") `
       grid-template-rows: subgrid;
 
       .MuiInputLabel-root {
-        ${textBody400};
         color: ${PALETTE.INK_MAIN};
+        font: ${FONT.BODY_400};
         max-width: unset;
         position: relative;
         transform: unset;

package/lib/components/Filter/components/FilterTag/filterTag.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const SupersededTag: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & 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" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & {
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Filter/components/FilterTag/filterTag.styles.js

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const SupersededTag = styled(Chip) `
-  background-color: ${({ theme }) => theme.palette.smoke.dark};
+  background-color: ${PALETTE.SMOKE_DARK};
 `;

package/lib/components/Filter/components/Filters/filters.js

@@ -53,7 +53,7 @@ export const Filters = ({ categoryFilters, className, disabled = false, onFilter
     }, [windowHeight]);
     return (React.createElement(FilterList, { className: className, "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef, surfaceType: surfaceType }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
-        label && (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_UPPERCASE_500 }, label)),
+        label && (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500 }, label)),
         categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: onClose, onFilter: onFilter, surfaceType: surfaceType, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
 };
 /**

package/lib/components/Filter/components/Filters/filters.styles.d.ts

@@ -8,7 +8,7 @@ export declare const Filters: import("@emotion/styled").StyledComponent<{
 } & Props & Pick<FiltersProps, "disabled" | "surfaceType">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 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;
 }, {}, {}>;
 export {};

package/lib/components/Filter/components/Filters/filters.styles.js

@@ -1,12 +1,12 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-import { inkMain } from "../../../../styles/common/mixins/colors";
-import { textBody500 } from "../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { SURFACE_TYPE } from "../surfaces/types";
 export const Filters = styled("div") `
-  ${textBody500};
-  color: ${inkMain};
+  color: ${PALETTE.INK_MAIN};
+  font: ${FONT.BODY_500};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.styles.js

@@ -1,7 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const MatchHighlight = styled.mark `
-  background: ${({ theme }) => theme.palette.warning.light};
+  background: ${PALETTE.WARNING_LIGHT};
   color: inherit;
   padding: 2px 0;
 

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.js

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
 import { Popper as MPopper } from "@mui/material";
-import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
-import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
 export const AutocompletePopper = styled(MPopper) `
-  ${mediaDesktopSmallDown} {
+  ${bpDownMd} {
     .MuiPaper-root {
-      background-color: ${smokeLight};
+      background-color: ${PALETTE.SMOKE_LIGHT};
 
       .MuiList-root {
         margin: 0;

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.js

@@ -3,7 +3,6 @@ import React, { createContext, forwardRef, useCallback, useContext, useEffect, u
 import { VariableSizeList as List, } from "react-window";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../hooks/useBreakpointHelper";
 import { useWindowResize } from "../../../../../../hooks/useWindowResize";
-import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
 import { LIST_ITEM_HEIGHT, LIST_MARGIN, MAX_DISPLAYABLE_LIST_ITEMS, MAX_LIST_HEIGHT_PX, } from "../../../../common/constants";
 import { getSortMatchesFn } from "../../../../common/utils";
 import { StyledList } from "../../../FilterList/filterList.styles";
@@ -36,7 +35,7 @@ const OuterElement = forwardRef(function OuterElement({ children, ...props }, re
 export const VariableSizeList = forwardRef(function VariableSizeList({ autocompleteListProps, height: initHeight = MAX_LIST_HEIGHT_PX, itemSize = LIST_ITEM_HEIGHT, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, searchTerm, selectCategoryViews, width = "100%", }, autocompleteListRef) {
     const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
     let resizeRequired = true;
-    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+    const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
     const { height: windowHeight } = useWindowResize();
     const [height, setHeight] = useState(initHeight);
     const itemSizeByItemKeyRef = useRef(new Map());
@@ -48,8 +47,8 @@ export const VariableSizeList = forwardRef(function VariableSizeList({ autocompl
     // Sets height of list.
     useEffect(() => {
         if (innerRef.current && outerRef.current)
-            setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, desktopSmDown));
-    }, [desktopSmDown, windowHeight]);
+            setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, bpDownMd));
+    }, [bpDownMd, windowHeight]);
     // Clears VariableSizeList cache (offsets and measurements) when values are updated (filtered).
     // Facilitates correct positioning of list items when list is updated.
     useEffect(() => {
@@ -73,7 +72,7 @@ export const VariableSizeList = forwardRef(function VariableSizeList({ autocompl
                         outerRef.current) {
                         // Set height of list.
                         resizeRequired = false;
-                        setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, desktopSmDown));
+                        setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, bpDownMd));
                     }
                     listRef.current?.resetAfterIndex(0); // Facilitates correct positioning of list items when list scrolls.
                 });
@@ -120,13 +119,13 @@ function applyMenuFilter(selectCategoryViews, inputValue) {
  * @param outerListElem - Outer list element to reference list position from.
  * @param innerListElem - Element containing list items.
  * @param windowHeight - Window height.
- * @param desktopSmDown - True if viewport is small desktop or smaller.
+ * @param bpDownMd - True if viewport is "md" or smaller.
  * @returns calculated height.
  */
-function calculateListHeight(outerListElem, innerListElem, windowHeight, desktopSmDown) {
+function calculateListHeight(outerListElem, innerListElem, windowHeight, bpDownMd) {
     // Calculate max possible list height, based on window height and top position of the list element.
     const maxHeight = windowHeight - outerListElem.getBoundingClientRect().top;
-    if (desktopSmDown) {
+    if (bpDownMd) {
         return maxHeight;
     }
     // Grab the first and last element in the list.

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,8 +1,8 @@
 import { Checkbox, ListItemButton, ListItemText, ListSubheader, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
 import { VIEW_KIND } from "../../../../../../common/categories/views/types";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { TEST_IDS } from "../../../../../../tests/testIds";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { FilterNoResultsFound } from "../../../FilterNoResultsFound/filterNoResultsFound";
@@ -22,7 +22,7 @@ export default function VariableSizeListItem({ item, onFilter, onUpdateItemSizeB
         const { categoryKey, matchRanges, value: { count, key: valueKey, label, selected }, } = item;
         return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, VIEW_KIND.SELECT, searchTerm), selected: selected, style: style },
             React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges, testId: TEST_IDS.FILTER_TERM }), secondary: React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count) })));
+            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges, testId: TEST_IDS.FILTER_TERM }), secondary: React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, "data-testid": TEST_IDS.FILTER_COUNT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, count) })));
     }
     else if (item.type === ITEM_TYPE.CATEGORY) {
         return (React.createElement(ListSubheader, { key: key, ref: setRef, style: style }, item.categoryLabel));

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.js

@@ -3,7 +3,6 @@ import { isSelectCategoryView } from "../../../../common/categories/views/select
 import { SELECTOR } from "../../../../common/selectors";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
 import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
@@ -31,14 +30,14 @@ const Listbox = React.forwardRef(function Listbox(props, ref) {
 });
 export const SearchAllFilters = ({ categoryViews, onFilter, }) => {
     const { open: isDrawerOpen } = useDrawer();
-    const desktopSmUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const bpUpMd = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "md");
     const autocompleteRef = useRef(null);
     const [open, setOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
     const selectCategoryViews = categoryViews.filter((view) => isSelectCategoryView(view));
-    // Handles background scroll action (desktop only).
+    // Handles background scroll action ("md" and up).
     const handleBackgroundScroll = (overflowStyle) => {
-        if (desktopSmUp) {
+        if (bpUpMd) {
             setElementsOverflowStyle([
                 document.querySelector(SELECTOR.BODY),
                 document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
@@ -90,7 +89,7 @@ export const SearchAllFilters = ({ categoryViews, onFilter, }) => {
             searchTerm,
             selectCategoryViews,
         } },
-        React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
+        React.createElement(Autocomplete, { clearOnBlur: bpUpMd, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: bpUpMd ? onCloseSearch : undefined, onClose: bpUpMd ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
                 ...props,
                 InputProps: {
                     ...props.InputProps,
@@ -100,5 +99,5 @@ export const SearchAllFilters = ({ categoryViews, onFilter, }) => {
                     ...props.inputProps,
                     onChange,
                 },
-            }), slotProps: desktopSmUp ? DEFAULT_SLOT_PROPS : DRAWER_SLOT_PROPS })));
+            }), slotProps: bpUpMd ? DEFAULT_SLOT_PROPS : DRAWER_SLOT_PROPS })));
 };

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.styles.js

@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
 import { Autocomplete as MAutocomplete } from "@mui/material";
-import { inkMain } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const Autocomplete = styled(MAutocomplete) `
   &.Mui-expanded {
     .MuiOutlinedInput-root {
       .MuiIconButton-root {
         .MuiSvgIcon-root {
-          color: ${inkMain};
+          color: ${PALETTE.INK_MAIN};
         }
       }
     }

package/lib/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.js

@@ -2,13 +2,12 @@ import { CloseRounded } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import React, { Fragment, useContext } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
 import { ListboxContext } from "../../../SearchAllFilters/searchAllFilters";
 export const SearchCloseButton = () => {
-    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+    const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
     const { onClearSearch, onCloseSearch, open, searchTerm } = useContext(ListboxContext);
-    const showButton = open && (desktopSmDown || searchTerm);
-    const onClickFn = desktopSmDown ? onCloseSearch : onClearSearch;
+    const showButton = open && (bpDownMd || searchTerm);
+    const onClickFn = bpDownMd ? onCloseSearch : onClearSearch;
     return (React.createElement(Fragment, null, showButton && (React.createElement(IconButton, { onClick: onClickFn, size: "large" },
         React.createElement(CloseRounded, { fontSize: "small" })))));
 };

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { TextField } from "@mui/material";
-import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const InputField = styled(TextField) `
   && {
     display: flex;
@@ -9,7 +9,7 @@ export const InputField = styled(TextField) `
 
     .MuiInputBase-root {
       & ::placeholder {
-        color: ${inkLight};
+        color: ${PALETTE.INK_LIGHT};
         opacity: 0.8;
       }
 
@@ -25,7 +25,7 @@ export const InputField = styled(TextField) `
         padding: 0 0 0 12px;
 
         .MuiAutocomplete-input {
-          color: ${inkMain};
+          color: ${PALETTE.INK_MAIN};
           padding: 10px 14px 10px 0;
         }
       }

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.js

@@ -2,8 +2,8 @@ import { Checkbox, ListItemButton, ListItemText, Typography, } from "@mui/materi
 import React, { useEffect, useRef } from "react";
 import { VIEW_KIND } from "../../../../common/categories/views/types";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { HighlightedLabel } from "../HighlightedLabel/highlightedLabel";
@@ -20,5 +20,5 @@ export default function VariableSizeListItem({ categoryKey, categorySection, mat
     };
     return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
         React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-        React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: labelRanges, testId: TEST_IDS.FILTER_TERM }), secondary: categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count)) })));
+        React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: labelRanges, testId: TEST_IDS.FILTER_TERM }), secondary: categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, "data-testid": TEST_IDS.FILTER_COUNT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, count)) })));
 }

package/lib/components/Filter/components/controls/Controls/controls.js

@@ -9,6 +9,6 @@ import { StyledGrid } from "./controls.styles";
  */
 export const Controls = ({ className, onFilter, }) => {
     return (React.createElement(StyledGrid, { className: className, container: true },
-        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_LARGE_500 }, "Filters"),
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500 }, "Filters"),
         React.createElement(MButton, { ...BUTTON_PROPS.PRIMARY_TEXT, onClick: () => onFilter(CLEAR_ALL, undefined, false) }, "Clear All")));
 };

package/lib/components/Filter/components/controls/Controls/controls.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;