@mui/material 5.14.2 → 5.14.3

package/FormHelperText/FormHelperText.d.ts

@@ -7,8 +7,11 @@ import { FormHelperTextClasses } from './formHelperTextClasses';
 
 export interface FormHelperTextPropsVariantOverrides {}
 
-export interface FormHelperTextTypeMap<P = {}, D extends React.ElementType = 'p'> {
-  props: P & {
+export interface FormHelperTextTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'p',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      *
@@ -56,7 +59,7 @@ export interface FormHelperTextTypeMap<P = {}, D extends React.ElementType = 'p'
       FormHelperTextPropsVariantOverrides
     >;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -71,8 +74,10 @@ export interface FormHelperTextTypeMap<P = {}, D extends React.ElementType = 'p'
 declare const FormHelperText: OverridableComponent<FormHelperTextTypeMap>;
 
 export type FormHelperTextProps<
-  D extends React.ElementType = FormHelperTextTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<FormHelperTextTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = FormHelperTextTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<FormHelperTextTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default FormHelperText;

package/FormLabel/FormLabel.d.ts

@@ -51,9 +51,12 @@ export interface FormLabelOwnProps {
   sx?: SxProps<Theme>;
 }
 
-export interface FormLabelTypeMap<P = {}, D extends React.ElementType = 'label'> {
-  props: P & FormLabelBaseProps & FormLabelOwnProps;
-  defaultComponent: D;
+export interface FormLabelTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'label',
+> {
+  props: AdditionalProps & FormLabelBaseProps & FormLabelOwnProps;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -72,14 +75,16 @@ declare const FormLabel: OverridableComponent<FormLabelTypeMap>;
 
 export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
 
-export interface ExtendFormLabelTypeMap<M extends OverridableTypeMap> {
-  props: M['props'] & Pick<FormLabelOwnProps, 'filled' | 'color'>;
-  defaultComponent: M['defaultComponent'];
+export interface ExtendFormLabelTypeMap<TypeMap extends OverridableTypeMap> {
+  props: TypeMap['props'] & Pick<FormLabelOwnProps, 'filled' | 'color'>;
+  defaultComponent: TypeMap['defaultComponent'];
 }
 
 export type FormLabelProps<
-  D extends React.ElementType = FormLabelTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<FormLabelTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = FormLabelTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<FormLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default FormLabel;

package/Grid/Grid.d.ts

@@ -83,8 +83,11 @@ type Breakpoints = IfEquals<
   CustomBreakpoints
 >;
 
-export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P &
+export interface GridTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps &
     SystemProps<Theme> & {
       /**
        * The content of the component.
@@ -150,7 +153,7 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        */
       zeroMinWidth?: boolean;
     } & Breakpoints;
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -166,8 +169,10 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
 declare const Grid: OverridableComponent<GridTypeMap>;
 
 export type GridProps<
-  D extends React.ElementType = GridTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<GridTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = GridTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Grid;

package/Icon/Icon.d.ts

@@ -9,8 +9,11 @@ export interface IconPropsSizeOverrides {}
 
 export interface IconPropsColorOverrides {}
 
-export interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {
-  props: P & {
+export interface IconTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'span',
+> {
+  props: AdditionalProps & {
     /**
      * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
      * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
@@ -56,7 +59,7 @@ export interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -72,8 +75,10 @@ export interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {
 declare const Icon: OverridableComponent<IconTypeMap> & { muiName: string };
 
 export type IconProps<
-  D extends React.ElementType = IconTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<IconTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = IconTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<IconTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Icon;

package/IconButton/IconButton.d.ts

@@ -11,10 +11,10 @@ export interface IconButtonPropsColorOverrides {}
 export interface IconButtonPropsSizeOverrides {}
 
 export type IconButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'button',
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: P & {
+  props: AdditionalProps & {
     /**
      * The icon to display.
      */
@@ -62,7 +62,7 @@ export type IconButtonTypeMap<
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -81,8 +81,10 @@ export type IconButtonTypeMap<
 declare const IconButton: ExtendButtonBase<IconButtonTypeMap>;
 
 export type IconButtonProps<
-  D extends React.ElementType = IconButtonTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<IconButtonTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = IconButtonTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<IconButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default IconButton;

package/ImageList/ImageList.d.ts

@@ -7,8 +7,11 @@ import { ImageListClasses } from './imageListClasses';
 
 export interface ImageListPropsVariantOverrides {}
 
-export interface ImageListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
-  props: P & {
+export interface ImageListTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'ul',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component, normally `ImageListItem`s.
      */
@@ -45,7 +48,7 @@ export interface ImageListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
       ImageListPropsVariantOverrides
     >;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -60,8 +63,10 @@ export interface ImageListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
 declare const ImageList: OverridableComponent<ImageListTypeMap>;
 
 export type ImageListProps<
-  D extends React.ElementType = ImageListTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ImageListTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ImageListTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ImageListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ImageList;

package/ImageListItem/ImageListItem.d.ts

@@ -4,8 +4,11 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ImageListItemClasses } from './imageListItemClasses';
 
-export interface ImageListItemTypeMap<P = {}, D extends React.ElementType = 'li'> {
-  props: P & {
+export interface ImageListItemTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'li',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component, normally an `<img>`.
      */
@@ -29,7 +32,7 @@ export interface ImageListItemTypeMap<P = {}, D extends React.ElementType = 'li'
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -44,8 +47,10 @@ export interface ImageListItemTypeMap<P = {}, D extends React.ElementType = 'li'
 declare const ImageListItem: OverridableComponent<ImageListItemTypeMap>;
 
 export type ImageListItemProps<
-  D extends React.ElementType = ImageListItemTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ImageListItemTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ImageListItemTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ImageListItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ImageListItem;

package/InputAdornment/InputAdornment.d.ts

@@ -4,8 +4,11 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
 import { InputAdornmentClasses } from './inputAdornmentClasses';
 
-export interface InputAdornmentTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
+export interface InputAdornmentTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & {
     /**
      * Override or extend the styles applied to the component.
      */
@@ -40,7 +43,7 @@ export interface InputAdornmentTypeMap<P = {}, D extends React.ElementType = 'di
      */
     variant?: 'standard' | 'outlined' | 'filled';
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -55,8 +58,10 @@ export interface InputAdornmentTypeMap<P = {}, D extends React.ElementType = 'di
 declare const InputAdornment: OverridableComponent<InputAdornmentTypeMap>;
 
 export type InputAdornmentProps<
-  D extends React.ElementType = InputAdornmentTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<InputAdornmentTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = InputAdornmentTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<InputAdornmentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default InputAdornment;

package/InputLabel/InputLabel.d.ts

@@ -9,10 +9,10 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 export interface InputLabelPropsSizeOverrides {}
 
 export type InputLabelTypeMap<
-  P = {},
-  D extends React.ElementType = 'label',
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'label',
 > = ExtendFormLabelTypeMap<{
-  props: P & {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -66,7 +66,7 @@ export type InputLabelTypeMap<
      */
     variant?: 'standard' | 'outlined' | 'filled';
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -83,8 +83,10 @@ export type InputLabelTypeMap<
 declare const InputLabel: OverridableComponent<InputLabelTypeMap>;
 
 export type InputLabelProps<
-  D extends React.ElementType = InputLabelTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<InputLabelTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = InputLabelTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<InputLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default InputLabel;

package/Link/Link.d.ts

@@ -3,12 +3,15 @@ import { DistributiveOmit } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '../styles';
-import { TypographyProps } from '../Typography';
+import { TypographyOwnProps } from '../Typography';
 import { LinkClasses } from './linkClasses';
 
-export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
-  props: P &
-    DistributiveOmit<LinkBaseProps, 'classes'> & {
+export interface LinkTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'a',
+> {
+  props: AdditionalProps &
+    LinkBaseProps & {
       /**
        * The content of the component.
        */
@@ -21,7 +24,7 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
        * The color of the link.
        * @default 'primary'
        */
-      color?: TypographyProps['color'];
+      color?: TypographyOwnProps['color'];
       /**
        * The system prop that allows defining system overrides as well as additional CSS styles.
        */
@@ -29,7 +32,7 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
       /**
        * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
        */
-      TypographyClasses?: TypographyProps['classes'];
+      TypographyClasses?: TypographyOwnProps['classes'];
       /**
        * Controls when the link should have an underline.
        * @default 'always'
@@ -39,9 +42,9 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
        * Applies the theme typography styles.
        * @default 'inherit'
        */
-      variant?: TypographyProps['variant'];
+      variant?: TypographyOwnProps['variant'];
     };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -58,12 +61,16 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
  */
 declare const Link: OverridableComponent<LinkTypeMap>;
 
-export type LinkBaseProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> &
-  DistributiveOmit<TypographyProps, 'children' | 'component' | 'color' | 'ref' | 'variant'>;
+export type LinkBaseProps = DistributiveOmit<
+  TypographyOwnProps,
+  'children' | 'color' | 'variant' | 'classes'
+>;
 
 export type LinkProps<
-  D extends React.ElementType = LinkTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<LinkTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = LinkTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<LinkTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Link;

package/List/List.d.ts

@@ -4,8 +4,11 @@ import { Theme } from '..';
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent';
 import { ListClasses } from './listClasses';
 
-export interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
-  props: P & {
+export interface ListTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'ul',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -35,18 +38,20 @@ export interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
  * utility to create component types that inherit props from List.
  */
-export interface ExtendListTypeMap<M extends OverridableTypeMap> {
-  props: M['props'] & ListTypeMap['props'];
-  defaultComponent: M['defaultComponent'];
+export interface ExtendListTypeMap<TypeMap extends OverridableTypeMap> {
+  props: TypeMap['props'] & ListTypeMap['props'];
+  defaultComponent: TypeMap['defaultComponent'];
 }
 
-export type ExtendList<M extends OverridableTypeMap> = OverridableComponent<ExtendListTypeMap<M>>;
+export type ExtendList<TypeMap extends OverridableTypeMap> = OverridableComponent<
+  ExtendListTypeMap<TypeMap>
+>;
 
 /**
  *
@@ -62,8 +67,10 @@ export type ExtendList<M extends OverridableTypeMap> = OverridableComponent<Exte
 declare const List: ExtendList<ListTypeMap>;
 
 export type ListProps<
-  D extends React.ElementType = ListTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ListTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ListTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default List;

package/ListItem/ListItem.d.ts

@@ -84,8 +84,8 @@ export interface ListItemBaseProps {
   sx?: SxProps<Theme>;
 }
 
-export interface ListItemTypeMap<P, D extends React.ElementType> {
-  props: P &
+export interface ListItemTypeMap<AdditionalProps, DefaultComponent extends React.ElementType> {
+  props: AdditionalProps &
     ListItemBaseProps & {
       /**
        * The components used for each slot inside.
@@ -132,7 +132,7 @@ export interface ListItemTypeMap<P, D extends React.ElementType> {
         root?: React.ElementType;
       };
     };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -177,9 +177,11 @@ declare const ListItem: ExtendButtonBase<
     >
   >;
 
-export type ListItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<
-  ListItemTypeMap<P, D>,
-  D
->;
+export type ListItemProps<
+  RootComponent extends React.ElementType = 'li',
+  AdditionalProps = {},
+> = OverrideProps<ListItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ListItem;

package/ListItemButton/ListItemButton.d.ts

@@ -59,11 +59,11 @@ export interface ListItemButtonBaseProps {
 }
 
 export type ListItemButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'div',
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
 > = ExtendButtonBaseTypeMap<{
-  props: P & ListItemButtonBaseProps;
-  defaultComponent: D;
+  props: AdditionalProps & ListItemButtonBaseProps;
+  defaultComponent: DefaultComponent;
 }>;
 
 /**
@@ -80,8 +80,10 @@ export type ListItemButtonTypeMap<
 declare const ListItemButton: ExtendButtonBase<ListItemButtonTypeMap>;
 
 export type ListItemButtonProps<
-  D extends React.ElementType = ListItemButtonTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ListItemButtonTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ListItemButtonTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ListItemButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ListItemButton;

package/ListSubheader/ListSubheader.d.ts

@@ -4,8 +4,11 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ListSubheaderClasses } from './listSubheaderClasses';
 
-export interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'> {
-  props: P & {
+export interface ListSubheaderTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'li',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -39,7 +42,7 @@ export interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'
      */
     sx?: SxProps<Theme>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -55,8 +58,10 @@ export interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'
 declare const ListSubheader: OverridableComponent<ListSubheaderTypeMap>;
 
 export type ListSubheaderProps<
-  D extends React.ElementType = ListSubheaderTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<ListSubheaderTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = ListSubheaderTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<ListSubheaderTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default ListSubheader;

package/Menu/Menu.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { MenuOwnerState, SlotComponentProps } from '@mui/base';
 import { InternalStandardProps as StandardProps } from '..';
-import { PaperProps } from '../Paper';
+import Paper, { PaperProps } from '../Paper';
 import { PopoverProps } from '../Popover';
 import { MenuListProps } from '../MenuList';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { MenuClasses } from './menuClasses';
 
-export interface MenuProps extends StandardProps<PopoverProps> {
+export interface MenuProps
+  extends StandardProps<Omit<PopoverProps, 'slots' | 'slotProps'>, 'children'> {
   /**
    * An HTML element, or a function that returns one.
    * It's used to set the position of the menu.
@@ -58,6 +60,25 @@ export interface MenuProps extends StandardProps<PopoverProps> {
    * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
    */
   PopoverClasses?: PopoverProps['classes'];
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots?: {
+    root?: React.ElementType;
+    paper?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps?: {
+    root?: SlotComponentProps<typeof Menu, {}, MenuOwnerState>;
+    paper?: SlotComponentProps<typeof Paper, {}, {}>;
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */