@mui/material 7.0.0-alpha.0 → 7.0.0-alpha.1

package/ButtonGroup/ButtonGroup.js

@@ -1,40 +1,47 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
-import getValidReactChildren from '@mui/utils/getValidReactChildren';
-import capitalize from "../utils/capitalize.js";
-import { styled } from "../zero-styled/index.js";
-import memoTheme from "../utils/memoTheme.js";
-import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import buttonGroupClasses, { getButtonGroupUtilityClass } from "./buttonGroupClasses.js";
-import ButtonGroupContext from "./ButtonGroupContext.js";
-import ButtonGroupButtonContext from "./ButtonGroupButtonContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValidReactChildren"));
+var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _buttonGroupClasses = _interopRequireWildcard(require("./buttonGroupClasses"));
+var _ButtonGroupContext = _interopRequireDefault(require("./ButtonGroupContext"));
+var _ButtonGroupButtonContext = _interopRequireDefault(require("./ButtonGroupButtonContext"));
+var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
   const {
     ownerState
   } = props;
   return [{
-    [`& .${buttonGroupClasses.grouped}`]: styles.grouped
+    [`& .${_buttonGroupClasses.default.grouped}`]: styles.grouped
   }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.orientation)}`]
+    [`& .${_buttonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.orientation)}`]
   }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}`]
+    [`& .${_buttonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.variant)}`]
   }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
+    [`& .${_buttonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.variant)}${(0, _capitalize.default)(ownerState.orientation)}`]
   }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
+    [`& .${_buttonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.variant)}${(0, _capitalize.default)(ownerState.color)}`]
   }, {
-    [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton
+    [`& .${_buttonGroupClasses.default.firstButton}`]: styles.firstButton
   }, {
-    [`& .${buttonGroupClasses.lastButton}`]: styles.lastButton
+    [`& .${_buttonGroupClasses.default.lastButton}`]: styles.lastButton
   }, {
-    [`& .${buttonGroupClasses.middleButton}`]: styles.middleButton
+    [`& .${_buttonGroupClasses.default.middleButton}`]: styles.middleButton
   }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
 };
 const useUtilityClasses = ownerState => {
@@ -48,19 +55,19 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', `color${capitalize(color)}`],
-    grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
+    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', `color${(0, _capitalize.default)(color)}`],
+    grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, `grouped${(0, _capitalize.default)(variant)}`, `grouped${(0, _capitalize.default)(variant)}${(0, _capitalize.default)(orientation)}`, `grouped${(0, _capitalize.default)(variant)}${(0, _capitalize.default)(color)}`, disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
     middleButton: ['middleButton']
   };
-  return composeClasses(slots, getButtonGroupUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _buttonGroupClasses.getButtonGroupUtilityClass, classes);
 };
-const ButtonGroupRoot = styled('div', {
+const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiButtonGroup',
   slot: 'Root',
   overridesResolver
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   display: 'inline-flex',
@@ -92,11 +99,11 @@ const ButtonGroupRoot = styled('div', {
     },
     style: {
       flexDirection: 'column',
-      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderTopRightRadius: 0,
         borderTopLeftRadius: 0
       },
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderBottomRightRadius: 0,
         borderBottomLeftRadius: 0
       }
@@ -106,11 +113,11 @@ const ButtonGroupRoot = styled('div', {
       orientation: 'horizontal'
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderTopRightRadius: 0,
         borderBottomRightRadius: 0
       },
-      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderTopLeftRadius: 0,
         borderBottomLeftRadius: 0
       }
@@ -121,9 +128,9 @@ const ButtonGroupRoot = styled('div', {
       orientation: 'horizontal'
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-        [`&.${buttonGroupClasses.disabled}`]: {
+        [`&.${_buttonGroupClasses.default.disabled}`]: {
           borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
       }
@@ -134,21 +141,21 @@ const ButtonGroupRoot = styled('div', {
       orientation: 'vertical'
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-        [`&.${buttonGroupClasses.disabled}`]: {
+        [`&.${_buttonGroupClasses.default.disabled}`]: {
           borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).flatMap(([color]) => [{
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).flatMap(([color]) => [{
     props: {
       variant: 'text',
       color
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5)
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.5)
       }
     }
   }]), {
@@ -157,13 +164,13 @@ const ButtonGroupRoot = styled('div', {
       orientation: 'horizontal'
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderRightColor: 'transparent',
         '&:hover': {
           borderRightColor: 'currentColor'
         }
       },
-      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         marginLeft: -1
       }
     }
@@ -173,13 +180,13 @@ const ButtonGroupRoot = styled('div', {
       orientation: 'vertical'
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderBottomColor: 'transparent',
         '&:hover': {
           borderBottomColor: 'currentColor'
         }
       },
-      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         marginTop: -1
       }
     }
@@ -189,9 +196,9 @@ const ButtonGroupRoot = styled('div', {
       orientation: 'horizontal'
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-        [`&.${buttonGroupClasses.disabled}`]: {
+        [`&.${_buttonGroupClasses.default.disabled}`]: {
           borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
       }
@@ -202,25 +209,25 @@ const ButtonGroupRoot = styled('div', {
       orientation: 'vertical'
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-        [`&.${buttonGroupClasses.disabled}`]: {
+        [`&.${_buttonGroupClasses.default.disabled}`]: {
           borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark'])).map(([color]) => ({
     props: {
       variant: 'contained',
       color
     },
     style: {
-      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
         borderColor: (theme.vars || theme).palette[color].dark
       }
     }
   }))],
-  [`& .${buttonGroupClasses.grouped}`]: {
+  [`& .${_buttonGroupClasses.default.grouped}`]: {
     minWidth: 40,
     boxShadow: 'none',
     props: {
@@ -234,7 +241,7 @@ const ButtonGroupRoot = styled('div', {
   }
 })));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
-  const props = useDefaultProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiButtonGroup'
   });
@@ -278,7 +285,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     size,
     variant
   }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
-  const validChildren = getValidReactChildren(children);
+  const validChildren = (0, _getValidReactChildren.default)(children);
   const childrenCount = validChildren.length;
   const getButtonPositionClassName = index => {
     const isFirstButton = index === 0;
@@ -294,17 +301,17 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     }
     return classes.middleButton;
   };
-  return /*#__PURE__*/_jsx(ButtonGroupRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonGroupRoot, {
     as: component,
     role: "group",
-    className: clsx(classes.root, className),
+    className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ownerState: ownerState,
     ...other,
-    children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupContext.default.Provider, {
       value: context,
       children: validChildren.map((child, index) => {
-        return /*#__PURE__*/_jsx(ButtonGroupButtonContext.Provider, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupButtonContext.default.Provider, {
           value: getButtonPositionClassName(index),
           children: child
         }, index);
@@ -320,71 +327,71 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes /* remove-proptype
   /**
    * The content of the component.
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object,
+  classes: _propTypes.default.object,
   /**
    * @ignore
    */
-  className: PropTypes.string,
+  className: _propTypes.default.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes.elementType,
+  component: _propTypes.default.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: PropTypes.bool,
+  disabled: _propTypes.default.bool,
   /**
    * If `true`, no elevation is used.
    * @default false
    */
-  disableElevation: PropTypes.bool,
+  disableElevation: _propTypes.default.bool,
   /**
    * If `true`, the button keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple: PropTypes.bool,
+  disableFocusRipple: _propTypes.default.bool,
   /**
    * If `true`, the button ripple effect is disabled.
    * @default false
    */
-  disableRipple: PropTypes.bool,
+  disableRipple: _propTypes.default.bool,
   /**
    * If `true`, the buttons will take up the full width of its container.
    * @default false
    */
-  fullWidth: PropTypes.bool,
+  fullWidth: _propTypes.default.bool,
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
    * @default 'medium'
    */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['small', 'medium', 'large']), _propTypes.default.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * The variant to use.
    * @default 'outlined'
    */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+  variant: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['contained', 'outlined', 'text']), _propTypes.default.string])
 } : void 0;
-export default ButtonGroup;
+var _default = exports.default = ButtonGroup;

package/ButtonGroup/ButtonGroupButtonContext.d.ts

@@ -3,4 +3,4 @@ import * as React from 'react';
  * @ignore - internal component.
  */
 declare const ButtonGroupButtonContext: React.Context<string | undefined>;
-export default ButtonGroupButtonContext;
+export default ButtonGroupButtonContext;

package/ButtonGroup/ButtonGroupButtonContext.js

@@ -1,6 +1,12 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
 /**
  * @ignore - internal component.
  */
@@ -8,4 +14,4 @@ const ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {
   ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
 }
-export default ButtonGroupButtonContext;
+var _default = exports.default = ButtonGroupButtonContext;

package/ButtonGroup/ButtonGroupContext.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import type { ButtonGroupProps } from './ButtonGroup';
+import type { ButtonGroupProps } from "./ButtonGroup.js";
 interface ButtonGroupContextType {
-    className?: string;
-    color?: ButtonGroupProps['color'];
-    disabled?: boolean;
-    disableElevation?: boolean;
-    disableFocusRipple?: boolean;
-    disableRipple?: boolean;
-    fullWidth?: boolean;
-    size?: ButtonGroupProps['size'];
-    variant?: ButtonGroupProps['variant'];
+  className?: string;
+  color?: ButtonGroupProps['color'];
+  disabled?: boolean;
+  disableElevation?: boolean;
+  disableFocusRipple?: boolean;
+  disableRipple?: boolean;
+  fullWidth?: boolean;
+  size?: ButtonGroupProps['size'];
+  variant?: ButtonGroupProps['variant'];
 }
 /**
  * @ignore - internal component.
  */
 declare const ButtonGroupContext: React.Context<ButtonGroupContextType>;
-export default ButtonGroupContext;
+export default ButtonGroupContext;

package/ButtonGroup/ButtonGroupContext.js

@@ -1,6 +1,12 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
 /**
  * @ignore - internal component.
  */
@@ -8,4 +14,4 @@ const ButtonGroupContext = /*#__PURE__*/React.createContext({});
 if (process.env.NODE_ENV !== 'production') {
   ButtonGroupContext.displayName = 'ButtonGroupContext';
 }
-export default ButtonGroupContext;
+var _default = exports.default = ButtonGroupContext;