@mui/material 7.0.0-alpha.1 → 7.0.0-beta.0

package/styles/createPalette.d.ts

@@ -1,125 +0,0 @@
-export type PaletteMode = 'light' | 'dark';
-export interface Color {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-  A100: string;
-  A200: string;
-  A400: string;
-  A700: string;
-}
-export {};
-// use standalone interface over typeof colors/commons
-// to enable module augmentation
-export interface CommonColors {
-  black: string;
-  white: string;
-}
-export type ColorPartial = Partial<Color>;
-export interface TypeText {
-  primary: string;
-  secondary: string;
-  disabled: string;
-}
-export interface TypeAction {
-  active: string;
-  hover: string;
-  hoverOpacity: number;
-  selected: string;
-  selectedOpacity: number;
-  disabled: string;
-  disabledOpacity: number;
-  disabledBackground: string;
-  focus: string;
-  focusOpacity: number;
-  activatedOpacity: number;
-}
-export interface TypeBackground {
-  default: string;
-  paper: string;
-}
-export type TypeDivider = string;
-export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;
-export interface SimplePaletteColorOptions {
-  light?: string;
-  main: string;
-  dark?: string;
-  contrastText?: string;
-}
-export interface PaletteColor {
-  light: string;
-  main: string;
-  dark: string;
-  contrastText: string;
-}
-export interface TypeObject {
-  text: TypeText;
-  action: TypeAction;
-  divider: TypeDivider;
-  background: TypeBackground;
-}
-export type PaletteTonalOffset = number | {
-  light: number;
-  dark: number;
-};
-export const light: TypeObject;
-export const dark: TypeObject;
-export interface PaletteAugmentColorOptions {
-  color: PaletteColorOptions;
-  mainShade?: number | string;
-  lightShade?: number | string;
-  darkShade?: number | string;
-  name?: number | string;
-}
-export interface Palette {
-  common: CommonColors;
-  mode: PaletteMode;
-  contrastThreshold: number;
-  tonalOffset: PaletteTonalOffset;
-  primary: PaletteColor;
-  secondary: PaletteColor;
-  error: PaletteColor;
-  warning: PaletteColor;
-  info: PaletteColor;
-  success: PaletteColor;
-  grey: Color;
-  text: TypeText;
-  divider: TypeDivider;
-  action: TypeAction;
-  background: TypeBackground;
-  getContrastText: (background: string) => string;
-  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
-}
-export interface Channels {
-  mainChannel: string;
-  lightChannel: string;
-  darkChannel: string;
-  contrastTextChannel: string;
-}
-export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
-export interface PaletteOptions {
-  primary?: PaletteColorOptions;
-  secondary?: PaletteColorOptions;
-  error?: PaletteColorOptions;
-  warning?: PaletteColorOptions;
-  info?: PaletteColorOptions;
-  success?: PaletteColorOptions;
-  mode?: PaletteMode;
-  tonalOffset?: PaletteTonalOffset;
-  contrastThreshold?: number;
-  common?: Partial<CommonColors>;
-  grey?: ColorPartial;
-  text?: Partial<TypeText>;
-  divider?: string;
-  action?: Partial<TypeAction>;
-  background?: Partial<TypeBackground>;
-  getContrastText?: (background: string) => string;
-}
-export default function createPalette(palette: PaletteOptions): Palette;

package/styles/createStyles.d.ts

@@ -1 +0,0 @@
-export default function createStyles(styles: any): never;

package/styles/createTheme.d.ts

@@ -1,15 +0,0 @@
-import { CssVarsThemeOptions } from "./createThemeWithVars.js";
-import { Theme, ThemeOptions } from "./createThemeNoVars.js";
-export { createMuiTheme } from "./createThemeNoVars.js";
-export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars.js";
-/**
- * Generate a theme base on the options received.
- * @param options Takes an incomplete theme object and adds the missing parts.
- * @param args Deep merge the arguments with the about to be returned theme.
- * @returns A complete, ready-to-use theme object.
- */
-export default function createTheme(options?: Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
-  cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
-},
-// cast type to skip module augmentation test
-...args: object[]): Theme;

package/styles/createThemeNoVars.d.ts

@@ -1,76 +0,0 @@
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig } from '@mui/system';
-import { Mixins, MixinsOptions } from "./createMixins.js";
-import { Palette, PaletteOptions } from "./createPalette.js";
-import { Typography, TypographyOptions } from "./createTypography.js";
-import { Shadows } from "./shadows.js";
-import { Transitions, TransitionsOptions } from "./createTransitions.js";
-import { ZIndex, ZIndexOptions } from "./zIndex.js";
-import { Components } from "./components.js";
-import { CssVarsTheme, CssVarsPalette, ColorSystemOptions } from "./createThemeWithVars.js";
-
-/**
- * To disable custom properties, use module augmentation
- *
- * @example
- * declare module '@mui/material/styles' {
- *   interface CssThemeVariables {
- *     enabled: true;
- *   }
- * }
- */
-export interface CssThemeVariables {}
-type CssVarsOptions = CssThemeVariables extends {
-  enabled: true;
-} ? ColorSystemOptions : {};
-export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {
-  mixins?: MixinsOptions;
-  components?: Components<Omit<Theme, 'components'>>;
-  palette?: PaletteOptions;
-  shadows?: Shadows;
-  transitions?: TransitionsOptions;
-  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
-  zIndex?: ZIndexOptions;
-  unstable_strictMode?: boolean;
-  unstable_sxConfig?: SxConfig;
-}
-export interface BaseTheme extends SystemTheme {
-  mixins: Mixins;
-  palette: Palette & (CssThemeVariables extends {
-    enabled: true;
-  } ? CssVarsPalette : {});
-  shadows: Shadows;
-  transitions: Transitions;
-  typography: Typography;
-  zIndex: ZIndex;
-  unstable_strictMode?: boolean;
-}
-
-// shut off automatic exporting for the `BaseTheme` above
-export {};
-type CssVarsProperties = CssThemeVariables extends {
-  enabled: true;
-} ? Pick<CssVarsTheme, 'applyStyles' | 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : {};
-
-/**
- * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
- */
-export interface Theme extends BaseTheme, CssVarsProperties {
-  cssVariables?: false;
-  components?: Components<BaseTheme>;
-  unstable_sx: (props: SxProps<Theme>) => CSSObject;
-  unstable_sxConfig: SxConfig;
-}
-
-/**
- * @deprecated
- * Use `import { createTheme } from '@mui/material/styles'` instead.
- */
-export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme;
-
-/**
- * Generate a theme base on the options received.
- * @param options Takes an incomplete theme object and adds the missing parts.
- * @param args Deep merge the arguments with the about to be returned theme.
- * @returns A complete, ready-to-use theme object.
- */
-export default function createThemeNoVars(options?: ThemeOptions, ...args: object[]): Theme;

package/styles/createThemeWithVars.d.ts

@@ -1,350 +0,0 @@
-import { OverridableStringUnion } from '@mui/types';
-import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
-import { ExtractTypographyTokens } from '@mui/system/cssVars';
-import { ThemeOptions, Theme } from "./createThemeNoVars.js";
-import { Palette, PaletteOptions } from "./createPalette.js";
-import { Shadows } from "./shadows.js";
-import { ZIndex } from "./zIndex.js";
-import { Components } from "./components.js";
-
-/**
- * default MD color-schemes
- */
-export type DefaultColorScheme = 'light' | 'dark';
-
-/**
- * The application can add more color-scheme by extending this interface via module augmentation
- *
- * Ex.
- * declare module @mui/material/styles {
- *   interface ColorSchemeOverrides {
- *     foo: true;
- *   }
- * }
- *
- * // SupportedColorScheme = 'light' | 'dark' | 'foo';
- */
-export interface ColorSchemeOverrides {}
-export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverrides>;
-
-/**
- * All color-schemes that the application has
- */
-export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
-export interface Opacity {
-  inputPlaceholder: number;
-  inputUnderline: number;
-  switchTrackDisabled: number;
-  switchTrack: number;
-}
-export type Overlays = [string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined];
-export interface PaletteBackgroundChannel {
-  defaultChannel: string;
-  paperChannel: string;
-}
-export interface PaletteCommonChannel {
-  background: string;
-  backgroundChannel: string;
-  onBackground: string;
-  onBackgroundChannel: string;
-}
-export interface PaletteColorChannel {
-  mainChannel: string;
-  lightChannel: string;
-  darkChannel: string;
-  contrastTextChannel: string;
-}
-export interface PaletteActionChannel {
-  activeChannel: string;
-  selectedChannel: string;
-}
-export interface PaletteTextChannel {
-  primaryChannel: string;
-  secondaryChannel: string;
-}
-export interface PaletteAlert {
-  errorColor: string;
-  infoColor: string;
-  successColor: string;
-  warningColor: string;
-  errorFilledBg: string;
-  infoFilledBg: string;
-  successFilledBg: string;
-  warningFilledBg: string;
-  errorFilledColor: string;
-  infoFilledColor: string;
-  successFilledColor: string;
-  warningFilledColor: string;
-  errorStandardBg: string;
-  infoStandardBg: string;
-  successStandardBg: string;
-  warningStandardBg: string;
-  errorIconColor: string;
-  infoIconColor: string;
-  successIconColor: string;
-  warningIconColor: string;
-}
-export interface PaletteAppBar {
-  defaultBg: string;
-  darkBg: string;
-  darkColor: string;
-}
-export interface PaletteAvatar {
-  defaultBg: string;
-}
-export interface PaletteButton {
-  inheritContainedBg: string;
-  inheritContainedHoverBg: string;
-}
-export interface PaletteChip {
-  defaultBorder: string;
-  defaultAvatarColor: string;
-  defaultIconColor: string;
-}
-export interface PaletteFilledInput {
-  bg: string;
-  hoverBg: string;
-  disabledBg: string;
-}
-export interface PaletteLinearProgress {
-  primaryBg: string;
-  secondaryBg: string;
-  errorBg: string;
-  infoBg: string;
-  successBg: string;
-  warningBg: string;
-}
-export interface PaletteSkeleton {
-  bg: string;
-}
-export interface PaletteSlider {
-  primaryTrack: string;
-  secondaryTrack: string;
-  errorTrack: string;
-  infoTrack: string;
-  successTrack: string;
-  warningTrack: string;
-}
-export interface PaletteSnackbarContent {
-  bg: string;
-  color: string;
-}
-export interface PaletteSpeedDialAction {
-  fabHoverBg: string;
-}
-export interface PaletteStepConnector {
-  border: string;
-}
-export interface PaletteStepContent {
-  border: string;
-}
-export interface PaletteSwitch {
-  defaultColor: string;
-  defaultDisabledColor: string;
-  primaryDisabledColor: string;
-  secondaryDisabledColor: string;
-  errorDisabledColor: string;
-  infoDisabledColor: string;
-  successDisabledColor: string;
-  warningDisabledColor: string;
-}
-export interface PaletteTableCell {
-  border: string;
-}
-export interface PaletteTooltip {
-  bg: string;
-}
-
-// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
-export interface ColorSystemOptions {
-  palette?: PaletteOptions & {
-    background?: Partial<PaletteBackgroundChannel>;
-    common?: Partial<PaletteCommonChannel>;
-    primary?: Partial<PaletteColorChannel>;
-    secondary?: Partial<PaletteColorChannel>;
-    error?: Partial<PaletteColorChannel>;
-    info?: Partial<PaletteColorChannel>;
-    success?: Partial<PaletteColorChannel>;
-    text?: Partial<PaletteTextChannel>;
-    dividerChannel?: Partial<string>;
-    action?: Partial<PaletteActionChannel>;
-    Alert?: Partial<PaletteAlert>;
-    AppBar?: Partial<PaletteAppBar>;
-    Avatar?: Partial<PaletteAvatar>;
-    Button?: Partial<PaletteButton>;
-    Chip?: Partial<PaletteChip>;
-    FilledInput?: Partial<PaletteFilledInput>;
-    LinearProgress?: Partial<PaletteLinearProgress>;
-    Skeleton?: Partial<PaletteSkeleton>;
-    Slider?: Partial<PaletteSlider>;
-    SnackbarContent?: Partial<PaletteSnackbarContent>;
-    SpeedDialAction?: Partial<PaletteSpeedDialAction>;
-    StepConnector?: Partial<PaletteStepConnector>;
-    StepContent?: Partial<PaletteStepContent>;
-    Switch?: Partial<PaletteSwitch>;
-    TableCell?: Partial<PaletteTableCell>;
-    Tooltip?: Partial<PaletteTooltip>;
-  };
-  opacity?: Partial<Opacity>;
-  overlays?: Overlays;
-}
-export interface CssVarsPalette {
-  common: PaletteCommonChannel;
-  primary: PaletteColorChannel;
-  secondary: PaletteColorChannel;
-  error: PaletteColorChannel;
-  info: PaletteColorChannel;
-  success: PaletteColorChannel;
-  warning: PaletteColorChannel;
-  text: PaletteTextChannel;
-  background: PaletteBackgroundChannel;
-  dividerChannel: string;
-  action: PaletteActionChannel;
-  Alert: PaletteAlert;
-  AppBar: PaletteAppBar;
-  Avatar: PaletteAvatar;
-  Button: PaletteButton;
-  Chip: PaletteChip;
-  FilledInput: PaletteFilledInput;
-  LinearProgress: PaletteLinearProgress;
-  Skeleton: PaletteSkeleton;
-  Slider: PaletteSlider;
-  SnackbarContent: PaletteSnackbarContent;
-  SpeedDialAction: PaletteSpeedDialAction;
-  StepConnector: PaletteStepConnector;
-  StepContent: PaletteStepContent;
-  Switch: PaletteSwitch;
-  TableCell: PaletteTableCell;
-  Tooltip: PaletteTooltip;
-}
-export interface ColorSystem {
-  palette: Palette & CssVarsPalette;
-  opacity: Opacity;
-  overlays: Overlays;
-}
-export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
-  /**
-   * @default 'light'
-   */
-  defaultColorScheme?: SupportedColorScheme;
-  /**
-   * Prefix of the generated CSS variables
-   * @default 'mui'
-   */
-  cssVarPrefix?: string;
-  /**
-   * Theme components
-   */
-  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
-  /**
-   * Color schemes configuration
-   */
-  colorSchemes?: Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> & (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {});
-  /**
-   * The strategy to generate CSS variables
-   *
-   * @example 'media'
-   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
-   *
-   * @example '.mode-%s'
-   * Generate CSS variables within a class .mode-light, .mode-dark
-   *
-   * @example '[data-mode-%s]'
-   * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
-   */
-  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
-  /**
-   * The selector to generate the global CSS variables (non-color-scheme related)
-   * @default ':root'
-   * @example ':host' // (for shadow DOM)
-   * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional
-   */
-  rootSelector?: string;
-  /**
-   * If `true`, the CSS color-scheme will not be set.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
-   * @default false
-   */
-  disableCssColorScheme?: boolean;
-  /**
-   * A function to determine if the key, value should be attached as CSS Variable
-   * `keys` is an array that represents the object path keys.
-   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
-   *  then, keys = ['foo', 'bar']
-   *        value = 'var(--test)'
-   */
-  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
-}
-
-// should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
-export interface ThemeVars {
-  font: ExtractTypographyTokens<Theme['typography']>;
-  palette: Omit<ColorSystem['palette'], 'colorScheme' | 'mode' | 'contrastThreshold' | 'tonalOffset' | 'getContrastText' | 'augmentColor'>;
-  opacity: Opacity;
-  overlays: Overlays;
-  shadows: Shadows;
-  shape: Theme['shape'];
-  spacing: string;
-  zIndex: ZIndex;
-}
-type Split<T, K extends keyof T = keyof T> = K extends string | number ? { [k in K]: Exclude<T[K], undefined> } : never;
-type ConcatDeep<T> = T extends Record<string | number, infer V> ? keyof T extends string | number ? V extends string | number ? keyof T : keyof V extends string | number ? `${keyof T}-${ConcatDeep<Split<V>>}` : never : never : never;
-
-/**
- * Does not work for these cases:
- * - { borderRadius: string | number } // the value can't be a union
- * - { shadows: [string, string, ..., string] } // the value can't be an array
- */
-type NormalizeVars<T> = ConcatDeep<Split<T>>;
-
-// shut off automatic exporting for the Generics above
-export {};
-export interface ThemeCssVarOverrides {}
-export type ThemeCssVar = OverridableStringUnion<NormalizeVars<Omit<ThemeVars, 'overlays' | 'shadows' | 'shape'>> | 'shape-borderRadius' | 'shadows-0' | 'shadows-1' | 'shadows-2' | 'shadows-3' | 'shadows-4' | 'shadows-5' | 'shadows-6' | 'shadows-7' | 'shadows-8' | 'shadows-9' | 'shadows-10' | 'shadows-11' | 'shadows-12' | 'shadows-13' | 'shadows-14' | 'shadows-15' | 'shadows-16' | 'shadows-17' | 'shadows-18' | 'shadows-19' | 'shadows-20' | 'shadows-21' | 'shadows-22' | 'shadows-23' | 'shadows-24' | 'overlays-0' | 'overlays-1' | 'overlays-2' | 'overlays-3' | 'overlays-4' | 'overlays-5' | 'overlays-6' | 'overlays-7' | 'overlays-8' | 'overlays-9' | 'overlays-10' | 'overlays-11' | 'overlays-12' | 'overlays-13' | 'overlays-14' | 'overlays-15' | 'overlays-16' | 'overlays-17' | 'overlays-18' | 'overlays-19' | 'overlays-20' | 'overlays-21' | 'overlays-22' | 'overlays-23' | 'overlays-24', ThemeCssVarOverrides>;
-
-/**
- * Theme properties generated by extendTheme and CssVarsProvider
- */
-export interface CssVarsTheme extends ColorSystem {
-  colorSchemes: Partial<Record<SupportedColorScheme, ColorSystem>>;
-  rootSelector: string;
-  colorSchemeSelector: 'media' | 'class' | 'data' | string;
-  cssVarPrefix: string;
-  defaultColorScheme: SupportedColorScheme;
-  vars: ThemeVars;
-  getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
-  getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
-  generateThemeVars: () => ThemeVars;
-  generateStyleSheets: () => Array<Record<string, any>>;
-  generateSpacing: () => Theme['spacing'];
-
-  // Default theme tokens
-  spacing: Theme['spacing'];
-  breakpoints: Theme['breakpoints'];
-  shape: Theme['shape'];
-  typography: Theme['typography'];
-  transitions: Theme['transitions'];
-  shadows: Theme['shadows'];
-  mixins: Theme['mixins'];
-  zIndex: Theme['zIndex'];
-  direction: Theme['direction'];
-  /**
-   * A function to determine if the key, value should be attached as CSS Variable
-   * `keys` is an array that represents the object path keys.
-   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
-   *  then, keys = ['foo', 'bar']
-   *        value = 'var(--test)'
-   */
-  shouldSkipGeneratingVar: (keys: string[], value: string | number) => boolean;
-  unstable_sxConfig: SxConfig;
-  unstable_sx: (props: SxProps<CssVarsTheme>) => CSSObject;
-  applyStyles: ApplyStyles<SupportedColorScheme>;
-}
-
-/**
- * Generate a theme base on the options received.
- * @param options Takes an incomplete theme object and adds the missing parts.
- * @param args Deep merge the arguments with the about to be returned theme.
- * @returns A complete, ready-to-use theme object.
- */
-export default function createThemeWithVars(options?: CssVarsThemeOptions, ...args: object[]): Omit<Theme, 'applyStyles'> & CssVarsTheme;

package/styles/createTransitions.d.ts

@@ -1,51 +0,0 @@
-export interface Easing {
-  easeInOut: string;
-  easeOut: string;
-  easeIn: string;
-  sharp: string;
-}
-export const easing: Easing;
-export interface Duration {
-  shortest: number;
-  shorter: number;
-  short: number;
-  standard: number;
-  complex: number;
-  enteringScreen: number;
-  leavingScreen: number;
-}
-export const duration: Duration;
-export interface TransitionsOptions {
-  easing?: Partial<Easing>;
-  duration?: Partial<Duration>;
-  create?: (props: string | string[], options?: Partial<{
-    duration: number | string;
-    easing: string;
-    delay: number | string;
-  }>) => string;
-  getAutoHeightDuration?: (height: number) => number;
-}
-
-/**
- * @internal
- * @param props
- * @param options
- */
-export function create(props: string | string[], options?: Partial<{
-  duration: number | string;
-  easing: string;
-  delay: number | string;
-}>): string;
-
-/**
- * @internal
- * @param height
- */
-export function getAutoHeightDuration(height: number): number;
-export interface Transitions {
-  easing: Easing;
-  duration: Duration;
-  create: typeof create;
-  getAutoHeightDuration: typeof getAutoHeightDuration;
-}
-export default function createTransitions(inputTransitions: TransitionsOptions): Transitions;

package/styles/createTypography.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import * as CSS from 'csstype';
-import { Palette } from "./createPalette.js";
-export type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
-export interface FontStyle {
-  fontFamily: React.CSSProperties['fontFamily'];
-  fontSize: number;
-  fontWeightLight: React.CSSProperties['fontWeight'];
-  fontWeightRegular: React.CSSProperties['fontWeight'];
-  fontWeightMedium: React.CSSProperties['fontWeight'];
-  fontWeightBold: React.CSSProperties['fontWeight'];
-  htmlFontSize: number;
-}
-export type NormalCssProperties = CSS.Properties<number | string>;
-export type Fontface = CSS.AtRule.FontFace & {
-  fallbacks?: CSS.AtRule.FontFace[];
-};
-
-/**
- * Allows the user to augment the properties available
- */
-export interface BaseCSSProperties extends NormalCssProperties {
-  '@font-face'?: Fontface | Fontface[];
-}
-export interface CSSProperties extends BaseCSSProperties {
-  // Allow pseudo selectors and media queries
-  // `unknown` is used since TS does not allow assigning an interface without
-  // an index signature to one with an index signature. This is to allow type safe
-  // module augmentation.
-  // Technically we want any key not typed in `BaseCSSProperties` to be of type
-  // `CSSProperties` but this doesn't work. The index signature needs to cover
-  // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]`
-  // but this would not allow assigning React.CSSProperties to CSSProperties
-  [k: string]: unknown | CSSProperties;
-}
-export interface FontStyleOptions extends Partial<FontStyle> {
-  allVariants?: React.CSSProperties;
-}
-
-// TODO: which one should actually be allowed to be subject to module augmentation?
-// current type vs interface decision is kept for historical reasons until we
-// made a decision
-export type TypographyStyle = CSSProperties;
-export interface TypographyStyleOptions extends TypographyStyle {}
-export interface TypographyUtils {
-  pxToRem: (px: number) => string;
-}
-export interface Typography extends Record<Variant, TypographyStyle>, FontStyle, TypographyUtils {}
-export interface TypographyOptions extends Partial<Record<Variant, TypographyStyleOptions> & FontStyleOptions> {}
-export default function createTypography(palette: Palette, typography: TypographyOptions | ((palette: Palette) => TypographyOptions)): Typography;