Initial commit: Crypto trader application

This commit is contained in:
2025-12-25 20:20:40 -05:00
commit 07a04c1bb8
47895 changed files with 2042266 additions and 0 deletions
+30
View File
@@ -0,0 +1,30 @@
'use client';
import PropTypes from 'prop-types';
import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
import createBox from '../createBox';
import boxClasses from './boxClasses';
var 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;
+3
View File
@@ -0,0 +1,3 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
var boxClasses = generateUtilityClasses('MuiBox', ['root']);
export default boxClasses;
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './Box';
export { default as boxClasses } from './boxClasses';
export * from './boxClasses';
+61
View File
@@ -0,0 +1,61 @@
'use client';
import PropTypes from 'prop-types';
import createContainer from './createContainer';
/**
*
* 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/)
*/
var 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;
+1
View File
@@ -0,0 +1 @@
export {};
@@ -0,0 +1,7 @@
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getContainerUtilityClass(slot) {
return generateUtilityClass('MuiContainer', slot);
}
var containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
export default containerClasses;
+140
View File
@@ -0,0 +1,140 @@
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
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';
import systemStyled from '../styled';
import createTheme from '../createTheme';
import { jsx as _jsx } from "react/jsx-runtime";
var defaultTheme = createTheme();
var defaultCreateStyledComponent = systemStyled('div', {
name: 'MuiContainer',
slot: 'Root',
overridesResolver: function overridesResolver(props, styles) {
var ownerState = props.ownerState;
return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
}
});
var useThemePropsDefault = function useThemePropsDefault(inProps) {
return useThemePropsSystem({
props: inProps,
name: 'MuiContainer',
defaultTheme: defaultTheme
});
};
var useUtilityClasses = function useUtilityClasses(ownerState, componentName) {
var getContainerUtilityClass = function getContainerUtilityClass(slot) {
return generateUtilityClass(componentName, slot);
};
var classes = ownerState.classes,
fixed = ownerState.fixed,
disableGutters = ownerState.disableGutters,
maxWidth = ownerState.maxWidth;
var slots = {
root: ['root', maxWidth && "maxWidth".concat(capitalize(String(maxWidth))), fixed && 'fixed', disableGutters && 'disableGutters']
};
return composeClasses(slots, getContainerUtilityClass, classes);
};
export default function createContainer() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$createStyled = options.createStyledComponent,
createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
_options$useThemeProp = options.useThemeProps,
useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
_options$componentNam = options.componentName,
componentName = _options$componentNam === void 0 ? 'MuiContainer' : _options$componentNam;
var ContainerRoot = createStyledComponent(function (_ref) {
var theme = _ref.theme,
ownerState = _ref.ownerState;
return _extends({
width: '100%',
marginLeft: 'auto',
boxSizing: 'border-box',
marginRight: 'auto',
display: 'block'
}, !ownerState.disableGutters && _defineProperty({
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2)
}, theme.breakpoints.up('sm'), {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3)
}));
}, function (_ref3) {
var theme = _ref3.theme,
ownerState = _ref3.ownerState;
return ownerState.fixed && Object.keys(theme.breakpoints.values).reduce(function (acc, breakpointValueKey) {
var breakpoint = breakpointValueKey;
var value = theme.breakpoints.values[breakpoint];
if (value !== 0) {
// @ts-ignore
acc[theme.breakpoints.up(breakpoint)] = {
maxWidth: "".concat(value).concat(theme.breakpoints.unit)
};
}
return acc;
}, {});
}, function (_ref4) {
var theme = _ref4.theme,
ownerState = _ref4.ownerState;
return _extends({}, ownerState.maxWidth === 'xs' && _defineProperty({}, 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' && _defineProperty({}, theme.breakpoints.up(ownerState.maxWidth), {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: "".concat(theme.breakpoints.values[ownerState.maxWidth]).concat(theme.breakpoints.unit)
}));
});
var Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
var props = useThemeProps(inProps);
var className = props.className,
_props$component = props.component,
component = _props$component === void 0 ? 'div' : _props$component,
_props$disableGutters = props.disableGutters,
disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
_props$fixed = props.fixed,
fixed = _props$fixed === void 0 ? false : _props$fixed,
_props$maxWidth = props.maxWidth,
maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
classesProp = props.classes,
other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]);
var ownerState = _extends({}, props, {
component: component,
disableGutters: disableGutters,
fixed: fixed,
maxWidth: maxWidth
});
// @ts-ignore module augmentation fails if custom breakpoints are used
var classes = useUtilityClasses(ownerState, componentName);
return (
/*#__PURE__*/
// @ts-ignore theme is injected by the styled util
_jsx(ContainerRoot, _extends({
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;
}
+5
View File
@@ -0,0 +1,5 @@
'use client';
export { default } from './Container';
export { default as containerClasses } from './containerClasses';
export * from './containerClasses';
@@ -0,0 +1,60 @@
'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";
var PropsContext = /*#__PURE__*/React.createContext(undefined);
function DefaultPropsProvider(_ref) {
var value = _ref.value,
children = _ref.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) {
var theme = params.theme,
name = params.name,
props = params.props;
if (!theme || !theme.components || !theme.components[name]) {
return props;
}
var config = theme.components[name];
if (config.defaultProps) {
// compatible with v5 signature
return resolveProps(config.defaultProps, props);
}
if (!config.styleOverrides && !config.variants) {
// v6 signature, no property 'defaultProps'
return resolveProps(config, props);
}
return props;
}
export function useDefaultProps(_ref2) {
var props = _ref2.props,
name = _ref2.name;
var ctx = React.useContext(PropsContext);
return getThemeProps({
props: props,
name: name,
theme: {
components: ctx
}
});
}
export default DefaultPropsProvider;
@@ -0,0 +1 @@
export { default, useDefaultProps } from './DefaultPropsProvider';
+61
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';
import { jsx as _jsx } from "react/jsx-runtime";
function wrapGlobalLayer(styles) {
var 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{".concat(serialized.styles, "}");
}
return serialized;
}
return styles;
}
function GlobalStyles(_ref) {
var styles = _ref.styles,
themeId = _ref.themeId,
_ref$defaultTheme = _ref.defaultTheme,
defaultTheme = _ref$defaultTheme === void 0 ? {} : _ref$defaultTheme;
var upperTheme = useTheme(defaultTheme);
var resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
var globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
if (resolvedTheme.modularCssLayers) {
if (Array.isArray(globalStyles)) {
globalStyles = globalStyles.map(function (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;
+4
View File
@@ -0,0 +1,4 @@
'use client';
export { default } from './GlobalStyles';
export * from './GlobalStyles';
@@ -0,0 +1,35 @@
/**
* Split this component for RSC import
*/
import * as React from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export var DEFAULT_MODE_STORAGE_KEY = 'mode';
export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
export default function InitColorSchemeScript(options) {
var _ref = options || {},
_ref$defaultMode = _ref.defaultMode,
defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
_ref$defaultLightColo = _ref.defaultLightColorScheme,
defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
_ref$defaultDarkColor = _ref.defaultDarkColorScheme,
defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
_ref$modeStorageKey = _ref.modeStorageKey,
modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
_ref$colorSchemeStora = _ref.colorSchemeStorageKey,
colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
_ref$attribute = _ref.attribute,
attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
_ref$colorSchemeNode = _ref.colorSchemeNode,
colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode,
nonce = _ref.nonce;
return /*#__PURE__*/_jsx("script", {
suppressHydrationWarning: true,
nonce: typeof window === 'undefined' ? nonce : ''
// eslint-disable-next-line react/no-danger
,
dangerouslySetInnerHTML: {
__html: "(function() {\ntry {\n var mode = localStorage.getItem('".concat(modeStorageKey, "') || '").concat(defaultMode, "';\n var colorScheme = '';\n if (mode === 'system') {\n // handle system mode\n var mql = window.matchMedia('(prefers-color-scheme: dark)');\n if (mql.matches) {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n } else {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n }\n }\n if (mode === 'light') {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n }\n if (mode === 'dark') {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n }\n if (colorScheme) {\n ").concat(colorSchemeNode, ".setAttribute('").concat(attribute, "', colorScheme);\n }\n} catch(e){}})();")
}
}, "mui-color-scheme-init");
}
@@ -0,0 +1 @@
export { default } from './InitColorSchemeScript';
+22
View File
@@ -0,0 +1,22 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from 'react';
import PropTypes from 'prop-types';
import { jsx as _jsx } from "react/jsx-runtime";
var RtlContext = /*#__PURE__*/React.createContext();
function RtlProvider(_ref) {
var value = _ref.value,
props = _objectWithoutProperties(_ref, ["value"]);
return /*#__PURE__*/_jsx(RtlContext.Provider, _extends({
value: value != null ? value : true
}, props));
}
process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
children: PropTypes.node,
value: PropTypes.bool
} : void 0;
export var useRtl = function useRtl() {
var value = React.useContext(RtlContext);
return value != null ? value : false;
};
export default RtlProvider;
+62
View File
@@ -0,0 +1,62 @@
'use client';
import PropTypes from 'prop-types';
import createStack from './createStack';
/**
*
* 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/)
*/
var 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;
+1
View File
@@ -0,0 +1 @@
export {};
+180
View File
@@ -0,0 +1,180 @@
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _extends from "@babel/runtime/helpers/esm/extends";
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';
import useThemePropsSystem from '../useThemeProps';
import { extendSxProp } from '../styleFunctionSx';
import createTheme from '../createTheme';
import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from '../breakpoints';
import { createUnarySpacing, getValue } from '../spacing';
import { jsx as _jsx } from "react/jsx-runtime";
var defaultTheme = createTheme();
// widening Theme to any so that the consumer can own the theme structure.
var defaultCreateStyledComponent = systemStyled('div', {
name: 'MuiStack',
slot: 'Root',
overridesResolver: function overridesResolver(props, styles) {
return styles.root;
}
});
function useThemePropsDefault(props) {
return useThemePropsSystem({
props: props,
name: 'MuiStack',
defaultTheme: 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) {
var childrenArray = React.Children.toArray(children).filter(Boolean);
return childrenArray.reduce(function (output, child, index) {
output.push(child);
if (index < childrenArray.length - 1) {
output.push( /*#__PURE__*/React.cloneElement(separator, {
key: "separator-".concat(index)
}));
}
return output;
}, []);
}
var getSideFromDirection = function getSideFromDirection(direction) {
return {
row: 'Left',
'row-reverse': 'Right',
column: 'Top',
'column-reverse': 'Bottom'
}[direction];
};
export var style = function style(_ref) {
var ownerState = _ref.ownerState,
theme = _ref.theme;
var styles = _extends({
display: 'flex',
flexDirection: 'column'
}, handleBreakpoints({
theme: theme
}, resolveBreakpointValues({
values: ownerState.direction,
breakpoints: theme.breakpoints.values
}), function (propValue) {
return {
flexDirection: propValue
};
}));
if (ownerState.spacing) {
var transformer = createUnarySpacing(theme);
var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
acc[breakpoint] = true;
}
return acc;
}, {});
var directionValues = resolveBreakpointValues({
values: ownerState.direction,
base: base
});
var spacingValues = resolveBreakpointValues({
values: ownerState.spacing,
base: base
});
if (_typeof(directionValues) === 'object') {
Object.keys(directionValues).forEach(function (breakpoint, index, breakpoints) {
var directionValue = directionValues[breakpoint];
if (!directionValue) {
var previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
directionValues[breakpoint] = previousDirectionValue;
}
});
}
var styleFromPropValue = function 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)': _defineProperty({}, "margin".concat(getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)), getValue(transformer, propValue))
};
};
styles = deepmerge(styles, handleBreakpoints({
theme: theme
}, spacingValues, styleFromPropValue));
}
styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
return styles;
};
export default function createStack() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$createStyled = options.createStyledComponent,
createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
_options$useThemeProp = options.useThemeProps,
useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
_options$componentNam = options.componentName,
componentName = _options$componentNam === void 0 ? 'MuiStack' : _options$componentNam;
var useUtilityClasses = function useUtilityClasses() {
var slots = {
root: ['root']
};
return composeClasses(slots, function (slot) {
return generateUtilityClass(componentName, slot);
}, {});
};
var StackRoot = createStyledComponent(style);
var Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
var themeProps = useThemeProps(inProps);
var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
var _props$component = props.component,
component = _props$component === void 0 ? 'div' : _props$component,
_props$direction = props.direction,
direction = _props$direction === void 0 ? 'column' : _props$direction,
_props$spacing = props.spacing,
spacing = _props$spacing === void 0 ? 0 : _props$spacing,
divider = props.divider,
children = props.children,
className = props.className,
_props$useFlexGap = props.useFlexGap,
useFlexGap = _props$useFlexGap === void 0 ? false : _props$useFlexGap,
other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"]);
var ownerState = {
direction: direction,
spacing: spacing,
useFlexGap: useFlexGap
};
var classes = useUtilityClasses();
return /*#__PURE__*/_jsx(StackRoot, _extends({
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;
}
+7
View File
@@ -0,0 +1,7 @@
'use client';
export { default } from './Stack';
export { default as createStack } from './createStack';
export * from './StackProps';
export { default as stackClasses } from './stackClasses';
export * from './stackClasses';
+7
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);
}
var stackClasses = generateUtilityClasses('MuiStack', ['root']);
export default stackClasses;
@@ -0,0 +1,94 @@
'use client';
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
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';
import RtlProvider from '../RtlProvider';
import DefaultPropsProvider from '../DefaultPropsProvider';
import useLayerOrder from './useLayerOrder';
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
var EMPTY_THEME = {};
function useThemeScoping(themeId, upperTheme, localTheme) {
var isPrivate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
return React.useMemo(function () {
var resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
if (typeof localTheme === 'function') {
var mergedTheme = localTheme(resolvedTheme);
var result = themeId ? _extends({}, upperTheme, _defineProperty({}, 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 function () {
return result;
};
}
return result;
}
return themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, localTheme)) : _extends({}, 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) {
var children = props.children,
localTheme = props.theme,
themeId = props.themeId;
var upperTheme = useThemeWithoutDefault(EMPTY_THEME);
var 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'));
}
}
var engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
var privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
var rtlValue = engineTheme.direction === 'rtl';
var 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: engineTheme == null ? void 0 : 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;
+3
View File
@@ -0,0 +1,3 @@
'use client';
export { default } from './ThemeProvider';
@@ -0,0 +1,54 @@
'use client';
import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import useId from '@mui/utils/useId';
import GlobalStyles from '../GlobalStyles';
import useThemeWithoutDefault from '../useThemeWithoutDefault';
/**
* 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) {
var upperTheme = useThemeWithoutDefault();
var id = useId() || '';
var modularCssLayers = theme.modularCssLayers;
var 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 ".concat(layerOrder, ";");
}
useEnhancedEffect(function () {
var head = document.querySelector('head');
if (!head) {
return;
}
var firstChild = head.firstChild;
if (layerOrder) {
var _firstChild$hasAttrib;
// Only insert if first child doesn't have data-mui-layer-order attribute
if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
return;
}
var styleElement = document.createElement('style');
styleElement.setAttribute('data-mui-layer-order', id);
styleElement.textContent = layerOrder;
head.prepend(styleElement);
} else {
var _head$querySelector;
(_head$querySelector = head.querySelector("style[data-mui-layer-order=\"".concat(id, "\"]"))) == null || _head$querySelector.remove();
}
}, [layerOrder, id]);
if (!layerOrder) {
return null;
}
return /*#__PURE__*/_jsx(GlobalStyles, {
styles: layerOrder
});
}
+177
View File
@@ -0,0 +1,177 @@
'use client';
import PropTypes from 'prop-types';
import createGrid from './createGrid';
/**
*
* 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/)
*/
var 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]),
/**
* If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
*/
disableEqualOverflow: PropTypes.bool,
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
* @default false
*/
lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
*/
lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `md` breakpoint and wider screens if not overridden.
* @default false
*/
md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `md` breakpoint and wider screens if not overridden.
*/
mdOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
/**
* 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]),
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
* @default false
*/
sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
*/
smOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
/**
* 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 regardless of container or item.
*
* ```js
* <Grid> // level 0
* <Grid> // level 1
* <Grid> // level 2
* <Grid> // level 1
* ```
*
* Only consecutive grid is considered nesting.
* A grid container will start at `0` if there are non-Grid element above it.
*
* ```js
* <Grid> // level 0
* <div>
* <Grid> // level 0
* <Grid> // level 1
* ```
*/
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']),
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
* @default false
*/
xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
*/
xlOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for all the screen sizes with the lowest priority.
* @default false
*/
xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `xs` breakpoint and wider screens if not overridden.
*/
xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
} : void 0;
export default Grid;
+1
View File
@@ -0,0 +1 @@
export {};
+184
View File
@@ -0,0 +1,184 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
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';
import useThemePropsSystem from '../useThemeProps';
import useTheme from '../useTheme';
import { extendSxProp } from '../styleFunctionSx';
import createTheme from '../createTheme';
import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from './gridGenerator';
import { jsx as _jsx } from "react/jsx-runtime";
var defaultTheme = createTheme();
// widening Theme to any so that the consumer can own the theme structure.
var defaultCreateStyledComponent = systemStyled('div', {
name: 'MuiGrid',
slot: 'Root',
overridesResolver: function overridesResolver(props, styles) {
return styles.root;
}
});
function useThemePropsDefault(props) {
return useThemePropsSystem({
props: props,
name: 'MuiGrid',
defaultTheme: defaultTheme
});
}
export default function createGrid() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$createStyled = options.createStyledComponent,
createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
_options$useThemeProp = options.useThemeProps,
useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
_options$componentNam = options.componentName,
componentName = _options$componentNam === void 0 ? 'MuiGrid' : _options$componentNam;
var GridOverflowContext = /*#__PURE__*/React.createContext(undefined);
if (process.env.NODE_ENV !== 'production') {
GridOverflowContext.displayName = 'GridOverflowContext';
}
var useUtilityClasses = function useUtilityClasses(ownerState, theme) {
var container = ownerState.container,
direction = ownerState.direction,
spacing = ownerState.spacing,
wrap = ownerState.wrap,
gridSize = ownerState.gridSize;
var slots = {
root: ['root', container && 'container', wrap !== 'wrap' && "wrap-xs-".concat(String(wrap))].concat(_toConsumableArray(generateDirectionClasses(direction)), _toConsumableArray(generateSizeClassNames(gridSize)), _toConsumableArray(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : []))
};
return composeClasses(slots, function (slot) {
return generateUtilityClass(componentName, slot);
}, {});
};
var GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
var _inProps$columns, _inProps$spacing, _ref3, _inProps$rowSpacing, _ref4, _inProps$columnSpacin, _ref5, _disableEqualOverflow;
var theme = useTheme();
var themeProps = useThemeProps(inProps);
var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
var overflow = React.useContext(GridOverflowContext);
var className = props.className,
children = props.children,
_props$columns = props.columns,
columnsProp = _props$columns === void 0 ? 12 : _props$columns,
_props$container = props.container,
container = _props$container === void 0 ? false : _props$container,
_props$component = props.component,
component = _props$component === void 0 ? 'div' : _props$component,
_props$direction = props.direction,
direction = _props$direction === void 0 ? 'row' : _props$direction,
_props$wrap = props.wrap,
wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,
_props$spacing = props.spacing,
spacingProp = _props$spacing === void 0 ? 0 : _props$spacing,
_props$rowSpacing = props.rowSpacing,
rowSpacingProp = _props$rowSpacing === void 0 ? spacingProp : _props$rowSpacing,
_props$columnSpacing = props.columnSpacing,
columnSpacingProp = _props$columnSpacing === void 0 ? spacingProp : _props$columnSpacing,
themeDisableEqualOverflow = props.disableEqualOverflow,
_props$unstable_level = props.unstable_level,
level = _props$unstable_level === void 0 ? 0 : _props$unstable_level,
rest = _objectWithoutProperties(props, ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"]); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
var disableEqualOverflow = themeDisableEqualOverflow;
if (level && themeDisableEqualOverflow !== undefined) {
disableEqualOverflow = inProps.disableEqualOverflow;
}
// collect breakpoints related props because they can be customized from the theme.
var gridSize = {};
var gridOffset = {};
var other = {};
Object.entries(rest).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
val = _ref2[1];
if (theme.breakpoints.values[key] !== undefined) {
gridSize[key] = val;
} else if (theme.breakpoints.values[key.replace('Offset', '')] !== undefined) {
gridOffset[key.replace('Offset', '')] = val;
} else {
other[key] = val;
}
});
var columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : level ? undefined : columnsProp;
var spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
var rowSpacing = (_ref3 = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref3 : level ? undefined : rowSpacingProp;
var columnSpacing = (_ref4 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref4 : level ? undefined : columnSpacingProp;
var ownerState = _extends({}, props, {
level: level,
columns: columns,
container: container,
direction: direction,
wrap: wrap,
spacing: spacing,
rowSpacing: rowSpacing,
columnSpacing: columnSpacing,
gridSize: gridSize,
gridOffset: gridOffset,
disableEqualOverflow: (_ref5 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref5 : false,
// use context value if exists.
parentDisableEqualOverflow: overflow // for nested grid
});
var classes = useUtilityClasses(ownerState, theme);
var result = /*#__PURE__*/_jsx(GridRoot, _extends({
ref: ref,
as: component,
ownerState: ownerState,
className: clsx(classes.root, className)
}, other, {
children: React.Children.map(children, function (child) {
if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
var _unstable_level, _child$props;
return /*#__PURE__*/React.cloneElement(child, {
unstable_level: (_unstable_level = (_child$props = child.props) == null ? void 0 : _child$props.unstable_level) != null ? _unstable_level : level + 1
});
}
return child;
})
}));
if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
// There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids:
// 1. It is the root grid with `disableEqualOverflow`.
// 2. It is a nested grid with different `disableEqualOverflow` from the context.
result = /*#__PURE__*/_jsx(GridOverflowContext.Provider, {
value: disableEqualOverflow,
children: result
});
}
return result;
});
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]),
disableEqualOverflow: PropTypes.bool,
lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
mdOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
smOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
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']),
xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
xlOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
} : void 0;
// @ts-ignore internal logic for nested grid
Grid.muiName = 'Grid';
return Grid;
}
+28
View File
@@ -0,0 +1,28 @@
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
export function getGridUtilityClass(slot) {
return generateUtilityClass('MuiGrid', slot);
}
var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
var WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item'].concat(_toConsumableArray(SPACINGS.map(function (spacing) {
return "spacing-xs-".concat(spacing);
})), _toConsumableArray(DIRECTIONS.map(function (direction) {
return "direction-xs-".concat(direction);
})), _toConsumableArray(WRAPS.map(function (wrap) {
return "wrap-xs-".concat(wrap);
})), _toConsumableArray(GRID_SIZES.map(function (size) {
return "grid-xs-".concat(size);
})), _toConsumableArray(GRID_SIZES.map(function (size) {
return "grid-sm-".concat(size);
})), _toConsumableArray(GRID_SIZES.map(function (size) {
return "grid-md-".concat(size);
})), _toConsumableArray(GRID_SIZES.map(function (size) {
return "grid-lg-".concat(size);
})), _toConsumableArray(GRID_SIZES.map(function (size) {
return "grid-xl-".concat(size);
}))));
export default gridClasses;
+216
View File
@@ -0,0 +1,216 @@
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { traverseBreakpoints } from './traverseBreakpoints';
function appendLevel(level) {
if (!level) {
return '';
}
return "Level".concat(level);
}
function isNestedContainer(ownerState) {
return ownerState.unstable_level > 0 && ownerState.container;
}
function createGetSelfSpacing(ownerState) {
return function getSelfSpacing(axis) {
return "var(--Grid-".concat(axis, "Spacing").concat(appendLevel(ownerState.unstable_level), ")");
};
}
function createGetParentSpacing(ownerState) {
return function getParentSpacing(axis) {
if (ownerState.unstable_level === 0) {
return "var(--Grid-".concat(axis, "Spacing)");
}
return "var(--Grid-".concat(axis, "Spacing").concat(appendLevel(ownerState.unstable_level - 1), ")");
};
}
function getParentColumns(ownerState) {
if (ownerState.unstable_level === 0) {
return "var(--Grid-columns)";
}
return "var(--Grid-columns".concat(appendLevel(ownerState.unstable_level - 1), ")");
}
export var generateGridSizeStyles = function generateGridSizeStyles(_ref) {
var theme = _ref.theme,
ownerState = _ref.ownerState;
var getSelfSpacing = createGetSelfSpacing(ownerState);
var styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.gridSize, function (appendStyle, value) {
var style = {};
if (value === true) {
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% * ".concat(value, " / ").concat(getParentColumns(ownerState)).concat(isNestedContainer(ownerState) ? " + ".concat(getSelfSpacing('column')) : '', ")")
};
}
appendStyle(styles, style);
});
return styles;
};
export var generateGridOffsetStyles = function generateGridOffsetStyles(_ref2) {
var theme = _ref2.theme,
ownerState = _ref2.ownerState;
var styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, function (appendStyle, value) {
var style = {};
if (value === 'auto') {
style = {
marginLeft: 'auto'
};
}
if (typeof value === 'number') {
style = {
marginLeft: value === 0 ? '0px' : "calc(100% * ".concat(value, " / ").concat(getParentColumns(ownerState), ")")
};
}
appendStyle(styles, style);
});
return styles;
};
export var generateGridColumnsStyles = function generateGridColumnsStyles(_ref3) {
var theme = _ref3.theme,
ownerState = _ref3.ownerState;
if (!ownerState.container) {
return {};
}
var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columns".concat(appendLevel(ownerState.unstable_level)), getParentColumns(ownerState)) : {
'--Grid-columns': 12
};
traverseBreakpoints(theme.breakpoints, ownerState.columns, function (appendStyle, value) {
appendStyle(styles, _defineProperty({}, "--Grid-columns".concat(appendLevel(ownerState.unstable_level)), value));
});
return styles;
};
export var generateGridRowSpacingStyles = function generateGridRowSpacingStyles(_ref5) {
var theme = _ref5.theme,
ownerState = _ref5.ownerState;
if (!ownerState.container) {
return {};
}
var getParentSpacing = createGetParentSpacing(ownerState);
var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-rowSpacing".concat(appendLevel(ownerState.unstable_level)), getParentSpacing('row')) : {};
traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, function (appendStyle, value) {
var _theme$spacing;
appendStyle(styles, _defineProperty({}, "--Grid-rowSpacing".concat(appendLevel(ownerState.unstable_level)), typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)));
});
return styles;
};
export var generateGridColumnSpacingStyles = function generateGridColumnSpacingStyles(_ref7) {
var theme = _ref7.theme,
ownerState = _ref7.ownerState;
if (!ownerState.container) {
return {};
}
var getParentSpacing = createGetParentSpacing(ownerState);
var styles = isNestedContainer(ownerState) ? _defineProperty({}, "--Grid-columnSpacing".concat(appendLevel(ownerState.unstable_level)), getParentSpacing('column')) : {};
traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, function (appendStyle, value) {
var _theme$spacing2;
appendStyle(styles, _defineProperty({}, "--Grid-columnSpacing".concat(appendLevel(ownerState.unstable_level)), typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)));
});
return styles;
};
export var generateGridDirectionStyles = function generateGridDirectionStyles(_ref9) {
var theme = _ref9.theme,
ownerState = _ref9.ownerState;
if (!ownerState.container) {
return {};
}
var styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.direction, function (appendStyle, value) {
appendStyle(styles, {
flexDirection: value
});
});
return styles;
};
export var generateGridStyles = function generateGridStyles(_ref10) {
var ownerState = _ref10.ownerState;
var getSelfSpacing = createGetSelfSpacing(ownerState);
var getParentSpacing = createGetParentSpacing(ownerState);
return _extends({
minWidth: 0,
boxSizing: 'border-box'
}, ownerState.container && _extends({
display: 'flex',
flexWrap: 'wrap'
}, ownerState.wrap && ownerState.wrap !== 'wrap' && {
flexWrap: ownerState.wrap
}, {
margin: "calc(".concat(getSelfSpacing('row'), " / -2) calc(").concat(getSelfSpacing('column'), " / -2)")
}, ownerState.disableEqualOverflow && {
margin: "calc(".concat(getSelfSpacing('row'), " * -1) 0px 0px calc(").concat(getSelfSpacing('column'), " * -1)")
}), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
padding: "calc(".concat(getParentSpacing('row'), " / 2) calc(").concat(getParentSpacing('column'), " / 2)")
}, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
padding: "".concat(getParentSpacing('row'), " 0px 0px ").concat(getParentSpacing('column'))
}));
};
export var generateSizeClassNames = function generateSizeClassNames(gridSize) {
var classNames = [];
Object.entries(gridSize).forEach(function (_ref11) {
var _ref12 = _slicedToArray(_ref11, 2),
key = _ref12[0],
value = _ref12[1];
if (value !== false && value !== undefined) {
classNames.push("grid-".concat(key, "-").concat(String(value)));
}
});
return classNames;
};
export var generateSpacingClassNames = function generateSpacingClassNames(spacing) {
var smallestBreakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '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-".concat(smallestBreakpoint, "-").concat(String(spacing))];
}
if (_typeof(spacing) === 'object' && !Array.isArray(spacing)) {
var classNames = [];
Object.entries(spacing).forEach(function (_ref13) {
var _ref14 = _slicedToArray(_ref13, 2),
key = _ref14[0],
value = _ref14[1];
if (isValidSpacing(value)) {
classNames.push("spacing-".concat(key, "-").concat(String(value)));
}
});
return classNames;
}
return [];
};
export var generateDirectionClasses = function generateDirectionClasses(direction) {
if (direction === undefined) {
return [];
}
if (_typeof(direction) === 'object') {
return Object.entries(direction).map(function (_ref15) {
var _ref16 = _slicedToArray(_ref15, 2),
key = _ref16[0],
value = _ref16[1];
return "direction-".concat(key, "-").concat(value);
});
}
return ["direction-xs-".concat(String(direction))];
};
+8
View File
@@ -0,0 +1,8 @@
'use client';
export { default } from './Grid';
export { default as createGrid } from './createGrid';
export * from './GridProps';
export { default as gridClasses } from './gridClasses';
export * from './gridClasses';
export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
@@ -0,0 +1,48 @@
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _extends from "@babel/runtime/helpers/esm/extends";
export var filterBreakpointKeys = function filterBreakpointKeys(breakpointsKeys, responsiveKeys) {
return breakpointsKeys.filter(function (key) {
return responsiveKeys.includes(key);
});
};
export var traverseBreakpoints = function traverseBreakpoints(breakpoints, responsive, iterator) {
var smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
if (Array.isArray(responsive)) {
responsive.forEach(function (breakpointValue, index) {
iterator(function (responsiveStyles, style) {
if (index <= breakpoints.keys.length - 1) {
if (index === 0) {
_extends(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
var keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
keys.forEach(function (key) {
if (breakpoints.keys.indexOf(key) !== -1) {
// @ts-ignore already checked that responsive is an object
var breakpointValue = responsive[key];
if (breakpointValue !== undefined) {
iterator(function (responsiveStyles, style) {
if (smallestBreakpoint === key) {
_extends(responsiveStyles, style);
} else {
responsiveStyles[breakpoints.up(key)] = style;
}
}, breakpointValue);
}
}
});
} else if (typeof responsive === 'number' || typeof responsive === 'string') {
iterator(function (responsiveStyles, style) {
_extends(responsiveStyles, style);
}, responsive);
}
};
+51
View File
@@ -0,0 +1,51 @@
import responsivePropType from './responsivePropType';
import style from './style';
import compose from './compose';
import { createUnaryUnit, getValue } from './spacing';
import { handleBreakpoints } from './breakpoints';
export function borderTransform(value) {
if (typeof value !== 'number') {
return value;
}
return "".concat(value, "px solid");
}
function createBorderStyle(prop, transform) {
return style({
prop: prop,
themeKey: 'borders',
transform: transform
});
}
export var border = createBorderStyle('border', borderTransform);
export var borderTop = createBorderStyle('borderTop', borderTransform);
export var borderRight = createBorderStyle('borderRight', borderTransform);
export var borderBottom = createBorderStyle('borderBottom', borderTransform);
export var borderLeft = createBorderStyle('borderLeft', borderTransform);
export var borderColor = createBorderStyle('borderColor');
export var borderTopColor = createBorderStyle('borderTopColor');
export var borderRightColor = createBorderStyle('borderRightColor');
export var borderBottomColor = createBorderStyle('borderBottomColor');
export var borderLeftColor = createBorderStyle('borderLeftColor');
export var outline = createBorderStyle('outline', borderTransform);
export var outlineColor = createBorderStyle('outlineColor');
// false positive
// eslint-disable-next-line react/function-component-definition
export var borderRadius = function borderRadius(props) {
if (props.borderRadius !== undefined && props.borderRadius !== null) {
var transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
var styleFromPropValue = function styleFromPropValue(propValue) {
return {
borderRadius: getValue(transformer, propValue)
};
};
return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
}
return null;
};
borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
borderRadius: responsivePropType
} : {};
borderRadius.filterProps = ['borderRadius'];
var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
export default borders;
+162
View File
@@ -0,0 +1,162 @@
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import PropTypes from 'prop-types';
import deepmerge from '@mui/utils/deepmerge';
import merge from './merge';
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm[.
export var values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
};
var 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: function up(key) {
return "@media (min-width:".concat(values[key], "px)");
}
};
export function handleBreakpoints(props, propValue, styleFromPropValue) {
var theme = props.theme || {};
if (Array.isArray(propValue)) {
var themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return propValue.reduce(function (acc, item, index) {
acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
return acc;
}, {});
}
if (_typeof(propValue) === 'object') {
var _themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return Object.keys(propValue).reduce(function (acc, breakpoint) {
// key is breakpoint
if (Object.keys(_themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
var mediaKey = _themeBreakpoints.up(breakpoint);
acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
} else {
var cssKey = breakpoint;
acc[cssKey] = propValue[cssKey];
}
return acc;
}, {});
}
var output = styleFromPropValue(propValue);
return output;
}
function breakpoints(styleFunction) {
// false positive
// eslint-disable-next-line react/function-component-definition
var newStyleFunction = function newStyleFunction(props) {
var theme = props.theme || {};
var base = styleFunction(props);
var themeBreakpoints = theme.breakpoints || defaultBreakpoints;
var extended = themeBreakpoints.keys.reduce(function (acc, key) {
if (props[key]) {
acc = acc || {};
acc[themeBreakpoints.up(key)] = styleFunction(_extends({
theme: theme
}, props[key]));
}
return acc;
}, null);
return merge(base, extended);
};
newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
xs: PropTypes.object,
sm: PropTypes.object,
md: PropTypes.object,
lg: PropTypes.object,
xl: PropTypes.object
}) : {};
newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl'].concat(_toConsumableArray(styleFunction.filterProps));
return newStyleFunction;
}
export function createEmptyBreakpointObject() {
var _breakpointsInput$key;
var breakpointsInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce(function (acc, key) {
var breakpointStyleKey = breakpointsInput.up(key);
acc[breakpointStyleKey] = {};
return acc;
}, {});
return breakpointsInOrder || {};
}
export function removeUnusedBreakpoints(breakpointKeys, style) {
return breakpointKeys.reduce(function (acc, key) {
var breakpointOutput = acc[key];
var isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
if (isBreakpointUnused) {
delete acc[key];
}
return acc;
}, style);
}
export function mergeBreakpointsInOrder(breakpointsInput) {
var emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
for (var _len = arguments.length, styles = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
styles[_key - 1] = arguments[_key];
}
var mergedOutput = [emptyBreakpoints].concat(styles).reduce(function (prev, next) {
return 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 {};
}
var base = {};
var breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach(function (breakpoint, i) {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach(function (breakpoint) {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}
export function resolveBreakpointValues(_ref) {
var breakpointValues = _ref.values,
themeBreakpoints = _ref.breakpoints,
customBase = _ref.base;
var base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
var keys = Object.keys(base);
if (keys.length === 0) {
return breakpointValues;
}
var previous;
return keys.reduce(function (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;
+356
View File
@@ -0,0 +1,356 @@
import _formatMuiErrorMessage 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) {
var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
if (process.env.NODE_ENV !== 'production') {
if (value < min || value > max) {
console.error("MUI: The value provided ".concat(value, " is out of range [").concat(min, ", ").concat(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);
var re = new RegExp(".{1,".concat(color.length >= 6 ? 2 : 1, "}"), 'g');
var colors = color.match(re);
if (colors && colors[0].length === 1) {
colors = colors.map(function (n) {
return n + n;
});
}
return colors ? "rgb".concat(colors.length === 4 ? 'a' : '', "(").concat(colors.map(function (n, index) {
return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
}).join(', '), ")") : '';
}
function intToHex(int) {
var hex = int.toString(16);
return hex.length === 1 ? "0".concat(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));
}
var marker = color.indexOf('(');
var type = color.substring(0, marker);
if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Unsupported `".concat(color, "` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") : _formatMuiErrorMessage(9, color));
}
var values = color.substring(marker + 1, color.length - 1);
var 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'].indexOf(colorSpace) === -1) {
throw new Error(process.env.NODE_ENV !== "production" ? "MUI: unsupported `".concat(colorSpace, "` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.") : _formatMuiErrorMessage(10, colorSpace));
}
} else {
values = values.split(',');
}
values = values.map(function (value) {
return parseFloat(value);
});
return {
type: type,
values: values,
colorSpace: 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 var colorChannel = function colorChannel(color) {
var decomposedColor = decomposeColor(color);
return decomposedColor.values.slice(0, 3).map(function (val, idx) {
return decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? "".concat(val, "%") : val;
}).join(' ');
};
export var private_safeColorChannel = function 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) {
var type = color.type,
colorSpace = color.colorSpace;
var values = color.values;
if (type.indexOf('rgb') !== -1) {
// Only convert the first 3 values to int (i.e. not alpha)
values = values.map(function (n, i) {
return i < 3 ? parseInt(n, 10) : n;
});
} else if (type.indexOf('hsl') !== -1) {
values[1] = "".concat(values[1], "%");
values[2] = "".concat(values[2], "%");
}
if (type.indexOf('color') !== -1) {
values = "".concat(colorSpace, " ").concat(values.join(' '));
} else {
values = "".concat(values.join(', '));
}
return "".concat(type, "(").concat(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.indexOf('#') === 0) {
return color;
}
var _decomposeColor = decomposeColor(color),
values = _decomposeColor.values;
return "#".concat(values.map(function (n, i) {
return 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);
var _color = color,
values = _color.values;
var h = values[0];
var s = values[1] / 100;
var l = values[2] / 100;
var a = s * Math.min(l, 1 - l);
var f = function f(n) {
var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
};
var type = 'rgb';
var 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: 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);
var rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
rgb = rgb.map(function (val) {
if (color.type !== 'color') {
val /= 255; // normalized
}
return val <= 0.03928 ? val / 12.92 : Math.pow((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) {
var lumA = getLuminance(foreground);
var 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] = "/".concat(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.indexOf('hsl') !== -1) {
color.values[2] *= 1 - coefficient;
} else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
for (var 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.indexOf('hsl') !== -1) {
color.values[2] += (100 - color.values[2]) * coefficient;
} else if (color.type.indexOf('rgb') !== -1) {
for (var i = 0; i < 3; i += 1) {
color.values[i] += (255 - color.values[i]) * coefficient;
}
} else if (color.type.indexOf('color') !== -1) {
for (var _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) {
var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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) {
var gamma = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1.0;
var blendChannel = function blendChannel(b, o) {
return Math.round(Math.pow(Math.pow(b, 1 / gamma) * (1 - opacity) + Math.pow(o, 1 / gamma) * opacity, gamma));
};
var backgroundColor = decomposeColor(background);
var overlayColor = decomposeColor(overlay);
var 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
});
}
+32
View File
@@ -0,0 +1,32 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import merge from './merge';
function compose() {
for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
styles[_key] = arguments[_key];
}
var handlers = styles.reduce(function (acc, style) {
style.filterProps.forEach(function (prop) {
acc[prop] = style;
});
return acc;
}, {});
// false positive
// eslint-disable-next-line react/function-component-definition
var fn = function fn(props) {
return Object.keys(props).reduce(function (acc, prop) {
if (handlers[prop]) {
return merge(acc, handlers[prop](props));
}
return acc;
}, {});
};
fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce(function (acc, style) {
return _extends(acc, style.propTypes);
}, {}) : {};
fn.filterProps = styles.reduce(function (acc, style) {
return acc.concat(style.filterProps);
}, []);
return fn;
}
export default compose;
+38
View File
@@ -0,0 +1,38 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from 'react';
import clsx from 'clsx';
import styled from '@mui/styled-engine';
import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
import useTheme from './useTheme';
import { jsx as _jsx } from "react/jsx-runtime";
export default function createBox() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var themeId = options.themeId,
defaultTheme = options.defaultTheme,
_options$defaultClass = options.defaultClassName,
defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
generateClassName = options.generateClassName;
var BoxRoot = styled('div', {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'theme' && prop !== 'sx' && prop !== 'as';
}
})(styleFunctionSx);
var Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
var theme = useTheme(defaultTheme);
var _extendSxProp = extendSxProp(inProps),
className = _extendSxProp.className,
_extendSxProp$compone = _extendSxProp.component,
component = _extendSxProp$compone === void 0 ? 'div' : _extendSxProp$compone,
other = _objectWithoutProperties(_extendSxProp, ["className", "component"]);
return /*#__PURE__*/_jsx(BoxRoot, _extends({
as: component,
ref: ref,
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: themeId ? theme[themeId] || theme : theme
}, other));
});
return Box;
}
+262
View File
@@ -0,0 +1,262 @@
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _typeof from "@babel/runtime/helpers/esm/typeof";
/* eslint-disable no-underscore-dangle */
import styledEngineStyled, { internal_processStyles as processStyles, 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';
import styleFunctionSx from './styleFunctionSx';
function isEmpty(obj) {
return Object.keys(obj).length === 0;
}
// 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;
}
// 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 ".concat(layerName, "{").concat(String(serialized.styles), "}");
}
return serialized;
}
export var systemDefaultTheme = createTheme();
var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
if (!string) {
return string;
}
return string.charAt(0).toLowerCase() + string.slice(1);
};
function resolveTheme(_ref) {
var defaultTheme = _ref.defaultTheme,
theme = _ref.theme,
themeId = _ref.themeId;
return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
}
function defaultOverridesResolver(slot) {
if (!slot) {
return null;
}
return function (props, styles) {
return styles[slot];
};
}
function processStyleArg(callableStyle, _ref2, layerName) {
var ownerState = _ref2.ownerState,
props = _objectWithoutProperties(_ref2, ["ownerState"]);
var resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
ownerState: ownerState
}, props)) : callableStyle;
if (Array.isArray(resolvedStylesArg)) {
return resolvedStylesArg.flatMap(function (resolvedStyle) {
return processStyleArg(resolvedStyle, _extends({
ownerState: ownerState
}, props), layerName);
});
}
if (!!resolvedStylesArg && _typeof(resolvedStylesArg) === 'object' && Array.isArray(resolvedStylesArg.variants)) {
var _resolvedStylesArg$va = resolvedStylesArg.variants,
variants = _resolvedStylesArg$va === void 0 ? [] : _resolvedStylesArg$va,
otherStyles = _objectWithoutProperties(resolvedStylesArg, ["variants"]);
var result = otherStyles;
variants.forEach(function (variant) {
var isMatch = true;
if (typeof variant.props === 'function') {
isMatch = variant.props(_extends({
ownerState: ownerState
}, props, ownerState));
} else {
Object.keys(variant.props).forEach(function (key) {
if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
isMatch = false;
}
});
}
if (isMatch) {
if (!Array.isArray(result)) {
result = [result];
}
var variantStyle = typeof variant.style === 'function' ? variant.style(_extends({
ownerState: ownerState
}, props, ownerState)) : variant.style;
result.push(layerName ? shallowLayer(serializeStyles(variantStyle), layerName) : variantStyle);
}
});
return result;
}
return layerName ? shallowLayer(serializeStyles(resolvedStylesArg), layerName) : resolvedStylesArg;
}
export default function createStyled() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var themeId = input.themeId,
_input$defaultTheme = input.defaultTheme,
defaultTheme = _input$defaultTheme === void 0 ? systemDefaultTheme : _input$defaultTheme,
_input$rootShouldForw = input.rootShouldForwardProp,
rootShouldForwardProp = _input$rootShouldForw === void 0 ? shouldForwardProp : _input$rootShouldForw,
_input$slotShouldForw = input.slotShouldForwardProp,
slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw;
var systemSx = function systemSx(props) {
return styleFunctionSx(_extends({}, props, {
theme: resolveTheme(_extends({}, props, {
defaultTheme: defaultTheme,
themeId: themeId
}))
}));
};
systemSx.__mui_systemSx = true;
return function (tag) {
var inputOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
// Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
processStyles(tag, function (styles) {
return styles.filter(function (style) {
return !(style != null && style.__mui_systemSx);
});
});
var componentName = inputOptions.name,
componentSlot = inputOptions.slot,
inputSkipVariantsResolver = inputOptions.skipVariantsResolver,
inputSkipSx = inputOptions.skipSx,
_inputOptions$overrid = inputOptions.overridesResolver,
overridesResolver = _inputOptions$overrid === void 0 ? defaultOverridesResolver(lowercaseFirstLetter(componentSlot)) : _inputOptions$overrid,
options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]);
var 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.
var 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;
var skipSx = inputSkipSx || false;
var 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 = "".concat(componentName, "-").concat(lowercaseFirstLetter(componentSlot || 'Root'));
}
}
var 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;
}
var defaultStyledResolver = styledEngineStyled(tag, _extends({
shouldForwardProp: shouldForwardPropOption,
label: label
}, options));
var transformStyleArg = function transformStyleArg(stylesArg) {
// 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.
if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
return function (props) {
var theme = resolveTheme({
theme: props.theme,
defaultTheme: defaultTheme,
themeId: themeId
});
return processStyleArg(stylesArg, _extends({}, props, {
theme: theme
}), theme.modularCssLayers ? layerName : undefined);
};
}
return stylesArg;
};
var muiStyledResolver = function muiStyledResolver(styleArg) {
var transformedStyleArg = transformStyleArg(styleArg);
for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
expressions[_key - 1] = arguments[_key];
}
var expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
if (componentName && overridesResolver) {
expressionsWithDefaultTheme.push(function (props) {
var theme = resolveTheme(_extends({}, props, {
defaultTheme: defaultTheme,
themeId: themeId
}));
if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
return null;
}
var styleOverrides = theme.components[componentName].styleOverrides;
var resolvedStyleOverrides = {};
// TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
Object.entries(styleOverrides).forEach(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
slotKey = _ref4[0],
slotStyle = _ref4[1];
resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
theme: theme
}), theme.modularCssLayers ? 'theme' : undefined);
});
return overridesResolver(props, resolvedStyleOverrides);
});
}
if (componentName && !skipVariantsResolver) {
expressionsWithDefaultTheme.push(function (props) {
var _theme$components;
var theme = resolveTheme(_extends({}, props, {
defaultTheme: defaultTheme,
themeId: themeId
}));
var themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
return processStyleArg({
variants: themeVariants
}, _extends({}, props, {
theme: theme
}), theme.modularCssLayers ? 'theme' : undefined);
});
}
if (!skipSx) {
expressionsWithDefaultTheme.push(systemSx);
}
var numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
var placeholders = new Array(numOfCustomFnsApplied).fill('');
// If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
transformedStyleArg = [].concat(_toConsumableArray(styleArg), _toConsumableArray(placeholders));
transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(placeholders));
}
var Component = defaultStyledResolver.apply(void 0, [transformedStyleArg].concat(_toConsumableArray(expressionsWithDefaultTheme)));
if (process.env.NODE_ENV !== 'production') {
var displayName;
if (componentName) {
displayName = "".concat(componentName).concat(capitalize(componentSlot || ''));
}
if (displayName === undefined) {
displayName = "Styled(".concat(getDisplayName(tag), ")");
}
Component.displayName = displayName;
}
if (tag.muiName) {
Component.muiName = tag.muiName;
}
return Component;
};
if (defaultStyledResolver.withConfig) {
muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
}
return muiStyledResolver;
};
}
+73
View File
@@ -0,0 +1,73 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
/**
* 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/experimental-api/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
*
* 🚫 { background: '#e5e5e5', ...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={theme => [
* { background: '#e5e5e5' },
* 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
var theme = this;
if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
// If CssVarsProvider is used as a provider,
// returns '* :where([data-mui-color-scheme="light|dark"]) &'
var selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
return _defineProperty({}, selector, styles);
}
if (theme.palette.mode === key) {
return styles;
}
return {};
}
@@ -0,0 +1,83 @@
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
export var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
var sortBreakpointsValues = function sortBreakpointsValues(values) {
var breakpointsAsArray = Object.keys(values).map(function (key) {
return {
key: key,
val: values[key]
};
}) || [];
// Sort in ascending order
breakpointsAsArray.sort(function (breakpoint1, breakpoint2) {
return breakpoint1.val - breakpoint2.val;
});
return breakpointsAsArray.reduce(function (acc, obj) {
return _extends({}, acc, _defineProperty({}, obj.key, obj.val));
}, {});
};
// Keep in mind that @media is inclusive by the CSS specification.
export default function createBreakpoints(breakpoints) {
var _breakpoints$values = breakpoints.values,
values = _breakpoints$values === void 0 ? {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
} : _breakpoints$values,
_breakpoints$unit = breakpoints.unit,
unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
_breakpoints$step = breakpoints.step,
step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
var sortedValues = sortBreakpointsValues(values);
var keys = Object.keys(sortedValues);
function up(key) {
var value = typeof values[key] === 'number' ? values[key] : key;
return "@media (min-width:".concat(value).concat(unit, ")");
}
function down(key) {
var value = typeof values[key] === 'number' ? values[key] : key;
return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
}
function between(start, end) {
var endIndex = keys.indexOf(end);
return "@media (min-width:".concat(typeof values[start] === 'number' ? values[start] : start).concat(unit, ") and ") + "(max-width:".concat((endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100).concat(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
var 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 _extends({
keys: keys,
values: sortedValues,
up: up,
down: down,
between: between,
only: only,
not: not,
unit: unit
}, other);
}
+36
View File
@@ -0,0 +1,36 @@
import { createUnarySpacing } from '../spacing';
// 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() {
var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
// Already transformed.
if (spacingInput.mui) {
return spacingInput;
}
// 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
var transform = createUnarySpacing({
spacing: spacingInput
});
var spacing = function spacing() {
for (var _len = arguments.length, argsInput = new Array(_len), _key = 0; _key < _len; _key++) {
argsInput[_key] = arguments[_key];
}
if (process.env.NODE_ENV !== 'production') {
if (!(argsInput.length <= 4)) {
console.error("MUI: Too many arguments provided, expected between 0 and 4, got ".concat(argsInput.length));
}
}
var args = argsInput.length === 0 ? [1] : argsInput;
return args.map(function (argument) {
var output = transform(argument);
return typeof output === 'number' ? "".concat(output, "px") : output;
}).join(' ');
};
spacing.mui = true;
return spacing;
}
+49
View File
@@ -0,0 +1,49 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import deepmerge from '@mui/utils/deepmerge';
import createBreakpoints from './createBreakpoints';
import shape from './shape';
import createSpacing from './createSpacing';
import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
import applyStyles from './applyStyles';
function createTheme() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$breakpoints = options.breakpoints,
breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
_options$palette = options.palette,
paletteInput = _options$palette === void 0 ? {} : _options$palette,
spacingInput = options.spacing,
_options$shape = options.shape,
shapeInput = _options$shape === void 0 ? {} : _options$shape,
other = _objectWithoutProperties(options, ["breakpoints", "palette", "spacing", "shape"]);
var breakpoints = createBreakpoints(breakpointsInput);
var spacing = createSpacing(spacingInput);
var muiTheme = deepmerge({
breakpoints: breakpoints,
direction: 'ltr',
components: {},
// Inject component definitions.
palette: _extends({
mode: 'light'
}, paletteInput),
spacing: spacing,
shape: _extends({}, shape, shapeInput)
}, other);
muiTheme.applyStyles = applyStyles;
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
muiTheme = args.reduce(function (acc, argument) {
return deepmerge(acc, argument);
}, muiTheme);
muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
muiTheme.unstable_sx = function sx(props) {
return styleFunctionSx({
sx: props,
theme: this
});
};
return muiTheme;
}
export default createTheme;
+3
View File
@@ -0,0 +1,3 @@
export { default } from './createTheme';
export { default as private_createBreakpoints } from './createBreakpoints';
export { default as unstable_applyStyles } from './applyStyles';
+4
View File
@@ -0,0 +1,4 @@
var shape = {
borderRadius: 4
};
export default shape;
+91
View File
@@ -0,0 +1,91 @@
import style from './style';
import compose from './compose';
import { createUnaryUnit, getValue } from './spacing';
import { handleBreakpoints } from './breakpoints';
import responsivePropType from './responsivePropType';
// false positive
// eslint-disable-next-line react/function-component-definition
export var gap = function gap(props) {
if (props.gap !== undefined && props.gap !== null) {
var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
var styleFromPropValue = function styleFromPropValue(propValue) {
return {
gap: getValue(transformer, propValue)
};
};
return handleBreakpoints(props, props.gap, styleFromPropValue);
}
return null;
};
gap.propTypes = process.env.NODE_ENV !== 'production' ? {
gap: responsivePropType
} : {};
gap.filterProps = ['gap'];
// false positive
// eslint-disable-next-line react/function-component-definition
export var columnGap = function columnGap(props) {
if (props.columnGap !== undefined && props.columnGap !== null) {
var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
var styleFromPropValue = function styleFromPropValue(propValue) {
return {
columnGap: getValue(transformer, propValue)
};
};
return handleBreakpoints(props, props.columnGap, styleFromPropValue);
}
return null;
};
columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
columnGap: responsivePropType
} : {};
columnGap.filterProps = ['columnGap'];
// false positive
// eslint-disable-next-line react/function-component-definition
export var rowGap = function rowGap(props) {
if (props.rowGap !== undefined && props.rowGap !== null) {
var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
var styleFromPropValue = function styleFromPropValue(propValue) {
return {
rowGap: getValue(transformer, propValue)
};
};
return handleBreakpoints(props, props.rowGap, styleFromPropValue);
}
return null;
};
rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
rowGap: responsivePropType
} : {};
rowGap.filterProps = ['rowGap'];
export var gridColumn = style({
prop: 'gridColumn'
});
export var gridRow = style({
prop: 'gridRow'
});
export var gridAutoFlow = style({
prop: 'gridAutoFlow'
});
export var gridAutoColumns = style({
prop: 'gridAutoColumns'
});
export var gridAutoRows = style({
prop: 'gridAutoRows'
});
export var gridTemplateColumns = style({
prop: 'gridTemplateColumns'
});
export var gridTemplateRows = style({
prop: 'gridTemplateRows'
});
export var gridTemplateAreas = style({
prop: 'gridTemplateAreas'
});
export var gridArea = style({
prop: 'gridArea'
});
var grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
export default grid;
@@ -0,0 +1,364 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
import * as React from 'react';
import PropTypes from 'prop-types';
import deepmerge from '@mui/utils/deepmerge';
import { GlobalStyles } from '@mui/styled-engine';
import { useTheme as muiUseTheme } from '@mui/private-theming';
import ThemeProvider from '../ThemeProvider';
import InitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
import useCurrentColorScheme from './useCurrentColorScheme';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
export default function createCssVarsProvider(options) {
var themeId = options.themeId,
_options$theme = options.theme,
defaultTheme = _options$theme === void 0 ? {} : _options$theme,
_options$attribute = options.attribute,
defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
_options$modeStorageK = options.modeStorageKey,
defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
_options$colorSchemeS = options.colorSchemeStorageKey,
defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
_options$defaultMode = options.defaultMode,
designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
designSystemColorScheme = options.defaultColorScheme,
_options$disableTrans = options.disableTransitionOnChange,
designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
resolveTheme = options.resolveTheme,
excludeVariablesFromRoot = options.excludeVariablesFromRoot;
if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
}
var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
if (process.env.NODE_ENV !== 'production') {
ColorSchemeContext.displayName = 'ColorSchemeContext';
}
var useColorScheme = function useColorScheme() {
var value = React.useContext(ColorSchemeContext);
if (!value) {
throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `useColorScheme` must be called under <CssVarsProvider />" : _formatMuiErrorMessage(19));
}
return value;
};
function CssVarsProvider(props) {
var children = props.children,
_props$theme = props.theme,
themeProp = _props$theme === void 0 ? defaultTheme : _props$theme,
_props$modeStorageKey = props.modeStorageKey,
modeStorageKey = _props$modeStorageKey === void 0 ? defaultModeStorageKey : _props$modeStorageKey,
_props$colorSchemeSto = props.colorSchemeStorageKey,
colorSchemeStorageKey = _props$colorSchemeSto === void 0 ? defaultColorSchemeStorageKey : _props$colorSchemeSto,
_props$attribute = props.attribute,
attribute = _props$attribute === void 0 ? defaultAttribute : _props$attribute,
_props$defaultMode = props.defaultMode,
defaultMode = _props$defaultMode === void 0 ? designSystemMode : _props$defaultMode,
_props$defaultColorSc = props.defaultColorScheme,
defaultColorScheme = _props$defaultColorSc === void 0 ? designSystemColorScheme : _props$defaultColorSc,
_props$disableTransit = props.disableTransitionOnChange,
disableTransitionOnChange = _props$disableTransit === void 0 ? designSystemTransitionOnChange : _props$disableTransit,
_props$storageWindow = props.storageWindow,
storageWindow = _props$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _props$storageWindow,
_props$documentNode = props.documentNode,
documentNode = _props$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _props$documentNode,
_props$colorSchemeNod = props.colorSchemeNode,
colorSchemeNode = _props$colorSchemeNod === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _props$colorSchemeNod,
_props$colorSchemeSel = props.colorSchemeSelector,
colorSchemeSelector = _props$colorSchemeSel === void 0 ? ':root' : _props$colorSchemeSel,
_props$disableNestedC = props.disableNestedContext,
disableNestedContext = _props$disableNestedC === void 0 ? false : _props$disableNestedC,
_props$disableStyleSh = props.disableStyleSheetGeneration,
disableStyleSheetGeneration = _props$disableStyleSh === void 0 ? false : _props$disableStyleSh;
var hasMounted = React.useRef(false);
var upperTheme = muiUseTheme();
var ctx = React.useContext(ColorSchemeContext);
var nested = !!ctx && !disableNestedContext;
var scopedTheme = themeProp[themeId];
var _ref = scopedTheme || themeProp,
_ref$colorSchemes = _ref.colorSchemes,
colorSchemes = _ref$colorSchemes === void 0 ? {} : _ref$colorSchemes,
_ref$components = _ref.components,
components = _ref$components === void 0 ? {} : _ref$components,
_ref$generateCssVars = _ref.generateCssVars,
generateCssVars = _ref$generateCssVars === void 0 ? function () {
return {
vars: {},
css: {}
};
} : _ref$generateCssVars,
cssVarPrefix = _ref.cssVarPrefix,
restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
var allColorSchemes = Object.keys(colorSchemes);
var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
// 1. Get the data about the `mode`, `colorScheme`, and setter functions.
var _useCurrentColorSchem = useCurrentColorScheme({
supportedColorSchemes: allColorSchemes,
defaultLightColorScheme: defaultLightColorScheme,
defaultDarkColorScheme: defaultDarkColorScheme,
modeStorageKey: modeStorageKey,
colorSchemeStorageKey: colorSchemeStorageKey,
defaultMode: defaultMode,
storageWindow: storageWindow
}),
stateMode = _useCurrentColorSchem.mode,
setMode = _useCurrentColorSchem.setMode,
systemMode = _useCurrentColorSchem.systemMode,
lightColorScheme = _useCurrentColorSchem.lightColorScheme,
darkColorScheme = _useCurrentColorSchem.darkColorScheme,
stateColorScheme = _useCurrentColorSchem.colorScheme,
setColorScheme = _useCurrentColorSchem.setColorScheme;
var mode = stateMode;
var colorScheme = stateColorScheme;
if (nested) {
mode = ctx.mode;
colorScheme = ctx.colorScheme;
}
var calculatedMode = function () {
if (mode) {
return mode;
}
// This scope occurs on the server
if (defaultMode === 'system') {
return designSystemMode;
}
return defaultMode;
}();
var calculatedColorScheme = function () {
if (!colorScheme) {
// This scope occurs on the server
if (calculatedMode === 'dark') {
return defaultDarkColorScheme;
}
// use light color scheme, if default mode is 'light' | 'system'
return defaultLightColorScheme;
}
return colorScheme;
}();
// 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
var _generateCssVars = generateCssVars(),
rootCss = _generateCssVars.css,
rootVars = _generateCssVars.vars; // 3. Start composing the theme object
var theme = _extends({}, restThemeProp, {
components: components,
colorSchemes: colorSchemes,
cssVarPrefix: cssVarPrefix,
vars: rootVars,
getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
}
});
// 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
// The default color scheme stylesheet is constructed to have the least CSS specificity.
// The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
var defaultColorSchemeStyleSheet = {};
var otherColorSchemesStyleSheet = {};
Object.entries(colorSchemes).forEach(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
key = _ref3[0],
scheme = _ref3[1];
var _generateCssVars2 = generateCssVars(key),
css = _generateCssVars2.css,
vars = _generateCssVars2.vars;
theme.vars = deepmerge(theme.vars, vars);
if (key === calculatedColorScheme) {
// 4.1 Merge the selected color scheme to the theme
Object.keys(scheme).forEach(function (schemeKey) {
if (scheme[schemeKey] && _typeof(scheme[schemeKey]) === 'object') {
// shallow merge the 1st level structure of the theme.
theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
} else {
theme[schemeKey] = scheme[schemeKey];
}
});
if (theme.palette) {
theme.palette.colorScheme = key;
}
}
var resolvedDefaultColorScheme = function () {
if (typeof defaultColorScheme === 'string') {
return defaultColorScheme;
}
if (defaultMode === 'dark') {
return defaultColorScheme.dark;
}
return defaultColorScheme.light;
}();
if (key === resolvedDefaultColorScheme) {
if (excludeVariablesFromRoot) {
var excludedVariables = {};
excludeVariablesFromRoot(cssVarPrefix).forEach(function (cssVar) {
excludedVariables[cssVar] = css[cssVar];
delete css[cssVar];
});
defaultColorSchemeStyleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = excludedVariables;
}
defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
} else {
otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
}
});
theme.vars = deepmerge(theme.vars, rootVars);
// 5. Declaring effects
// 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
React.useEffect(function () {
if (colorScheme && colorSchemeNode) {
// attaches attribute to <html> because the css variables are attached to :root (html)
colorSchemeNode.setAttribute(attribute, colorScheme);
}
}, [colorScheme, attribute, colorSchemeNode]);
// 5.2 Remove the CSS transition when color scheme changes to create instant experience.
// credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
React.useEffect(function () {
var timer;
if (disableTransitionOnChange && hasMounted.current && documentNode) {
var css = documentNode.createElement('style');
css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
documentNode.head.appendChild(css);
// Force browser repaint
(function () {
return window.getComputedStyle(documentNode.body);
})();
timer = setTimeout(function () {
documentNode.head.removeChild(css);
}, 1);
}
return function () {
clearTimeout(timer);
};
}, [colorScheme, disableTransitionOnChange, documentNode]);
React.useEffect(function () {
hasMounted.current = true;
return function () {
hasMounted.current = false;
};
}, []);
var contextValue = React.useMemo(function () {
return {
allColorSchemes: allColorSchemes,
colorScheme: colorScheme,
darkColorScheme: darkColorScheme,
lightColorScheme: lightColorScheme,
mode: mode,
setColorScheme: setColorScheme,
setMode: setMode,
systemMode: systemMode
};
}, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
var shouldGenerateStyleSheet = true;
if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
shouldGenerateStyleSheet = false;
}
var element = /*#__PURE__*/_jsxs(React.Fragment, {
children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
children: [/*#__PURE__*/_jsx(GlobalStyles, {
styles: _defineProperty({}, colorSchemeSelector, rootCss)
}), /*#__PURE__*/_jsx(GlobalStyles, {
styles: defaultColorSchemeStyleSheet
}), /*#__PURE__*/_jsx(GlobalStyles, {
styles: otherColorSchemesStyleSheet
})]
}), /*#__PURE__*/_jsx(ThemeProvider, {
themeId: scopedTheme ? themeId : undefined,
theme: resolveTheme ? resolveTheme(theme) : theme,
children: children
})]
});
if (nested) {
return element;
}
return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
value: contextValue,
children: element
});
}
process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
/**
* The body attribute name to attach colorScheme.
*/
attribute: PropTypes.string,
/**
* The component tree.
*/
children: PropTypes.node,
/**
* The node used to attach the color-scheme attribute
*/
colorSchemeNode: PropTypes.any,
/**
* The CSS selector for attaching the generated custom properties
*/
colorSchemeSelector: PropTypes.string,
/**
* localStorage key used to store `colorScheme`
*/
colorSchemeStorageKey: PropTypes.string,
/**
* The initial color scheme used.
*/
defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
/**
* The initial mode used.
*/
defaultMode: PropTypes.string,
/**
* If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
*/
disableNestedContext: PropTypes.bool,
/**
* If `true`, the style sheet won't be generated.
*
* This is useful for controlling nested CssVarsProvider behavior.
*/
disableStyleSheetGeneration: PropTypes.bool,
/**
* Disable CSS transitions when switching between modes or color schemes.
*/
disableTransitionOnChange: PropTypes.bool,
/**
* The document to attach the attribute to.
*/
documentNode: PropTypes.any,
/**
* The key in the local storage used to store current color scheme.
*/
modeStorageKey: PropTypes.string,
/**
* The window that attaches the 'storage' event listener.
* @default window
*/
storageWindow: PropTypes.any,
/**
* The calculated theme object that will be passed through context.
*/
theme: PropTypes.object
} : void 0;
var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
return InitColorSchemeScript(_extends({
attribute: defaultAttribute,
colorSchemeStorageKey: defaultColorSchemeStorageKey,
defaultMode: designSystemMode,
defaultLightColorScheme: defaultLightColorScheme,
defaultDarkColorScheme: defaultDarkColorScheme,
modeStorageKey: defaultModeStorageKey
}, params));
};
return {
CssVarsProvider: CssVarsProvider,
useColorScheme: useColorScheme,
getInitColorSchemeScript: getInitColorSchemeScript
};
}
+13
View File
@@ -0,0 +1,13 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import prepareCssVars from './prepareCssVars';
function createCssVarsTheme(theme) {
var cssVarPrefix = theme.cssVarPrefix,
shouldSkipGeneratingVar = theme.shouldSkipGeneratingVar,
otherTheme = _objectWithoutProperties(theme, ["cssVarPrefix", "shouldSkipGeneratingVar"]);
return _extends({}, theme, prepareCssVars(otherTheme, {
prefix: cssVarPrefix,
shouldSkipGeneratingVar: shouldSkipGeneratingVar
}));
}
export default createCssVarsTheme;
+30
View File
@@ -0,0 +1,30 @@
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
/**
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
* and they does not need to remember the prefix (defined once).
*/
export default function createGetCssVar() {
var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
function appendVar() {
for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
vars[_key] = arguments[_key];
}
if (!vars.length) {
return '';
}
var value = vars[0];
if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))|^(-?(\d*\.)?\d+)$|(\d+ \d+ \d+)/)) {
return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(value).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
}
return ", ".concat(value);
}
// AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
var getCssVar = function getCssVar(field) {
for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
fallbacks[_key2 - 1] = arguments[_key2];
}
return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, fallbacks), ")");
};
return getCssVar;
}
+140
View File
@@ -0,0 +1,140 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _typeof from "@babel/runtime/helpers/esm/typeof";
/**
* This function create an object from keys, value and then assign to target
*
* @param {Object} obj : the target object to be assigned
* @param {string[]} keys
* @param {string | number} value
*
* @example
* const source = {}
* assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
* console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
*
* @example
* const source = { palette: { primary: 'var(--palette-primary)' } }
* assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
* console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
*/
export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
var arrayKeys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
var temp = obj;
keys.forEach(function (k, index) {
if (index === keys.length - 1) {
if (Array.isArray(temp)) {
temp[Number(k)] = value;
} else if (temp && _typeof(temp) === 'object') {
temp[k] = value;
}
} else if (temp && _typeof(temp) === 'object') {
if (!temp[k]) {
temp[k] = arrayKeys.includes(k) ? [] : {};
}
temp = temp[k];
}
});
};
/**
*
* @param {Object} obj : source object
* @param {Function} callback : a function that will be called when
* - the deepest key in source object is reached
* - the value of the deepest key is NOT `undefined` | `null`
*
* @example
* walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
* // ['palette', 'primary', 'main'] '#000000'
*/
export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
function recurse(object) {
var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var arrayKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
Object.entries(object).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
if (value !== undefined && value !== null) {
if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
recurse(value, [].concat(_toConsumableArray(parentKeys), [key]), Array.isArray(value) ? [].concat(_toConsumableArray(arrayKeys), [key]) : arrayKeys);
} else {
callback([].concat(_toConsumableArray(parentKeys), [key]), value, arrayKeys);
}
}
}
});
}
recurse(obj);
};
var getCssValue = function getCssValue(keys, value) {
if (typeof value === 'number') {
if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
return keys.includes(prop);
})) {
// CSS property that are unitless
return value;
}
var lastKey = keys[keys.length - 1];
if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
// opacity values are unitless
return value;
}
return "".concat(value, "px");
}
return value;
};
/**
* a function that parse theme and return { css, vars }
*
* @param {Object} theme
* @param {{
* prefix?: string,
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
* }} options.
* `prefix`: The prefix of the generated CSS variables. This function does not change the value.
*
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
*
* @example
* const { css, vars } = parser({
* fontSize: 12,
* lineHeight: 1.2,
* palette: { primary: { 500: 'var(--color)' } }
* }, { prefix: 'foo' })
*
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
* console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
*/
export default function cssVarsParser(theme, options) {
var _ref3 = options || {},
prefix = _ref3.prefix,
shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
var css = {};
var vars = {};
var varsWithDefaults = {};
walkObjectDeep(theme, function (keys, value, arrayKeys) {
if (typeof value === 'string' || typeof value === 'number') {
if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
// only create css & var if `shouldSkipGeneratingVar` return false
var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
_extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
assignNestedKeys(varsWithDefaults, keys, "var(".concat(cssVar, ", ").concat(value, ")"), arrayKeys);
}
}
}, function (keys) {
return keys[0] === 'vars';
} // skip 'vars/*' paths
);
return {
css: css,
vars: vars,
varsWithDefaults: varsWithDefaults
};
}
@@ -0,0 +1,8 @@
import _extends from "@babel/runtime/helpers/esm/extends";
// TODO: remove this file in v6
import * as React from 'react';
import InitColorSchemeScript from '../InitColorSchemeScript';
import { jsx as _jsx } from "react/jsx-runtime";
export default function getInitColorSchemeScript(params) {
return /*#__PURE__*/_jsx(InitColorSchemeScript, _extends({}, params));
}
+7
View File
@@ -0,0 +1,7 @@
'use client';
export { default } from './createCssVarsProvider';
// TODO: remove this export in v6 in favor of InitColorSchemeScript
export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
export { default as prepareCssVars } from './prepareCssVars';
export { default as createCssVarsTheme } from './createCssVarsTheme';
+72
View File
@@ -0,0 +1,72 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import deepmerge from '@mui/utils/deepmerge';
import cssVarsParser from './cssVarsParser';
function prepareCssVars(theme, parserConfig) {
// @ts-ignore - ignore components do not exist
var _theme$colorSchemes = theme.colorSchemes,
colorSchemes = _theme$colorSchemes === void 0 ? {} : _theme$colorSchemes,
components = theme.components,
_theme$defaultColorSc = theme.defaultColorScheme,
defaultColorScheme = _theme$defaultColorSc === void 0 ? 'light' : _theme$defaultColorSc,
otherTheme = _objectWithoutProperties(theme, ["colorSchemes", "components", "defaultColorScheme"]);
var _cssVarsParser = cssVarsParser(otherTheme, parserConfig),
rootVars = _cssVarsParser.vars,
rootCss = _cssVarsParser.css,
rootVarsWithDefaults = _cssVarsParser.varsWithDefaults;
var themeVars = rootVarsWithDefaults;
var colorSchemesMap = {};
var light = colorSchemes[defaultColorScheme],
otherColorSchemes = _objectWithoutProperties(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
Object.entries(otherColorSchemes || {}).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
scheme = _ref2[1];
var _cssVarsParser2 = cssVarsParser(scheme, parserConfig),
vars = _cssVarsParser2.vars,
css = _cssVarsParser2.css,
varsWithDefaults = _cssVarsParser2.varsWithDefaults;
themeVars = deepmerge(themeVars, varsWithDefaults);
colorSchemesMap[key] = {
css: css,
vars: vars
};
});
if (light) {
// default color scheme vars should be merged last to set as default
var _cssVarsParser3 = cssVarsParser(light, parserConfig),
_css = _cssVarsParser3.css,
vars = _cssVarsParser3.vars,
varsWithDefaults = _cssVarsParser3.varsWithDefaults;
themeVars = deepmerge(themeVars, varsWithDefaults);
colorSchemesMap[defaultColorScheme] = {
css: _css,
vars: vars
};
}
var generateCssVars = function generateCssVars(colorScheme) {
var _parserConfig$getSele2;
if (!colorScheme) {
var _parserConfig$getSele;
var _css2 = _extends({}, rootCss);
return {
css: _css2,
vars: rootVars,
selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, _css2)) || ':root'
};
}
var css = _extends({}, colorSchemesMap[colorScheme].css);
return {
css: css,
vars: colorSchemesMap[colorScheme].vars,
selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
};
};
return {
vars: themeVars,
generateCssVars: generateCssVars
};
}
export default prepareCssVars;
@@ -0,0 +1,237 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
export function getSystemMode(mode) {
if (typeof window !== 'undefined' && mode === 'system') {
var mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
return 'dark';
}
return 'light';
}
return undefined;
}
function processState(state, callback) {
if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
return callback('light');
}
if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
return callback('dark');
}
return undefined;
}
export function getColorScheme(state) {
return processState(state, function (mode) {
if (mode === 'light') {
return state.lightColorScheme;
}
if (mode === 'dark') {
return state.darkColorScheme;
}
return undefined;
});
}
function initializeValue(key, defaultValue) {
if (typeof window === 'undefined') {
return undefined;
}
var value;
try {
value = localStorage.getItem(key) || undefined;
if (!value) {
// the first time that user enters the site.
localStorage.setItem(key, defaultValue);
}
} catch (e) {
// Unsupported
}
return value || defaultValue;
}
export default function useCurrentColorScheme(options) {
var _options$defaultMode = options.defaultMode,
defaultMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
defaultLightColorScheme = options.defaultLightColorScheme,
defaultDarkColorScheme = options.defaultDarkColorScheme,
_options$supportedCol = options.supportedColorSchemes,
supportedColorSchemes = _options$supportedCol === void 0 ? [] : _options$supportedCol,
_options$modeStorageK = options.modeStorageKey,
modeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
_options$colorSchemeS = options.colorSchemeStorageKey,
colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
_options$storageWindo = options.storageWindow,
storageWindow = _options$storageWindo === void 0 ? typeof window === 'undefined' ? undefined : window : _options$storageWindo;
var joinedColorSchemes = supportedColorSchemes.join(',');
var _React$useState = React.useState(function () {
var initialMode = initializeValue(modeStorageKey, defaultMode);
var lightColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
var darkColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
return {
mode: initialMode,
systemMode: getSystemMode(initialMode),
lightColorScheme: lightColorScheme,
darkColorScheme: darkColorScheme
};
}),
state = _React$useState[0],
setState = _React$useState[1];
var colorScheme = getColorScheme(state);
var setMode = React.useCallback(function (mode) {
setState(function (currentState) {
if (mode === currentState.mode) {
// do nothing if mode does not change
return currentState;
}
var newMode = mode != null ? mode : defaultMode;
try {
localStorage.setItem(modeStorageKey, newMode);
} catch (e) {
// Unsupported
}
return _extends({}, currentState, {
mode: newMode,
systemMode: getSystemMode(newMode)
});
});
}, [modeStorageKey, defaultMode]);
var setColorScheme = React.useCallback(function (value) {
if (!value) {
setState(function (currentState) {
try {
localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
} catch (e) {
// Unsupported
}
return _extends({}, currentState, {
lightColorScheme: defaultLightColorScheme,
darkColorScheme: defaultDarkColorScheme
});
});
} else if (typeof value === 'string') {
if (value && !joinedColorSchemes.includes(value)) {
console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
} else {
setState(function (currentState) {
var newState = _extends({}, currentState);
processState(currentState, function (mode) {
try {
localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
} catch (e) {
// Unsupported
}
if (mode === 'light') {
newState.lightColorScheme = value;
}
if (mode === 'dark') {
newState.darkColorScheme = value;
}
});
return newState;
});
}
} else {
setState(function (currentState) {
var newState = _extends({}, currentState);
var newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
var newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
if (newLightColorScheme) {
if (!joinedColorSchemes.includes(newLightColorScheme)) {
console.error("`".concat(newLightColorScheme, "` does not exist in `theme.colorSchemes`."));
} else {
newState.lightColorScheme = newLightColorScheme;
try {
localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), newLightColorScheme);
} catch (error) {
// Unsupported
}
}
}
if (newDarkColorScheme) {
if (!joinedColorSchemes.includes(newDarkColorScheme)) {
console.error("`".concat(newDarkColorScheme, "` does not exist in `theme.colorSchemes`."));
} else {
newState.darkColorScheme = newDarkColorScheme;
try {
localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), newDarkColorScheme);
} catch (error) {
// Unsupported
}
}
}
return newState;
});
}
}, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
var handleMediaQuery = React.useCallback(function (event) {
if (state.mode === 'system') {
setState(function (currentState) {
var systemMode = event != null && event.matches ? 'dark' : 'light';
// Early exit, nothing changed.
if (currentState.systemMode === systemMode) {
return currentState;
}
return _extends({}, currentState, {
systemMode: systemMode
});
});
}
}, [state.mode]);
// Ref hack to avoid adding handleMediaQuery as a dep
var mediaListener = React.useRef(handleMediaQuery);
mediaListener.current = handleMediaQuery;
React.useEffect(function () {
var handler = function handler() {
return mediaListener.current.apply(mediaListener, arguments);
};
// Always listen to System preference
var media = window.matchMedia('(prefers-color-scheme: dark)');
// Intentionally use deprecated listener methods to support iOS & old browsers
media.addListener(handler);
handler(media);
return function () {
media.removeListener(handler);
};
}, []);
// Handle when localStorage has changed
React.useEffect(function () {
if (storageWindow) {
var handleStorage = function handleStorage(event) {
var value = event.newValue;
if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
// If the key is deleted, value will be null then reset color scheme to the default one.
if (event.key.endsWith('light')) {
setColorScheme({
light: value
});
}
if (event.key.endsWith('dark')) {
setColorScheme({
dark: value
});
}
}
if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
setMode(value || defaultMode);
}
};
// For syncing color-scheme changes between iframes
storageWindow.addEventListener('storage', handleStorage);
return function () {
storageWindow.removeEventListener('storage', handleStorage);
};
}
return undefined;
}, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
return _extends({}, state, {
colorScheme: colorScheme,
setMode: setMode,
setColorScheme: setColorScheme
});
}
+29
View File
@@ -0,0 +1,29 @@
import style from './style';
import compose from './compose';
export var displayPrint = style({
prop: 'displayPrint',
cssProperty: false,
transform: function transform(value) {
return {
'@media print': {
display: value
}
};
}
});
export var displayRaw = style({
prop: 'display'
});
export var overflow = style({
prop: 'overflow'
});
export var textOverflow = style({
prop: 'textOverflow'
});
export var visibility = style({
prop: 'visibility'
});
export var whiteSpace = style({
prop: 'whiteSpace'
});
export default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
+43
View File
@@ -0,0 +1,43 @@
import style from './style';
import compose from './compose';
export var flexBasis = style({
prop: 'flexBasis'
});
export var flexDirection = style({
prop: 'flexDirection'
});
export var flexWrap = style({
prop: 'flexWrap'
});
export var justifyContent = style({
prop: 'justifyContent'
});
export var alignItems = style({
prop: 'alignItems'
});
export var alignContent = style({
prop: 'alignContent'
});
export var order = style({
prop: 'order'
});
export var flex = style({
prop: 'flex'
});
export var flexGrow = style({
prop: 'flexGrow'
});
export var flexShrink = style({
prop: 'flexShrink'
});
export var alignSelf = style({
prop: 'alignSelf'
});
export var justifyItems = style({
prop: 'justifyItems'
});
export var justifySelf = style({
prop: 'justifySelf'
});
var flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
export default flexbox;
+47
View File
@@ -0,0 +1,47 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import borders from './borders';
import display from './display';
import flexbox from './flexbox';
import grid from './cssGrid';
import positions from './positions';
import palette from './palette';
import shadows from './shadows';
import sizing from './sizing';
import spacing from './spacing';
import typography from './typography';
var filterPropsMapping = {
borders: borders.filterProps,
display: display.filterProps,
flexbox: flexbox.filterProps,
grid: grid.filterProps,
positions: positions.filterProps,
palette: palette.filterProps,
shadows: shadows.filterProps,
sizing: sizing.filterProps,
spacing: spacing.filterProps,
typography: typography.filterProps
};
export var styleFunctionMapping = {
borders: borders,
display: display,
flexbox: flexbox,
grid: grid,
positions: positions,
palette: palette,
shadows: shadows,
sizing: sizing,
spacing: spacing,
typography: typography
};
export var propToStyleFunction = Object.keys(filterPropsMapping).reduce(function (acc, styleFnName) {
filterPropsMapping[styleFnName].forEach(function (propName) {
acc[propName] = styleFunctionMapping[styleFnName];
});
return acc;
}, {});
function getThemeValue(prop, value, theme) {
var inputProps = _defineProperty(_defineProperty({}, prop, value), "theme", theme);
var styleFunction = propToStyleFunction[prop];
return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
}
export default getThemeValue;
+73
View File
@@ -0,0 +1,73 @@
/**
* @mui/system v5.18.0
*
* @license MIT
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
export { default as GlobalStyles } from './GlobalStyles';
export { default as borders } from './borders';
export * from './borders';
export { default as breakpoints } from './breakpoints';
export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from './breakpoints';
export { default as compose } from './compose';
export { default as display } from './display';
export { default as flexbox } from './flexbox';
export * from './flexbox';
export { default as grid } from './cssGrid';
export * from './cssGrid';
export { default as palette } from './palette';
export * from './palette';
export { default as positions } from './positions';
export * from './positions';
export { default as shadows } from './shadows';
export { default as sizing } from './sizing';
export * from './sizing';
export { default as spacing } from './spacing';
export * from './spacing';
export { default as style, getPath, getStyleValue } from './style';
export { default as typography } from './typography';
export * from './typography';
export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from './styleFunctionSx';
// TODO: Remove this function in v6
// eslint-disable-next-line @typescript-eslint/naming-convention
export function experimental_sx() {
throw new Error(process.env.NODE_ENV !== "production" ? "MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.For more details, see https://github.com/mui/material-ui/pull/35150." : _formatMuiErrorMessage(20));
}
export { default as unstable_getThemeValue } from './getThemeValue';
export { default as Box } from './Box';
export { default as createBox } from './createBox';
export { default as createStyled } from './createStyled';
export * from './createStyled';
export { default as styled } from './styled';
export { default as createTheme } from './createTheme';
export { default as createBreakpoints } from './createTheme/createBreakpoints';
export { default as createSpacing } from './createTheme/createSpacing';
export { default as shape } from './createTheme/shape';
export { default as useThemeProps, getThemeProps } from './useThemeProps';
export { default as useTheme } from './useTheme';
export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
export { default as useMediaQuery } from './useMediaQuery';
export * from './colorManipulator';
export { default as ThemeProvider } from './ThemeProvider';
export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
export { default as responsivePropType } from './responsivePropType';
export { default as RtlProvider } from './RtlProvider';
export * from './RtlProvider';
export * from './version';
/** ----------------- */
/** Layout components */
export { default as createContainer } from './Container/createContainer';
export { default as Container } from './Container';
export * from './Container';
export { default as Unstable_Grid } from './Unstable_Grid/Grid';
export * from './Unstable_Grid';
export { default as Stack } from './Stack/Stack';
export * from './Stack';
+9
View File
@@ -0,0 +1,9 @@
export default function memoize(fn) {
var cache = {};
return function (arg) {
if (cache[arg] === undefined) {
cache[arg] = fn(arg);
}
return cache[arg];
};
}
+10
View File
@@ -0,0 +1,10 @@
import deepmerge from '@mui/utils/deepmerge';
function merge(acc, item) {
if (!item) {
return acc;
}
return deepmerge(acc, item, {
clone: false // No need to clone deep, it's way faster.
});
}
export default merge;
+26
View File
@@ -0,0 +1,26 @@
import style from './style';
import compose from './compose';
export function paletteTransform(value, userValue) {
if (userValue === 'grey') {
return userValue;
}
return value;
}
export var color = style({
prop: 'color',
themeKey: 'palette',
transform: paletteTransform
});
export var bgcolor = style({
prop: 'bgcolor',
cssProperty: 'backgroundColor',
themeKey: 'palette',
transform: paletteTransform
});
export var backgroundColor = style({
prop: 'backgroundColor',
themeKey: 'palette',
transform: paletteTransform
});
var palette = compose(color, bgcolor, backgroundColor);
export default palette;
+22
View File
@@ -0,0 +1,22 @@
import style from './style';
import compose from './compose';
export var position = style({
prop: 'position'
});
export var zIndex = style({
prop: 'zIndex',
themeKey: 'zIndex'
});
export var top = style({
prop: 'top'
});
export var right = style({
prop: 'right'
});
export var bottom = style({
prop: 'bottom'
});
export var left = style({
prop: 'left'
});
export default compose(position, zIndex, top, right, bottom, left);
+24
View File
@@ -0,0 +1,24 @@
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import capitalize from '@mui/utils/capitalize';
function isEmpty(string) {
return string.length === 0;
}
/**
* Generates string classKey based on the properties provided. It starts with the
* variant if defined, and then it appends all other properties in alphabetical order.
* @param {object} props - the properties for which the classKey should be created.
*/
export default function propsToClassKey(props) {
var variant = props.variant,
other = _objectWithoutProperties(props, ["variant"]);
var classKey = variant || '';
Object.keys(other).sort().forEach(function (key) {
if (key === 'color') {
classKey += isEmpty(classKey) ? props[key] : capitalize(props[key]);
} else {
classKey += "".concat(isEmpty(classKey) ? key : capitalize(key)).concat(capitalize(props[key].toString()));
}
});
return classKey;
}
+3
View File
@@ -0,0 +1,3 @@
import PropTypes from 'prop-types';
var responsivePropType = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
export default responsivePropType;
+6
View File
@@ -0,0 +1,6 @@
import style from './style';
var boxShadow = style({
prop: 'boxShadow',
themeKey: 'shadows'
});
export default boxShadow;
+65
View File
@@ -0,0 +1,65 @@
import style from './style';
import compose from './compose';
import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
export function sizingTransform(value) {
return value <= 1 && value !== 0 ? "".concat(value * 100, "%") : value;
}
export var width = style({
prop: 'width',
transform: sizingTransform
});
export var maxWidth = function maxWidth(props) {
if (props.maxWidth !== undefined && props.maxWidth !== null) {
var styleFromPropValue = function styleFromPropValue(propValue) {
var _props$theme, _props$theme2;
var breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || breakpointsValues[propValue];
if (!breakpoint) {
return {
maxWidth: sizingTransform(propValue)
};
}
if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
return {
maxWidth: "".concat(breakpoint).concat(props.theme.breakpoints.unit)
};
}
return {
maxWidth: breakpoint
};
};
return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
}
return null;
};
maxWidth.filterProps = ['maxWidth'];
export var minWidth = style({
prop: 'minWidth',
transform: sizingTransform
});
export var height = style({
prop: 'height',
transform: sizingTransform
});
export var maxHeight = style({
prop: 'maxHeight',
transform: sizingTransform
});
export var minHeight = style({
prop: 'minHeight',
transform: sizingTransform
});
export var sizeWidth = style({
prop: 'size',
cssProperty: 'width',
transform: sizingTransform
});
export var sizeHeight = style({
prop: 'size',
cssProperty: 'height',
transform: sizingTransform
});
export var boxSizing = style({
prop: 'boxSizing'
});
var sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
export default sizing;
+158
View File
@@ -0,0 +1,158 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import responsivePropType from './responsivePropType';
import { handleBreakpoints } from './breakpoints';
import { getPath } from './style';
import merge from './merge';
import memoize from './memoize';
var properties = {
m: 'margin',
p: 'padding'
};
var directions = {
t: 'Top',
r: 'Right',
b: 'Bottom',
l: 'Left',
x: ['Left', 'Right'],
y: ['Top', 'Bottom']
};
var aliases = {
marginX: 'mx',
marginY: 'my',
paddingX: 'px',
paddingY: 'py'
};
// memoize() impact:
// From 300,000 ops/sec
// To 350,000 ops/sec
var getCssProperties = memoize(function (prop) {
// It's not a shorthand notation.
if (prop.length > 2) {
if (aliases[prop]) {
prop = aliases[prop];
} else {
return [prop];
}
}
var _prop$split = prop.split(''),
_prop$split2 = _slicedToArray(_prop$split, 2),
a = _prop$split2[0],
b = _prop$split2[1];
var property = properties[a];
var direction = directions[b] || '';
return Array.isArray(direction) ? direction.map(function (dir) {
return property + dir;
}) : [property + direction];
});
export var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
export var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
var spacingKeys = [].concat(marginKeys, paddingKeys);
export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
var _getPath;
var themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
if (typeof themeSpacing === 'number') {
return function (abs) {
if (typeof abs === 'string') {
return abs;
}
if (process.env.NODE_ENV !== 'production') {
if (typeof abs !== 'number') {
console.error("MUI: Expected ".concat(propName, " argument to be a number or a string, got ").concat(abs, "."));
}
}
return themeSpacing * abs;
};
}
if (Array.isArray(themeSpacing)) {
return function (abs) {
if (typeof abs === 'string') {
return abs;
}
if (process.env.NODE_ENV !== 'production') {
if (!Number.isInteger(abs)) {
console.error(["MUI: The `theme.".concat(themeKey, "` array type cannot be combined with non integer values.") + "You should either use an integer value that can be used as index, or define the `theme.".concat(themeKey, "` as a number.")].join('\n'));
} else if (abs > themeSpacing.length - 1) {
console.error(["MUI: The value provided (".concat(abs, ") overflows."), "The supported values are: ".concat(JSON.stringify(themeSpacing), "."), "".concat(abs, " > ").concat(themeSpacing.length - 1, ", you need to add the missing values.")].join('\n'));
}
}
return themeSpacing[abs];
};
}
if (typeof themeSpacing === 'function') {
return themeSpacing;
}
if (process.env.NODE_ENV !== 'production') {
console.error(["MUI: The `theme.".concat(themeKey, "` value (").concat(themeSpacing, ") is invalid."), 'It should be a number, an array or a function.'].join('\n'));
}
return function () {
return undefined;
};
}
export function createUnarySpacing(theme) {
return createUnaryUnit(theme, 'spacing', 8, 'spacing');
}
export function getValue(transformer, propValue) {
if (typeof propValue === 'string' || propValue == null) {
return propValue;
}
var abs = Math.abs(propValue);
var transformed = transformer(abs);
if (propValue >= 0) {
return transformed;
}
if (typeof transformed === 'number') {
return -transformed;
}
return "-".concat(transformed);
}
export function getStyleFromPropValue(cssProperties, transformer) {
return function (propValue) {
return cssProperties.reduce(function (acc, cssProperty) {
acc[cssProperty] = getValue(transformer, propValue);
return acc;
}, {});
};
}
function resolveCssProperty(props, keys, prop, transformer) {
// Using a hash computation over an array iteration could be faster, but with only 28 items,
// it's doesn't worth the bundle size.
if (keys.indexOf(prop) === -1) {
return null;
}
var cssProperties = getCssProperties(prop);
var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
var propValue = props[prop];
return handleBreakpoints(props, propValue, styleFromPropValue);
}
function style(props, keys) {
var transformer = createUnarySpacing(props.theme);
return Object.keys(props).map(function (prop) {
return resolveCssProperty(props, keys, prop, transformer);
}).reduce(merge, {});
}
export function margin(props) {
return style(props, marginKeys);
}
margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce(function (obj, key) {
obj[key] = responsivePropType;
return obj;
}, {}) : {};
margin.filterProps = marginKeys;
export function padding(props) {
return style(props, paddingKeys);
}
padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce(function (obj, key) {
obj[key] = responsivePropType;
return obj;
}, {}) : {};
padding.filterProps = paddingKeys;
function spacing(props) {
return style(props, spacingKeys);
}
spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce(function (obj, key) {
obj[key] = responsivePropType;
return obj;
}, {}) : {};
spacing.filterProps = spacingKeys;
export default spacing;
+73
View File
@@ -0,0 +1,73 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import capitalize from '@mui/utils/capitalize';
import responsivePropType from './responsivePropType';
import { handleBreakpoints } from './breakpoints';
export function getPath(obj, path) {
var checkVars = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (!path || typeof path !== 'string') {
return null;
}
// Check if CSS variables are used
if (obj && obj.vars && checkVars) {
var val = "vars.".concat(path).split('.').reduce(function (acc, item) {
return acc && acc[item] ? acc[item] : null;
}, obj);
if (val != null) {
return val;
}
}
return path.split('.').reduce(function (acc, item) {
if (acc && acc[item] != null) {
return acc[item];
}
return null;
}, obj);
}
export function getStyleValue(themeMapping, transform, propValueFinal) {
var userValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : propValueFinal;
var value;
if (typeof themeMapping === 'function') {
value = themeMapping(propValueFinal);
} else if (Array.isArray(themeMapping)) {
value = themeMapping[propValueFinal] || userValue;
} else {
value = getPath(themeMapping, propValueFinal) || userValue;
}
if (transform) {
value = transform(value, userValue, themeMapping);
}
return value;
}
function style(options) {
var prop = options.prop,
_options$cssProperty = options.cssProperty,
cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,
themeKey = options.themeKey,
transform = options.transform; // false positive
// eslint-disable-next-line react/function-component-definition
var fn = function fn(props) {
if (props[prop] == null) {
return null;
}
var propValue = props[prop];
var theme = props.theme;
var themeMapping = getPath(theme, themeKey) || {};
var styleFromPropValue = function styleFromPropValue(propValueFinal) {
var value = getStyleValue(themeMapping, transform, propValueFinal);
if (propValueFinal === value && typeof propValueFinal === 'string') {
// Haven't found value
value = getStyleValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
}
if (cssProperty === false) {
return value;
}
return _defineProperty({}, cssProperty, value);
};
return handleBreakpoints(props, propValue, styleFromPropValue);
};
fn.propTypes = process.env.NODE_ENV !== 'production' ? _defineProperty({}, prop, responsivePropType) : {};
fn.filterProps = [prop];
return fn;
}
export default style;
@@ -0,0 +1,293 @@
import { padding, margin } from '../spacing';
import { borderRadius, borderTransform } from '../borders';
import { gap, rowGap, columnGap } from '../cssGrid';
import { paletteTransform } from '../palette';
import { maxWidth, sizingTransform } from '../sizing';
var defaultSxConfig = {
// borders
border: {
themeKey: 'borders',
transform: borderTransform
},
borderTop: {
themeKey: 'borders',
transform: borderTransform
},
borderRight: {
themeKey: 'borders',
transform: borderTransform
},
borderBottom: {
themeKey: 'borders',
transform: borderTransform
},
borderLeft: {
themeKey: 'borders',
transform: borderTransform
},
borderColor: {
themeKey: 'palette'
},
borderTopColor: {
themeKey: 'palette'
},
borderRightColor: {
themeKey: 'palette'
},
borderBottomColor: {
themeKey: 'palette'
},
borderLeftColor: {
themeKey: 'palette'
},
outline: {
themeKey: 'borders',
transform: borderTransform
},
outlineColor: {
themeKey: 'palette'
},
borderRadius: {
themeKey: 'shape.borderRadius',
style: borderRadius
},
// palette
color: {
themeKey: 'palette',
transform: paletteTransform
},
bgcolor: {
themeKey: 'palette',
cssProperty: 'backgroundColor',
transform: paletteTransform
},
backgroundColor: {
themeKey: 'palette',
transform: paletteTransform
},
// spacing
p: {
style: padding
},
pt: {
style: padding
},
pr: {
style: padding
},
pb: {
style: padding
},
pl: {
style: padding
},
px: {
style: padding
},
py: {
style: padding
},
padding: {
style: padding
},
paddingTop: {
style: padding
},
paddingRight: {
style: padding
},
paddingBottom: {
style: padding
},
paddingLeft: {
style: padding
},
paddingX: {
style: padding
},
paddingY: {
style: padding
},
paddingInline: {
style: padding
},
paddingInlineStart: {
style: padding
},
paddingInlineEnd: {
style: padding
},
paddingBlock: {
style: padding
},
paddingBlockStart: {
style: padding
},
paddingBlockEnd: {
style: padding
},
m: {
style: margin
},
mt: {
style: margin
},
mr: {
style: margin
},
mb: {
style: margin
},
ml: {
style: margin
},
mx: {
style: margin
},
my: {
style: margin
},
margin: {
style: margin
},
marginTop: {
style: margin
},
marginRight: {
style: margin
},
marginBottom: {
style: margin
},
marginLeft: {
style: margin
},
marginX: {
style: margin
},
marginY: {
style: margin
},
marginInline: {
style: margin
},
marginInlineStart: {
style: margin
},
marginInlineEnd: {
style: margin
},
marginBlock: {
style: margin
},
marginBlockStart: {
style: margin
},
marginBlockEnd: {
style: margin
},
// display
displayPrint: {
cssProperty: false,
transform: function transform(value) {
return {
'@media print': {
display: value
}
};
}
},
display: {},
overflow: {},
textOverflow: {},
visibility: {},
whiteSpace: {},
// flexbox
flexBasis: {},
flexDirection: {},
flexWrap: {},
justifyContent: {},
alignItems: {},
alignContent: {},
order: {},
flex: {},
flexGrow: {},
flexShrink: {},
alignSelf: {},
justifyItems: {},
justifySelf: {},
// grid
gap: {
style: gap
},
rowGap: {
style: rowGap
},
columnGap: {
style: columnGap
},
gridColumn: {},
gridRow: {},
gridAutoFlow: {},
gridAutoColumns: {},
gridAutoRows: {},
gridTemplateColumns: {},
gridTemplateRows: {},
gridTemplateAreas: {},
gridArea: {},
// positions
position: {},
zIndex: {
themeKey: 'zIndex'
},
top: {},
right: {},
bottom: {},
left: {},
// shadows
boxShadow: {
themeKey: 'shadows'
},
// sizing
width: {
transform: sizingTransform
},
maxWidth: {
style: maxWidth
},
minWidth: {
transform: sizingTransform
},
height: {
transform: sizingTransform
},
maxHeight: {
transform: sizingTransform
},
minHeight: {
transform: sizingTransform
},
boxSizing: {},
// typography
fontFamily: {
themeKey: 'typography'
},
fontSize: {
themeKey: 'typography'
},
fontStyle: {
themeKey: 'typography'
},
fontWeight: {
themeKey: 'typography'
},
letterSpacing: {},
textTransform: {},
lineHeight: {},
textAlign: {},
typography: {
cssProperty: false,
themeKey: 'typography'
}
};
export default defaultSxConfig;
@@ -0,0 +1,45 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import { isPlainObject } from '@mui/utils/deepmerge';
import defaultSxConfig from './defaultSxConfig';
var splitProps = function splitProps(props) {
var _props$theme$unstable, _props$theme;
var result = {
systemProps: {},
otherProps: {}
};
var config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
Object.keys(props).forEach(function (prop) {
if (config[prop]) {
result.systemProps[prop] = props[prop];
} else {
result.otherProps[prop] = props[prop];
}
});
return result;
};
export default function extendSxProp(props) {
var inSx = props.sx,
other = _objectWithoutProperties(props, ["sx"]);
var _splitProps = splitProps(other),
systemProps = _splitProps.systemProps,
otherProps = _splitProps.otherProps;
var finalSx;
if (Array.isArray(inSx)) {
finalSx = [systemProps].concat(_toConsumableArray(inSx));
} else if (typeof inSx === 'function') {
finalSx = function finalSx() {
var result = inSx.apply(void 0, arguments);
if (!isPlainObject(result)) {
return systemProps;
}
return _extends({}, systemProps, result);
};
} else {
finalSx = _extends({}, systemProps, inSx);
}
return _extends({}, otherProps, {
sx: finalSx
});
}
+4
View File
@@ -0,0 +1,4 @@
export { default } from './styleFunctionSx';
export { unstable_createStyleFunctionSx } from './styleFunctionSx';
export { default as extendSxProp } from './extendSxProp';
export { default as unstable_defaultSxConfig } from './defaultSxConfig';
@@ -0,0 +1,133 @@
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import capitalize from '@mui/utils/capitalize';
import merge from '../merge';
import { getPath, getStyleValue as getValue } from '../style';
import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
import defaultSxConfig from './defaultSxConfig';
function objectsHaveSameKeys() {
for (var _len = arguments.length, objects = new Array(_len), _key = 0; _key < _len; _key++) {
objects[_key] = arguments[_key];
}
var allKeys = objects.reduce(function (keys, object) {
return keys.concat(Object.keys(object));
}, []);
var union = new Set(allKeys);
return objects.every(function (object) {
return union.size === Object.keys(object).length;
});
}
function callIfFn(maybeFn, arg) {
return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
}
// eslint-disable-next-line @typescript-eslint/naming-convention
export function unstable_createStyleFunctionSx() {
function getThemeValue(prop, val, theme, config) {
var props = _defineProperty(_defineProperty({}, prop, val), "theme", theme);
var options = config[prop];
if (!options) {
return _defineProperty({}, prop, val);
}
var _options$cssProperty = options.cssProperty,
cssProperty = _options$cssProperty === void 0 ? prop : _options$cssProperty,
themeKey = options.themeKey,
transform = options.transform,
style = options.style;
if (val == null) {
return null;
}
// TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
if (themeKey === 'typography' && val === 'inherit') {
return _defineProperty({}, prop, val);
}
var themeMapping = getPath(theme, themeKey) || {};
if (style) {
return style(props);
}
var styleFromPropValue = function styleFromPropValue(propValueFinal) {
var value = getValue(themeMapping, transform, propValueFinal);
if (propValueFinal === value && typeof propValueFinal === 'string') {
// Haven't found value
value = getValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
}
if (cssProperty === false) {
return value;
}
return _defineProperty({}, cssProperty, value);
};
return handleBreakpoints(props, val, styleFromPropValue);
}
function styleFunctionSx(props) {
var _theme$unstable_sxCon;
var _ref4 = props || {},
sx = _ref4.sx,
_ref4$theme = _ref4.theme,
theme = _ref4$theme === void 0 ? {} : _ref4$theme,
nested = _ref4.nested;
if (!sx) {
return null; // Emotion & styled-components will neglect null
}
var config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;
/*
* Receive `sxInput` as object or callback
* and then recursively check keys & values to create media query object styles.
* (the result will be used in `styled`)
*/
function traverse(sxInput) {
var sxObject = sxInput;
if (typeof sxInput === 'function') {
sxObject = sxInput(theme);
} else if (_typeof(sxInput) !== 'object') {
// value
return sxInput;
}
if (!sxObject) {
return null;
}
var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
var breakpointsKeys = Object.keys(emptyBreakpoints);
var css = emptyBreakpoints;
Object.keys(sxObject).forEach(function (styleKey) {
var value = callIfFn(sxObject[styleKey], theme);
if (value !== null && value !== undefined) {
if (_typeof(value) === 'object') {
if (config[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme, config));
} else {
var breakpointsValues = handleBreakpoints({
theme: theme
}, value, function (x) {
return _defineProperty({}, styleKey, x);
});
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
theme: theme,
nested: true
});
} else {
css = merge(css, breakpointsValues);
}
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme, config));
}
}
});
if (!nested && theme.modularCssLayers) {
return {
'@layer sx': removeUnusedBreakpoints(breakpointsKeys, css)
};
}
return removeUnusedBreakpoints(breakpointsKeys, css);
}
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
}
return styleFunctionSx;
}
var styleFunctionSx = unstable_createStyleFunctionSx();
styleFunctionSx.filterProps = ['sx'];
export default styleFunctionSx;
+3
View File
@@ -0,0 +1,3 @@
import createStyled from './createStyled';
var styled = createStyled();
export default styled;
+37
View File
@@ -0,0 +1,37 @@
import style from './style';
import compose from './compose';
export var fontFamily = style({
prop: 'fontFamily',
themeKey: 'typography'
});
export var fontSize = style({
prop: 'fontSize',
themeKey: 'typography'
});
export var fontStyle = style({
prop: 'fontStyle',
themeKey: 'typography'
});
export var fontWeight = style({
prop: 'fontWeight',
themeKey: 'typography'
});
export var letterSpacing = style({
prop: 'letterSpacing'
});
export var textTransform = style({
prop: 'textTransform'
});
export var lineHeight = style({
prop: 'lineHeight'
});
export var textAlign = style({
prop: 'textAlign'
});
export var typographyVariant = style({
prop: 'typography',
cssProperty: false,
themeKey: 'typography'
});
var typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
export default typography;
+2
View File
@@ -0,0 +1,2 @@
export { default } from './useMediaQuery';
export * from './useMediaQuery';
+145
View File
@@ -0,0 +1,145 @@
'use client';
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import { getThemeProps } from '../useThemeProps';
import useTheme from '../useThemeWithoutDefault';
/**
* @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
*/
/**
* @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
*/
/**
* @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
*/
function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
var _React$useState = React.useState(function () {
if (noSsr && matchMedia) {
return matchMedia(query).matches;
}
if (ssrMatchMedia) {
return ssrMatchMedia(query).matches;
}
// Once the component is mounted, we rely on the
// event listeners to return the correct matches value.
return defaultMatches;
}),
match = _React$useState[0],
setMatch = _React$useState[1];
useEnhancedEffect(function () {
var active = true;
if (!matchMedia) {
return undefined;
}
var queryList = matchMedia(query);
var updateMatch = function updateMatch() {
// Workaround Safari wrong implementation of matchMedia
// TODO can we remove it?
// https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
if (active) {
setMatch(queryList.matches);
}
};
updateMatch();
// TODO: Use `addEventListener` once support for Safari < 14 is dropped
queryList.addListener(updateMatch);
return function () {
active = false;
queryList.removeListener(updateMatch);
};
}, [query, matchMedia]);
return match;
}
// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
var maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
var getDefaultSnapshot = React.useCallback(function () {
return defaultMatches;
}, [defaultMatches]);
var getServerSnapshot = React.useMemo(function () {
if (noSsr && matchMedia) {
return function () {
return matchMedia(query).matches;
};
}
if (ssrMatchMedia !== null) {
var _ssrMatchMedia = ssrMatchMedia(query),
matches = _ssrMatchMedia.matches;
return function () {
return matches;
};
}
return getDefaultSnapshot;
}, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
var _React$useMemo = React.useMemo(function () {
if (matchMedia === null) {
return [getDefaultSnapshot, function () {
return function () {};
}];
}
var mediaQueryList = matchMedia(query);
return [function () {
return mediaQueryList.matches;
}, function (notify) {
// TODO: Use `addEventListener` once support for Safari < 14 is dropped
mediaQueryList.addListener(notify);
return function () {
mediaQueryList.removeListener(notify);
};
}];
}, [getDefaultSnapshot, matchMedia, query]),
_React$useMemo2 = _slicedToArray(_React$useMemo, 2),
getSnapshot = _React$useMemo2[0],
subscribe = _React$useMemo2[1];
var match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
return match;
}
export default function useMediaQuery(queryInput) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var theme = useTheme();
// Wait for jsdom to support the match media feature.
// All the browsers MUI support have this built-in.
// This defensive check is here for simplicity.
// Most of the time, the match media logic isn't central to people tests.
var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
var _getThemeProps = getThemeProps({
name: 'MuiUseMediaQuery',
props: options,
theme: theme
}),
_getThemeProps$defaul = _getThemeProps.defaultMatches,
defaultMatches = _getThemeProps$defaul === void 0 ? false : _getThemeProps$defaul,
_getThemeProps$matchM = _getThemeProps.matchMedia,
matchMedia = _getThemeProps$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _getThemeProps$matchM,
_getThemeProps$ssrMat = _getThemeProps.ssrMatchMedia,
ssrMatchMedia = _getThemeProps$ssrMat === void 0 ? null : _getThemeProps$ssrMat,
_getThemeProps$noSsr = _getThemeProps.noSsr,
noSsr = _getThemeProps$noSsr === void 0 ? false : _getThemeProps$noSsr;
if (process.env.NODE_ENV !== 'production') {
if (typeof queryInput === 'function' && theme === null) {
console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
}
}
var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
query = query.replace(/^@media( ?)/m, '');
// TODO: Drop `useMediaQueryOld` and use `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
var useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
var match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useDebugValue({
query: query,
match: match
});
}
return match;
}
+10
View File
@@ -0,0 +1,10 @@
'use client';
import createTheme from './createTheme';
import useThemeWithoutDefault from './useThemeWithoutDefault';
export var systemDefaultTheme = createTheme();
function useTheme() {
var defaultTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : systemDefaultTheme;
return useThemeWithoutDefault(defaultTheme);
}
export default useTheme;
@@ -0,0 +1,10 @@
import resolveProps from '@mui/utils/resolveProps';
export default function getThemeProps(params) {
var theme = params.theme,
name = params.name,
props = params.props;
if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
return props;
}
return resolveProps(theme.components[name].defaultProps, props);
}
+4
View File
@@ -0,0 +1,4 @@
'use client';
export { default } from './useThemeProps';
export { default as getThemeProps } from './getThemeProps';
@@ -0,0 +1,20 @@
'use client';
import getThemeProps from './getThemeProps';
import useTheme from '../useTheme';
export default function useThemeProps(_ref) {
var props = _ref.props,
name = _ref.name,
defaultTheme = _ref.defaultTheme,
themeId = _ref.themeId;
var theme = useTheme(defaultTheme);
if (themeId) {
theme = theme[themeId] || theme;
}
var mergedProps = getThemeProps({
theme: theme,
name: name,
props: props
});
return mergedProps;
}
+13
View File
@@ -0,0 +1,13 @@
'use client';
import * as React from 'react';
import { ThemeContext } from '@mui/styled-engine';
function isObjectEmpty(obj) {
return Object.keys(obj).length === 0;
}
function useTheme() {
var defaultTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var contextTheme = React.useContext(ThemeContext);
return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
}
export default useTheme;
+7
View File
@@ -0,0 +1,7 @@
export var version = "5.18.0";
export var major = Number("5");
export var minor = Number("18");
export var patch = Number("0");
export var preReleaseLabel = undefined || null;
export var preReleaseNumber = Number(undefined) || null;
export default version;