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

package/modern/cssVars/index.d.ts

@@ -1,7 +0,0 @@
-export { default } from "./createCssVarsProvider.js";
-export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue } from "./createCssVarsProvider.js";
-export { default as prepareCssVars } from "./prepareCssVars.js";
-export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
-export type { ExtractTypographyTokens } from "./prepareTypographyVars.js";
-export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
-export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";

package/modern/cssVars/prepareCssVars.d.ts

@@ -1,16 +0,0 @@
-export interface DefaultCssVarsTheme {
-  colorSchemes?: Record<string, any>;
-  defaultColorScheme?: string;
-}
-declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
-  prefix?: string;
-  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
-  disableCssColorScheme?: boolean;
-  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-  getSelector?: (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | Record<string, any>;
-}): {
-  vars: ThemeVars;
-  generateThemeVars: () => ThemeVars;
-  generateStyleSheets: () => Record<string, any>[];
-};
-export default prepareCssVars;

package/modern/cssVars/prepareTypographyVars.d.ts

@@ -1,4 +0,0 @@
-type RecordPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? never : T[K] extends Record<string, any> ? K : never }[keyof T];
-export type ExtractTypographyTokens<T> = { [K in RecordPropertyNames<T>]: string };
-export default function prepareTypographyVars<T extends Record<string, any>>(typography: T): ExtractTypographyTokens<T>;
-export {};

package/modern/cssVars/useCurrentColorScheme.d.ts

@@ -1,54 +0,0 @@
-export type Mode = 'light' | 'dark' | 'system';
-export type SystemMode = Exclude<Mode, 'system'>;
-export interface State<SupportedColorScheme extends string> {
-  /**
-   * User selected mode.
-   * Note: on the server, mode is always undefined
-   */
-  mode: 'light' | 'dark' | 'system' | undefined;
-  /**
-   * Only valid if `mode: 'system'`, either 'light' | 'dark'.
-   */
-  systemMode: 'light' | 'dark' | undefined;
-  /**
-   * The color scheme for the light mode.
-   */
-  lightColorScheme: SupportedColorScheme;
-  /**
-   * The color scheme for the dark mode.
-   */
-  darkColorScheme: SupportedColorScheme;
-}
-export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
-  /**
-   * The current application color scheme. It is always `undefined` on the server.
-   */
-  colorScheme: SupportedColorScheme | undefined;
-  /**
-   * `mode` is saved to internal state and localStorage
-   * If `mode` is null, it will be reset to the defaultMode
-   */
-  setMode: (mode: Mode | null) => void;
-  /**
-   * `colorScheme` is saved to internal state and localStorage
-   * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
-   */
-  setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
-    light: SupportedColorScheme | null;
-    dark: SupportedColorScheme | null;
-  }> | null) => void;
-};
-export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
-export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
-interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
-  defaultLightColorScheme: SupportedColorScheme;
-  defaultDarkColorScheme: SupportedColorScheme;
-  supportedColorSchemes: Array<SupportedColorScheme>;
-  defaultMode?: Mode;
-  modeStorageKey?: string;
-  colorSchemeStorageKey?: string;
-  storageWindow?: Window | null;
-  noSsr?: boolean;
-}
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
-export {};

package/modern/display/display.d.ts

@@ -1,2 +0,0 @@
-import { PropsFor, display } from "../Box/index.js";
-export type DisplayProps = PropsFor<typeof display>;

package/modern/display/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./display.js";
-export * from "./display.js";

package/modern/flexbox/flexbox.d.ts

@@ -1,2 +0,0 @@
-import { PropsFor, flexbox } from "../Box/index.js";
-export type FlexboxProps = PropsFor<typeof flexbox>;

package/modern/flexbox/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./flexbox.js";
-export * from "./flexbox.js";

package/modern/getThemeValue/getThemeValue.d.ts

@@ -1 +0,0 @@
-export default function getThemeValue(prop: string, value: any, theme: object): any;

package/modern/getThemeValue/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./getThemeValue.js";
-export * from "./getThemeValue.js";

package/modern/index.d.ts

@@ -1,79 +0,0 @@
-// disable automatic export
-export {};
-export * from "./borders/index.js";
-export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from "./breakpoints/index.js";
-export { default as cssContainerQueries, type CssContainerQueries } from "./cssContainerQueries/index.js";
-export { default as compose } from "./compose/index.js";
-export * from "./display/index.js";
-export * from "./flexbox/index.js";
-export * from "./cssGrid/index.js";
-export * from "./palette/index.js";
-export * from "./positions/index.js";
-export * from "./shadows/index.js";
-export * from "./sizing/index.js";
-export * from "./typography/index.js";
-export { default as unstable_getThemeValue } from "./getThemeValue/index.js";
-
-/**
- * The `css` function accepts arrays as values for mobile-first responsive styles.
- * Note that this extends to non-theme values also. For example `display=['none', 'block']`
- * will also works.
- */
-export type ResponsiveStyleValue<T> = T | Array<T | null> | {
-  [key: string]: T | null;
-};
-export { DefaultTheme } from '@mui/private-theming';
-export { css, keyframes, StyledEngineProvider, Interpolation, CSSInterpolation, CSSObject } from '@mui/styled-engine';
-export { default as GlobalStyles } from "./GlobalStyles/index.js";
-export type { GlobalStylesProps } from "./GlobalStyles/index.js";
-export * from "./style/index.js";
-export * from "./spacing/index.js";
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
-export * from "./styleFunctionSx/index.js";
-
-// TODO: Remove this function in v6.
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function experimental_sx(): any;
-export { default as Box } from "./Box/index.js";
-export * from "./Box/index.js";
-export { default as createBox } from "./createBox/index.js";
-export * from "./createBox/index.js";
-export { default as createStyled } from "./createStyled/index.js";
-export * from "./createStyled/index.js";
-export { default as styled } from "./styled/index.js";
-export * from "./styled/index.js";
-export { default as createTheme } from "./createTheme/index.js";
-export * from "./createTheme/index.js";
-export { default as createBreakpoints } from "./createBreakpoints/createBreakpoints.js";
-export * from "./createBreakpoints/createBreakpoints.js";
-export { default as createSpacing } from "./createTheme/createSpacing.js";
-export { SpacingOptions, Spacing } from "./createTheme/createSpacing.js";
-export { default as shape } from "./createTheme/shape.js";
-export * from "./createTheme/shape.js";
-export { default as useThemeProps, getThemeProps } from "./useThemeProps/index.js";
-export { default as useTheme } from "./useTheme/index.js";
-export * from "./useTheme/index.js";
-export { default as useThemeWithoutDefault } from "./useThemeWithoutDefault/index.js";
-export * from "./useThemeWithoutDefault/index.js";
-export { default as useMediaQuery } from "./useMediaQuery/index.js";
-export * from "./useMediaQuery/index.js";
-export * from "./colorManipulator/index.js";
-export { default as ThemeProvider } from "./ThemeProvider/index.js";
-export * from "./ThemeProvider/index.js";
-export { default as unstable_memoTheme } from "./memoTheme.js";
-export { default as unstable_createCssVarsProvider, CreateCssVarsProviderResult } from "./cssVars/index.js";
-export { default as unstable_createGetCssVar } from "./cssVars/createGetCssVar.js";
-export { default as unstable_cssVarsParser } from "./cssVars/cssVarsParser.js";
-export { default as unstable_prepareCssVars } from "./cssVars/prepareCssVars.js";
-export { default as unstable_createCssVarsTheme } from "./cssVars/createCssVarsTheme.js";
-export * from "./cssVars/index.js";
-export { default as responsivePropType } from "./responsivePropType/index.js";
-export { default as createContainer } from "./Container/createContainer.js";
-export * from "./Container/createContainer.js";
-export { default as Container } from "./Container/index.js";
-export * from "./Container/index.js";
-export { default as Grid } from "./Grid/index.js";
-export * from "./Grid/index.js";
-export { default as Stack } from "./Stack/index.js";
-export * from "./Stack/index.js";
-export * from "./version/index.js";

package/modern/memoTheme.d.ts

@@ -1,12 +0,0 @@
-import { CSSInterpolation } from '@mui/styled-engine';
-type ThemeStyleFunction<T> = (props: {
-  theme: T;
-}) => CSSInterpolation;
-/**
- * Memoize style function on theme.
- * Intended to be used in styled() calls that only need access to the theme.
- */
-export default function unstable_memoTheme<T>(styleFn: ThemeStyleFunction<T>): (props: {
-  theme: T;
-}) => string | number | boolean | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").ArrayCSSInterpolation | null;
-export {};

package/modern/memoize/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./memoize.js";

package/modern/memoize/memoize.d.ts

@@ -1 +0,0 @@
-export default function memoize<ArgType = any, ReturnType = any>(fn: (arg: ArgType) => ReturnType): (arg: ArgType) => ReturnType;

package/modern/merge/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./merge.js";

package/modern/merge/merge.d.ts

@@ -1 +0,0 @@
-export default function merge(acc: object, item: object): object;

package/modern/palette/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./palette.js";
-export * from "./palette.js";

package/modern/palette/palette.d.ts

@@ -1,4 +0,0 @@
-import { PropsFor, SimpleStyleFunction, palette } from "../Box/index.js";
-export const color: SimpleStyleFunction<'color'>;
-export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;

package/modern/positions/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./positions.js";
-export * from "./positions.js";

package/modern/positions/positions.d.ts

@@ -1,2 +0,0 @@
-import { PropsFor, positions } from "../Box/index.js";
-export type PositionsProps = PropsFor<typeof positions>;

package/modern/preprocessStyles.d.ts

@@ -1,5 +0,0 @@
-export default function preprocessStyles(input: any): {
-  variants: any;
-  style: any;
-  isProcessed: boolean;
-};

package/modern/propsToClassKey/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./propsToClassKey.js";

package/modern/propsToClassKey/propsToClassKey.d.ts

@@ -1 +0,0 @@
-export default function propsToClassKey(props: object): string;

package/modern/responsivePropType/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./responsivePropType.js";

package/modern/responsivePropType/responsivePropType.d.ts

@@ -1,2 +0,0 @@
-declare const responsivePropType: object;
-export default responsivePropType;

package/modern/shadows/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./shadows.js";

package/modern/shadows/shadows.d.ts

@@ -1,2 +0,0 @@
-import { PropsFor, shadows } from "../Box/index.js";
-export type ShadowsProps = PropsFor<typeof shadows>;

package/modern/sizing/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./sizing.js";
-export * from "./sizing.js";

package/modern/sizing/sizing.d.ts

@@ -1,11 +0,0 @@
-import { PropsFor, SimpleStyleFunction, sizing } from "../Box/index.js";
-export const width: SimpleStyleFunction<'width'>;
-export const maxWidth: SimpleStyleFunction<'maxWidth'>;
-export const minWidth: SimpleStyleFunction<'minWidth'>;
-export const height: SimpleStyleFunction<'height'>;
-export const maxHeight: SimpleStyleFunction<'maxHeight'>;
-export const minHeight: SimpleStyleFunction<'minHeight'>;
-export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
-export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
-export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;

package/modern/spacing/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./spacing.js";
-export * from "./spacing.js";

package/modern/spacing/spacing.d.ts

@@ -1,18 +0,0 @@
-import { SimpleStyleFunction, spacing, PropsFor } from "../Box/index.js";
-export type SpacingValueType = string | number | null | undefined;
-export type SpacingProps = PropsFor<typeof spacing>;
-export function createUnarySpacing<Spacing>(theme: {
-  spacing: Spacing;
-}): Spacing extends number ? (abs: number | string) => number | number : Spacing extends any[] ? <Index extends number>(abs: Index | string) => Spacing[Index] | string : Spacing extends (...args: unknown[]) => unknown ? Spacing :
-// warns in Dev
-() => undefined;
-export function createUnaryUnit<Spacing>(theme: {
-  spacing: Spacing;
-}, themeKey: string, defaultValue: Spacing, propName: string): Spacing extends number ? (abs: SpacingValueType) => number | number : Spacing extends any[] ? <Index extends number>(abs: Index | string) => Spacing[Index] | string : Spacing extends (...args: unknown[]) => unknown ? Spacing :
-// warns in Dev
-() => undefined;
-export const margin: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginX' | 'marginY' | 'marginInline' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlock' | 'marginBlockStart' | 'marginBlockEnd'>;
-export type MarginProps = PropsFor<typeof margin>;
-export const padding: SimpleStyleFunction<'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
-export function getValue(transformer: (prop: SpacingValueType) => SpacingValueType, propValue: SpacingValueType): SpacingValueType;
-export type PaddingProps = PropsFor<typeof padding>;

package/modern/style/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./style.js";
-export * from "./style.js";

package/modern/style/style.d.ts

@@ -1,19 +0,0 @@
-import { CSSObject } from '@mui/styled-engine';
-import { StyleFunction } from "../Box/index.js";
-export type TransformFunction = (cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject;
-export interface StyleOptions<PropKey> {
-  cssProperty?: PropKey | keyof React.CSSProperties | false;
-  prop: PropKey;
-  /**
-   * dot access in `Theme`
-   */
-  themeKey?: string;
-  transform?: TransformFunction;
-}
-export function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
-  theme?: Theme;
-}> & {
-  filterProps: string[];
-};
-export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;

package/modern/styleFunctionSx/AliasesCSSProperties.d.ts

@@ -1,269 +0,0 @@
-import { StandardCSSProperties } from "./StandardCssProperties.js";
-export interface AliasesCSSProperties {
-  /**
-   * The **`background-color`** CSS property sets the background color of an element.
-   *
-   * **Initial value**: `transparent`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/background-color
-   */
-  bgcolor?: StandardCSSProperties['backgroundColor'];
-  /**
-   * The **`margin`** CSS property sets the margin on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin
-   */
-  m?: StandardCSSProperties['margin'];
-  /**
-   * The **`margin-top`** CSS property sets the margin on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
-   */
-  mt?: StandardCSSProperties['marginTop'];
-  /**
-   * The **`margin-right`** CSS property sets the margin on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
-   */
-  mr?: StandardCSSProperties['marginRight'];
-  /**
-   * The **`margin-bottom`** CSS property sets the margin on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
-   */
-  mb?: StandardCSSProperties['marginBottom'];
-  /**
-   * The **`margin-left`** CSS property sets the margin on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
-   */
-  ml?: StandardCSSProperties['marginLeft'];
-  /**
-   * The **`mx`** property is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin on the left and right side of an element. A positive value places it
-   * farther from its neighbors, while a negative value places it closer.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
-   */
-  mx?: StandardCSSProperties['marginLeft'];
-  /**
-   * The **`marginX`** property is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin on the left and right side of an element. A positive value
-   * places it farther from its neighbors, while a negative value places it closer.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
-   */
-  marginX?: StandardCSSProperties['marginLeft'];
-  /**
-   * The **`my`** property is shorthand for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin on the top and bottom of an element. A positive value places it
-   * farther from its neighbors, while a negative value places it closer.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
-   */
-  my?: StandardCSSProperties['marginTop'];
-  /**
-   * The **`marginY`** property is shorthand for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin on the top and bottom of an element. A positive value places
-   * it farther from its neighbors, while a negative value places it closer.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **3** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
-   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
-   */
-  marginY?: StandardCSSProperties['marginTop'];
-  /**
-   * The **`padding`** CSS property sets the padding on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding
-   */
-  p?: StandardCSSProperties['padding'];
-  /**
-   * The **`padding-top`** CSS property sets the height of the padding at the top of an element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
-   */
-  pt?: StandardCSSProperties['paddingTop'];
-  /**
-   * The **`padding-right`** CSS property sets the width of the padding at the right side of an element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
-   */
-  pr?: StandardCSSProperties['paddingRight'];
-  /**
-   * The **`padding-bottom`** CSS property sets the height of the padding on the bottom of an element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
-   */
-  pb?: StandardCSSProperties['paddingBottom'];
-  /**
-   * The **`padding-left`** CSS property sets the width of the padding at the left side of an element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
-   */
-  pl?: StandardCSSProperties['paddingLeft'];
-  /**
-   * The **`px`** property is shorthand for the CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding at the left and right side of an element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
-   */
-  px?: StandardCSSProperties['paddingLeft'];
-  /**
-   * The **`paddingX`** property is shorthand for the CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding at the left and right sides of an element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
-   */
-  paddingX?: StandardCSSProperties['paddingLeft'];
-  /**
-   * The **`py`** property is shorthand for the CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding at the top and bottom of an element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
-   */
-  py?: StandardCSSProperties['paddingTop'];
-  /**
-   * The **`paddingY`** property is shorthand for the CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding at the top and bottom of an element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
-   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
-   */
-  paddingY?: StandardCSSProperties['paddingTop'];
-  /**
-   * The **`typography`** property  is shorthand for the CSS properties **`font-family`**, **`font-weight`**, **`font-size`**, **`line-height`**, **`letter-spacing`** and **`text-transform``**.
-   * It takes the values defined under `theme.typography` and spreads them on the element.
-   *
-   * **Initial value**: `0`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **2**  |  **1**  | **1**  | **12** | **5.5** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/font-family
-   * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
-   * @see https://developer.mozilla.org/docs/Web/CSS/font-size
-   * @see https://developer.mozilla.org/docs/Web/CSS/line-height
-   * @see https://developer.mozilla.org/docs/Web/CSS/letter-spacing
-   * @see https://developer.mozilla.org/docs/Web/CSS/text-transform
-   */
-  typography?: string;
-  /**
-   * The **`displayPrint`** property sets the display value for the element when the page is printed.
-   *
-   * **Initial value**: `inline`
-   *
-   * | Chrome | Firefox | Safari |  Edge  |  IE   |
-   * | :----: | :-----: | :----: | :----: | :---: |
-   * | **1**  |  **1**  | **1**  | **12** | **4** |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/display
-   */
-  displayPrint?: StandardCSSProperties['display'];
-}