1
0
Fork 0

worked on GarageApp stuff

This commit is contained in:
Techognito 2025-08-25 17:46:11 +02:00
parent 60aaf17af3
commit eb606572b0
51919 changed files with 2168177 additions and 18 deletions

53
node_modules/@mui/system/esm/Box/Box.d.ts generated vendored Normal file
View file

@ -0,0 +1,53 @@
import * as React from 'react';
import { OverridableComponent, OverrideProps } from '@mui/types';
import { Theme as SystemTheme } from "../createTheme/index.js";
import { SxProps, AllSystemCSSProperties, ResponsiveStyleValue, OverwriteCSSProperties, AliasesCSSProperties } from "../styleFunctionSx/index.js";
import { PropsFor } from "../style/index.js";
import { ComposedStyleFunction } from "../compose/index.js";
import borders from "../borders/index.js";
import display from "../display/index.js";
import flexbox from "../flexbox/index.js";
import grid from "../cssGrid/index.js";
import palette from "../palette/index.js";
import positions from "../positions/index.js";
import shadows from "../shadows/index.js";
import sizing from "../sizing/index.js";
import spacing from "../spacing/index.js";
import typography from "../typography/index.js";
export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
export type SimpleSystemKeys = keyof PropsFor<ComposedStyleFunction<[typeof borders, typeof display, typeof flexbox, typeof grid, typeof palette, typeof positions, typeof shadows, typeof sizing, typeof spacing, typeof typography]>>;
// The SimpleSystemKeys are subset of the AllSystemCSSProperties, so this should be ok
// This is needed as these are used as keys inside AllSystemCSSProperties
type StandardSystemKeys = Extract<SimpleSystemKeys, keyof AllSystemCSSProperties>;
export type SystemProps<Theme extends object = {}> = { [K in StandardSystemKeys]?: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) };
export interface BoxOwnProps<Theme extends object = SystemTheme> extends SystemProps<Theme> {
children?: React.ReactNode;
ref?: React.Ref<unknown>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div', Theme extends object = SystemTheme> {
props: AdditionalProps & BoxOwnProps<Theme>;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Box (Joy UI)](https://mui.com/joy-ui/react-box/)
* - [Box (Material UI)](https://mui.com/material-ui/react-box/)
* - [Box (MUI System)](https://mui.com/system/react-box/)
*
* API:
*
* - [Box API](https://mui.com/system/api/box/)
*/
declare const Box: OverridableComponent<BoxTypeMap>;
export type BoxProps<RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Box;

30
node_modules/@mui/system/esm/Box/Box.js generated vendored Normal file
View file

@ -0,0 +1,30 @@
'use client';
import PropTypes from 'prop-types';
import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
import createBox from "../createBox/index.js";
import boxClasses from "./boxClasses.js";
const Box = createBox({
defaultClassName: boxClasses.root,
generateClassName: ClassNameGenerator.generate
});
process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: PropTypes.node,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export default Box;

7
node_modules/@mui/system/esm/Box/boxClasses.d.ts generated vendored Normal file
View file

@ -0,0 +1,7 @@
export interface BoxClasses {
/** Styles applied to the root element. */
root: string;
}
export type BoxClassKey = keyof BoxClasses;
declare const boxClasses: BoxClasses;
export default boxClasses;

3
node_modules/@mui/system/esm/Box/boxClasses.js generated vendored Normal file
View file

@ -0,0 +1,3 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
const boxClasses = generateUtilityClasses('MuiBox', ['root']);
export default boxClasses;

4
node_modules/@mui/system/esm/Box/index.d.ts generated vendored Normal file
View file

@ -0,0 +1,4 @@
export { default } from "./Box.js";
export * from "./Box.js";
export { default as boxClasses } from "./boxClasses.js";
export * from "./boxClasses.js";

3
node_modules/@mui/system/esm/Box/index.js generated vendored Normal file
View file

@ -0,0 +1,3 @@
export { default } from "./Box.js";
export { default as boxClasses } from "./boxClasses.js";
export * from "./boxClasses.js";

7
node_modules/@mui/system/esm/CSSProperties.d.ts generated vendored Normal file
View file

@ -0,0 +1,7 @@
import * as CSS from 'csstype';
/**
* All non-vendor-prefixed CSS properties. (Also allows `number` in order to support CSS-in-JS libs,
* since they are converted to `px`.)
*/
export interface CSSProperties extends CSS.StandardProperties<number | string>, CSS.SvgProperties<number | string> {}

13
node_modules/@mui/system/esm/Container/Container.d.ts generated vendored Normal file
View file

@ -0,0 +1,13 @@
/**
*
* Demos:
*
* - [Container (Material UI)](https://mui.com/material-ui/react-container/)
* - [Container (MUI System)](https://mui.com/system/react-container/)
*
* API:
*
* - [Container API](https://mui.com/system/api/container/)
*/
declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps.js").ContainerTypeMap<{}, "div">>;
export default Container;

61
node_modules/@mui/system/esm/Container/Container.js generated vendored Normal file
View file

@ -0,0 +1,61 @@
'use client';
import PropTypes from 'prop-types';
import createContainer from "./createContainer.js";
/**
*
* Demos:
*
* - [Container (Material UI)](https://mui.com/material-ui/react-container/)
* - [Container (MUI System)](https://mui.com/system/react-container/)
*
* API:
*
* - [Container API](https://mui.com/system/api/container/)
*/
const Container = createContainer();
process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters: PropTypes.bool,
/**
* Set the max-width to match the min-width of the current breakpoint.
* This is useful if you'd prefer to design for a fixed set of sizes
* instead of trying to accommodate a fully fluid viewport.
* It's fluid by default.
* @default false
*/
fixed: PropTypes.bool,
/**
* Determine the max-width of the container.
* The container width grows with the size of the screen.
* Set to `false` to disable `maxWidth`.
* @default 'lg'
*/
maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export default Container;

View file

@ -0,0 +1,40 @@
import * as React from 'react';
import { OverrideProps } from '@mui/types';
import { SxProps } from "../styleFunctionSx/index.js";
import { Theme, Breakpoint } from "../createTheme/index.js";
import { ContainerClasses } from "./containerClasses.js";
export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
props: AdditionalProps & {
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<ContainerClasses>;
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters?: boolean;
/**
* Set the max-width to match the min-width of the current breakpoint.
* This is useful if you'd prefer to design for a fixed set of sizes
* instead of trying to accommodate a fully fluid viewport.
* It's fluid by default.
* @default false
*/
fixed?: boolean;
/**
* Determine the max-width of the container.
* The container width grows with the size of the screen.
* Set to `false` to disable `maxWidth`.
* @default 'lg'
*/
maxWidth?: Breakpoint | false;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
};
defaultComponent: DefaultComponent;
}
export type ContainerProps<RootComponent extends React.ElementType = ContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ContainerTypeMap<AdditionalProps, RootComponent>, RootComponent>;

View file

@ -0,0 +1 @@
export {};

View file

@ -0,0 +1,22 @@
export interface ContainerClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `disableGutters={true}`. */
disableGutters: string;
/** Styles applied to the root element if `fixed={true}`. */
fixed: string;
/** Styles applied to the root element if `maxWidth="xs"`. */
maxWidthXs: string;
/** Styles applied to the root element if `maxWidth="sm"`. */
maxWidthSm: string;
/** Styles applied to the root element if `maxWidth="md"`. */
maxWidthMd: string;
/** Styles applied to the root element if `maxWidth="lg"`. */
maxWidthLg: string;
/** Styles applied to the root element if `maxWidth="xl"`. */
maxWidthXl: string;
}
export type ContainerClassKey = keyof ContainerClasses;
export declare function getContainerUtilityClass(slot: string): string;
declare const containerClasses: ContainerClasses;
export default containerClasses;

View file

@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getContainerUtilityClass(slot) {
return generateUtilityClass('MuiContainer', slot);
}
const containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
export default containerClasses;

View file

@ -0,0 +1,18 @@
import * as React from 'react';
import { Interpolation, MUIStyledComponent as StyledComponent } from '@mui/styled-engine';
import { OverridableComponent } from '@mui/types';
import { ContainerProps, ContainerTypeMap } from "./ContainerProps.js";
import { Theme as DefaultTheme } from "../createTheme/index.js";
interface StyleFnProps<Theme> extends ContainerProps {
theme: Theme;
ownerState: ContainerProps;
}
type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
component?: React.ElementType;
};
componentName?: string;
}): OverridableComponent<ContainerTypeMap<{}, "div">>;
export {};

View file

@ -0,0 +1,149 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import composeClasses from '@mui/utils/composeClasses';
import capitalize from '@mui/utils/capitalize';
import useThemePropsSystem from "../useThemeProps/index.js";
import systemStyled from "../styled/index.js";
import createTheme from "../createTheme/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
const defaultTheme = createTheme();
const defaultCreateStyledComponent = systemStyled('div', {
name: 'MuiContainer',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
}
});
const useThemePropsDefault = inProps => useThemePropsSystem({
props: inProps,
name: 'MuiContainer',
defaultTheme
});
const useUtilityClasses = (ownerState, componentName) => {
const getContainerUtilityClass = slot => {
return generateUtilityClass(componentName, slot);
};
const {
classes,
fixed,
disableGutters,
maxWidth
} = ownerState;
const slots = {
root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
};
return composeClasses(slots, getContainerUtilityClass, classes);
};
export default function createContainer(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent,
useThemeProps = useThemePropsDefault,
componentName = 'MuiContainer'
} = options;
const ContainerRoot = createStyledComponent(({
theme,
ownerState
}) => ({
width: '100%',
marginLeft: 'auto',
boxSizing: 'border-box',
marginRight: 'auto',
...(!ownerState.disableGutters && {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up('sm')]: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3)
}
})
}), ({
theme,
ownerState
}) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
const breakpoint = breakpointValueKey;
const value = theme.breakpoints.values[breakpoint];
if (value !== 0) {
// @ts-ignore
acc[theme.breakpoints.up(breakpoint)] = {
maxWidth: `${value}${theme.breakpoints.unit}`
};
}
return acc;
}, {}), ({
theme,
ownerState
}) => ({
// @ts-ignore module augmentation fails if custom breakpoints are used
...(ownerState.maxWidth === 'xs' && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up('xs')]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: Math.max(theme.breakpoints.values.xs, 444)
}
}),
...(ownerState.maxWidth &&
// @ts-ignore module augmentation fails if custom breakpoints are used
ownerState.maxWidth !== 'xs' && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up(ownerState.maxWidth)]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
}
})
}));
const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
const props = useThemeProps(inProps);
const {
className,
component = 'div',
disableGutters = false,
fixed = false,
maxWidth = 'lg',
classes: classesProp,
...other
} = props;
const ownerState = {
...props,
component,
disableGutters,
fixed,
maxWidth
};
// @ts-ignore module augmentation fails if custom breakpoints are used
const classes = useUtilityClasses(ownerState, componentName);
return (
/*#__PURE__*/
// @ts-ignore theme is injected by the styled util
_jsx(ContainerRoot, {
as: component
// @ts-ignore module augmentation fails if custom breakpoints are used
,
ownerState: ownerState,
className: clsx(classes.root, className),
ref: ref,
...other
})
);
});
process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
children: PropTypes.node,
classes: PropTypes.object,
className: PropTypes.string,
component: PropTypes.elementType,
disableGutters: PropTypes.bool,
fixed: PropTypes.bool,
maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
return Container;
}

4
node_modules/@mui/system/esm/Container/index.d.ts generated vendored Normal file
View file

@ -0,0 +1,4 @@
export { default } from "./Container.js";
export * from "./ContainerProps.js";
export { default as containerClasses } from "./containerClasses.js";
export * from "./containerClasses.js";

3
node_modules/@mui/system/esm/Container/index.js generated vendored Normal file
View file

@ -0,0 +1,3 @@
export { default } from "./Container.js";
export { default as containerClasses } from "./containerClasses.js";
export * from "./containerClasses.js";

View file

@ -0,0 +1,18 @@
import * as React from 'react';
declare function DefaultPropsProvider({
value,
children
}: React.PropsWithChildren<{
value: Record<string, any> | undefined;
}>): React.JSX.Element;
declare namespace DefaultPropsProvider {
var propTypes: any;
}
export declare function useDefaultProps<Props>({
props,
name
}: {
props: Props;
name: string;
}): Props;
export default DefaultPropsProvider;

View file

@ -0,0 +1,64 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import resolveProps from '@mui/utils/resolveProps';
import { jsx as _jsx } from "react/jsx-runtime";
const PropsContext = /*#__PURE__*/React.createContext(undefined);
function DefaultPropsProvider({
value,
children
}) {
return /*#__PURE__*/_jsx(PropsContext.Provider, {
value: value,
children: children
});
}
process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: PropTypes.node,
/**
* @ignore
*/
value: PropTypes.object
} : void 0;
function getThemeProps(params) {
const {
theme,
name,
props
} = params;
if (!theme || !theme.components || !theme.components[name]) {
return props;
}
const config = theme.components[name];
if (config.defaultProps) {
// compatible with v5 signature
return resolveProps(config.defaultProps, props, theme.components.mergeClassNameAndStyle);
}
if (!config.styleOverrides && !config.variants) {
// v6 signature, no property 'defaultProps'
return resolveProps(config, props, theme.components.mergeClassNameAndStyle);
}
return props;
}
export function useDefaultProps({
props,
name
}) {
const ctx = React.useContext(PropsContext);
return getThemeProps({
props,
name,
theme: {
components: ctx
}
});
}
export default DefaultPropsProvider;

View file

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

View file

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

View file

@ -0,0 +1,17 @@
import * as React from 'react';
import { Interpolation } from '@mui/styled-engine';
import { Theme as SystemTheme } from "../createTheme/index.js";
export interface GlobalStylesProps<Theme = SystemTheme> {
styles: Interpolation<Theme>;
defaultTheme?: object;
themeId?: string;
}
declare function GlobalStyles<Theme = SystemTheme>({
styles,
themeId,
defaultTheme
}: GlobalStylesProps<Theme>): React.JSX.Element;
declare namespace GlobalStyles {
var propTypes: any;
}
export default GlobalStyles;

View file

@ -0,0 +1,61 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import { GlobalStyles as MuiGlobalStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
import useTheme from "../useTheme/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
function wrapGlobalLayer(styles) {
const serialized = serializeStyles(styles);
if (styles !== serialized && serialized.styles) {
if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
// If the styles are not already wrapped in a layer, wrap them in a global layer.
serialized.styles = `@layer global{${serialized.styles}}`;
}
return serialized;
}
return styles;
}
function GlobalStyles({
styles,
themeId,
defaultTheme = {}
}) {
const upperTheme = useTheme(defaultTheme);
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
let globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
if (resolvedTheme.modularCssLayers) {
if (Array.isArray(globalStyles)) {
globalStyles = globalStyles.map(styleArg => {
if (typeof styleArg === 'function') {
return wrapGlobalLayer(styleArg(resolvedTheme));
}
return wrapGlobalLayer(styleArg);
});
} else {
globalStyles = wrapGlobalLayer(globalStyles);
}
}
return /*#__PURE__*/_jsx(MuiGlobalStyles, {
styles: globalStyles
});
}
process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
defaultTheme: PropTypes.object,
/**
* @ignore
*/
styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
/**
* @ignore
*/
themeId: PropTypes.string
} : void 0;
export default GlobalStyles;

2
node_modules/@mui/system/esm/GlobalStyles/index.d.ts generated vendored Normal file
View file

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

2
node_modules/@mui/system/esm/GlobalStyles/index.js generated vendored Normal file
View file

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

13
node_modules/@mui/system/esm/Grid/Grid.d.ts generated vendored Normal file
View file

@ -0,0 +1,13 @@
/**
*
* Demos:
*
* - [Grid (Joy UI)](https://mui.com/joy-ui/react-grid/)
* - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
*
* API:
*
* - [Grid API](https://mui.com/system/api/grid/)
*/
declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps.js").GridTypeMap<{}, "div">>;
export default Grid;

106
node_modules/@mui/system/esm/Grid/Grid.js generated vendored Normal file
View file

@ -0,0 +1,106 @@
'use client';
import PropTypes from 'prop-types';
import createGrid from "./createGrid.js";
/**
*
* Demos:
*
* - [Grid (Joy UI)](https://mui.com/joy-ui/react-grid/)
* - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
*
* API:
*
* - [Grid API](https://mui.com/system/api/grid/)
*/
const Grid = createGrid();
process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* The number of columns.
* @default 12
*/
columns: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
/**
* Defines the horizontal space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
columnSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
/**
* If `true`, the component will have the flex *container* behavior.
* You should be wrapping *items* with a *container*.
* @default false
*/
container: PropTypes.bool,
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'row'
*/
direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
/**
* Defines the offset value for the type `item` components.
*/
offset: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.object]),
/**
* Defines the vertical space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
rowSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
/**
* Defines the size of the the type `item` components.
*/
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])), PropTypes.object]),
/**
* Defines the space between the type `item` components.
* It can only be used on a type `container` component.
* @default 0
*/
spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
/**
* @ignore
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* @internal
* The level of the grid starts from `0` and increases when the grid nests
* inside another grid. Nesting is defined as a container Grid being a direct
* child of a container Grid.
*
* ```js
* <Grid container> // level 0
* <Grid container> // level 1
* <Grid container> // level 2
* ```
*
* Only consecutive grid is considered nesting. A grid container will start at
* `0` if there are non-Grid container element above it.
*
* ```js
* <Grid container> // level 0
* <div>
* <Grid container> // level 0
* ```
*
* ```js
* <Grid container> // level 0
* <Grid>
* <Grid container> // level 0
* ```
*/
unstable_level: PropTypes.number,
/**
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
* @default 'wrap'
*/
wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
} : void 0;
export default Grid;

103
node_modules/@mui/system/esm/Grid/GridProps.d.ts generated vendored Normal file
View file

@ -0,0 +1,103 @@
import * as React from 'react';
import { OverrideProps, PartiallyRequired } from '@mui/types';
import { SxProps } from "../styleFunctionSx/index.js";
import { Theme, Breakpoint } from "../createTheme/index.js";
import { SystemProps } from "../Box/index.js";
type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
export type GridSpacing = number | string;
export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
export type GridSize = 'auto' | 'grow' | number | false;
export type GridOffset = 'auto' | number;
export interface GridBaseProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* The number of columns.
* @default 12
*/
columns?: ResponsiveStyleValue<number>;
/**
* Defines the horizontal space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
columnSpacing?: ResponsiveStyleValue<GridSpacing>;
/**
* If `true`, the component will have the flex *container* behavior.
* You should be wrapping *items* with a *container*.
* @default false
*/
container?: boolean;
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'row'
*/
direction?: ResponsiveStyleValue<GridDirection>;
/**
* Defines the offset value for the type `item` components.
*/
offset?: ResponsiveStyleValue<GridOffset>;
/**
* @internal
* The level of the grid starts from `0` and increases when the grid nests
* inside another grid. Nesting is defined as a container Grid being a direct
* child of a container Grid.
*
* ```js
* <Grid container> // level 0
* <Grid container> // level 1
* <Grid container> // level 2
* ```
*
* Only consecutive grid is considered nesting. A grid container will start at
* `0` if there are non-Grid container element above it.
*
* ```js
* <Grid container> // level 0
* <div>
* <Grid container> // level 0
* ```
*
* ```js
* <Grid container> // level 0
* <Grid>
* <Grid container> // level 0
* ```
*/
unstable_level?: number;
/**
* Defines the vertical space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
rowSpacing?: ResponsiveStyleValue<GridSpacing>;
/**
* Defines the size of the the type `item` components.
*/
size?: ResponsiveStyleValue<GridSize>;
/**
* Defines the space between the type `item` components.
* It can only be used on a type `container` component.
* @default 0
*/
spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
/**
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
* @default 'wrap'
*/
wrap?: GridWrap;
}
export type GridOwnerState = PartiallyRequired<GridBaseProps, 'size' | 'offset' | 'unstable_level'>;
export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
props: AdditionalProps & GridBaseProps & {
sx?: SxProps<Theme>;
} & SystemProps<Theme>;
defaultComponent: DefaultComponent;
}
export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
component?: React.ElementType;
}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
export {};

1
node_modules/@mui/system/esm/Grid/GridProps.js generated vendored Normal file
View file

@ -0,0 +1 @@
export {};

13
node_modules/@mui/system/esm/Grid/createGrid.d.ts generated vendored Normal file
View file

@ -0,0 +1,13 @@
import * as React from 'react';
import { OverridableComponent } from '@mui/types';
import useThemeSystem from "../useTheme/index.js";
import { GridTypeMap } from "./GridProps.js";
declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled/index.js").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
declare function useThemePropsDefault<T extends {}>(props: T): T;
export default function createGrid(options?: {
createStyledComponent?: typeof defaultCreateStyledComponent;
useThemeProps?: typeof useThemePropsDefault;
useTheme?: typeof useThemeSystem;
componentName?: string;
}): OverridableComponent<GridTypeMap<{}, "div">>;
export {};

154
node_modules/@mui/system/esm/Grid/createGrid.js generated vendored Normal file
View file

@ -0,0 +1,154 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import isMuiElement from '@mui/utils/isMuiElement';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import composeClasses from '@mui/utils/composeClasses';
import systemStyled from "../styled/index.js";
import useThemePropsSystem from "../useThemeProps/index.js";
import useThemeSystem from "../useTheme/index.js";
import { extendSxProp } from "../styleFunctionSx/index.js";
import createTheme from "../createTheme/index.js";
import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
import deleteLegacyGridProps from "./deleteLegacyGridProps.js";
import { jsx as _jsx } from "react/jsx-runtime";
const defaultTheme = createTheme();
// widening Theme to any so that the consumer can own the theme structure.
const defaultCreateStyledComponent = systemStyled('div', {
name: 'MuiGrid',
slot: 'Root'
});
function useThemePropsDefault(props) {
return useThemePropsSystem({
props,
name: 'MuiGrid',
defaultTheme
});
}
export default function createGrid(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent,
useThemeProps = useThemePropsDefault,
useTheme = useThemeSystem,
componentName = 'MuiGrid'
} = options;
const useUtilityClasses = (ownerState, theme) => {
const {
container,
direction,
spacing,
wrap,
size
} = ownerState;
const slots = {
root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(size), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
};
return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
};
function parseResponsiveProp(propValue, breakpoints, shouldUseValue = () => true) {
const parsedProp = {};
if (propValue === null) {
return parsedProp;
}
if (Array.isArray(propValue)) {
propValue.forEach((value, index) => {
if (value !== null && shouldUseValue(value) && breakpoints.keys[index]) {
parsedProp[breakpoints.keys[index]] = value;
}
});
} else if (typeof propValue === 'object') {
Object.keys(propValue).forEach(key => {
const value = propValue[key];
if (value !== null && value !== undefined && shouldUseValue(value)) {
parsedProp[key] = value;
}
});
} else {
parsedProp[breakpoints.keys[0]] = propValue;
}
return parsedProp;
}
const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
const theme = useTheme();
const themeProps = useThemeProps(inProps);
const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
// TODO v8: Remove when removing the legacy Grid component
deleteLegacyGridProps(props, theme.breakpoints);
const {
className,
children,
columns: columnsProp = 12,
container = false,
component = 'div',
direction = 'row',
wrap = 'wrap',
size: sizeProp = {},
offset: offsetProp = {},
spacing: spacingProp = 0,
rowSpacing: rowSpacingProp = spacingProp,
columnSpacing: columnSpacingProp = spacingProp,
unstable_level: level = 0,
...other
} = props;
const size = parseResponsiveProp(sizeProp, theme.breakpoints, val => val !== false);
const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
const columns = inProps.columns ?? (level ? undefined : columnsProp);
const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
const ownerState = {
...props,
level,
columns,
container,
direction,
wrap,
spacing,
rowSpacing,
columnSpacing,
size,
offset
};
const classes = useUtilityClasses(ownerState, theme);
return /*#__PURE__*/_jsx(GridRoot, {
ref: ref,
as: component,
ownerState: ownerState,
className: clsx(classes.root, className),
...other,
children: React.Children.map(children, child => {
if (/*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid']) && container && child.props.container) {
return /*#__PURE__*/React.cloneElement(child, {
unstable_level: child.props?.unstable_level ?? level + 1
});
}
return child;
})
});
});
process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
children: PropTypes.node,
className: PropTypes.string,
columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
component: PropTypes.elementType,
container: PropTypes.bool,
direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.object]),
rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
size: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])), PropTypes.object]),
spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
} : void 0;
// @ts-ignore internal logic for nested grid
Grid.muiName = 'Grid';
return Grid;
}

View file

@ -0,0 +1,11 @@
import { Breakpoint, Breakpoints } from "../createTheme/index.js";
/**
* Deletes the legacy Grid component props from the `props` object and warns once about them if found.
*
* @param {object} props The props object to remove the legacy Grid props from.
* @param {Breakpoints} breakpoints The breakpoints object.
*/
export default function deleteLegacyGridProps(props: {
item?: boolean;
zeroMinWidth?: boolean;
} & Partial<Record<Breakpoint, 'auto' | number | boolean>> & Record<string, any>, breakpoints: Breakpoints): void;

View file

@ -0,0 +1,41 @@
const getLegacyGridWarning = propName => {
if (['item', 'zeroMinWidth'].includes(propName)) {
return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
}
// #host-reference
return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
};
const warnedAboutProps = [];
/**
* Deletes the legacy Grid component props from the `props` object and warns once about them if found.
*
* @param {object} props The props object to remove the legacy Grid props from.
* @param {Breakpoints} breakpoints The breakpoints object.
*/
export default function deleteLegacyGridProps(props, breakpoints) {
const propsToWarn = [];
if (props.item !== undefined) {
delete props.item;
propsToWarn.push('item');
}
if (props.zeroMinWidth !== undefined) {
delete props.zeroMinWidth;
propsToWarn.push('zeroMinWidth');
}
breakpoints.keys.forEach(breakpoint => {
if (props[breakpoint] !== undefined) {
propsToWarn.push(breakpoint);
delete props[breakpoint];
}
});
if (process.env.NODE_ENV !== 'production') {
propsToWarn.forEach(prop => {
if (!warnedAboutProps.includes(prop)) {
warnedAboutProps.push(prop);
console.warn(`MUI Grid: ${getLegacyGridWarning(prop)}\n`);
}
});
}
}

20
node_modules/@mui/system/esm/Grid/gridClasses.d.ts generated vendored Normal file
View file

@ -0,0 +1,20 @@
export interface GridClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `container={true}`. */
container: string;
/** Styles applied to the root element if `direction="column"`. */
'direction-xs-column': string;
/** Styles applied to the root element if `direction="column-reverse"`. */
'direction-xs-column-reverse': string;
/** Styles applied to the root element if `direction="row-reverse"`. */
'direction-xs-row-reverse': string;
/** Styles applied to the root element if `wrap="nowrap"`. */
'wrap-xs-nowrap': string;
/** Styles applied to the root element if `wrap="reverse"`. */
'wrap-xs-wrap-reverse': string;
}
export type GridClassKey = keyof GridClasses;
export declare function getGridUtilityClass(slot: string): string;
declare const gridClasses: GridClasses;
export default gridClasses;

19
node_modules/@mui/system/esm/Grid/gridClasses.js generated vendored Normal file
View file

@ -0,0 +1,19 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getGridUtilityClass(slot) {
return generateUtilityClass('MuiGrid', slot);
}
const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
const GRID_SIZES = ['auto', 'grow', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item',
// spacings
...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
// direction values
...DIRECTIONS.map(direction => `direction-xs-${direction}`),
// wrap values
...WRAPS.map(wrap => `wrap-xs-${wrap}`),
// grid sizes for all breakpoints
...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
export default gridClasses;

42
node_modules/@mui/system/esm/Grid/gridGenerator.d.ts generated vendored Normal file
View file

@ -0,0 +1,42 @@
import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
import { Spacing } from "../createTheme/createSpacing.js";
import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
import { GridDirection, GridOwnerState } from "./GridProps.js";
interface Props {
theme: {
breakpoints: Breakpoints;
spacing?: Spacing;
};
ownerState: GridOwnerState;
}
export declare const generateGridSizeStyles: ({
theme,
ownerState
}: Props) => {};
export declare const generateGridOffsetStyles: ({
theme,
ownerState
}: Props) => {};
export declare const generateGridColumnsStyles: ({
theme,
ownerState
}: Props) => {};
export declare const generateGridRowSpacingStyles: ({
theme,
ownerState
}: Props) => {};
export declare const generateGridColumnSpacingStyles: ({
theme,
ownerState
}: Props) => {};
export declare const generateGridDirectionStyles: ({
theme,
ownerState
}: Props) => {};
export declare const generateGridStyles: ({
ownerState
}: Props) => {};
export declare const generateSizeClassNames: (size: GridOwnerState["size"]) => string[];
export declare const generateSpacingClassNames: (spacing: GridOwnerState["spacing"], smallestBreakpoint?: string) => string[];
export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
export {};

193
node_modules/@mui/system/esm/Grid/gridGenerator.js generated vendored Normal file
View file

@ -0,0 +1,193 @@
import { traverseBreakpoints } from "./traverseBreakpoints.js";
function getSelfSpacingVar(axis) {
return `--Grid-${axis}Spacing`;
}
function getParentSpacingVar(axis) {
return `--Grid-parent-${axis}Spacing`;
}
const selfColumnsVar = '--Grid-columns';
const parentColumnsVar = '--Grid-parent-columns';
export const generateGridSizeStyles = ({
theme,
ownerState
}) => {
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.size, (appendStyle, value) => {
let style = {};
if (value === 'grow') {
style = {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
}
if (value === 'auto') {
style = {
flexBasis: 'auto',
flexGrow: 0,
flexShrink: 0,
maxWidth: 'none',
width: 'auto'
};
}
if (typeof value === 'number') {
style = {
flexGrow: 0,
flexBasis: 'auto',
width: `calc(100% * ${value} / var(${parentColumnsVar}) - (var(${parentColumnsVar}) - ${value}) * (var(${getParentSpacingVar('column')}) / var(${parentColumnsVar})))`
};
}
appendStyle(styles, style);
});
return styles;
};
export const generateGridOffsetStyles = ({
theme,
ownerState
}) => {
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
let style = {};
if (value === 'auto') {
style = {
marginLeft: 'auto'
};
}
if (typeof value === 'number') {
style = {
marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(${parentColumnsVar}) + var(${getParentSpacingVar('column')}) * ${value} / var(${parentColumnsVar}))`
};
}
appendStyle(styles, style);
});
return styles;
};
export const generateGridColumnsStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {
[selfColumnsVar]: 12
};
traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
const columns = value ?? 12;
appendStyle(styles, {
[selfColumnsVar]: columns,
'> *': {
[parentColumnsVar]: columns
}
});
});
return styles;
};
export const generateGridRowSpacingStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
appendStyle(styles, {
[getSelfSpacingVar('row')]: spacing,
'> *': {
[getParentSpacingVar('row')]: spacing
}
});
});
return styles;
};
export const generateGridColumnSpacingStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
appendStyle(styles, {
[getSelfSpacingVar('column')]: spacing,
'> *': {
[getParentSpacingVar('column')]: spacing
}
});
});
return styles;
};
export const generateGridDirectionStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
appendStyle(styles, {
flexDirection: value
});
});
return styles;
};
export const generateGridStyles = ({
ownerState
}) => {
return {
minWidth: 0,
boxSizing: 'border-box',
...(ownerState.container && {
display: 'flex',
flexWrap: 'wrap',
...(ownerState.wrap && ownerState.wrap !== 'wrap' && {
flexWrap: ownerState.wrap
}),
gap: `var(${getSelfSpacingVar('row')}) var(${getSelfSpacingVar('column')})`
})
};
};
export const generateSizeClassNames = size => {
const classNames = [];
Object.entries(size).forEach(([key, value]) => {
if (value !== false && value !== undefined) {
classNames.push(`grid-${key}-${String(value)}`);
}
});
return classNames;
};
export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
function isValidSpacing(val) {
if (val === undefined) {
return false;
}
return typeof val === 'string' && !Number.isNaN(Number(val)) || typeof val === 'number' && val > 0;
}
if (isValidSpacing(spacing)) {
return [`spacing-${smallestBreakpoint}-${String(spacing)}`];
}
if (typeof spacing === 'object' && !Array.isArray(spacing)) {
const classNames = [];
Object.entries(spacing).forEach(([key, value]) => {
if (isValidSpacing(value)) {
classNames.push(`spacing-${key}-${String(value)}`);
}
});
return classNames;
}
return [];
};
export const generateDirectionClasses = direction => {
if (direction === undefined) {
return [];
}
if (typeof direction === 'object') {
return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
}
return [`direction-xs-${String(direction)}`];
};

7
node_modules/@mui/system/esm/Grid/index.d.ts generated vendored Normal file
View file

@ -0,0 +1,7 @@
export { default } from "./Grid.js";
export { default as createGrid } from "./createGrid.js";
export * from "./GridProps.js";
export { default as gridClasses } from "./gridClasses.js";
export * from "./gridClasses.js";
export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames } from "./gridGenerator.js";

7
node_modules/@mui/system/esm/Grid/index.js generated vendored Normal file
View file

@ -0,0 +1,7 @@
export { default } from "./Grid.js";
export { default as createGrid } from "./createGrid.js";
export * from "./GridProps.js";
export { default as gridClasses } from "./gridClasses.js";
export * from "./gridClasses.js";
export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames } from "./gridGenerator.js";

View file

@ -0,0 +1,7 @@
import { Breakpoints, Breakpoint } from "../createBreakpoints/createBreakpoints.js";
export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
interface Iterator<T> {
(appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
}
export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: T | T[] | Record<string, any> | undefined, iterator: Iterator<T>) => void;
export {};

View file

@ -0,0 +1,42 @@
export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
if (Array.isArray(responsive)) {
responsive.forEach((breakpointValue, index) => {
iterator((responsiveStyles, style) => {
if (index <= breakpoints.keys.length - 1) {
if (index === 0) {
Object.assign(responsiveStyles, style);
} else {
responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
}
}
}, breakpointValue);
});
} else if (responsive && typeof responsive === 'object') {
// prevent null
// responsive could be a very big object, pick the smallest responsive values
const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
keys.forEach(key => {
if (breakpoints.keys.includes(key)) {
// @ts-ignore already checked that responsive is an object
const breakpointValue = responsive[key];
if (breakpointValue !== undefined) {
iterator((responsiveStyles, style) => {
if (smallestBreakpoint === key) {
Object.assign(responsiveStyles, style);
} else {
responsiveStyles[breakpoints.up(key)] = style;
}
}, breakpointValue);
}
}
});
} else if (typeof responsive === 'number' || typeof responsive === 'string') {
iterator((responsiveStyles, style) => {
Object.assign(responsiveStyles, style);
}, responsive);
}
};

View file

@ -0,0 +1,51 @@
/**
* Split this component for RSC import
*/
import * as React from 'react';
export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
export interface InitColorSchemeScriptProps {
/**
* The default mode when the storage is empty (user's first visit).
* @default 'system'
*/
defaultMode?: 'system' | 'light' | 'dark';
/**
* The default color scheme to be used on the light mode.
* @default 'light'
*/
defaultLightColorScheme?: string;
/**
* The default color scheme to be used on the dark mode.
* * @default 'dark'
*/
defaultDarkColorScheme?: string;
/**
* The node (provided as string) used to attach the color-scheme attribute.
* @default 'document.documentElement'
*/
colorSchemeNode?: string;
/**
* localStorage key used to store `mode`.
* @default 'mode'
*/
modeStorageKey?: string;
/**
* localStorage key used to store `colorScheme`.
* @default 'color-scheme'
*/
colorSchemeStorageKey?: string;
/**
* DOM attribute for applying color scheme.
* @default 'data-color-scheme'
* @example '.mode-%s' // for class based color scheme
* @example '[data-mode-%s]' // for data-attribute without '='
*/
attribute?: 'class' | 'data' | string;
/**
* Nonce string to pass to the inline script for CSP headers.
*/
nonce?: string | undefined;
}
export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;

View file

@ -0,0 +1,78 @@
/**
* Split this component for RSC import
*/
import * as React from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export const DEFAULT_MODE_STORAGE_KEY = 'mode';
export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
export default function InitColorSchemeScript(options) {
const {
defaultMode = 'system',
defaultLightColorScheme = 'light',
defaultDarkColorScheme = 'dark',
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
attribute: initialAttribute = DEFAULT_ATTRIBUTE,
colorSchemeNode = 'document.documentElement',
nonce
} = options || {};
let setter = '';
let attribute = initialAttribute;
if (initialAttribute === 'class') {
attribute = '.%s';
}
if (initialAttribute === 'data') {
attribute = '[data-%s]';
}
if (attribute.startsWith('.')) {
const selector = attribute.substring(1);
setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
}
const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme='%s'] or [data-color-scheme]
if (matches) {
const [attr, value] = matches[1].split('=');
if (!value) {
setter += `${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', light));
${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', dark));`;
}
setter += `
${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;
} else {
setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
}
return /*#__PURE__*/_jsx("script", {
suppressHydrationWarning: true,
nonce: typeof window === 'undefined' ? nonce : ''
// eslint-disable-next-line react/no-danger
,
dangerouslySetInnerHTML: {
__html: `(function() {
try {
let colorScheme = '';
const mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
const dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
const light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
if (mode === 'system') {
// handle system mode
const mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
colorScheme = dark
} else {
colorScheme = light
}
}
if (mode === 'light') {
colorScheme = light;
}
if (mode === 'dark') {
colorScheme = dark;
}
if (colorScheme) {
${setter}
}
} catch(e){}})();`
}
}, "mui-color-scheme-init");
}

View file

@ -0,0 +1,2 @@
export { default } from "./InitColorSchemeScript.js";
export type { InitColorSchemeScriptProps } from "./InitColorSchemeScript.js";

View file

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

8
node_modules/@mui/system/esm/RtlProvider/index.d.ts generated vendored Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
interface RtlProviderProps {
children?: React.ReactNode;
value?: boolean;
}
declare const RtlProvider: React.FC<RtlProviderProps>;
export const useRtl: () => boolean;
export default RtlProvider;

24
node_modules/@mui/system/esm/RtlProvider/index.js generated vendored Normal file
View file

@ -0,0 +1,24 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import { jsx as _jsx } from "react/jsx-runtime";
const RtlContext = /*#__PURE__*/React.createContext();
function RtlProvider({
value,
...props
}) {
return /*#__PURE__*/_jsx(RtlContext.Provider, {
value: value ?? true,
...props
});
}
process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
children: PropTypes.node,
value: PropTypes.bool
} : void 0;
export const useRtl = () => {
const value = React.useContext(RtlContext);
return value ?? false;
};
export default RtlProvider;

14
node_modules/@mui/system/esm/Stack/Stack.d.ts generated vendored Normal file
View file

@ -0,0 +1,14 @@
/**
*
* Demos:
*
* - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
* - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
* - [Stack (MUI System)](https://mui.com/system/react-stack/)
*
* API:
*
* - [Stack API](https://mui.com/system/api/stack/)
*/
declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps.js").StackTypeMap<{}, "div">>;
export default Stack;

62
node_modules/@mui/system/esm/Stack/Stack.js generated vendored Normal file
View file

@ -0,0 +1,62 @@
'use client';
import PropTypes from 'prop-types';
import createStack from "./createStack.js";
/**
*
* Demos:
*
* - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
* - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
* - [Stack (MUI System)](https://mui.com/system/react-stack/)
*
* API:
*
* - [Stack API](https://mui.com/system/api/stack/)
*/
const Stack = createStack();
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'column'
*/
direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
/**
* Add an element between each child.
*/
divider: PropTypes.node,
/**
* Defines the space between immediate children.
* @default 0
*/
spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
/**
* The system prop, which allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
*
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
*
* To enable this flag globally, follow the theme's default props configuration.
* @default false
*/
useFlexGap: PropTypes.bool
} : void 0;
export default Stack;

53
node_modules/@mui/system/esm/Stack/StackProps.d.ts generated vendored Normal file
View file

@ -0,0 +1,53 @@
import * as React from 'react';
import { OverrideProps } from '@mui/types';
import { ResponsiveStyleValue, SxProps } from "../styleFunctionSx/index.js";
import { SystemProps } from "../Box/index.js";
import { Theme } from "../createTheme/index.js";
export interface StackBaseProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'column'
*/
direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
/**
* Defines the space between immediate children.
* @default 0
*/
spacing?: ResponsiveStyleValue<number | string>;
/**
* Add an element between each child.
*/
divider?: React.ReactNode;
/**
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
*
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
*
* To enable this flag globally, follow the theme's default props configuration.
* @default false
*/
useFlexGap?: boolean;
}
export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
props: AdditionalProps & StackBaseProps & {
/**
* The system prop, which allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
} & SystemProps<Theme>;
defaultComponent: DefaultComponent;
}
export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
component?: React.ElementType;
}> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
export interface StackOwnerState {
direction: StackProps['direction'];
spacing: StackProps['spacing'];
useFlexGap: boolean;
}

1
node_modules/@mui/system/esm/Stack/StackProps.js generated vendored Normal file
View file

@ -0,0 +1 @@
export {};

24
node_modules/@mui/system/esm/Stack/createStack.d.ts generated vendored Normal file
View file

@ -0,0 +1,24 @@
import * as React from 'react';
import { OverridableComponent } from '@mui/types';
import { StackTypeMap, StackOwnerState } from "./StackProps.js";
import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
import { Spacing } from "../createTheme/createSpacing.js";
interface StyleFunctionProps {
theme: {
breakpoints: Breakpoints;
spacing: Spacing;
};
ownerState: StackOwnerState;
}
declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled/index.js").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
declare function useThemePropsDefault<T extends {}>(props: T): T;
export declare const style: ({
ownerState,
theme
}: StyleFunctionProps) => any;
export default function createStack(options?: {
createStyledComponent?: typeof defaultCreateStyledComponent;
useThemeProps?: typeof useThemePropsDefault;
componentName?: string;
}): OverridableComponent<StackTypeMap<{}, "div">>;
export {};

172
node_modules/@mui/system/esm/Stack/createStack.js generated vendored Normal file
View file

@ -0,0 +1,172 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import deepmerge from '@mui/utils/deepmerge';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import composeClasses from '@mui/utils/composeClasses';
import systemStyled from "../styled/index.js";
import useThemePropsSystem from "../useThemeProps/index.js";
import { extendSxProp } from "../styleFunctionSx/index.js";
import createTheme from "../createTheme/index.js";
import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from "../breakpoints/index.js";
import { createUnarySpacing, getValue } from "../spacing/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
const defaultTheme = createTheme();
// widening Theme to any so that the consumer can own the theme structure.
const defaultCreateStyledComponent = systemStyled('div', {
name: 'MuiStack',
slot: 'Root'
});
function useThemePropsDefault(props) {
return useThemePropsSystem({
props,
name: 'MuiStack',
defaultTheme
});
}
/**
* Return an array with the separator React element interspersed between
* each React node of the input children.
*
* > joinChildren([1,2,3], 0)
* [1,0,2,0,3]
*/
function joinChildren(children, separator) {
const childrenArray = React.Children.toArray(children).filter(Boolean);
return childrenArray.reduce((output, child, index) => {
output.push(child);
if (index < childrenArray.length - 1) {
output.push(/*#__PURE__*/React.cloneElement(separator, {
key: `separator-${index}`
}));
}
return output;
}, []);
}
const getSideFromDirection = direction => {
return {
row: 'Left',
'row-reverse': 'Right',
column: 'Top',
'column-reverse': 'Bottom'
}[direction];
};
export const style = ({
ownerState,
theme
}) => {
let styles = {
display: 'flex',
flexDirection: 'column',
...handleBreakpoints({
theme
}, resolveBreakpointValues({
values: ownerState.direction,
breakpoints: theme.breakpoints.values
}), propValue => ({
flexDirection: propValue
}))
};
if (ownerState.spacing) {
const transformer = createUnarySpacing(theme);
const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
acc[breakpoint] = true;
}
return acc;
}, {});
const directionValues = resolveBreakpointValues({
values: ownerState.direction,
base
});
const spacingValues = resolveBreakpointValues({
values: ownerState.spacing,
base
});
if (typeof directionValues === 'object') {
Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
const directionValue = directionValues[breakpoint];
if (!directionValue) {
const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
directionValues[breakpoint] = previousDirectionValue;
}
});
}
const styleFromPropValue = (propValue, breakpoint) => {
if (ownerState.useFlexGap) {
return {
gap: getValue(transformer, propValue)
};
}
return {
// The useFlexGap={false} implement relies on each child to give up control of the margin.
// We need to reset the margin to avoid double spacing.
'& > :not(style):not(style)': {
margin: 0
},
'& > :not(style) ~ :not(style)': {
[`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
}
};
};
styles = deepmerge(styles, handleBreakpoints({
theme
}, spacingValues, styleFromPropValue));
}
styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
return styles;
};
export default function createStack(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent,
useThemeProps = useThemePropsDefault,
componentName = 'MuiStack'
} = options;
const useUtilityClasses = () => {
const slots = {
root: ['root']
};
return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
};
const StackRoot = createStyledComponent(style);
const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
const themeProps = useThemeProps(inProps);
const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
const {
component = 'div',
direction = 'column',
spacing = 0,
divider,
children,
className,
useFlexGap = false,
...other
} = props;
const ownerState = {
direction,
spacing,
useFlexGap
};
const classes = useUtilityClasses();
return /*#__PURE__*/_jsx(StackRoot, {
as: component,
ownerState: ownerState,
ref: ref,
className: clsx(classes.root, className),
...other,
children: divider ? joinChildren(children, divider) : children
});
});
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
children: PropTypes.node,
direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
divider: PropTypes.node,
spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
return Stack;
}

5
node_modules/@mui/system/esm/Stack/index.d.ts generated vendored Normal file
View file

@ -0,0 +1,5 @@
export { default } from "./Stack.js";
export { default as createStack } from "./createStack.js";
export * from "./StackProps.js";
export { default as stackClasses } from "./stackClasses.js";
export * from "./stackClasses.js";

5
node_modules/@mui/system/esm/Stack/index.js generated vendored Normal file
View file

@ -0,0 +1,5 @@
export { default } from "./Stack.js";
export { default as createStack } from "./createStack.js";
export * from "./StackProps.js";
export { default as stackClasses } from "./stackClasses.js";
export * from "./stackClasses.js";

8
node_modules/@mui/system/esm/Stack/stackClasses.d.ts generated vendored Normal file
View file

@ -0,0 +1,8 @@
export interface StackClasses {
/** Styles applied to the root element. */
root: string;
}
export type StackClassKey = keyof StackClasses;
export declare function getStackUtilityClass(slot: string): string;
declare const stackClasses: StackClasses;
export default stackClasses;

7
node_modules/@mui/system/esm/Stack/stackClasses.js generated vendored Normal file
View file

@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getStackUtilityClass(slot) {
return generateUtilityClass('MuiStack', slot);
}
const stackClasses = generateUtilityClasses('MuiStack', ['root']);
export default stackClasses;

View file

@ -0,0 +1,24 @@
import { DefaultTheme } from '@mui/private-theming';
export interface ThemeProviderProps<Theme = DefaultTheme> {
/**
* Your component tree.
*/
children?: React.ReactNode;
/**
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
*/
themeId?: string;
/**
* A theme object. You can provide a function to extend the outer theme.
*/
theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
}
/**
* This component makes the `theme` available down the React tree.
* It should preferably be used at **the root of your component tree**.
* API:
*
* - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
*/
export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;

View file

@ -0,0 +1,99 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
import exactProp from '@mui/utils/exactProp';
import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
import RtlProvider from "../RtlProvider/index.js";
import DefaultPropsProvider from "../DefaultPropsProvider/index.js";
import useLayerOrder from "./useLayerOrder.js";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
const EMPTY_THEME = {};
function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
return React.useMemo(() => {
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
if (typeof localTheme === 'function') {
const mergedTheme = localTheme(resolvedTheme);
const result = themeId ? {
...upperTheme,
[themeId]: mergedTheme
} : mergedTheme;
// must return a function for the private theme to NOT merge with the upper theme.
// see the test case "use provided theme from a callback" in ThemeProvider.test.js
if (isPrivate) {
return () => result;
}
return result;
}
return themeId ? {
...upperTheme,
[themeId]: localTheme
} : {
...upperTheme,
...localTheme
};
}, [themeId, upperTheme, localTheme, isPrivate]);
}
/**
* This component makes the `theme` available down the React tree.
* It should preferably be used at **the root of your component tree**.
*
* <ThemeProvider theme={theme}> // existing use case
* <ThemeProvider theme={{ id: theme }}> // theme scoping
*/
function ThemeProvider(props) {
const {
children,
theme: localTheme,
themeId
} = props;
const upperTheme = useThemeWithoutDefault(EMPTY_THEME);
const upperPrivateTheme = usePrivateTheme() || EMPTY_THEME;
if (process.env.NODE_ENV !== 'production') {
if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
}
}
const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
const layerOrder = useLayerOrder(engineTheme);
return /*#__PURE__*/_jsx(MuiThemeProvider, {
theme: privateTheme,
children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
value: engineTheme,
children: /*#__PURE__*/_jsx(RtlProvider, {
value: rtlValue,
children: /*#__PURE__*/_jsxs(DefaultPropsProvider, {
value: themeId ? engineTheme[themeId].components : engineTheme.components,
children: [layerOrder, children]
})
})
})
});
}
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Your component tree.
*/
children: PropTypes.node,
/**
* A theme object. You can provide a function to extend the outer theme.
*/
theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
/**
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
*/
themeId: PropTypes.string
} : void 0;
if (process.env.NODE_ENV !== 'production') {
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;
}
export default ThemeProvider;

View file

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

1
node_modules/@mui/system/esm/ThemeProvider/index.js generated vendored Normal file
View file

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

View file

@ -0,0 +1,8 @@
import * as React from 'react';
/**
* This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
* Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
*/
export default function useLayerOrder(theme: {
modularCssLayers?: boolean | string;
}): React.JSX.Element | null;

View file

@ -0,0 +1,52 @@
import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import useId from '@mui/utils/useId';
import GlobalStyles from "../GlobalStyles/index.js";
import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
/**
* This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
* Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
*/
import { jsx as _jsx } from "react/jsx-runtime";
export default function useLayerOrder(theme) {
const upperTheme = useThemeWithoutDefault();
const id = useId() || '';
const {
modularCssLayers
} = theme;
let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
if (!modularCssLayers || upperTheme !== null) {
// skip this hook if upper theme exists.
layerOrder = '';
} else if (typeof modularCssLayers === 'string') {
layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
} else {
layerOrder = `@layer ${layerOrder};`;
}
useEnhancedEffect(() => {
const head = document.querySelector('head');
if (!head) {
return;
}
const firstChild = head.firstChild;
if (layerOrder) {
// Only insert if first child doesn't have data-mui-layer-order attribute
if (firstChild && firstChild.hasAttribute?.('data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
return;
}
const styleElement = document.createElement('style');
styleElement.setAttribute('data-mui-layer-order', id);
styleElement.textContent = layerOrder;
head.prepend(styleElement);
} else {
head.querySelector(`style[data-mui-layer-order="${id}"]`)?.remove();
}
}, [layerOrder, id]);
if (!layerOrder) {
return null;
}
return /*#__PURE__*/_jsx(GlobalStyles, {
styles: layerOrder
});
}

15
node_modules/@mui/system/esm/borders/borders.d.ts generated vendored Normal file
View file

@ -0,0 +1,15 @@
import { PropsFor, SimpleStyleFunction } from "../style/index.js";
export const border: SimpleStyleFunction<'border'>;
export const borderTop: SimpleStyleFunction<'borderTop'>;
export const borderRight: SimpleStyleFunction<'borderRight'>;
export const borderBottom: SimpleStyleFunction<'borderBottom'>;
export const borderLeft: SimpleStyleFunction<'borderLeft'>;
export const borderColor: SimpleStyleFunction<'borderColor'>;
export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
export const borderRadius: SimpleStyleFunction<'borderRadius'>;
declare const borders: SimpleStyleFunction<'border' | 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft' | 'borderColor' | 'borderRadius'>;
export type BordersProps = PropsFor<typeof borders>;
export default borders;

49
node_modules/@mui/system/esm/borders/borders.js generated vendored Normal file
View file

@ -0,0 +1,49 @@
import responsivePropType from "../responsivePropType/index.js";
import style from "../style/index.js";
import compose from "../compose/index.js";
import { createUnaryUnit, getValue } from "../spacing/index.js";
import { handleBreakpoints } from "../breakpoints/index.js";
export function borderTransform(value) {
if (typeof value !== 'number') {
return value;
}
return `${value}px solid`;
}
function createBorderStyle(prop, transform) {
return style({
prop,
themeKey: 'borders',
transform
});
}
export const border = createBorderStyle('border', borderTransform);
export const borderTop = createBorderStyle('borderTop', borderTransform);
export const borderRight = createBorderStyle('borderRight', borderTransform);
export const borderBottom = createBorderStyle('borderBottom', borderTransform);
export const borderLeft = createBorderStyle('borderLeft', borderTransform);
export const borderColor = createBorderStyle('borderColor');
export const borderTopColor = createBorderStyle('borderTopColor');
export const borderRightColor = createBorderStyle('borderRightColor');
export const borderBottomColor = createBorderStyle('borderBottomColor');
export const borderLeftColor = createBorderStyle('borderLeftColor');
export const outline = createBorderStyle('outline', borderTransform);
export const outlineColor = createBorderStyle('outlineColor');
// false positive
// eslint-disable-next-line react/function-component-definition
export const borderRadius = props => {
if (props.borderRadius !== undefined && props.borderRadius !== null) {
const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
const styleFromPropValue = propValue => ({
borderRadius: getValue(transformer, propValue)
});
return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
}
return null;
};
borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
borderRadius: responsivePropType
} : {};
borderRadius.filterProps = ['borderRadius'];
const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
export default borders;

2
node_modules/@mui/system/esm/borders/index.d.ts generated vendored Normal file
View file

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

2
node_modules/@mui/system/esm/borders/index.js generated vendored Normal file
View file

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

View file

@ -0,0 +1,19 @@
import { CSSObject } from '@mui/styled-engine';
import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
import type { Breakpoint } from "../createTheme/index.js";
import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
import { StyleFunction } from "../style/index.js";
export interface ResolveBreakpointValuesOptions<T> {
values: ResponsiveStyleValue<T>;
breakpoints?: Breakpoints['values'];
base?: Record<string, boolean>;
}
export function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;
export function handleBreakpoints<Props>(props: Props, propValue: any, styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any): any;
type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
/**
* @returns An enhanced stylefunction that considers breakpoints
*/
export default function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;

171
node_modules/@mui/system/esm/breakpoints/breakpoints.js generated vendored Normal file
View file

@ -0,0 +1,171 @@
import PropTypes from 'prop-types';
import deepmerge from '@mui/utils/deepmerge';
import merge from "../merge/index.js";
import { isCqShorthand, getContainerQuery } from "../cssContainerQueries/index.js";
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm[.
export const values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
};
const defaultBreakpoints = {
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
up: key => `@media (min-width:${values[key]}px)`
};
const defaultContainerQueries = {
containerQueries: containerName => ({
up: key => {
let result = typeof key === 'number' ? key : values[key] || key;
if (typeof result === 'number') {
result = `${result}px`;
}
return containerName ? `@container ${containerName} (min-width:${result})` : `@container (min-width:${result})`;
}
})
};
export function handleBreakpoints(props, propValue, styleFromPropValue) {
const theme = props.theme || {};
if (Array.isArray(propValue)) {
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return propValue.reduce((acc, item, index) => {
acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
return acc;
}, {});
}
if (typeof propValue === 'object') {
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return Object.keys(propValue).reduce((acc, breakpoint) => {
if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
if (containerKey) {
acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
}
}
// key is breakpoint
else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
const mediaKey = themeBreakpoints.up(breakpoint);
acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
} else {
const cssKey = breakpoint;
acc[cssKey] = propValue[cssKey];
}
return acc;
}, {});
}
const output = styleFromPropValue(propValue);
return output;
}
function breakpoints(styleFunction) {
// false positive
// eslint-disable-next-line react/function-component-definition
const newStyleFunction = props => {
const theme = props.theme || {};
const base = styleFunction(props);
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
const extended = themeBreakpoints.keys.reduce((acc, key) => {
if (props[key]) {
acc = acc || {};
acc[themeBreakpoints.up(key)] = styleFunction({
theme,
...props[key]
});
}
return acc;
}, null);
return merge(base, extended);
};
newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
...styleFunction.propTypes,
xs: PropTypes.object,
sm: PropTypes.object,
md: PropTypes.object,
lg: PropTypes.object,
xl: PropTypes.object
} : {};
newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
return newStyleFunction;
}
export function createEmptyBreakpointObject(breakpointsInput = {}) {
const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
const breakpointStyleKey = breakpointsInput.up(key);
acc[breakpointStyleKey] = {};
return acc;
}, {});
return breakpointsInOrder || {};
}
export function removeUnusedBreakpoints(breakpointKeys, style) {
return breakpointKeys.reduce((acc, key) => {
const breakpointOutput = acc[key];
const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
if (isBreakpointUnused) {
delete acc[key];
}
return acc;
}, style);
}
export function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
}
// compute base for responsive values; e.g.,
// [1,2,3] => {xs: true, sm: true, md: true}
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
// fixed value
if (typeof breakpointValues !== 'object') {
return {};
}
const base = {};
const breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach((breakpoint, i) => {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach(breakpoint => {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}
export function resolveBreakpointValues({
values: breakpointValues,
breakpoints: themeBreakpoints,
base: customBase
}) {
const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
const keys = Object.keys(base);
if (keys.length === 0) {
return breakpointValues;
}
let previous;
return keys.reduce((acc, breakpoint, i) => {
if (Array.isArray(breakpointValues)) {
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
previous = i;
} else if (typeof breakpointValues === 'object') {
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
previous = breakpoint;
} else {
acc[breakpoint] = breakpointValues;
}
return acc;
}, {});
}
export default breakpoints;

2
node_modules/@mui/system/esm/breakpoints/index.d.ts generated vendored Normal file
View file

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

2
node_modules/@mui/system/esm/breakpoints/index.js generated vendored Normal file
View file

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

View file

@ -0,0 +1,25 @@
/* eslint-disable @typescript-eslint/naming-convention */
export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
export interface ColorObject {
type: ColorFormat;
values: [number, number, number] | [number, number, number, number];
colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020';
}
export function hexToRgb(hex: string): string;
export function rgbToHex(color: string): string;
export function hslToRgb(color: string): string;
export function decomposeColor(color: string): ColorObject;
export function colorChannel(color: string): string;
export function private_safeColorChannel(color: string, warning?: string): string;
export function recomposeColor(color: ColorObject): string;
export function getContrastRatio(foreground: string, background: string): number;
export function getLuminance(color: string): number;
export function emphasize(color: string, coefficient?: number): string;
export function private_safeEmphasize(color: string, coefficient?: number, warning?: string): string;
export function alpha(color: string, value: number): string;
export function private_safeAlpha(color: string, value: number, warning?: string): string;
export function darken(color: string, coefficient: number): string;
export function private_safeDarken(color: string, coefficient: number, warning?: string): string;
export function lighten(color: string, coefficient: number): string;
export function private_safeLighten(color: string, coefficient: number, warning?: string): string;
export function blend(background: string, overlay: string, opacity: number, gamma?: number): string;

View file

@ -0,0 +1,349 @@
import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
/* eslint-disable @typescript-eslint/naming-convention */
import clamp from '@mui/utils/clamp';
/**
* Returns a number whose value is limited to the given range.
* @param {number} value The value to be clamped
* @param {number} min The lower boundary of the output range
* @param {number} max The upper boundary of the output range
* @returns {number} A number in the range [min, max]
*/
function clampWrapper(value, min = 0, max = 1) {
if (process.env.NODE_ENV !== 'production') {
if (value < min || value > max) {
console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
}
}
return clamp(value, min, max);
}
/**
* Converts a color from CSS hex format to CSS rgb format.
* @param {string} color - Hex color, i.e. #nnn or #nnnnnn
* @returns {string} A CSS rgb color string
*/
export function hexToRgb(color) {
color = color.slice(1);
const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
let colors = color.match(re);
if (colors && colors[0].length === 1) {
colors = colors.map(n => n + n);
}
if (process.env.NODE_ENV !== 'production') {
if (color.length !== color.trim().length) {
console.error(`MUI: The color: "${color}" is invalid. Make sure the color input doesn't contain leading/trailing space.`);
}
}
return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {
return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
}).join(', ')})` : '';
}
function intToHex(int) {
const hex = int.toString(16);
return hex.length === 1 ? `0${hex}` : hex;
}
/**
* Returns an object with the type and values of a color.
*
* Note: Does not support rgb % values.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @returns {object} - A MUI color object: {type: string, values: number[]}
*/
export function decomposeColor(color) {
// Idempotent
if (color.type) {
return color;
}
if (color.charAt(0) === '#') {
return decomposeColor(hexToRgb(color));
}
const marker = color.indexOf('(');
const type = color.substring(0, marker);
if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : _formatErrorMessage(9, color));
}
let values = color.substring(marker + 1, color.length - 1);
let colorSpace;
if (type === 'color') {
values = values.split(' ');
colorSpace = values.shift();
if (values.length === 4 && values[3].charAt(0) === '/') {
values[3] = values[3].slice(1);
}
if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : _formatErrorMessage(10, colorSpace));
}
} else {
values = values.split(',');
}
values = values.map(value => parseFloat(value));
return {
type,
values,
colorSpace
};
}
/**
* Returns a channel created from the input color.
*
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @returns {string} - The channel for the color, that can be used in rgba or hsla colors
*/
export const colorChannel = color => {
const decomposedColor = decomposeColor(color);
return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.includes('hsl') && idx !== 0 ? `${val}%` : val).join(' ');
};
export const private_safeColorChannel = (color, warning) => {
try {
return colorChannel(color);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
};
/**
* Converts a color object with type and values to a string.
* @param {object} color - Decomposed color
* @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
* @param {array} color.values - [n,n,n] or [n,n,n,n]
* @returns {string} A CSS color string
*/
export function recomposeColor(color) {
const {
type,
colorSpace
} = color;
let {
values
} = color;
if (type.includes('rgb')) {
// Only convert the first 3 values to int (i.e. not alpha)
values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
} else if (type.includes('hsl')) {
values[1] = `${values[1]}%`;
values[2] = `${values[2]}%`;
}
if (type.includes('color')) {
values = `${colorSpace} ${values.join(' ')}`;
} else {
values = `${values.join(', ')}`;
}
return `${type}(${values})`;
}
/**
* Converts a color from CSS rgb format to CSS hex format.
* @param {string} color - RGB color, i.e. rgb(n, n, n)
* @returns {string} A CSS rgb color string, i.e. #nnnnnn
*/
export function rgbToHex(color) {
// Idempotent
if (color.startsWith('#')) {
return color;
}
const {
values
} = decomposeColor(color);
return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;
}
/**
* Converts a color from hsl format to rgb format.
* @param {string} color - HSL color values
* @returns {string} rgb color values
*/
export function hslToRgb(color) {
color = decomposeColor(color);
const {
values
} = color;
const h = values[0];
const s = values[1] / 100;
const l = values[2] / 100;
const a = s * Math.min(l, 1 - l);
const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
let type = 'rgb';
const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
if (color.type === 'hsla') {
type += 'a';
rgb.push(values[3]);
}
return recomposeColor({
type,
values: rgb
});
}
/**
* The relative brightness of any point in a color space,
* normalized to 0 for darkest black and 1 for lightest white.
*
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @returns {number} The relative brightness of the color in the range 0 - 1
*/
export function getLuminance(color) {
color = decomposeColor(color);
let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
rgb = rgb.map(val => {
if (color.type !== 'color') {
val /= 255; // normalized
}
return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
});
// Truncate at 3 digits
return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
}
/**
* Calculates the contrast ratio between two colors.
*
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
* @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @returns {number} A contrast ratio value in the range 0 - 21.
*/
export function getContrastRatio(foreground, background) {
const lumA = getLuminance(foreground);
const lumB = getLuminance(background);
return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
}
/**
* Sets the absolute transparency of a color.
* Any existing alpha values are overwritten.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @param {number} value - value to set the alpha channel to in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
export function alpha(color, value) {
color = decomposeColor(color);
value = clampWrapper(value);
if (color.type === 'rgb' || color.type === 'hsl') {
color.type += 'a';
}
if (color.type === 'color') {
color.values[3] = `/${value}`;
} else {
color.values[3] = value;
}
return recomposeColor(color);
}
export function private_safeAlpha(color, value, warning) {
try {
return alpha(color, value);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
}
/**
* Darkens a color.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @param {number} coefficient - multiplier in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
export function darken(color, coefficient) {
color = decomposeColor(color);
coefficient = clampWrapper(coefficient);
if (color.type.includes('hsl')) {
color.values[2] *= 1 - coefficient;
} else if (color.type.includes('rgb') || color.type.includes('color')) {
for (let i = 0; i < 3; i += 1) {
color.values[i] *= 1 - coefficient;
}
}
return recomposeColor(color);
}
export function private_safeDarken(color, coefficient, warning) {
try {
return darken(color, coefficient);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
}
/**
* Lightens a color.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @param {number} coefficient - multiplier in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
export function lighten(color, coefficient) {
color = decomposeColor(color);
coefficient = clampWrapper(coefficient);
if (color.type.includes('hsl')) {
color.values[2] += (100 - color.values[2]) * coefficient;
} else if (color.type.includes('rgb')) {
for (let i = 0; i < 3; i += 1) {
color.values[i] += (255 - color.values[i]) * coefficient;
}
} else if (color.type.includes('color')) {
for (let i = 0; i < 3; i += 1) {
color.values[i] += (1 - color.values[i]) * coefficient;
}
}
return recomposeColor(color);
}
export function private_safeLighten(color, coefficient, warning) {
try {
return lighten(color, coefficient);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
}
/**
* Darken or lighten a color, depending on its luminance.
* Light colors are darkened, dark colors are lightened.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @param {number} coefficient=0.15 - multiplier in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
export function emphasize(color, coefficient = 0.15) {
return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
}
export function private_safeEmphasize(color, coefficient, warning) {
try {
return emphasize(color, coefficient);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
}
/**
* Blend a transparent overlay color with a background color, resulting in a single
* RGB color.
* @param {string} background - CSS color
* @param {string} overlay - CSS color
* @param {number} opacity - Opacity multiplier in the range 0 - 1
* @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
*/
export function blend(background, overlay, opacity, gamma = 1.0) {
const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
const backgroundColor = decomposeColor(background);
const overlayColor = decomposeColor(overlay);
const rgb = [blendChannel(backgroundColor.values[0], overlayColor.values[0]), blendChannel(backgroundColor.values[1], overlayColor.values[1]), blendChannel(backgroundColor.values[2], overlayColor.values[2])];
return recomposeColor({
type: 'rgb',
values: rgb
});
}

View file

@ -0,0 +1 @@
export * from "./colorManipulator.js";

View file

@ -0,0 +1 @@
export * from "./colorManipulator.js";

15
node_modules/@mui/system/esm/compose/compose.d.ts generated vendored Normal file
View file

@ -0,0 +1,15 @@
import { StyleFunction } from "../style/index.js";
/**
* given a list of StyleFunction return the intersection of the props each individual
* StyleFunction requires.
*
* If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
* their composed function requires { color: string, spacing: number }
*/
type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
type ComposedOwnerState<T> = ComposedArg<T>;
export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<ComposedOwnerState<T>> & {
filterProps: string[];
};
export default function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;

24
node_modules/@mui/system/esm/compose/compose.js generated vendored Normal file
View file

@ -0,0 +1,24 @@
import merge from "../merge/index.js";
function compose(...styles) {
const handlers = styles.reduce((acc, style) => {
style.filterProps.forEach(prop => {
acc[prop] = style;
});
return acc;
}, {});
// false positive
// eslint-disable-next-line react/function-component-definition
const fn = props => {
return Object.keys(props).reduce((acc, prop) => {
if (handlers[prop]) {
return merge(acc, handlers[prop](props));
}
return acc;
}, {});
};
fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
return fn;
}
export default compose;

1
node_modules/@mui/system/esm/compose/index.d.ts generated vendored Normal file
View file

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

1
node_modules/@mui/system/esm/compose/index.js generated vendored Normal file
View file

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

View file

@ -0,0 +1,9 @@
import { OverridableComponent } from '@mui/types';
import { BoxTypeMap } from "../Box/index.js";
import { Theme as SystemTheme } from "../createTheme/index.js";
export default function createBox<T extends object = SystemTheme, AdditionalProps extends Record<string, unknown> = {}>(options?: {
themeId?: string;
defaultTheme: T;
defaultClassName?: string;
generateClassName?: (componentName: string) => string;
}): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

35
node_modules/@mui/system/esm/createBox/createBox.js generated vendored Normal file
View file

@ -0,0 +1,35 @@
'use client';
import * as React from 'react';
import clsx from 'clsx';
import styled from '@mui/styled-engine';
import styleFunctionSx, { extendSxProp } from "../styleFunctionSx/index.js";
import useTheme from "../useTheme/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function createBox(options = {}) {
const {
themeId,
defaultTheme,
defaultClassName = 'MuiBox-root',
generateClassName
} = options;
const BoxRoot = styled('div', {
shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
})(styleFunctionSx);
const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
const theme = useTheme(defaultTheme);
const {
className,
component = 'div',
...other
} = extendSxProp(inProps);
return /*#__PURE__*/_jsx(BoxRoot, {
as: component,
ref: ref,
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: themeId ? theme[themeId] || theme : theme,
...other
});
});
return Box;
}

1
node_modules/@mui/system/esm/createBox/index.d.ts generated vendored Normal file
View file

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

1
node_modules/@mui/system/esm/createBox/index.js generated vendored Normal file
View file

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

View file

@ -0,0 +1,78 @@
import { OverridableStringUnion } from '@mui/types';
export interface BreakpointOverrides {}
export type Breakpoint = OverridableStringUnion<'xs' | 'sm' | 'md' | 'lg' | 'xl', BreakpointOverrides>;
export const keys: Breakpoint[];
// Keep in sync with docs/src/pages/customization/breakpoints/breakpoints.md
// #host-reference
export interface Breakpoints {
keys: Breakpoint[];
/**
* Each breakpoint (a key) matches with a fixed screen width (a value).
* @default {
* // extra-small
* xs: 0,
* // small
* sm: 600,
* // medium
* md: 900,
* // large
* lg: 1200,
* // extra-large
* xl: 1536,
* }
*/
values: { [key in Breakpoint]: number };
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
*/
up: (key: Breakpoint | number) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
*/
down: (key: Breakpoint | number) => string;
/**
* @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
* the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
*/
between: (start: Breakpoint | number, end: Breakpoint | number) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
* the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
*/
only: (key: Breakpoint) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.).
* @returns A media query string ready to be used with most styling solutions, which matches screen widths stopping at
* the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
*/
not: (key: Breakpoint) => string;
/**
* The unit used for the breakpoint's values.
* @default 'px'
*/
unit?: string | undefined;
}
export interface BreakpointsOptions extends Partial<Breakpoints> {
/**
* The increment divided by 100 used to implement exclusive breakpoints.
* For example, `step: 5` means that `down(500)` will result in `'(max-width: 499.95px)'`.
* @default 5
*/
step?: number | undefined;
/**
* The unit used for the breakpoint's values.
* @default 'px'
*/
unit?: string | undefined;
}
export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;

View file

@ -0,0 +1,81 @@
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
const sortBreakpointsValues = values => {
const breakpointsAsArray = Object.keys(values).map(key => ({
key,
val: values[key]
})) || [];
// Sort in ascending order
breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
return breakpointsAsArray.reduce((acc, obj) => {
return {
...acc,
[obj.key]: obj.val
};
}, {});
};
// Keep in mind that @media is inclusive by the CSS specification.
export default function createBreakpoints(breakpoints) {
const {
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm).
values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
},
unit = 'px',
step = 5,
...other
} = breakpoints;
const sortedValues = sortBreakpointsValues(values);
const keys = Object.keys(sortedValues);
function up(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (min-width:${value}${unit})`;
}
function down(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (max-width:${value - step / 100}${unit})`;
}
function between(start, end) {
const endIndex = keys.indexOf(end);
return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
}
function only(key) {
if (keys.indexOf(key) + 1 < keys.length) {
return between(key, keys[keys.indexOf(key) + 1]);
}
return up(key);
}
function not(key) {
// handle first and last key separately, for better readability
const keyIndex = keys.indexOf(key);
if (keyIndex === 0) {
return up(keys[1]);
}
if (keyIndex === keys.length - 1) {
return down(keys[keyIndex]);
}
return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
}
return {
keys,
values: sortedValues,
up,
down,
between,
only,
not,
unit,
...other
};
}

View file

@ -0,0 +1,3 @@
/** This export is intended for internal integration with Pigment CSS */
/* eslint-disable import/prefer-default-export */
export { default as unstable_createBreakpoints } from "./createBreakpoints.js";

View file

@ -0,0 +1,3 @@
/** This export is intended for internal integration with Pigment CSS */
/* eslint-disable import/prefer-default-export */
export { default as unstable_createBreakpoints } from "./createBreakpoints.js";

View file

@ -0,0 +1,27 @@
import * as React from 'react';
import { CreateMUIStyled as CreateMUIStyledStyledEngine, CSSInterpolation } from '@mui/styled-engine';
import styleFunctionSx, { SxProps } from "../styleFunctionSx/index.js";
import { Theme as DefaultTheme } from "../createTheme/index.js";
export function shouldForwardProp(propName: PropertyKey): boolean;
export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
theme?: Theme;
as?: React.ElementType;
sx?: SxProps<Theme>;
}
export interface MuiStyledOptions {
name?: string;
slot?: string;
// The difference between Interpolation and CSSInterpolation is that the former supports functions based on props
// If we want to support props in the overrides, we will need to change the CSSInterpolation to Interpolation<Props>
overridesResolver?: (props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation;
skipVariantsResolver?: boolean;
skipSx?: boolean;
}
export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<MUIStyledCommonProps<Theme>, MuiStyledOptions, Theme>;
export default function createStyled<Theme extends object = DefaultTheme>(options?: {
themeId?: string;
defaultTheme?: Theme;
rootShouldForwardProp?: (prop: PropertyKey) => boolean;
slotShouldForwardProp?: (prop: PropertyKey) => boolean;
styleFunctionSx?: typeof styleFunctionSx;
}): CreateMUIStyled<Theme>;

View file

@ -0,0 +1,289 @@
import styledEngineStyled, { internal_mutateStyles as mutateStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
import { isPlainObject } from '@mui/utils/deepmerge';
import capitalize from '@mui/utils/capitalize';
import getDisplayName from '@mui/utils/getDisplayName';
import createTheme from "../createTheme/index.js";
import styleFunctionSx from "../styleFunctionSx/index.js";
import preprocessStyles from "../preprocessStyles.js";
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-labels */
/* eslint-disable no-lone-blocks */
export const systemDefaultTheme = createTheme();
// Update /system/styled/#api in case if this changes
export function shouldForwardProp(prop) {
return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
}
function shallowLayer(serialized, layerName) {
if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
) {
serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
}
return serialized;
}
function defaultOverridesResolver(slot) {
if (!slot) {
return null;
}
return (_props, styles) => styles[slot];
}
function attachTheme(props, themeId, defaultTheme) {
props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
}
function processStyle(props, style, layerName) {
/*
* Style types:
* - null/undefined
* - string
* - CSS style object: { [cssKey]: [cssValue], variants }
* - Processed style object: { style, variants, isProcessed: true }
* - Array of any of the above
*/
const resolvedStyle = typeof style === 'function' ? style(props) : style;
if (Array.isArray(resolvedStyle)) {
return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle, layerName));
}
if (Array.isArray(resolvedStyle?.variants)) {
let rootStyle;
if (resolvedStyle.isProcessed) {
rootStyle = layerName ? shallowLayer(resolvedStyle.style, layerName) : resolvedStyle.style;
} else {
const {
variants,
...otherStyles
} = resolvedStyle;
rootStyle = layerName ? shallowLayer(serializeStyles(otherStyles), layerName) : otherStyles;
}
return processStyleVariants(props, resolvedStyle.variants, [rootStyle], layerName);
}
if (resolvedStyle?.isProcessed) {
return layerName ? shallowLayer(serializeStyles(resolvedStyle.style), layerName) : resolvedStyle.style;
}
return layerName ? shallowLayer(serializeStyles(resolvedStyle), layerName) : resolvedStyle;
}
function processStyleVariants(props, variants, results = [], layerName = undefined) {
let mergedState; // We might not need it, initialized lazily
variantLoop: for (let i = 0; i < variants.length; i += 1) {
const variant = variants[i];
if (typeof variant.props === 'function') {
mergedState ??= {
...props,
...props.ownerState,
ownerState: props.ownerState
};
if (!variant.props(mergedState)) {
continue;
}
} else {
for (const key in variant.props) {
if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
continue variantLoop;
}
}
}
if (typeof variant.style === 'function') {
mergedState ??= {
...props,
...props.ownerState,
ownerState: props.ownerState
};
results.push(layerName ? shallowLayer(serializeStyles(variant.style(mergedState)), layerName) : variant.style(mergedState));
} else {
results.push(layerName ? shallowLayer(serializeStyles(variant.style), layerName) : variant.style);
}
}
return results;
}
export default function createStyled(input = {}) {
const {
themeId,
defaultTheme = systemDefaultTheme,
rootShouldForwardProp = shouldForwardProp,
slotShouldForwardProp = shouldForwardProp
} = input;
function styleAttachTheme(props) {
attachTheme(props, themeId, defaultTheme);
}
const styled = (tag, inputOptions = {}) => {
// If `tag` is already a styled component, filter out the `sx` style function
// to prevent unnecessary styles generated by the composite components.
mutateStyles(tag, styles => styles.filter(style => style !== styleFunctionSx));
const {
name: componentName,
slot: componentSlot,
skipVariantsResolver: inputSkipVariantsResolver,
skipSx: inputSkipSx,
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
...options
} = inputOptions;
const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
// TODO v6: remove `Root` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
const skipSx = inputSkipSx || false;
let shouldForwardPropOption = shouldForwardProp;
// TODO v6: remove `Root` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
if (componentSlot === 'Root' || componentSlot === 'root') {
shouldForwardPropOption = rootShouldForwardProp;
} else if (componentSlot) {
// any other slot specified
shouldForwardPropOption = slotShouldForwardProp;
} else if (isStringTag(tag)) {
// for string (html) tag, preserve the behavior in emotion & styled-components.
shouldForwardPropOption = undefined;
}
const defaultStyledResolver = styledEngineStyled(tag, {
shouldForwardProp: shouldForwardPropOption,
label: generateStyledLabel(componentName, componentSlot),
...options
});
const transformStyle = style => {
// - On the server Emotion doesn't use React.forwardRef for creating components, so the created
// component stays as a function. This condition makes sure that we do not interpolate functions
// which are basically components used as a selectors.
// - `style` could be a styled component from a babel plugin for component selectors, This condition
// makes sure that we do not interpolate them.
if (style.__emotion_real === style) {
return style;
}
if (typeof style === 'function') {
return function styleFunctionProcessor(props) {
return processStyle(props, style, props.theme.modularCssLayers ? layerName : undefined);
};
}
if (isPlainObject(style)) {
const serialized = preprocessStyles(style);
return function styleObjectProcessor(props) {
if (!serialized.variants) {
return props.theme.modularCssLayers ? shallowLayer(serialized.style, layerName) : serialized.style;
}
return processStyle(props, serialized, props.theme.modularCssLayers ? layerName : undefined);
};
}
return style;
};
const muiStyledResolver = (...expressionsInput) => {
const expressionsHead = [];
const expressionsBody = expressionsInput.map(transformStyle);
const expressionsTail = [];
// Preprocess `props` to set the scoped theme value.
// This must run before any other expression.
expressionsHead.push(styleAttachTheme);
if (componentName && overridesResolver) {
expressionsTail.push(function styleThemeOverrides(props) {
const theme = props.theme;
const styleOverrides = theme.components?.[componentName]?.styleOverrides;
if (!styleOverrides) {
return null;
}
const resolvedStyleOverrides = {};
// TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
// eslint-disable-next-line guard-for-in
for (const slotKey in styleOverrides) {
resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey], props.theme.modularCssLayers ? 'theme' : undefined);
}
return overridesResolver(props, resolvedStyleOverrides);
});
}
if (componentName && !skipVariantsResolver) {
expressionsTail.push(function styleThemeVariants(props) {
const theme = props.theme;
const themeVariants = theme?.components?.[componentName]?.variants;
if (!themeVariants) {
return null;
}
return processStyleVariants(props, themeVariants, [], props.theme.modularCssLayers ? 'theme' : undefined);
});
}
if (!skipSx) {
expressionsTail.push(styleFunctionSx);
}
// This function can be called as a tagged template, so the first argument would contain
// CSS `string[]` values.
if (Array.isArray(expressionsBody[0])) {
const inputStrings = expressionsBody.shift();
// We need to add placeholders in the tagged template for the custom functions we have
// possibly added (attachTheme, overrides, variants, and sx).
const placeholdersHead = new Array(expressionsHead.length).fill('');
const placeholdersTail = new Array(expressionsTail.length).fill('');
let outputStrings;
// prettier-ignore
{
outputStrings = [...placeholdersHead, ...inputStrings, ...placeholdersTail];
outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
}
// The only case where we put something before `attachTheme`
expressionsHead.unshift(outputStrings);
}
const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
const Component = defaultStyledResolver(...expressions);
if (tag.muiName) {
Component.muiName = tag.muiName;
}
if (process.env.NODE_ENV !== 'production') {
Component.displayName = generateDisplayName(componentName, componentSlot, tag);
}
return Component;
};
if (defaultStyledResolver.withConfig) {
muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
}
return muiStyledResolver;
};
return styled;
}
function generateDisplayName(componentName, componentSlot, tag) {
if (componentName) {
return `${componentName}${capitalize(componentSlot || '')}`;
}
return `Styled(${getDisplayName(tag)})`;
}
function generateStyledLabel(componentName, componentSlot) {
let label;
if (process.env.NODE_ENV !== 'production') {
if (componentName) {
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
}
}
return label;
}
function isObjectEmpty(object) {
// eslint-disable-next-line
for (const _ in object) {
return false;
}
return true;
}
// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
function isStringTag(tag) {
return typeof tag === 'string' &&
// 96 is one less than the char code
// for "a" so this is checking that
// it's a lowercase character
tag.charCodeAt(0) > 96;
}
function lowercaseFirstLetter(string) {
if (!string) {
return string;
}
return string.charAt(0).toLowerCase() + string.slice(1);
}

2
node_modules/@mui/system/esm/createStyled/index.d.ts generated vendored Normal file
View file

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

2
node_modules/@mui/system/esm/createStyled/index.js generated vendored Normal file
View file

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

View file

@ -0,0 +1,67 @@
import { CSSObject } from '@mui/styled-engine';
export interface ApplyStyles<K extends string> {
(key: K, styles: CSSObject): CSSObject;
}
/**
* A universal utility to style components with multiple color modes. Always use it from the theme object.
* It works with:
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
* - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* With the styled function:
* [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* With the sx prop:
* [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
* 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* @example
* 1. using with `styled`:
* ```jsx
* const Component = styled('div')(({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]);
* ```
*
* @example
* 2. using with `sx` prop:
* ```jsx
* <Box sx={[
* { background: '#e5e5e5' },
* theme => theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]}
* />
* ```
*
* @example
* 3. theming a component:
* ```jsx
* extendTheme({
* components: {
* MuiButton: {
* styleOverrides: {
* root: ({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ],
* },
* }
* }
* })
*```
*/
export default function applyStyles<K extends string>(key: K, styles: CSSObject): CSSObject;

View file

@ -0,0 +1,87 @@
/**
* A universal utility to style components with multiple color modes. Always use it from the theme object.
* It works with:
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
* - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* With the styled function:
* [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* With the sx prop:
* [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
* 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* @example
* 1. using with `styled`:
* ```jsx
* const Component = styled('div')(({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]);
* ```
*
* @example
* 2. using with `sx` prop:
* ```jsx
* <Box sx={[
* { background: '#e5e5e5' },
* theme => theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]}
* />
* ```
*
* @example
* 3. theming a component:
* ```jsx
* extendTheme({
* components: {
* MuiButton: {
* styleOverrides: {
* root: ({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ],
* },
* }
* }
* })
*```
*/
export default function applyStyles(key, styles) {
// @ts-expect-error this is 'any' type
const theme = this;
if (theme.vars) {
if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
return {};
}
// If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
let selector = theme.getColorSchemeSelector(key);
if (selector === '&') {
return styles;
}
if (selector.includes('data-') || selector.includes('.')) {
// '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
}
return {
[selector]: styles
};
}
if (theme.palette.mode === key) {
return styles;
}
return {};
}

View file

@ -0,0 +1,10 @@
export type SpacingOptions = number | string | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
export type SpacingArgument = number | string;
export interface Spacing {
(): string;
(value: SpacingArgument): string;
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
}
export default function createSpacing(spacingInput?: SpacingOptions, transform?: Spacing | (() => undefined) | ((abs: number | string) => number | number)): Spacing;

View file

@ -0,0 +1,31 @@
import { createUnarySpacing } from "../spacing/index.js";
// The different signatures imply different meaning for their arguments that can't be expressed structurally.
// We express the difference with variable names.
export default function createSpacing(spacingInput = 8,
// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
// Smaller components, such as icons, can align to a 4dp grid.
// https://m2.material.io/design/layout/understanding-layout.html
transform = createUnarySpacing({
spacing: spacingInput
})) {
// Already transformed.
if (spacingInput.mui) {
return spacingInput;
}
const spacing = (...argsInput) => {
if (process.env.NODE_ENV !== 'production') {
if (!(argsInput.length <= 4)) {
console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
}
}
const args = argsInput.length === 0 ? [1] : argsInput;
return args.map(argument => {
const output = transform(argument);
return typeof output === 'number' ? `${output}px` : output;
}).join(' ');
};
spacing.mui = true;
return spacing;
}

View file

@ -0,0 +1,54 @@
import { CSSObject } from '@mui/styled-engine';
import { Breakpoints, BreakpointsOptions } from "../createBreakpoints/createBreakpoints.js";
import { Shape, ShapeOptions } from "./shape.js";
import { Spacing, SpacingOptions } from "./createSpacing.js";
import { SxConfig, SxProps } from "../styleFunctionSx/index.js";
import { ApplyStyles } from "./applyStyles.js";
import { CssContainerQueries } from "../cssContainerQueries/index.js";
export { Breakpoint, Breakpoints, BreakpointOverrides } from "../createBreakpoints/createBreakpoints.js";
export type Direction = 'ltr' | 'rtl';
export interface Typography {}
export interface Mixins {}
export interface Shadows {}
export interface Transitions {}
export interface ZIndex {}
export interface ThemeOptions {
shape?: ShapeOptions;
breakpoints?: BreakpointsOptions;
direction?: Direction;
mixins?: Mixins;
palette?: Record<string, any>;
shadows?: Shadows;
spacing?: SpacingOptions;
transitions?: Transitions;
components?: Record<string, any>;
typography?: Typography;
zIndex?: ZIndex;
unstable_sxConfig?: SxConfig;
}
export interface Theme extends CssContainerQueries {
shape: Shape;
breakpoints: Breakpoints;
direction: Direction;
palette: Record<string, any> & {
mode: 'light' | 'dark';
};
shadows?: Shadows;
spacing: Spacing;
transitions?: Transitions;
components?: Record<string, any>;
mixins?: Mixins;
typography?: Typography;
zIndex?: ZIndex;
applyStyles: ApplyStyles<'light' | 'dark'>;
unstable_sxConfig: SxConfig;
unstable_sx: (props: SxProps<Theme>) => CSSObject;
}
/**
* 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?: ThemeOptions, ...args: object[]): Theme;

View file

@ -0,0 +1,49 @@
import deepmerge from '@mui/utils/deepmerge';
import createBreakpoints from "../createBreakpoints/createBreakpoints.js";
import cssContainerQueries from "../cssContainerQueries/index.js";
import shape from "./shape.js";
import createSpacing from "./createSpacing.js";
import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.js";
import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.js";
import applyStyles from "./applyStyles.js";
function createTheme(options = {}, ...args) {
const {
breakpoints: breakpointsInput = {},
palette: paletteInput = {},
spacing: spacingInput,
shape: shapeInput = {},
...other
} = options;
const breakpoints = createBreakpoints(breakpointsInput);
const spacing = createSpacing(spacingInput);
let muiTheme = deepmerge({
breakpoints,
direction: 'ltr',
components: {},
// Inject component definitions.
palette: {
mode: 'light',
...paletteInput
},
spacing,
shape: {
...shape,
...shapeInput
}
}, other);
muiTheme = cssContainerQueries(muiTheme);
muiTheme.applyStyles = applyStyles;
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
muiTheme.unstable_sxConfig = {
...defaultSxConfig,
...other?.unstable_sxConfig
};
muiTheme.unstable_sx = function sx(props) {
return styleFunctionSx({
sx: props,
theme: this
});
};
return muiTheme;
}
export default createTheme;

4
node_modules/@mui/system/esm/createTheme/index.d.ts generated vendored Normal file
View file

@ -0,0 +1,4 @@
export { default } from "./createTheme.js";
export * from "./createTheme.js";
export { default as unstable_applyStyles } from "./applyStyles.js";
export * from "./applyStyles.js";

3
node_modules/@mui/system/esm/createTheme/index.js generated vendored Normal file
View file

@ -0,0 +1,3 @@
export { default } from "./createTheme.js";
export { default as private_createBreakpoints } from "../createBreakpoints/createBreakpoints.js";
export { default as unstable_applyStyles } from "./applyStyles.js";

6
node_modules/@mui/system/esm/createTheme/shape.d.ts generated vendored Normal file
View file

@ -0,0 +1,6 @@
export interface Shape {
borderRadius: number | string;
}
export type ShapeOptions = Partial<Shape>;
declare const shape: Shape;
export default shape;

Some files were not shown because too many files have changed in this diff Show more