Socket
Socket
Sign inDemoInstall

@mui/material

Package Overview
Dependencies
86
Maintainers
10
Versions
143
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 5.15.13 to 5.15.14

legacy/styles/rootShouldForwardProp.js
legacy/styles/slotShouldForwardProp.js
modern/styles/rootShouldForwardProp.js
modern/styles/slotShouldForwardProp.js
node/styles/rootShouldForwardProp.js
node/styles/slotShouldForwardProp.js
styles/rootShouldForwardProp.d.ts
styles/rootShouldForwardProp.js
styles/slotShouldForwardProp.d.ts
styles/slotShouldForwardProp.js

53

Accordion/Accordion.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];

@@ -12,4 +12,3 @@ import * as React from 'react';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import Collapse from '../Collapse';

@@ -23,2 +22,3 @@ import Paper from '../Paper';

import { jsxs as _jsxs } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiAccordion');
const useUtilityClasses = ownerState => {

@@ -97,23 +97,30 @@ const {

}, ({
theme,
ownerState
}) => _extends({}, !ownerState.square && {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
theme
}) => ({
variants: [{
props: props => !props.square,
style: {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
}
}
}, !ownerState.disableGutters && {
[`&.${accordionClasses.expanded}`]: {
margin: '16px 0'
}
}, {
props: props => !props.disableGutters,
style: {
[`&.${accordionClasses.expanded}`]: {
margin: '16px 0'
}
}
}]
}));

@@ -120,0 +127,0 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {

26

AccordionActions/AccordionActions.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["className", "disableSpacing"];

@@ -10,6 +10,6 @@ import * as React from 'react';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiAccordionActions');
const useUtilityClasses = ownerState => {

@@ -34,14 +34,16 @@ const {

}
})(({
ownerState
}) => _extends({
})({
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end'
}, !ownerState.disableSpacing && {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
}
}));
justifyContent: 'flex-end',
variants: [{
props: props => !props.disableSpacing,
style: {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
}
}
}]
});
const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {

@@ -48,0 +50,0 @@ const props = useThemeProps({

4

AccordionDetails/AccordionDetails.js

@@ -10,6 +10,6 @@ 'use client';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiAccordionDetails');
const useUtilityClasses = ownerState => {

@@ -16,0 +16,0 @@ const {

52

AccordionSummary/AccordionSummary.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];

@@ -10,4 +10,3 @@ import * as React from 'react';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import ButtonBase from '../ButtonBase';

@@ -18,2 +17,3 @@ import AccordionContext from '../Accordion/AccordionContext';

import { jsxs as _jsxs } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiAccordionSummary');
const useUtilityClasses = ownerState => {

@@ -39,4 +39,3 @@ const {

})(({
theme,
ownerState
theme
}) => {

@@ -46,3 +45,3 @@ const transition = {

};
return _extends({
return {
display: 'flex',

@@ -60,8 +59,12 @@ minHeight: 48,

cursor: 'pointer'
}
}, !ownerState.disableGutters && {
[`&.${accordionSummaryClasses.expanded}`]: {
minHeight: 64
}
});
},
variants: [{
props: props => !props.disableGutters,
style: {
[`&.${accordionSummaryClasses.expanded}`]: {
minHeight: 64
}
}
}]
};
});

@@ -73,15 +76,18 @@ const AccordionSummaryContent = styled('div', {

})(({
theme,
ownerState
}) => _extends({
theme
}) => ({
display: 'flex',
flexGrow: 1,
margin: '12px 0'
}, !ownerState.disableGutters && {
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
}),
[`&.${accordionSummaryClasses.expanded}`]: {
margin: '20px 0'
}
margin: '12px 0',
variants: [{
props: props => !props.disableGutters,
style: {
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
}),
[`&.${accordionSummaryClasses.expanded}`]: {
margin: '20px 0'
}
}
}]
}));

@@ -88,0 +94,0 @@ const AccordionSummaryExpandIconWrapper = styled('div', {

2

Autocomplete/Autocomplete.d.ts

@@ -174,3 +174,3 @@ import * as React from 'react';

* If `true`, the component is in a loading state.
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
* @default false

@@ -177,0 +177,0 @@ */

92

Autocomplete/Autocomplete.js

@@ -27,4 +27,3 @@ 'use client';

import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import useThemeProps from '../styles/useThemeProps';
import styled from '../styles/styled';
import { styled, createUseThemeProps } from '../zero-styled';
import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';

@@ -36,2 +35,3 @@ import capitalize from '../utils/capitalize';

import { createElement as _createElement } from "react";
const useThemeProps = createUseThemeProps('MuiAutocomplete');
const useUtilityClasses = ownerState => {

@@ -95,5 +95,3 @@ const {

}
})(({
ownerState
}) => _extends({
})({
[`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {

@@ -107,13 +105,7 @@ visibility: 'visible'

}
}
}, ownerState.fullWidth && {
width: '100%'
}, {
[`& .${autocompleteClasses.tag}`]: _extends({
},
[`& .${autocompleteClasses.tag}`]: {
margin: 3,
maxWidth: 'calc(100% - 6px)'
}, ownerState.size === 'small' && {
margin: 2,
maxWidth: 'calc(100% - 4px)'
}),
},
[`& .${autocompleteClasses.inputRoot}`]: {

@@ -207,10 +199,35 @@ flexWrap: 'wrap',

},
[`& .${autocompleteClasses.input}`]: _extends({
[`& .${autocompleteClasses.input}`]: {
flexGrow: 1,
textOverflow: 'ellipsis',
opacity: 0
}, ownerState.inputFocused && {
opacity: 1
})
}));
},
variants: [{
props: {
fullWidth: true
},
style: {
width: '100%'
}
}, {
props: {
size: 'small'
},
style: {
[`& .${autocompleteClasses.tag}`]: {
margin: 2,
maxWidth: 'calc(100% - 4px)'
}
}
}, {
props: {
inputFocused: true
},
style: {
[`& .${autocompleteClasses.input}`]: {
opacity: 1
}
}
}]
});
const AutocompleteEndAdornment = styled('div', {

@@ -242,10 +259,14 @@ name: 'MuiAutocomplete',

}, styles) => _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
})(({
ownerState
}) => _extends({
})({
padding: 2,
marginRight: -2
}, ownerState.popupOpen && {
transform: 'rotate(180deg)'
}));
marginRight: -2,
variants: [{
props: {
popupOpen: true
},
style: {
transform: 'rotate(180deg)'
}
}]
});
const AutocompletePopper = styled(Popper, {

@@ -263,8 +284,13 @@ name: 'MuiAutocomplete',

})(({
theme,
ownerState
}) => _extends({
zIndex: (theme.vars || theme).zIndex.modal
}, ownerState.disablePortal && {
position: 'absolute'
theme
}) => ({
zIndex: (theme.vars || theme).zIndex.modal,
variants: [{
props: {
disablePortal: true
},
style: {
position: 'absolute'
}
}]
}));

@@ -922,3 +948,3 @@ const AutocompletePaper = styled(Paper, {

* If `true`, the component is in a loading state.
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
* @default false

@@ -925,0 +951,0 @@ */

6

Autocomplete/autocompleteClasses.d.ts

@@ -12,7 +12,7 @@ export interface AutocompleteClasses {

focusVisible: string;
/** Styles applied to the tag elements, e.g. the chips. */
/** Styles applied to the tag elements, for example the chips. */
tag: string;
/** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
/** Styles applied to the tag elements, for example the chips if `size="small"`. */
tagSizeSmall: string;
/** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
/** Styles applied to the tag elements, for example the chips if `size="medium"`. */
tagSizeMedium: string;

@@ -19,0 +19,0 @@ /** Styles applied when the popup icon is rendered. */

2

CircularProgress/CircularProgress.d.ts

@@ -34,3 +34,3 @@ import * as React from 'react';

* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, e.g. '3rem'.
* If using a string, you need to provide the CSS unit, for example '3rem'.
* @default 40

@@ -37,0 +37,0 @@ */

2

CircularProgress/CircularProgress.js

@@ -221,3 +221,3 @@ 'use client';

* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, e.g. '3rem'.
* If using a string, you need to provide the CSS unit, for example '3rem'.
* @default 40

@@ -224,0 +224,0 @@ */

2

Icon/Icon.d.ts

@@ -15,3 +15,3 @@ import * as React from 'react';

* The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
* other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
* other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
* @default 'material-icons'

@@ -18,0 +18,0 @@ */

2

Icon/Icon.js

@@ -107,3 +107,3 @@ 'use client';

* The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
* other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
* other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
* @default 'material-icons'

@@ -110,0 +110,0 @@ */

2

index.js
/**
* @mui/material v5.15.13
* @mui/material v5.15.14
*

@@ -4,0 +4,0 @@ * @license MIT

55

legacy/Accordion/Accordion.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _toArray from "@babel/runtime/helpers/esm/toArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

@@ -14,4 +14,3 @@ import * as React from 'react';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import Collapse from '../Collapse';

@@ -25,2 +24,3 @@ import Paper from '../Paper';

import { jsxs as _jsxs } from "react/jsx-runtime";
var useThemeProps = createUseThemeProps('MuiAccordion');
var useUtilityClasses = function useUtilityClasses(ownerState) {

@@ -90,22 +90,33 @@ var classes = ownerState.classes,

}, function (_ref4) {
var theme = _ref4.theme,
ownerState = _ref4.ownerState;
return _extends({}, !ownerState.square && {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
var theme = _ref4.theme;
return {
variants: [{
props: function props(_props) {
return !_props.square;
},
style: {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
}
}
}, !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionClasses.expanded), {
margin: '16px 0'
}));
}, {
props: function props(_props2) {
return !_props2.disableGutters;
},
style: _defineProperty({}, "&.".concat(accordionClasses.expanded), {
margin: '16px 0'
})
}]
};
});

@@ -112,0 +123,0 @@ var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {

31

legacy/AccordionActions/AccordionActions.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';

@@ -9,6 +9,6 @@ import PropTypes from 'prop-types';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
import { jsx as _jsx } from "react/jsx-runtime";
var useThemeProps = createUseThemeProps('MuiAccordionActions');
var useUtilityClasses = function useUtilityClasses(ownerState) {

@@ -29,14 +29,17 @@ var classes = ownerState.classes,

}
})(function (_ref) {
var ownerState = _ref.ownerState;
return _extends({
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end'
}, !ownerState.disableSpacing && {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
})({
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end',
variants: [{
props: function props(_props) {
return !_props.disableSpacing;
},
style: {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
}
}
});
}]
});

@@ -43,0 +46,0 @@ var AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {

4

legacy/AccordionDetails/AccordionDetails.js

@@ -9,6 +9,6 @@ 'use client';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
import { jsx as _jsx } from "react/jsx-runtime";
var useThemeProps = createUseThemeProps('MuiAccordionDetails');
var useUtilityClasses = function useUtilityClasses(ownerState) {

@@ -15,0 +15,0 @@ var classes = ownerState.classes;

53

legacy/AccordionSummary/AccordionSummary.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
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';

@@ -10,4 +10,3 @@ import PropTypes from 'prop-types';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import ButtonBase from '../ButtonBase';

@@ -18,2 +17,3 @@ import AccordionContext from '../Accordion/AccordionContext';

import { jsxs as _jsxs } from "react/jsx-runtime";
var useThemeProps = createUseThemeProps('MuiAccordionSummary');
var useUtilityClasses = function useUtilityClasses(ownerState) {

@@ -39,8 +39,7 @@ var classes = ownerState.classes,

})(function (_ref) {
var theme = _ref.theme,
ownerState = _ref.ownerState;
var theme = _ref.theme;
var transition = {
duration: theme.transitions.duration.shortest
};
return _extends(_defineProperty(_defineProperty(_defineProperty({
return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
display: 'flex',

@@ -56,5 +55,10 @@ minHeight: 48,

cursor: 'pointer'
}), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
minHeight: 64
}));
}), "variants", [{
props: function props(_props) {
return !_props.disableGutters;
},
style: _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
minHeight: 64
})
}]);
});

@@ -68,15 +72,20 @@ var AccordionSummaryContent = styled('div', {

})(function (_ref3) {
var theme = _ref3.theme,
ownerState = _ref3.ownerState;
return _extends({
var theme = _ref3.theme;
return {
display: 'flex',
flexGrow: 1,
margin: '12px 0'
}, !ownerState.disableGutters && _defineProperty({
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
})
}, "&.".concat(accordionSummaryClasses.expanded), {
margin: '20px 0'
}));
margin: '12px 0',
variants: [{
props: function props(_props2) {
return !_props2.disableGutters;
},
style: _defineProperty({
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
})
}, "&.".concat(accordionSummaryClasses.expanded), {
margin: '20px 0'
})
}]
};
});

@@ -89,4 +98,4 @@ var AccordionSummaryExpandIconWrapper = styled('div', {

}
})(function (_ref5) {
var theme = _ref5.theme;
})(function (_ref4) {
var theme = _ref4.theme;
return _defineProperty({

@@ -93,0 +102,0 @@ display: 'flex',

245

legacy/Autocomplete/Autocomplete.js

@@ -6,3 +6,3 @@ 'use client';

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _ClearIcon, _ArrowDropDownIcon;
var _styled, _ClearIcon, _ArrowDropDownIcon;
import * as React from 'react';

@@ -27,4 +27,3 @@ import PropTypes from 'prop-types';

import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import useThemeProps from '../styles/useThemeProps';
import styled from '../styles/styled';
import { styled, createUseThemeProps } from '../zero-styled';
import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';

@@ -36,2 +35,3 @@ import capitalize from '../utils/capitalize';

import { createElement as _createElement } from "react";
var useThemeProps = createUseThemeProps('MuiAutocomplete');
var useUtilityClasses = function useUtilityClasses(ownerState) {

@@ -79,85 +79,96 @@ var classes = ownerState.classes,

}
})(function (_ref6) {
var _extends3;
var ownerState = _ref6.ownerState;
return _extends(_defineProperty(_defineProperty({}, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
visibility: 'visible'
}), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
visibility: 'visible'
})), ownerState.fullWidth && {
})((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
visibility: 'visible'
}), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
visibility: 'visible'
})), "& .".concat(autocompleteClasses.tag), {
margin: 3,
maxWidth: 'calc(100% - 6px)'
}), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
flexWrap: 'wrap'
}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 26 + 4
}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 52 + 4
}), "& .".concat(autocompleteClasses.input), {
width: 0,
minWidth: 30
})), "& .".concat(inputClasses.root), {
paddingBottom: 1,
'& .MuiInput-input': {
padding: '4px 4px 4px 0px'
}
}), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
padding: '2px 4px 3px 0'
})), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
padding: 9
}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 26 + 4 + 9
}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 52 + 4 + 9
}), "& .".concat(autocompleteClasses.input), {
padding: '7.5px 4px 7.5px 5px'
}), "& .".concat(autocompleteClasses.endAdornment), {
right: 9
})), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
// Don't specify paddingRight, as it overrides the default value set when there is only
// one of the popup or clear icon as the specificity is equal so the latter one wins
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 6
}, "& .".concat(autocompleteClasses.input), {
padding: '2.5px 4px 2.5px 8px'
})), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
paddingTop: 19,
paddingLeft: 8
}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 26 + 4 + 9
}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 52 + 4 + 9
}), "& .".concat(filledInputClasses.input), {
padding: '7px 4px'
}), "& .".concat(autocompleteClasses.endAdornment), {
right: 9
})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
paddingBottom: 1
}, "& .".concat(filledInputClasses.input), {
padding: '2.5px 4px'
})), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(inputBaseClasses.hiddenLabel), {
paddingTop: 8
}), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
paddingTop: 0,
paddingBottom: 0
}, "& .".concat(autocompleteClasses.input), {
paddingTop: 16,
paddingBottom: 17
})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
paddingTop: 8,
paddingBottom: 9
})), "& .".concat(autocompleteClasses.input), {
flexGrow: 1,
textOverflow: 'ellipsis',
opacity: 0
}), "variants", [{
props: {
fullWidth: true
},
style: {
width: '100%'
}, (_extends3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends3, "& .".concat(autocompleteClasses.tag), _extends({
margin: 3,
maxWidth: 'calc(100% - 6px)'
}, ownerState.size === 'small' && {
}
}, {
props: {
size: 'small'
},
style: _defineProperty({}, "& .".concat(autocompleteClasses.tag), {
margin: 2,
maxWidth: 'calc(100% - 4px)'
})), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
flexWrap: 'wrap'
}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 26 + 4
}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 52 + 4
}), "& .".concat(autocompleteClasses.input), {
width: 0,
minWidth: 30
})), "& .".concat(inputClasses.root), {
paddingBottom: 1,
'& .MuiInput-input': {
padding: '4px 4px 4px 0px'
}
}), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
padding: '2px 4px 3px 0'
})), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
padding: 9
}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 26 + 4 + 9
}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 52 + 4 + 9
}), "& .".concat(autocompleteClasses.input), {
padding: '7.5px 4px 7.5px 5px'
}), "& .".concat(autocompleteClasses.endAdornment), {
right: 9
})), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
// Don't specify paddingRight, as it overrides the default value set when there is only
// one of the popup or clear icon as the specificity is equal so the latter one wins
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 6
}, "& .".concat(autocompleteClasses.input), {
padding: '2.5px 4px 2.5px 8px'
})), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
paddingTop: 19,
paddingLeft: 8
}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 26 + 4 + 9
}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
paddingRight: 52 + 4 + 9
}), "& .".concat(filledInputClasses.input), {
padding: '7px 4px'
}), "& .".concat(autocompleteClasses.endAdornment), {
right: 9
})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
paddingBottom: 1
}, "& .".concat(filledInputClasses.input), {
padding: '2.5px 4px'
})), "& .".concat(inputBaseClasses.hiddenLabel), {
paddingTop: 8
}), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
paddingTop: 0,
paddingBottom: 0
}, "& .".concat(autocompleteClasses.input), {
paddingTop: 16,
paddingBottom: 17
})), _defineProperty(_defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
paddingTop: 8,
paddingBottom: 9
})), "& .".concat(autocompleteClasses.input), _extends({
flexGrow: 1,
textOverflow: 'ellipsis',
opacity: 0
}, ownerState.inputFocused && {
})
}, {
props: {
inputFocused: true
},
style: _defineProperty({}, "& .".concat(autocompleteClasses.input), {
opacity: 1
}))));
});
})
}])));
var AutocompleteEndAdornment = styled('div', {

@@ -190,14 +201,17 @@ name: 'MuiAutocomplete',

slot: 'PopupIndicator',
overridesResolver: function overridesResolver(_ref7, styles) {
var ownerState = _ref7.ownerState;
overridesResolver: function overridesResolver(_ref6, styles) {
var ownerState = _ref6.ownerState;
return _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen);
}
})(function (_ref8) {
var ownerState = _ref8.ownerState;
return _extends({
padding: 2,
marginRight: -2
}, ownerState.popupOpen && {
transform: 'rotate(180deg)'
});
})({
padding: 2,
marginRight: -2,
variants: [{
props: {
popupOpen: true
},
style: {
transform: 'rotate(180deg)'
}
}]
});

@@ -211,10 +225,15 @@ var AutocompletePopper = styled(Popper, {

}
})(function (_ref10) {
var theme = _ref10.theme,
ownerState = _ref10.ownerState;
return _extends({
zIndex: (theme.vars || theme).zIndex.modal
}, ownerState.disablePortal && {
position: 'absolute'
});
})(function (_ref8) {
var theme = _ref8.theme;
return {
zIndex: (theme.vars || theme).zIndex.modal,
variants: [{
props: {
disablePortal: true
},
style: {
position: 'absolute'
}
}]
};
});

@@ -227,4 +246,4 @@ var AutocompletePaper = styled(Paper, {

}
})(function (_ref11) {
var theme = _ref11.theme;
})(function (_ref9) {
var theme = _ref9.theme;
return _extends({}, theme.typography.body1, {

@@ -240,4 +259,4 @@ overflow: 'auto'

}
})(function (_ref12) {
var theme = _ref12.theme;
})(function (_ref10) {
var theme = _ref10.theme;
return {

@@ -254,4 +273,4 @@ color: (theme.vars || theme).palette.text.secondary,

}
})(function (_ref13) {
var theme = _ref13.theme;
})(function (_ref11) {
var theme = _ref11.theme;
return {

@@ -268,4 +287,4 @@ color: (theme.vars || theme).palette.text.secondary,

}
})(function (_ref14) {
var theme = _ref14.theme;
})(function (_ref12) {
var theme = _ref12.theme;
return _defineProperty({

@@ -323,4 +342,4 @@ listStyle: 'none',

}
})(function (_ref16) {
var theme = _ref16.theme;
})(function (_ref14) {
var theme = _ref14.theme;
return {

@@ -484,4 +503,4 @@ backgroundColor: (theme.vars || theme).palette.background.paper,

handleInputMouseDown = _getInputProps.onMouseDown;
var _ref17 = ListboxProps != null ? ListboxProps : {},
externalListboxRef = _ref17.ref;
var _ref15 = ListboxProps != null ? ListboxProps : {},
externalListboxRef = _ref15.ref;
var _getListboxProps = getListboxProps(),

@@ -943,3 +962,3 @@ listboxRef = _getListboxProps.ref,

* If `true`, the component is in a loading state.
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
* @default false

@@ -946,0 +965,0 @@ */

2

legacy/CircularProgress/CircularProgress.js

@@ -194,3 +194,3 @@ 'use client';

* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, e.g. '3rem'.
* If using a string, you need to provide the CSS unit, for example '3rem'.
* @default 40

@@ -197,0 +197,0 @@ */

2

legacy/Icon/Icon.js

@@ -105,3 +105,3 @@ 'use client';

* The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
* other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
* other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
* @default 'material-icons'

@@ -108,0 +108,0 @@ */

2

legacy/index.js
/**
* @mui/material v5.15.13
* @mui/material v5.15.14
*

@@ -4,0 +4,0 @@ * @license MIT

564

legacy/Slider/Slider.js
'use client';
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';

@@ -15,4 +16,4 @@ import PropTypes from 'prop-types';

import { useRtl } from '@mui/system/RtlProvider';
import useThemeProps from '../styles/useThemeProps';
import styled, { slotShouldForwardProp } from '../styles/styled';
import { styled, createUseThemeProps } from '../zero-styled';
import slotShouldForwardProp from '../styles/slotShouldForwardProp';
import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';

@@ -24,2 +25,3 @@ import capitalize from '../utils/capitalize';

import { jsxs as _jsxs } from "react/jsx-runtime";
var useThemeProps = createUseThemeProps('MuiSlider');
function Identity(x) {

@@ -36,5 +38,5 @@ return x;

})(function (_ref) {
var theme = _ref.theme,
ownerState = _ref.ownerState;
return _extends({
var _theme$vars;
var theme = _ref.theme;
return _defineProperty(_defineProperty(_defineProperty({
borderRadius: 12,

@@ -46,31 +48,3 @@ boxSizing: 'content-box',

touchAction: 'none',
color: (theme.vars || theme).palette[ownerState.color].main,
WebkitTapHighlightColor: 'transparent'
}, ownerState.orientation === 'horizontal' && _extends({
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0'
}
}, ownerState.size === 'small' && {
height: 2
}, ownerState.marked && {
marginBottom: 20
}), ownerState.orientation === 'vertical' && _extends({
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px'
}
}, ownerState.size === 'small' && {
width: 2
}, ownerState.marked && {
marginRight: 44
}), _defineProperty(_defineProperty({
WebkitTapHighlightColor: 'transparent',
'@media print': {

@@ -85,3 +59,75 @@ colorAdjust: 'exact'

transition: 'none'
})));
})), "variants", [].concat(_toConsumableArray(Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(function (key) {
var _theme$vars2;
return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main;
}).map(function (color) {
return {
props: {
color: color
},
style: {
color: (theme.vars || theme).palette[color].main
}
};
})), [{
props: {
orientation: 'horizontal'
},
style: {
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0'
}
}
}, {
props: {
orientation: 'horizontal',
size: 'small'
},
style: {
height: 2
}
}, {
props: {
orientation: 'horizontal',
marked: true
},
style: {
marginBottom: 20
}
}, {
props: {
orientation: 'vertical'
},
style: {
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px'
}
}
}, {
props: {
orientation: 'vertical',
size: 'small'
},
style: {
width: 2
}
}, {
props: {
orientation: 'vertical',
marked: true
},
style: {
marginRight: 44
}
}]));
});

@@ -94,23 +140,36 @@ export var SliderRail = styled('span', {

}
})(function (_ref2) {
var ownerState = _ref2.ownerState;
return _extends({
display: 'block',
position: 'absolute',
borderRadius: 'inherit',
backgroundColor: 'currentColor',
opacity: 0.38
}, ownerState.orientation === 'horizontal' && {
width: '100%',
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}, ownerState.orientation === 'vertical' && {
height: '100%',
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}, ownerState.track === 'inverted' && {
opacity: 1
});
})({
display: 'block',
position: 'absolute',
borderRadius: 'inherit',
backgroundColor: 'currentColor',
opacity: 0.38,
variants: [{
props: {
orientation: 'horizontal'
},
style: {
width: '100%',
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
height: '100%',
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}
}, {
props: {
track: 'inverted'
},
style: {
opacity: 1
}
}]
});

@@ -124,8 +183,5 @@ export var SliderTrack = styled('span', {

})(function (_ref3) {
var theme = _ref3.theme,
ownerState = _ref3.ownerState;
var color =
// Same logic as the LinearProgress track color
theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.5);
return _extends({
var _theme$vars3;
var theme = _ref3.theme;
return {
display: 'block',

@@ -138,19 +194,58 @@ position: 'absolute',

duration: theme.transitions.duration.shortest
})
}, ownerState.size === 'small' && {
border: 'none'
}, ownerState.orientation === 'horizontal' && {
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}, ownerState.orientation === 'vertical' && {
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}, ownerState.track === false && {
display: 'none'
}, ownerState.track === 'inverted' && {
backgroundColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color,
borderColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color
});
}),
variants: [{
props: {
size: 'small'
},
style: {
border: 'none'
}
}, {
props: {
orientation: 'horizontal'
},
style: {
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}
}, {
props: {
track: false
},
style: {
display: 'none'
}
}].concat(_toConsumableArray(Object.keys(((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette).filter(function (key) {
var _theme$vars4;
return ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[key].main;
}).map(function (color) {
return {
props: {
color: color,
track: 'inverted'
},
style: _extends({}, theme.vars ? {
backgroundColor: theme.vars.palette.Slider["".concat(color, "Track")],
borderColor: theme.vars.palette.Slider["".concat(color, "Track")]
} : _extends({
backgroundColor: lighten(theme.palette[color].main, 0.62),
borderColor: lighten(theme.palette[color].main, 0.62)
}, theme.applyStyles('dark', {
backgroundColor: darken(theme.palette[color].main, 0.5)
}), theme.applyStyles('dark', {
borderColor: darken(theme.palette[color].main, 0.5)
})))
};
})))
};
});

@@ -165,5 +260,5 @@ export var SliderThumb = styled('span', {

})(function (_ref4) {
var theme = _ref4.theme,
ownerState = _ref4.ownerState;
return _extends({
var _theme$vars5;
var theme = _ref4.theme;
return _defineProperty(_defineProperty({
position: 'absolute',

@@ -181,14 +276,4 @@ width: 20,

duration: theme.transitions.duration.shortest
})
}, ownerState.size === 'small' && {
width: 12,
height: 12
}, ownerState.orientation === 'horizontal' && {
top: '50%',
transform: 'translate(-50%, -50%)'
}, ownerState.orientation === 'vertical' && {
left: '50%',
transform: 'translate(-50%, 50%)'
}, _defineProperty(_defineProperty(_defineProperty({
'&::before': _extends({
}),
'&::before': {
position: 'absolute',

@@ -200,5 +285,3 @@ content: '""',

boxShadow: (theme.vars || theme).shadows[2]
}, ownerState.size === 'small' && {
boxShadow: 'none'
}),
},
'&::after': {

@@ -215,14 +298,56 @@ position: 'absolute',

}
}, "&:hover, &.".concat(sliderClasses.focusVisible), {
boxShadow: "0px 0px 0px 8px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16)),
'@media (hover: none)': {
boxShadow: 'none'
}
}), "&.".concat(sliderClasses.active), {
boxShadow: "0px 0px 0px 14px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16))
}), "&.".concat(sliderClasses.disabled), {
}, "&.".concat(sliderClasses.disabled), {
'&:hover': {
boxShadow: 'none'
}
}));
}), "variants", [].concat(_toConsumableArray(Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(function (key) {
var _theme$vars6;
return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
}).map(function (color) {
return {
props: {
color: color
},
style: _defineProperty(_defineProperty({}, "&:hover, &.".concat(sliderClasses.focusVisible), _extends({}, theme.vars ? {
boxShadow: "0px 0px 0px 8px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)")
} : {
boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette[color].main, 0.16))
}, {
'@media (hover: none)': {
boxShadow: 'none'
}
})), "&.".concat(sliderClasses.active), _extends({}, theme.vars ? {
boxShadow: "0px 0px 0px 14px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)}")
} : {
boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette[color].main, 0.16))
}))
};
})), [{
props: {
size: 'small'
},
style: {
width: 12,
height: 12,
'&::before': {
boxShadow: 'none'
}
}
}, {
props: {
orientation: 'horizontal'
},
style: {
top: '50%',
transform: 'translate(-50%, -50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: '50%',
transform: 'translate(-50%, 50%)'
}
}]));
});

@@ -235,8 +360,8 @@ export var SliderValueLabel = styled(BaseSliderValueLabel, {

}
})(function (_ref5) {
var theme = _ref5.theme,
ownerState = _ref5.ownerState;
return _extends(_defineProperty(_defineProperty(_defineProperty({}, "&.".concat(sliderClasses.valueLabelOpen), {
transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(1)")
}), "zIndex", 1), "whiteSpace", 'nowrap'), theme.typography.body2, {
})(function (_ref6) {
var theme = _ref6.theme;
return _extends({
zIndex: 1,
whiteSpace: 'nowrap'
}, theme.typography.body2, {
fontWeight: 500,

@@ -246,3 +371,2 @@ transition: theme.transitions.create(['transform'], {

}),
transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(0)"),
position: 'absolute',

@@ -255,33 +379,63 @@ backgroundColor: (theme.vars || theme).palette.grey[600],

justifyContent: 'center',
padding: '0.25rem 0.75rem'
}, ownerState.orientation === 'horizontal' && {
top: '-10px',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%'
}
}, ownerState.orientation === 'vertical' && {
right: ownerState.size === 'small' ? '20px' : '30px',
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
top: '50%'
}
}, ownerState.size === 'small' && {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem'
padding: '0.25rem 0.75rem',
variants: [{
props: {
orientation: 'horizontal'
},
style: _defineProperty({
transform: 'translateY(-100%) scale(0)',
top: '-10px',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%'
}
}, "&.".concat(sliderClasses.valueLabelOpen), {
transform: 'translateY(-100%) scale(1)'
})
}, {
props: {
orientation: 'vertical'
},
style: _defineProperty({
transform: 'translateY(-50%) scale(0)',
right: '30px',
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
top: '50%'
}
}, "&.".concat(sliderClasses.valueLabelOpen), {
transform: 'translateY(-50%) scale(1)'
})
}, {
props: {
size: 'small'
},
style: {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem'
}
}, {
props: {
orientation: 'vertical',
size: 'small'
},
style: {
right: '20px'
}
}]
});

@@ -299,7 +453,5 @@ });

}
})(function (_ref6) {
var theme = _ref6.theme,
ownerState = _ref6.ownerState,
markActive = _ref6.markActive;
return _extends({
})(function (_ref7) {
var theme = _ref7.theme;
return {
position: 'absolute',

@@ -309,13 +461,29 @@ width: 2,

borderRadius: 1,
backgroundColor: 'currentColor'
}, ownerState.orientation === 'horizontal' && {
top: '50%',
transform: 'translate(-1px, -50%)'
}, ownerState.orientation === 'vertical' && {
left: '50%',
transform: 'translate(-50%, 1px)'
}, markActive && {
backgroundColor: (theme.vars || theme).palette.background.paper,
opacity: 0.8
});
backgroundColor: 'currentColor',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
top: '50%',
transform: 'translate(-1px, -50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: '50%',
transform: 'translate(-50%, 1px)'
}
}, {
props: {
markActive: true
},
style: {
backgroundColor: (theme.vars || theme).palette.background.paper,
opacity: 0.8
}
}]
};
});

@@ -331,24 +499,38 @@ export var SliderMarkLabel = styled('span', {

}
})(function (_ref7) {
var theme = _ref7.theme,
ownerState = _ref7.ownerState,
markLabelActive = _ref7.markLabelActive;
})(function (_ref8) {
var theme = _ref8.theme;
return _extends({}, theme.typography.body2, {
color: (theme.vars || theme).palette.text.secondary,
position: 'absolute',
whiteSpace: 'nowrap'
}, ownerState.orientation === 'horizontal' && {
top: 30,
transform: 'translateX(-50%)',
'@media (pointer: coarse)': {
top: 40
}
}, ownerState.orientation === 'vertical' && {
left: 36,
transform: 'translateY(50%)',
'@media (pointer: coarse)': {
left: 44
}
}, markLabelActive && {
color: (theme.vars || theme).palette.text.primary
whiteSpace: 'nowrap',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
top: 30,
transform: 'translateX(-50%)',
'@media (pointer: coarse)': {
top: 40
}
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: 36,
transform: 'translateY(50%)',
'@media (pointer: coarse)': {
left: 44
}
}
}, {
props: {
markLabelActive: true
},
style: {
color: (theme.vars || theme).palette.text.primary
}
}]
});

@@ -381,8 +563,8 @@ });

};
var Forward = function Forward(_ref8) {
var children = _ref8.children;
var Forward = function Forward(_ref9) {
var children = _ref9.children;
return children;
};
var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
var _ref9, _slots$root, _ref10, _slots$rail, _ref11, _slots$track, _ref12, _slots$thumb, _ref13, _slots$valueLabel, _ref14, _slots$mark, _ref15, _slots$markLabel, _ref16, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
var _ref10, _slots$root, _ref11, _slots$rail, _ref12, _slots$track, _ref13, _slots$thumb, _ref14, _slots$valueLabel, _ref15, _slots$mark, _ref16, _slots$markLabel, _ref17, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
var props = useThemeProps({

@@ -486,10 +668,10 @@ props: inputProps,

// support both `slots` and `components` for backward compatibility
var RootSlot = (_ref9 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref9 : SliderRoot;
var RailSlot = (_ref10 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref10 : SliderRail;
var TrackSlot = (_ref11 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref11 : SliderTrack;
var ThumbSlot = (_ref12 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref12 : SliderThumb;
var ValueLabelSlot = (_ref13 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref13 : SliderValueLabel;
var MarkSlot = (_ref14 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref14 : SliderMark;
var MarkLabelSlot = (_ref15 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref15 : SliderMarkLabel;
var InputSlot = (_ref16 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref16 : 'input';
var RootSlot = (_ref10 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref10 : SliderRoot;
var RailSlot = (_ref11 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref11 : SliderRail;
var TrackSlot = (_ref12 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref12 : SliderTrack;
var ThumbSlot = (_ref13 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref13 : SliderThumb;
var ValueLabelSlot = (_ref14 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref14 : SliderValueLabel;
var MarkSlot = (_ref15 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref15 : SliderMark;
var MarkLabelSlot = (_ref16 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref16 : SliderMarkLabel;
var InputSlot = (_ref17 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref17 : 'input';
var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;

@@ -496,0 +678,0 @@ var railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;

2

legacy/styles/experimental_extendTheme.js

@@ -41,3 +41,3 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";

// if channel token can't be generated, show a warning.
obj["".concat(key, "Channel")] = safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, e.g. \"12 12 12\") or undefined if you want to remove the channel token."));
obj["".concat(key, "Channel")] = safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, for example \"12 12 12\") or undefined if you want to remove the channel token."));
}

@@ -44,0 +44,0 @@ }

9

legacy/styles/styled.js
'use client';
import createStyled, { shouldForwardProp } from '@mui/system/createStyled';
import createStyled from '@mui/system/createStyled';
import defaultTheme from './defaultTheme';
import THEME_ID from './identifier';
export var rootShouldForwardProp = function rootShouldForwardProp(prop) {
return shouldForwardProp(prop) && prop !== 'classes';
};
export var slotShouldForwardProp = shouldForwardProp;
import rootShouldForwardProp from './rootShouldForwardProp';
export { default as slotShouldForwardProp } from './slotShouldForwardProp';
export { default as rootShouldForwardProp } from './rootShouldForwardProp';
var styled = createStyled({

@@ -11,0 +10,0 @@ themeId: THEME_ID,

2

legacy/SvgIcon/SvgIcon.js

@@ -41,3 +41,3 @@ 'use client';

// the <svg> will define the property that has `currentColor`
// e.g. heroicons uses fill="none" and stroke="currentColor"
// for example heroicons uses fill="none" and stroke="currentColor"
fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',

@@ -44,0 +44,0 @@ flexShrink: 0,

2

legacy/usePagination/usePagination.js

@@ -79,3 +79,3 @@ 'use client';

// Basic list of items to render
// e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
// for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
var itemList = [].concat(_toConsumableArray(showFirstButton ? ['first'] : []), _toConsumableArray(hidePrevButton ? [] : ['previous']), _toConsumableArray(startPages), _toConsumableArray(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []), _toConsumableArray(range(siblingsStart, siblingsEnd)), _toConsumableArray(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), _toConsumableArray(endPages), _toConsumableArray(hideNextButton ? [] : ['next']), _toConsumableArray(showLastButton ? ['last'] : []));

@@ -82,0 +82,0 @@

53

modern/Accordion/Accordion.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];

@@ -12,4 +12,3 @@ import * as React from 'react';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import Collapse from '../Collapse';

@@ -23,2 +22,3 @@ import Paper from '../Paper';

import { jsxs as _jsxs } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiAccordion');
const useUtilityClasses = ownerState => {

@@ -97,23 +97,30 @@ const {

}, ({
theme,
ownerState
}) => _extends({}, !ownerState.square && {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
theme
}) => ({
variants: [{
props: props => !props.square,
style: {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
}
}
}, !ownerState.disableGutters && {
[`&.${accordionClasses.expanded}`]: {
margin: '16px 0'
}
}, {
props: props => !props.disableGutters,
style: {
[`&.${accordionClasses.expanded}`]: {
margin: '16px 0'
}
}
}]
}));

@@ -120,0 +127,0 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {

26

modern/AccordionActions/AccordionActions.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["className", "disableSpacing"];

@@ -10,6 +10,6 @@ import * as React from 'react';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiAccordionActions');
const useUtilityClasses = ownerState => {

@@ -34,14 +34,16 @@ const {

}
})(({
ownerState
}) => _extends({
})({
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end'
}, !ownerState.disableSpacing && {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
}
}));
justifyContent: 'flex-end',
variants: [{
props: props => !props.disableSpacing,
style: {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
}
}
}]
});
const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {

@@ -48,0 +50,0 @@ const props = useThemeProps({

4

modern/AccordionDetails/AccordionDetails.js

@@ -10,6 +10,6 @@ 'use client';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiAccordionDetails');
const useUtilityClasses = ownerState => {

@@ -16,0 +16,0 @@ const {

52

modern/AccordionSummary/AccordionSummary.js
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];

@@ -10,4 +10,3 @@ import * as React from 'react';

import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { styled, createUseThemeProps } from '../zero-styled';
import ButtonBase from '../ButtonBase';

@@ -18,2 +17,3 @@ import AccordionContext from '../Accordion/AccordionContext';

import { jsxs as _jsxs } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiAccordionSummary');
const useUtilityClasses = ownerState => {

@@ -39,4 +39,3 @@ const {

})(({
theme,
ownerState
theme
}) => {

@@ -46,3 +45,3 @@ const transition = {

};
return _extends({
return {
display: 'flex',

@@ -60,8 +59,12 @@ minHeight: 48,

cursor: 'pointer'
}
}, !ownerState.disableGutters && {
[`&.${accordionSummaryClasses.expanded}`]: {
minHeight: 64
}
});
},
variants: [{
props: props => !props.disableGutters,
style: {
[`&.${accordionSummaryClasses.expanded}`]: {
minHeight: 64
}
}
}]
};
});

@@ -73,15 +76,18 @@ const AccordionSummaryContent = styled('div', {

})(({
theme,
ownerState
}) => _extends({
theme
}) => ({
display: 'flex',
flexGrow: 1,
margin: '12px 0'
}, !ownerState.disableGutters && {
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
}),
[`&.${accordionSummaryClasses.expanded}`]: {
margin: '20px 0'
}
margin: '12px 0',
variants: [{
props: props => !props.disableGutters,
style: {
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
}),
[`&.${accordionSummaryClasses.expanded}`]: {
margin: '20px 0'
}
}
}]
}));

@@ -88,0 +94,0 @@ const AccordionSummaryExpandIconWrapper = styled('div', {

92

modern/Autocomplete/Autocomplete.js

@@ -27,4 +27,3 @@ 'use client';

import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import useThemeProps from '../styles/useThemeProps';
import styled from '../styles/styled';
import { styled, createUseThemeProps } from '../zero-styled';
import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';

@@ -36,2 +35,3 @@ import capitalize from '../utils/capitalize';

import { createElement as _createElement } from "react";
const useThemeProps = createUseThemeProps('MuiAutocomplete');
const useUtilityClasses = ownerState => {

@@ -95,5 +95,3 @@ const {

}
})(({
ownerState
}) => _extends({
})({
[`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {

@@ -107,13 +105,7 @@ visibility: 'visible'

}
}
}, ownerState.fullWidth && {
width: '100%'
}, {
[`& .${autocompleteClasses.tag}`]: _extends({
},
[`& .${autocompleteClasses.tag}`]: {
margin: 3,
maxWidth: 'calc(100% - 6px)'
}, ownerState.size === 'small' && {
margin: 2,
maxWidth: 'calc(100% - 4px)'
}),
},
[`& .${autocompleteClasses.inputRoot}`]: {

@@ -207,10 +199,35 @@ flexWrap: 'wrap',

},
[`& .${autocompleteClasses.input}`]: _extends({
[`& .${autocompleteClasses.input}`]: {
flexGrow: 1,
textOverflow: 'ellipsis',
opacity: 0
}, ownerState.inputFocused && {
opacity: 1
})
}));
},
variants: [{
props: {
fullWidth: true
},
style: {
width: '100%'
}
}, {
props: {
size: 'small'
},
style: {
[`& .${autocompleteClasses.tag}`]: {
margin: 2,
maxWidth: 'calc(100% - 4px)'
}
}
}, {
props: {
inputFocused: true
},
style: {
[`& .${autocompleteClasses.input}`]: {
opacity: 1
}
}
}]
});
const AutocompleteEndAdornment = styled('div', {

@@ -242,10 +259,14 @@ name: 'MuiAutocomplete',

}, styles) => _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
})(({
ownerState
}) => _extends({
})({
padding: 2,
marginRight: -2
}, ownerState.popupOpen && {
transform: 'rotate(180deg)'
}));
marginRight: -2,
variants: [{
props: {
popupOpen: true
},
style: {
transform: 'rotate(180deg)'
}
}]
});
const AutocompletePopper = styled(Popper, {

@@ -263,8 +284,13 @@ name: 'MuiAutocomplete',

})(({
theme,
ownerState
}) => _extends({
zIndex: (theme.vars || theme).zIndex.modal
}, ownerState.disablePortal && {
position: 'absolute'
theme
}) => ({
zIndex: (theme.vars || theme).zIndex.modal,
variants: [{
props: {
disablePortal: true
},
style: {
position: 'absolute'
}
}]
}));

@@ -918,3 +944,3 @@ const AutocompletePaper = styled(Paper, {

* If `true`, the component is in a loading state.
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
* @default false

@@ -921,0 +947,0 @@ */

2

modern/CircularProgress/CircularProgress.js

@@ -216,3 +216,3 @@ 'use client';

* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, e.g. '3rem'.
* If using a string, you need to provide the CSS unit, for example '3rem'.
* @default 40

@@ -219,0 +219,0 @@ */

2

modern/Icon/Icon.js

@@ -107,3 +107,3 @@ 'use client';

* The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
* other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
* other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
* @default 'material-icons'

@@ -110,0 +110,0 @@ */

2

modern/index.js
/**
* @mui/material v5.15.13
* @mui/material v5.15.14
*

@@ -4,0 +4,0 @@ * @license MIT

509

modern/Slider/Slider.js

@@ -15,4 +15,4 @@ 'use client';

import { useRtl } from '@mui/system/RtlProvider';
import useThemeProps from '../styles/useThemeProps';
import styled, { slotShouldForwardProp } from '../styles/styled';
import { styled, createUseThemeProps } from '../zero-styled';
import slotShouldForwardProp from '../styles/slotShouldForwardProp';
import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';

@@ -24,2 +24,3 @@ import capitalize from '../utils/capitalize';

import { jsxs as _jsxs } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiSlider');
function Identity(x) {

@@ -38,5 +39,4 @@ return x;

})(({
theme,
ownerState
}) => _extends({
theme
}) => ({
borderRadius: 12,

@@ -48,31 +48,3 @@ boxSizing: 'content-box',

touchAction: 'none',
color: (theme.vars || theme).palette[ownerState.color].main,
WebkitTapHighlightColor: 'transparent'
}, ownerState.orientation === 'horizontal' && _extends({
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0'
}
}, ownerState.size === 'small' && {
height: 2
}, ownerState.marked && {
marginBottom: 20
}), ownerState.orientation === 'vertical' && _extends({
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px'
}
}, ownerState.size === 'small' && {
width: 2
}, ownerState.marked && {
marginRight: 44
}), {
WebkitTapHighlightColor: 'transparent',
'@media print': {

@@ -90,3 +62,71 @@ colorAdjust: 'exact'

}
}
},
variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
props: {
color
},
style: {
color: (theme.vars || theme).palette[color].main
}
})), {
props: {
orientation: 'horizontal'
},
style: {
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0'
}
}
}, {
props: {
orientation: 'horizontal',
size: 'small'
},
style: {
height: 2
}
}, {
props: {
orientation: 'horizontal',
marked: true
},
style: {
marginBottom: 20
}
}, {
props: {
orientation: 'vertical'
},
style: {
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px'
}
}
}, {
props: {
orientation: 'vertical',
size: 'small'
},
style: {
width: 2
}
}, {
props: {
orientation: 'vertical',
marked: true
},
style: {
marginRight: 44
}
}]
}));

@@ -97,5 +137,3 @@ export const SliderRail = styled('span', {

overridesResolver: (props, styles) => styles.rail
})(({
ownerState
}) => _extends({
})({
display: 'block',

@@ -105,16 +143,32 @@ position: 'absolute',

backgroundColor: 'currentColor',
opacity: 0.38
}, ownerState.orientation === 'horizontal' && {
width: '100%',
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}, ownerState.orientation === 'vertical' && {
height: '100%',
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}, ownerState.track === 'inverted' && {
opacity: 1
}));
opacity: 0.38,
variants: [{
props: {
orientation: 'horizontal'
},
style: {
width: '100%',
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
height: '100%',
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}
}, {
props: {
track: 'inverted'
},
style: {
opacity: 1
}
}]
});
export const SliderTrack = styled('span', {

@@ -125,9 +179,5 @@ name: 'MuiSlider',

})(({
theme,
ownerState
theme
}) => {
const color =
// Same logic as the LinearProgress track color
theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.5);
return _extends({
return {
display: 'block',

@@ -140,19 +190,53 @@ position: 'absolute',

duration: theme.transitions.duration.shortest
})
}, ownerState.size === 'small' && {
border: 'none'
}, ownerState.orientation === 'horizontal' && {
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}, ownerState.orientation === 'vertical' && {
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}, ownerState.track === false && {
display: 'none'
}, ownerState.track === 'inverted' && {
backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
});
}),
variants: [{
props: {
size: 'small'
},
style: {
border: 'none'
}
}, {
props: {
orientation: 'horizontal'
},
style: {
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}
}, {
props: {
track: false
},
style: {
display: 'none'
}
}, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
props: {
color,
track: 'inverted'
},
style: _extends({}, theme.vars ? {
backgroundColor: theme.vars.palette.Slider[`${color}Track`],
borderColor: theme.vars.palette.Slider[`${color}Track`]
} : _extends({
backgroundColor: lighten(theme.palette[color].main, 0.62),
borderColor: lighten(theme.palette[color].main, 0.62)
}, theme.applyStyles('dark', {
backgroundColor: darken(theme.palette[color].main, 0.5)
}), theme.applyStyles('dark', {
borderColor: darken(theme.palette[color].main, 0.5)
})))
}))]
};
});

@@ -169,5 +253,4 @@ export const SliderThumb = styled('span', {

})(({
theme,
ownerState
}) => _extends({
theme
}) => ({
position: 'absolute',

@@ -185,14 +268,4 @@ width: 20,

duration: theme.transitions.duration.shortest
})
}, ownerState.size === 'small' && {
width: 12,
height: 12
}, ownerState.orientation === 'horizontal' && {
top: '50%',
transform: 'translate(-50%, -50%)'
}, ownerState.orientation === 'vertical' && {
left: '50%',
transform: 'translate(-50%, 50%)'
}, {
'&::before': _extends({
}),
'&::before': {
position: 'absolute',

@@ -204,5 +277,3 @@ content: '""',

boxShadow: (theme.vars || theme).shadows[2]
}, ownerState.size === 'small' && {
boxShadow: 'none'
}),
},
'&::after': {

@@ -219,11 +290,2 @@ position: 'absolute',

},
[`&:hover, &.${sliderClasses.focusVisible}`]: {
boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`,
'@media (hover: none)': {
boxShadow: 'none'
}
},
[`&.${sliderClasses.active}`]: {
boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`
},
[`&.${sliderClasses.disabled}`]: {

@@ -233,3 +295,51 @@ '&:hover': {

}
}
},
variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
props: {
color
},
style: {
[`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
} : {
boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
}, {
'@media (hover: none)': {
boxShadow: 'none'
}
}),
[`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
} : {
boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
})
}
})), {
props: {
size: 'small'
},
style: {
width: 12,
height: 12,
'&::before': {
boxShadow: 'none'
}
}
}, {
props: {
orientation: 'horizontal'
},
style: {
top: '50%',
transform: 'translate(-50%, -50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: '50%',
transform: 'translate(-50%, 50%)'
}
}]
}));

@@ -241,8 +351,4 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {

})(({
theme,
ownerState
theme
}) => _extends({
[`&.${sliderClasses.valueLabelOpen}`]: {
transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
},
zIndex: 1,

@@ -255,3 +361,2 @@ whiteSpace: 'nowrap'

}),
transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(0)`,
position: 'absolute',

@@ -264,33 +369,65 @@ backgroundColor: (theme.vars || theme).palette.grey[600],

justifyContent: 'center',
padding: '0.25rem 0.75rem'
}, ownerState.orientation === 'horizontal' && {
top: '-10px',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%'
}
}, ownerState.orientation === 'vertical' && {
right: ownerState.size === 'small' ? '20px' : '30px',
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
top: '50%'
}
}, ownerState.size === 'small' && {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem'
padding: '0.25rem 0.75rem',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
transform: 'translateY(-100%) scale(0)',
top: '-10px',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%'
},
[`&.${sliderClasses.valueLabelOpen}`]: {
transform: 'translateY(-100%) scale(1)'
}
}
}, {
props: {
orientation: 'vertical'
},
style: {
transform: 'translateY(-50%) scale(0)',
right: '30px',
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
top: '50%'
},
[`&.${sliderClasses.valueLabelOpen}`]: {
transform: 'translateY(-50%) scale(1)'
}
}
}, {
props: {
size: 'small'
},
style: {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem'
}
}, {
props: {
orientation: 'vertical',
size: 'small'
},
style: {
right: '20px'
}
}]
}));

@@ -308,6 +445,4 @@ export const SliderMark = styled('span', {

})(({
theme,
ownerState,
markActive
}) => _extends({
theme
}) => ({
position: 'absolute',

@@ -317,12 +452,28 @@ width: 2,

borderRadius: 1,
backgroundColor: 'currentColor'
}, ownerState.orientation === 'horizontal' && {
top: '50%',
transform: 'translate(-1px, -50%)'
}, ownerState.orientation === 'vertical' && {
left: '50%',
transform: 'translate(-50%, 1px)'
}, markActive && {
backgroundColor: (theme.vars || theme).palette.background.paper,
opacity: 0.8
backgroundColor: 'currentColor',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
top: '50%',
transform: 'translate(-1px, -50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: '50%',
transform: 'translate(-50%, 1px)'
}
}, {
props: {
markActive: true
},
style: {
backgroundColor: (theme.vars || theme).palette.background.paper,
opacity: 0.8
}
}]
}));

@@ -335,23 +486,37 @@ export const SliderMarkLabel = styled('span', {

})(({
theme,
ownerState,
markLabelActive
theme
}) => _extends({}, theme.typography.body2, {
color: (theme.vars || theme).palette.text.secondary,
position: 'absolute',
whiteSpace: 'nowrap'
}, ownerState.orientation === 'horizontal' && {
top: 30,
transform: 'translateX(-50%)',
'@media (pointer: coarse)': {
top: 40
}
}, ownerState.orientation === 'vertical' && {
left: 36,
transform: 'translateY(50%)',
'@media (pointer: coarse)': {
left: 44
}
}, markLabelActive && {
color: (theme.vars || theme).palette.text.primary
whiteSpace: 'nowrap',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
top: 30,
transform: 'translateX(-50%)',
'@media (pointer: coarse)': {
top: 40
}
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: 36,
transform: 'translateY(50%)',
'@media (pointer: coarse)': {
left: 44
}
}
}, {
props: {
markLabelActive: true
},
style: {
color: (theme.vars || theme).palette.text.primary
}
}]
}));

@@ -358,0 +523,0 @@ const useUtilityClasses = ownerState => {

2

modern/styles/experimental_extendTheme.js

@@ -41,3 +41,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

// if channel token can't be generated, show a warning.
obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
}

@@ -44,0 +44,0 @@ }

7

modern/styles/styled.js
'use client';
import createStyled, { shouldForwardProp } from '@mui/system/createStyled';
import createStyled from '@mui/system/createStyled';
import defaultTheme from './defaultTheme';
import THEME_ID from './identifier';
export const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
export const slotShouldForwardProp = shouldForwardProp;
import rootShouldForwardProp from './rootShouldForwardProp';
export { default as slotShouldForwardProp } from './slotShouldForwardProp';
export { default as rootShouldForwardProp } from './rootShouldForwardProp';
const styled = createStyled({

@@ -9,0 +10,0 @@ themeId: THEME_ID,

2

modern/SvgIcon/SvgIcon.js

@@ -45,3 +45,3 @@ 'use client';

// the <svg> will define the property that has `currentColor`
// e.g. heroicons uses fill="none" and stroke="currentColor"
// for example heroicons uses fill="none" and stroke="currentColor"
fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',

@@ -48,0 +48,0 @@ flexShrink: 0,

2

modern/usePagination/usePagination.js

@@ -64,3 +64,3 @@ 'use client';

// Basic list of items to render
// e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
// for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,

@@ -67,0 +67,0 @@ // Start ellipsis

57

node/Accordion/Accordion.js

@@ -9,4 +9,4 @@ "use strict";

exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));

@@ -18,4 +18,3 @@ var _reactIs = require("react-is");

var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _styled = _interopRequireDefault(require("../styles/styled"));
var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
var _zeroStyled = require("../zero-styled");
var _Collapse = _interopRequireDefault(require("../Collapse"));

@@ -31,2 +30,3 @@ var _Paper = _interopRequireDefault(require("../Paper"));

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAccordion');
const useUtilityClasses = ownerState => {

@@ -46,3 +46,3 @@ const {

};
const AccordionRoot = (0, _styled.default)(_Paper.default, {
const AccordionRoot = (0, _zeroStyled.styled)(_Paper.default, {
name: 'MuiAccordion',

@@ -106,26 +106,33 @@ slot: 'Root',

}, ({
theme,
ownerState
}) => (0, _extends2.default)({}, !ownerState.square && {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
theme
}) => ({
variants: [{
props: props => !props.square,
style: {
borderRadius: 0,
'&:first-of-type': {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius
},
'&:last-of-type': {
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
}
}
}, !ownerState.disableGutters && {
[`&.${_accordionClasses.default.expanded}`]: {
margin: '16px 0'
}
}, {
props: props => !props.disableGutters,
style: {
[`&.${_accordionClasses.default.expanded}`]: {
margin: '16px 0'
}
}
}]
}));
const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
const props = (0, _useThemeProps.default)({
const props = useThemeProps({
props: inProps,

@@ -132,0 +139,0 @@ name: 'MuiAccordion'

30

node/AccordionActions/AccordionActions.js

@@ -9,4 +9,4 @@ "use strict";

exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));

@@ -16,4 +16,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _styled = _interopRequireDefault(require("../styles/styled"));
var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
var _zeroStyled = require("../zero-styled");
var _accordionActionsClasses = require("./accordionActionsClasses");

@@ -24,2 +23,3 @@ var _jsxRuntime = require("react/jsx-runtime");

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAccordionActions');
const useUtilityClasses = ownerState => {

@@ -35,3 +35,3 @@ const {

};
const AccordionActionsRoot = (0, _styled.default)('div', {
const AccordionActionsRoot = (0, _zeroStyled.styled)('div', {
name: 'MuiAccordionActions',

@@ -45,16 +45,18 @@ slot: 'Root',

}
})(({
ownerState
}) => (0, _extends2.default)({
})({
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end'
}, !ownerState.disableSpacing && {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
}
}));
justifyContent: 'flex-end',
variants: [{
props: props => !props.disableSpacing,
style: {
'& > :not(style) ~ :not(style)': {
marginLeft: 8
}
}
}]
});
const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {
const props = (0, _useThemeProps.default)({
const props = useThemeProps({
props: inProps,

@@ -61,0 +63,0 @@ name: 'MuiAccordionActions'

8

node/AccordionDetails/AccordionDetails.js

@@ -15,4 +15,3 @@ "use strict";

var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _styled = _interopRequireDefault(require("../styles/styled"));
var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
var _zeroStyled = require("../zero-styled");
var _accordionDetailsClasses = require("./accordionDetailsClasses");

@@ -23,2 +22,3 @@ var _jsxRuntime = require("react/jsx-runtime");

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAccordionDetails');
const useUtilityClasses = ownerState => {

@@ -33,3 +33,3 @@ const {

};
const AccordionDetailsRoot = (0, _styled.default)('div', {
const AccordionDetailsRoot = (0, _zeroStyled.styled)('div', {
name: 'MuiAccordionDetails',

@@ -44,3 +44,3 @@ slot: 'Root',

const AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails(inProps, ref) {
const props = (0, _useThemeProps.default)({
const props = useThemeProps({
props: inProps,

@@ -47,0 +47,0 @@ name: 'MuiAccordionDetails'

60

node/AccordionSummary/AccordionSummary.js

@@ -9,4 +9,4 @@ "use strict";

exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));

@@ -16,4 +16,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _styled = _interopRequireDefault(require("../styles/styled"));
var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
var _zeroStyled = require("../zero-styled");
var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));

@@ -26,2 +25,3 @@ var _AccordionContext = _interopRequireDefault(require("../Accordion/AccordionContext"));

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAccordionSummary');
const useUtilityClasses = ownerState => {

@@ -42,3 +42,3 @@ const {

};
const AccordionSummaryRoot = (0, _styled.default)(_ButtonBase.default, {
const AccordionSummaryRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
name: 'MuiAccordionSummary',

@@ -48,4 +48,3 @@ slot: 'Root',

})(({
theme,
ownerState
theme
}) => {

@@ -55,3 +54,3 @@ const transition = {

};
return (0, _extends2.default)({
return {
display: 'flex',

@@ -69,10 +68,14 @@ minHeight: 48,

cursor: 'pointer'
}
}, !ownerState.disableGutters && {
[`&.${_accordionSummaryClasses.default.expanded}`]: {
minHeight: 64
}
});
},
variants: [{
props: props => !props.disableGutters,
style: {
[`&.${_accordionSummaryClasses.default.expanded}`]: {
minHeight: 64
}
}
}]
};
});
const AccordionSummaryContent = (0, _styled.default)('div', {
const AccordionSummaryContent = (0, _zeroStyled.styled)('div', {
name: 'MuiAccordionSummary',

@@ -82,17 +85,20 @@ slot: 'Content',

})(({
theme,
ownerState
}) => (0, _extends2.default)({
theme
}) => ({
display: 'flex',
flexGrow: 1,
margin: '12px 0'
}, !ownerState.disableGutters && {
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
}),
[`&.${_accordionSummaryClasses.default.expanded}`]: {
margin: '20px 0'
}
margin: '12px 0',
variants: [{
props: props => !props.disableGutters,
style: {
transition: theme.transitions.create(['margin'], {
duration: theme.transitions.duration.shortest
}),
[`&.${_accordionSummaryClasses.default.expanded}`]: {
margin: '20px 0'
}
}
}]
}));
const AccordionSummaryExpandIconWrapper = (0, _styled.default)('div', {
const AccordionSummaryExpandIconWrapper = (0, _zeroStyled.styled)('div', {
name: 'MuiAccordionSummary',

@@ -115,3 +121,3 @@ slot: 'ExpandIconWrapper',

const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary(inProps, ref) {
const props = (0, _useThemeProps.default)({
const props = useThemeProps({
props: inProps,

@@ -118,0 +124,0 @@ name: 'MuiAccordionSummary'

116

node/Autocomplete/Autocomplete.js

@@ -37,4 +37,3 @@ "use strict";

var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
var _styled = _interopRequireDefault(require("../styles/styled"));
var _zeroStyled = require("../zero-styled");
var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasses"));

@@ -49,2 +48,3 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAutocomplete');
const useUtilityClasses = ownerState => {

@@ -82,3 +82,3 @@ const {

};
const AutocompleteRoot = (0, _styled.default)('div', {
const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
name: 'MuiAutocomplete',

@@ -109,5 +109,3 @@ slot: 'Root',

}
})(({
ownerState
}) => (0, _extends2.default)({
})({
[`&.${_autocompleteClasses.default.focused} .${_autocompleteClasses.default.clearIndicator}`]: {

@@ -121,13 +119,7 @@ visibility: 'visible'

}
}
}, ownerState.fullWidth && {
width: '100%'
}, {
[`& .${_autocompleteClasses.default.tag}`]: (0, _extends2.default)({
},
[`& .${_autocompleteClasses.default.tag}`]: {
margin: 3,
maxWidth: 'calc(100% - 6px)'
}, ownerState.size === 'small' && {
margin: 2,
maxWidth: 'calc(100% - 4px)'
}),
},
[`& .${_autocompleteClasses.default.inputRoot}`]: {

@@ -221,11 +213,36 @@ flexWrap: 'wrap',

},
[`& .${_autocompleteClasses.default.input}`]: (0, _extends2.default)({
[`& .${_autocompleteClasses.default.input}`]: {
flexGrow: 1,
textOverflow: 'ellipsis',
opacity: 0
}, ownerState.inputFocused && {
opacity: 1
})
}));
const AutocompleteEndAdornment = (0, _styled.default)('div', {
},
variants: [{
props: {
fullWidth: true
},
style: {
width: '100%'
}
}, {
props: {
size: 'small'
},
style: {
[`& .${_autocompleteClasses.default.tag}`]: {
margin: 2,
maxWidth: 'calc(100% - 4px)'
}
}
}, {
props: {
inputFocused: true
},
style: {
[`& .${_autocompleteClasses.default.input}`]: {
opacity: 1
}
}
}]
});
const AutocompleteEndAdornment = (0, _zeroStyled.styled)('div', {
name: 'MuiAutocomplete',

@@ -241,3 +258,3 @@ slot: 'EndAdornment',

});
const AutocompleteClearIndicator = (0, _styled.default)(_IconButton.default, {
const AutocompleteClearIndicator = (0, _zeroStyled.styled)(_IconButton.default, {
name: 'MuiAutocomplete',

@@ -251,3 +268,3 @@ slot: 'ClearIndicator',

});
const AutocompletePopupIndicator = (0, _styled.default)(_IconButton.default, {
const AutocompletePopupIndicator = (0, _zeroStyled.styled)(_IconButton.default, {
name: 'MuiAutocomplete',

@@ -258,11 +275,15 @@ slot: 'PopupIndicator',

}, styles) => (0, _extends2.default)({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
})(({
ownerState
}) => (0, _extends2.default)({
})({
padding: 2,
marginRight: -2
}, ownerState.popupOpen && {
transform: 'rotate(180deg)'
}));
const AutocompletePopper = (0, _styled.default)(_Popper.default, {
marginRight: -2,
variants: [{
props: {
popupOpen: true
},
style: {
transform: 'rotate(180deg)'
}
}]
});
const AutocompletePopper = (0, _zeroStyled.styled)(_Popper.default, {
name: 'MuiAutocomplete',

@@ -279,10 +300,15 @@ slot: 'Popper',

})(({
theme,
ownerState
}) => (0, _extends2.default)({
zIndex: (theme.vars || theme).zIndex.modal
}, ownerState.disablePortal && {
position: 'absolute'
theme
}) => ({
zIndex: (theme.vars || theme).zIndex.modal,
variants: [{
props: {
disablePortal: true
},
style: {
position: 'absolute'
}
}]
}));
const AutocompletePaper = (0, _styled.default)(_Paper.default, {
const AutocompletePaper = (0, _zeroStyled.styled)(_Paper.default, {
name: 'MuiAutocomplete',

@@ -296,3 +322,3 @@ slot: 'Paper',

}));
const AutocompleteLoading = (0, _styled.default)('div', {
const AutocompleteLoading = (0, _zeroStyled.styled)('div', {
name: 'MuiAutocomplete',

@@ -307,3 +333,3 @@ slot: 'Loading',

}));
const AutocompleteNoOptions = (0, _styled.default)('div', {
const AutocompleteNoOptions = (0, _zeroStyled.styled)('div', {
name: 'MuiAutocomplete',

@@ -318,3 +344,3 @@ slot: 'NoOptions',

}));
const AutocompleteListbox = (0, _styled.default)('div', {
const AutocompleteListbox = (0, _zeroStyled.styled)('div', {
name: 'MuiAutocomplete',

@@ -378,3 +404,3 @@ slot: 'Listbox',

}));
const AutocompleteGroupLabel = (0, _styled.default)(_ListSubheader.default, {
const AutocompleteGroupLabel = (0, _zeroStyled.styled)(_ListSubheader.default, {
name: 'MuiAutocomplete',

@@ -389,3 +415,3 @@ slot: 'GroupLabel',

}));
const AutocompleteGroupUl = (0, _styled.default)('ul', {
const AutocompleteGroupUl = (0, _zeroStyled.styled)('ul', {
name: 'MuiAutocomplete',

@@ -402,3 +428,3 @@ slot: 'GroupUl',

var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
const props = (0, _useThemeProps.default)({
const props = useThemeProps({
props: inProps,

@@ -943,3 +969,3 @@ name: 'MuiAutocomplete'

* If `true`, the component is in a loading state.
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
* @default false

@@ -946,0 +972,0 @@ */

2

node/CircularProgress/CircularProgress.js

@@ -224,3 +224,3 @@ "use strict";

* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, e.g. '3rem'.
* If using a string, you need to provide the CSS unit, for example '3rem'.
* @default 40

@@ -227,0 +227,0 @@ */

2

node/Icon/Icon.js

@@ -115,3 +115,3 @@ "use strict";

* The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
* other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
* other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
* @default 'material-icons'

@@ -118,0 +118,0 @@ */

647

node/Slider/Slider.js

@@ -20,4 +20,4 @@ "use strict";

var _RtlProvider = require("@mui/system/RtlProvider");
var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
var _styled = _interopRequireWildcard(require("../styles/styled"));
var _zeroStyled = require("../zero-styled");
var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));

@@ -31,6 +31,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSlider');
function Identity(x) {
return x;
}
const SliderRoot = exports.SliderRoot = (0, _styled.default)('span', {
const SliderRoot = exports.SliderRoot = (0, _zeroStyled.styled)('span', {
name: 'MuiSlider',

@@ -45,61 +46,104 @@ slot: 'Root',

})(({
theme,
ownerState
}) => (0, _extends2.default)({
borderRadius: 12,
boxSizing: 'content-box',
display: 'inline-block',
position: 'relative',
cursor: 'pointer',
touchAction: 'none',
color: (theme.vars || theme).palette[ownerState.color].main,
WebkitTapHighlightColor: 'transparent'
}, ownerState.orientation === 'horizontal' && (0, _extends2.default)({
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0'
}
}, ownerState.size === 'small' && {
height: 2
}, ownerState.marked && {
marginBottom: 20
}), ownerState.orientation === 'vertical' && (0, _extends2.default)({
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px'
}
}, ownerState.size === 'small' && {
width: 2
}, ownerState.marked && {
marginRight: 44
}), {
'@media print': {
colorAdjust: 'exact'
},
[`&.${_sliderClasses.default.disabled}`]: {
pointerEvents: 'none',
cursor: 'default',
color: (theme.vars || theme).palette.grey[400]
},
[`&.${_sliderClasses.default.dragging}`]: {
[`& .${_sliderClasses.default.thumb}, & .${_sliderClasses.default.track}`]: {
transition: 'none'
}
}
}));
const SliderRail = exports.SliderRail = (0, _styled.default)('span', {
theme
}) => {
var _theme$vars;
return {
borderRadius: 12,
boxSizing: 'content-box',
display: 'inline-block',
position: 'relative',
cursor: 'pointer',
touchAction: 'none',
WebkitTapHighlightColor: 'transparent',
'@media print': {
colorAdjust: 'exact'
},
[`&.${_sliderClasses.default.disabled}`]: {
pointerEvents: 'none',
cursor: 'default',
color: (theme.vars || theme).palette.grey[400]
},
[`&.${_sliderClasses.default.dragging}`]: {
[`& .${_sliderClasses.default.thumb}, & .${_sliderClasses.default.track}`]: {
transition: 'none'
}
},
variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(key => {
var _theme$vars2;
return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main;
}).map(color => ({
props: {
color
},
style: {
color: (theme.vars || theme).palette[color].main
}
})), {
props: {
orientation: 'horizontal'
},
style: {
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0'
}
}
}, {
props: {
orientation: 'horizontal',
size: 'small'
},
style: {
height: 2
}
}, {
props: {
orientation: 'horizontal',
marked: true
},
style: {
marginBottom: 20
}
}, {
props: {
orientation: 'vertical'
},
style: {
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px'
}
}
}, {
props: {
orientation: 'vertical',
size: 'small'
},
style: {
width: 2
}
}, {
props: {
orientation: 'vertical',
marked: true
},
style: {
marginRight: 44
}
}]
};
});
const SliderRail = exports.SliderRail = (0, _zeroStyled.styled)('span', {
name: 'MuiSlider',
slot: 'Rail',
overridesResolver: (props, styles) => styles.rail
})(({
ownerState
}) => (0, _extends2.default)({
})({
display: 'block',

@@ -109,17 +153,33 @@ position: 'absolute',

backgroundColor: 'currentColor',
opacity: 0.38
}, ownerState.orientation === 'horizontal' && {
width: '100%',
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}, ownerState.orientation === 'vertical' && {
height: '100%',
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}, ownerState.track === 'inverted' && {
opacity: 1
}));
const SliderTrack = exports.SliderTrack = (0, _styled.default)('span', {
opacity: 0.38,
variants: [{
props: {
orientation: 'horizontal'
},
style: {
width: '100%',
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
height: '100%',
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}
}, {
props: {
track: 'inverted'
},
style: {
opacity: 1
}
}]
});
const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
name: 'MuiSlider',

@@ -129,9 +189,6 @@ slot: 'Track',

})(({
theme,
ownerState
theme
}) => {
const color =
// Same logic as the LinearProgress track color
theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[ownerState.color].main, 0.5);
return (0, _extends2.default)({
var _theme$vars3;
return {
display: 'block',

@@ -144,21 +201,58 @@ position: 'absolute',

duration: theme.transitions.duration.shortest
})
}, ownerState.size === 'small' && {
border: 'none'
}, ownerState.orientation === 'horizontal' && {
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}, ownerState.orientation === 'vertical' && {
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}, ownerState.track === false && {
display: 'none'
}, ownerState.track === 'inverted' && {
backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
});
}),
variants: [{
props: {
size: 'small'
},
style: {
border: 'none'
}
}, {
props: {
orientation: 'horizontal'
},
style: {
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}
}, {
props: {
track: false
},
style: {
display: 'none'
}
}, ...Object.keys(((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette).filter(key => {
var _theme$vars4;
return ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[key].main;
}).map(color => ({
props: {
color,
track: 'inverted'
},
style: (0, _extends2.default)({}, theme.vars ? {
backgroundColor: theme.vars.palette.Slider[`${color}Track`],
borderColor: theme.vars.palette.Slider[`${color}Track`]
} : (0, _extends2.default)({
backgroundColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
borderColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62)
}, theme.applyStyles('dark', {
backgroundColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
}), theme.applyStyles('dark', {
borderColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
})))
}))]
};
});
const SliderThumb = exports.SliderThumb = (0, _styled.default)('span', {
const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
name: 'MuiSlider',

@@ -173,65 +267,97 @@ slot: 'Thumb',

})(({
theme,
ownerState
}) => (0, _extends2.default)({
position: 'absolute',
width: 20,
height: 20,
boxSizing: 'border-box',
borderRadius: '50%',
outline: 0,
backgroundColor: 'currentColor',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
duration: theme.transitions.duration.shortest
})
}, ownerState.size === 'small' && {
width: 12,
height: 12
}, ownerState.orientation === 'horizontal' && {
top: '50%',
transform: 'translate(-50%, -50%)'
}, ownerState.orientation === 'vertical' && {
left: '50%',
transform: 'translate(-50%, 50%)'
}, {
'&::before': (0, _extends2.default)({
theme
}) => {
var _theme$vars5;
return {
position: 'absolute',
content: '""',
borderRadius: 'inherit',
width: '100%',
height: '100%',
boxShadow: (theme.vars || theme).shadows[2]
}, ownerState.size === 'small' && {
boxShadow: 'none'
}),
'&::after': {
position: 'absolute',
content: '""',
width: 20,
height: 20,
boxSizing: 'border-box',
borderRadius: '50%',
// 42px is the hit target
width: 42,
height: 42,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
},
[`&:hover, &.${_sliderClasses.default.focusVisible}`]: {
boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
'@media (hover: none)': {
boxShadow: 'none'
}
},
[`&.${_sliderClasses.default.active}`]: {
boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.16)}`
},
[`&.${_sliderClasses.default.disabled}`]: {
'&:hover': {
boxShadow: 'none'
}
}
}));
const SliderValueLabel = exports.SliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
outline: 0,
backgroundColor: 'currentColor',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
duration: theme.transitions.duration.shortest
}),
'&::before': {
position: 'absolute',
content: '""',
borderRadius: 'inherit',
width: '100%',
height: '100%',
boxShadow: (theme.vars || theme).shadows[2]
},
'&::after': {
position: 'absolute',
content: '""',
borderRadius: '50%',
// 42px is the hit target
width: 42,
height: 42,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
},
[`&.${_sliderClasses.default.disabled}`]: {
'&:hover': {
boxShadow: 'none'
}
},
variants: [...Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(key => {
var _theme$vars6;
return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
}).map(color => ({
props: {
color
},
style: {
[`&:hover, &.${_sliderClasses.default.focusVisible}`]: (0, _extends2.default)({}, theme.vars ? {
boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
} : {
boxShadow: `0px 0px 0px 8px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
}, {
'@media (hover: none)': {
boxShadow: 'none'
}
}),
[`&.${_sliderClasses.default.active}`]: (0, _extends2.default)({}, theme.vars ? {
boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
} : {
boxShadow: `0px 0px 0px 14px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
})
}
})), {
props: {
size: 'small'
},
style: {
width: 12,
height: 12,
'&::before': {
boxShadow: 'none'
}
}
}, {
props: {
orientation: 'horizontal'
},
style: {
top: '50%',
transform: 'translate(-50%, -50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: '50%',
transform: 'translate(-50%, 50%)'
}
}]
};
});
const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_SliderValueLabel.default, {
name: 'MuiSlider',

@@ -241,8 +367,4 @@ slot: 'ValueLabel',

})(({
theme,
ownerState
theme
}) => (0, _extends2.default)({
[`&.${_sliderClasses.default.valueLabelOpen}`]: {
transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
},
zIndex: 1,

@@ -255,3 +377,2 @@ whiteSpace: 'nowrap'

}),
transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(0)`,
position: 'absolute',

@@ -264,38 +385,70 @@ backgroundColor: (theme.vars || theme).palette.grey[600],

justifyContent: 'center',
padding: '0.25rem 0.75rem'
}, ownerState.orientation === 'horizontal' && {
top: '-10px',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%'
}
}, ownerState.orientation === 'vertical' && {
right: ownerState.size === 'small' ? '20px' : '30px',
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
top: '50%'
}
}, ownerState.size === 'small' && {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem'
padding: '0.25rem 0.75rem',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
transform: 'translateY(-100%) scale(0)',
top: '-10px',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%'
},
[`&.${_sliderClasses.default.valueLabelOpen}`]: {
transform: 'translateY(-100%) scale(1)'
}
}
}, {
props: {
orientation: 'vertical'
},
style: {
transform: 'translateY(-50%) scale(0)',
right: '30px',
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
top: '50%'
},
[`&.${_sliderClasses.default.valueLabelOpen}`]: {
transform: 'translateY(-50%) scale(1)'
}
}
}, {
props: {
size: 'small'
},
style: {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem'
}
}, {
props: {
orientation: 'vertical',
size: 'small'
},
style: {
right: '20px'
}
}]
}));
const SliderMark = exports.SliderMark = (0, _styled.default)('span', {
const SliderMark = exports.SliderMark = (0, _zeroStyled.styled)('span', {
name: 'MuiSlider',
slot: 'Mark',
shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'markActive',
shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'markActive',
overridesResolver: (props, styles) => {

@@ -308,6 +461,4 @@ const {

})(({
theme,
ownerState,
markActive
}) => (0, _extends2.default)({
theme
}) => ({
position: 'absolute',

@@ -317,40 +468,70 @@ width: 2,

borderRadius: 1,
backgroundColor: 'currentColor'
}, ownerState.orientation === 'horizontal' && {
top: '50%',
transform: 'translate(-1px, -50%)'
}, ownerState.orientation === 'vertical' && {
left: '50%',
transform: 'translate(-50%, 1px)'
}, markActive && {
backgroundColor: (theme.vars || theme).palette.background.paper,
opacity: 0.8
backgroundColor: 'currentColor',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
top: '50%',
transform: 'translate(-1px, -50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: '50%',
transform: 'translate(-50%, 1px)'
}
}, {
props: {
markActive: true
},
style: {
backgroundColor: (theme.vars || theme).palette.background.paper,
opacity: 0.8
}
}]
}));
const SliderMarkLabel = exports.SliderMarkLabel = (0, _styled.default)('span', {
const SliderMarkLabel = exports.SliderMarkLabel = (0, _zeroStyled.styled)('span', {
name: 'MuiSlider',
slot: 'MarkLabel',
shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'markLabelActive',
shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'markLabelActive',
overridesResolver: (props, styles) => styles.markLabel
})(({
theme,
ownerState,
markLabelActive
theme
}) => (0, _extends2.default)({}, theme.typography.body2, {
color: (theme.vars || theme).palette.text.secondary,
position: 'absolute',
whiteSpace: 'nowrap'
}, ownerState.orientation === 'horizontal' && {
top: 30,
transform: 'translateX(-50%)',
'@media (pointer: coarse)': {
top: 40
}
}, ownerState.orientation === 'vertical' && {
left: 36,
transform: 'translateY(50%)',
'@media (pointer: coarse)': {
left: 44
}
}, markLabelActive && {
color: (theme.vars || theme).palette.text.primary
whiteSpace: 'nowrap',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
top: 30,
transform: 'translateX(-50%)',
'@media (pointer: coarse)': {
top: 40
}
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: 36,
transform: 'translateY(50%)',
'@media (pointer: coarse)': {
left: 44
}
}
}, {
props: {
markLabelActive: true
},
style: {
color: (theme.vars || theme).palette.text.primary
}
}]
}));

@@ -389,3 +570,3 @@ const useUtilityClasses = ownerState => {

var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
const props = (0, _useThemeProps.default)({
const props = useThemeProps({
props: inputProps,

@@ -392,0 +573,0 @@ name: 'MuiSlider'

2

node/styles/experimental_extendTheme.js

@@ -51,3 +51,3 @@ "use strict";

// if channel token can't be generated, show a warning.
obj[`${key}Channel`] = (0, _colorManipulator.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
obj[`${key}Channel`] = (0, _colorManipulator.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
}

@@ -54,0 +54,0 @@ }

25

node/styles/styled.js

@@ -8,16 +8,25 @@ "use strict";

});
exports.slotShouldForwardProp = exports.rootShouldForwardProp = exports.default = void 0;
var _createStyled = _interopRequireWildcard(require("@mui/system/createStyled"));
exports.default = void 0;
Object.defineProperty(exports, "rootShouldForwardProp", {
enumerable: true,
get: function () {
return _rootShouldForwardProp.default;
}
});
Object.defineProperty(exports, "slotShouldForwardProp", {
enumerable: true,
get: function () {
return _slotShouldForwardProp.default;
}
});
var _createStyled = _interopRequireDefault(require("@mui/system/createStyled"));
var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
var _identifier = _interopRequireDefault(require("./identifier"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const rootShouldForwardProp = prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'classes';
exports.rootShouldForwardProp = rootShouldForwardProp;
const slotShouldForwardProp = exports.slotShouldForwardProp = _createStyled.shouldForwardProp;
var _rootShouldForwardProp = _interopRequireDefault(require("./rootShouldForwardProp"));
var _slotShouldForwardProp = _interopRequireDefault(require("./slotShouldForwardProp"));
const styled = (0, _createStyled.default)({
themeId: _identifier.default,
defaultTheme: _defaultTheme.default,
rootShouldForwardProp
rootShouldForwardProp: _rootShouldForwardProp.default
});
var _default = exports.default = styled;

2

node/SvgIcon/SvgIcon.js

@@ -54,3 +54,3 @@ "use strict";

// the <svg> will define the property that has `currentColor`
// e.g. heroicons uses fill="none" and stroke="currentColor"
// for example heroicons uses fill="none" and stroke="currentColor"
fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',

@@ -57,0 +57,0 @@ flexShrink: 0,

2

node/usePagination/usePagination.js

@@ -70,3 +70,3 @@ "use strict";

// Basic list of items to render
// e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
// for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,

@@ -73,0 +73,0 @@ // Start ellipsis

2

OverridableComponent.d.ts

@@ -14,3 +14,3 @@ import * as React from 'react';

// Also, there are types in Base UI that have a similar shape to this interface
// (e.g. SelectType, OptionType, etc.).
// (for example SelectType, OptionType, etc.).
<RootComponent extends React.ElementType>(

@@ -17,0 +17,0 @@ props: {

12

package.json
{
"name": "@mui/material",
"version": "5.15.13",
"version": "5.15.14",
"private": false,

@@ -37,7 +37,7 @@ "author": "MUI Team",

"react-transition-group": "^4.4.5",
"@mui/base": "5.0.0-beta.39",
"@mui/types": "^7.2.13",
"@mui/system": "^5.15.13",
"@mui/utils": "^5.15.13",
"@mui/core-downloads-tracker": "^5.15.13"
"@mui/base": "5.0.0-beta.40",
"@mui/system": "^5.15.14",
"@mui/utils": "^5.15.14",
"@mui/types": "^7.2.14",
"@mui/core-downloads-tracker": "^5.15.14"
},

@@ -44,0 +44,0 @@ "peerDependencies": {

29

Popper/Popper.d.ts

@@ -5,3 +5,3 @@ import { PopperProps as BasePopperProps } from '@mui/base/Popper';

import { Theme } from '../styles';
export type PopperProps = Omit<BasePopperProps, 'direction'> & {
export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
/**

@@ -29,3 +29,3 @@ * The component used for the root node.

sx?: SxProps<Theme>;
};
}
/**

@@ -43,26 +43,3 @@ *

*/
declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps, "direction"> & {
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
/**
* The components used for each slot inside the Popper.
* Either a string to use a HTML element or a component.
* @default {}
*/
components?: {
Root?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
} | undefined;
/**
* The props used for each slot inside the Popper.
* @default {}
*/
componentsProps?: BasePopperProps['slotProps'];
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme> | undefined;
} & React.RefAttributes<HTMLDivElement>>;
declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
export default Popper;

4

README.md

@@ -36,3 +36,3 @@ <!-- markdownlint-disable-next-line -->

Contributing to Material UI is about more than just issues and pull requests!
There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.

@@ -45,3 +45,3 @@ ## Changelog

Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/material-ui/discover-more/roadmap/).
Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/material-ui/discover-more/roadmap/).

@@ -48,0 +48,0 @@ ## License

28

Select/Select.d.ts

@@ -151,3 +151,3 @@ import * as React from 'react';

*/
variant?: 'filled' | 'standard' | 'outlined';
variant?: SelectVariants;
}

@@ -176,3 +176,3 @@

*/
variant: 'outlined';
variant?: 'outlined';
}

@@ -182,11 +182,6 @@

export type SelectProps<
Value = unknown,
Variant extends SelectVariants = SelectVariants,
> = BaseSelectProps<Value> &
(Variant extends 'filled'
? FilledSelectProps
: Variant extends 'standard'
? StandardSelectProps
: OutlinedSelectProps);
export type SelectProps<Value = unknown> =
| (FilledSelectProps & BaseSelectProps<Value>)
| (StandardSelectProps & BaseSelectProps<Value>)
| (OutlinedSelectProps & BaseSelectProps<Value>);

@@ -204,13 +199,6 @@ /**

*/
export default function Select<Value = unknown, Variant extends SelectVariants = 'outlined'>(
props: {
/**
* The variant to use.
* @default 'outlined'
*/
variant?: Variant;
} & Omit<SelectProps<Value, Variant>, 'variant'>,
export default function Select<Value = unknown>(
props: SelectProps<Value>,
): JSX.Element & {
muiName: string;
};

627

Slider/Slider.js

@@ -15,4 +15,4 @@ 'use client';

import { useRtl } from '@mui/system/RtlProvider';
import useThemeProps from '../styles/useThemeProps';
import styled, { slotShouldForwardProp } from '../styles/styled';
import { styled, createUseThemeProps } from '../zero-styled';
import slotShouldForwardProp from '../styles/slotShouldForwardProp';
import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';

@@ -24,2 +24,3 @@ import capitalize from '../utils/capitalize';

import { jsxs as _jsxs } from "react/jsx-runtime";
const useThemeProps = createUseThemeProps('MuiSlider');
function Identity(x) {

@@ -38,54 +39,99 @@ return x;

})(({
theme,
ownerState
}) => _extends({
borderRadius: 12,
boxSizing: 'content-box',
display: 'inline-block',
position: 'relative',
cursor: 'pointer',
touchAction: 'none',
color: (theme.vars || theme).palette[ownerState.color].main,
WebkitTapHighlightColor: 'transparent'
}, ownerState.orientation === 'horizontal' && _extends({
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0'
}
}, ownerState.size === 'small' && {
height: 2
}, ownerState.marked && {
marginBottom: 20
}), ownerState.orientation === 'vertical' && _extends({
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px'
}
}, ownerState.size === 'small' && {
width: 2
}, ownerState.marked && {
marginRight: 44
}), {
'@media print': {
colorAdjust: 'exact'
},
[`&.${sliderClasses.disabled}`]: {
pointerEvents: 'none',
cursor: 'default',
color: (theme.vars || theme).palette.grey[400]
},
[`&.${sliderClasses.dragging}`]: {
[`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
transition: 'none'
}
}
}));
theme
}) => {
var _theme$vars;
return {
borderRadius: 12,
boxSizing: 'content-box',
display: 'inline-block',
position: 'relative',
cursor: 'pointer',
touchAction: 'none',
WebkitTapHighlightColor: 'transparent',
'@media print': {
colorAdjust: 'exact'
},
[`&.${sliderClasses.disabled}`]: {
pointerEvents: 'none',
cursor: 'default',
color: (theme.vars || theme).palette.grey[400]
},
[`&.${sliderClasses.dragging}`]: {
[`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
transition: 'none'
}
},
variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(key => {
var _theme$vars2;
return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main;
}).map(color => ({
props: {
color
},
style: {
color: (theme.vars || theme).palette[color].main
}
})), {
props: {
orientation: 'horizontal'
},
style: {
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0'
}
}
}, {
props: {
orientation: 'horizontal',
size: 'small'
},
style: {
height: 2
}
}, {
props: {
orientation: 'horizontal',
marked: true
},
style: {
marginBottom: 20
}
}, {
props: {
orientation: 'vertical'
},
style: {
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px'
}
}
}, {
props: {
orientation: 'vertical',
size: 'small'
},
style: {
width: 2
}
}, {
props: {
orientation: 'vertical',
marked: true
},
style: {
marginRight: 44
}
}]
};
});
export const SliderRail = styled('span', {

@@ -95,5 +141,3 @@ name: 'MuiSlider',

overridesResolver: (props, styles) => styles.rail
})(({
ownerState
}) => _extends({
})({
display: 'block',

@@ -103,16 +147,32 @@ position: 'absolute',

backgroundColor: 'currentColor',
opacity: 0.38
}, ownerState.orientation === 'horizontal' && {
width: '100%',
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}, ownerState.orientation === 'vertical' && {
height: '100%',
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}, ownerState.track === 'inverted' && {
opacity: 1
}));
opacity: 0.38,
variants: [{
props: {
orientation: 'horizontal'
},
style: {
width: '100%',
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
height: '100%',
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}
}, {
props: {
track: 'inverted'
},
style: {
opacity: 1
}
}]
});
export const SliderTrack = styled('span', {

@@ -123,9 +183,6 @@ name: 'MuiSlider',

})(({
theme,
ownerState
theme
}) => {
const color =
// Same logic as the LinearProgress track color
theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.5);
return _extends({
var _theme$vars3;
return {
display: 'block',

@@ -138,19 +195,56 @@ position: 'absolute',

duration: theme.transitions.duration.shortest
})
}, ownerState.size === 'small' && {
border: 'none'
}, ownerState.orientation === 'horizontal' && {
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}, ownerState.orientation === 'vertical' && {
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}, ownerState.track === false && {
display: 'none'
}, ownerState.track === 'inverted' && {
backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
});
}),
variants: [{
props: {
size: 'small'
},
style: {
border: 'none'
}
}, {
props: {
orientation: 'horizontal'
},
style: {
height: 'inherit',
top: '50%',
transform: 'translateY(-50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
width: 'inherit',
left: '50%',
transform: 'translateX(-50%)'
}
}, {
props: {
track: false
},
style: {
display: 'none'
}
}, ...Object.keys(((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette).filter(key => {
var _theme$vars4;
return ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[key].main;
}).map(color => ({
props: {
color,
track: 'inverted'
},
style: _extends({}, theme.vars ? {
backgroundColor: theme.vars.palette.Slider[`${color}Track`],
borderColor: theme.vars.palette.Slider[`${color}Track`]
} : _extends({
backgroundColor: lighten(theme.palette[color].main, 0.62),
borderColor: lighten(theme.palette[color].main, 0.62)
}, theme.applyStyles('dark', {
backgroundColor: darken(theme.palette[color].main, 0.5)
}), theme.applyStyles('dark', {
borderColor: darken(theme.palette[color].main, 0.5)
})))
}))]
};
});

@@ -167,64 +261,96 @@ export const SliderThumb = styled('span', {

})(({
theme,
ownerState
}) => _extends({
position: 'absolute',
width: 20,
height: 20,
boxSizing: 'border-box',
borderRadius: '50%',
outline: 0,
backgroundColor: 'currentColor',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
duration: theme.transitions.duration.shortest
})
}, ownerState.size === 'small' && {
width: 12,
height: 12
}, ownerState.orientation === 'horizontal' && {
top: '50%',
transform: 'translate(-50%, -50%)'
}, ownerState.orientation === 'vertical' && {
left: '50%',
transform: 'translate(-50%, 50%)'
}, {
'&::before': _extends({
theme
}) => {
var _theme$vars5;
return {
position: 'absolute',
content: '""',
borderRadius: 'inherit',
width: '100%',
height: '100%',
boxShadow: (theme.vars || theme).shadows[2]
}, ownerState.size === 'small' && {
boxShadow: 'none'
}),
'&::after': {
position: 'absolute',
content: '""',
width: 20,
height: 20,
boxSizing: 'border-box',
borderRadius: '50%',
// 42px is the hit target
width: 42,
height: 42,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
},
[`&:hover, &.${sliderClasses.focusVisible}`]: {
boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`,
'@media (hover: none)': {
boxShadow: 'none'
}
},
[`&.${sliderClasses.active}`]: {
boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`
},
[`&.${sliderClasses.disabled}`]: {
'&:hover': {
boxShadow: 'none'
}
}
}));
outline: 0,
backgroundColor: 'currentColor',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
duration: theme.transitions.duration.shortest
}),
'&::before': {
position: 'absolute',
content: '""',
borderRadius: 'inherit',
width: '100%',
height: '100%',
boxShadow: (theme.vars || theme).shadows[2]
},
'&::after': {
position: 'absolute',
content: '""',
borderRadius: '50%',
// 42px is the hit target
width: 42,
height: 42,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
},
[`&.${sliderClasses.disabled}`]: {
'&:hover': {
boxShadow: 'none'
}
},
variants: [...Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(key => {
var _theme$vars6;
return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
}).map(color => ({
props: {
color
},
style: {
[`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
} : {
boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
}, {
'@media (hover: none)': {
boxShadow: 'none'
}
}),
[`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
} : {
boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
})
}
})), {
props: {
size: 'small'
},
style: {
width: 12,
height: 12,
'&::before': {
boxShadow: 'none'
}
}
}, {
props: {
orientation: 'horizontal'
},
style: {
top: '50%',
transform: 'translate(-50%, -50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: '50%',
transform: 'translate(-50%, 50%)'
}
}]
};
});
export const SliderValueLabel = styled(BaseSliderValueLabel, {

@@ -235,8 +361,4 @@ name: 'MuiSlider',

})(({
theme,
ownerState
theme
}) => _extends({
[`&.${sliderClasses.valueLabelOpen}`]: {
transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
},
zIndex: 1,

@@ -249,3 +371,2 @@ whiteSpace: 'nowrap'

}),
transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(0)`,
position: 'absolute',

@@ -258,33 +379,65 @@ backgroundColor: (theme.vars || theme).palette.grey[600],

justifyContent: 'center',
padding: '0.25rem 0.75rem'
}, ownerState.orientation === 'horizontal' && {
top: '-10px',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%'
}
}, ownerState.orientation === 'vertical' && {
right: ownerState.size === 'small' ? '20px' : '30px',
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
top: '50%'
}
}, ownerState.size === 'small' && {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem'
padding: '0.25rem 0.75rem',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
transform: 'translateY(-100%) scale(0)',
top: '-10px',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%'
},
[`&.${sliderClasses.valueLabelOpen}`]: {
transform: 'translateY(-100%) scale(1)'
}
}
}, {
props: {
orientation: 'vertical'
},
style: {
transform: 'translateY(-50%) scale(0)',
right: '30px',
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
top: '50%'
},
[`&.${sliderClasses.valueLabelOpen}`]: {
transform: 'translateY(-50%) scale(1)'
}
}
}, {
props: {
size: 'small'
},
style: {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem'
}
}, {
props: {
orientation: 'vertical',
size: 'small'
},
style: {
right: '20px'
}
}]
}));

@@ -302,6 +455,4 @@ export const SliderMark = styled('span', {

})(({
theme,
ownerState,
markActive
}) => _extends({
theme
}) => ({
position: 'absolute',

@@ -311,12 +462,28 @@ width: 2,

borderRadius: 1,
backgroundColor: 'currentColor'
}, ownerState.orientation === 'horizontal' && {
top: '50%',
transform: 'translate(-1px, -50%)'
}, ownerState.orientation === 'vertical' && {
left: '50%',
transform: 'translate(-50%, 1px)'
}, markActive && {
backgroundColor: (theme.vars || theme).palette.background.paper,
opacity: 0.8
backgroundColor: 'currentColor',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
top: '50%',
transform: 'translate(-1px, -50%)'
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: '50%',
transform: 'translate(-50%, 1px)'
}
}, {
props: {
markActive: true
},
style: {
backgroundColor: (theme.vars || theme).palette.background.paper,
opacity: 0.8
}
}]
}));

@@ -329,23 +496,37 @@ export const SliderMarkLabel = styled('span', {

})(({
theme,
ownerState,
markLabelActive
theme
}) => _extends({}, theme.typography.body2, {
color: (theme.vars || theme).palette.text.secondary,
position: 'absolute',
whiteSpace: 'nowrap'
}, ownerState.orientation === 'horizontal' && {
top: 30,
transform: 'translateX(-50%)',
'@media (pointer: coarse)': {
top: 40
}
}, ownerState.orientation === 'vertical' && {
left: 36,
transform: 'translateY(50%)',
'@media (pointer: coarse)': {
left: 44
}
}, markLabelActive && {
color: (theme.vars || theme).palette.text.primary
whiteSpace: 'nowrap',
variants: [{
props: {
orientation: 'horizontal'
},
style: {
top: 30,
transform: 'translateX(-50%)',
'@media (pointer: coarse)': {
top: 40
}
}
}, {
props: {
orientation: 'vertical'
},
style: {
left: 36,
transform: 'translateY(50%)',
'@media (pointer: coarse)': {
left: 44
}
}
}, {
props: {
markLabelActive: true
},
style: {
color: (theme.vars || theme).palette.text.primary
}
}]
}));

@@ -352,0 +533,0 @@ const useUtilityClasses = ownerState => {

2

styles/experimental_extendTheme.js

@@ -41,3 +41,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

// if channel token can't be generated, show a warning.
obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
}

@@ -44,0 +44,0 @@ }

5

styles/styled.d.ts
import { CreateMUIStyled } from '@mui/system';
import { Theme } from './createTheme';
export function rootShouldForwardProp(prop: string): boolean;
export { default as slotShouldForwardProp } from './slotShouldForwardProp';
export { default as rootShouldForwardProp } from './rootShouldForwardProp';
export function slotShouldForwardProp(prop: string): boolean;
/**

@@ -9,0 +8,0 @@ * Custom styled utility that has a default MUI theme.

7

styles/styled.js
'use client';
import createStyled, { shouldForwardProp } from '@mui/system/createStyled';
import createStyled from '@mui/system/createStyled';
import defaultTheme from './defaultTheme';
import THEME_ID from './identifier';
export const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
export const slotShouldForwardProp = shouldForwardProp;
import rootShouldForwardProp from './rootShouldForwardProp';
export { default as slotShouldForwardProp } from './slotShouldForwardProp';
export { default as rootShouldForwardProp } from './rootShouldForwardProp';
const styled = createStyled({

@@ -9,0 +10,0 @@ themeId: THEME_ID,

2

SvgIcon/SvgIcon.js

@@ -47,3 +47,3 @@ 'use client';

// the <svg> will define the property that has `currentColor`
// e.g. heroicons uses fill="none" and stroke="currentColor"
// for example heroicons uses fill="none" and stroke="currentColor"
fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',

@@ -50,0 +50,0 @@ flexShrink: 0,

2

usePagination/usePagination.js

@@ -64,3 +64,3 @@ 'use client';

// Basic list of items to render
// e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
// for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,

@@ -67,0 +67,0 @@ // Start ellipsis

CHANGELOG.md

Sorry, the diff of this file is too big to display

node/index.js

Sorry, the diff of this file is too big to display

umd/material-ui.development.js

Sorry, the diff of this file is too big to display

umd/material-ui.production.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc