@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.10

package/legacy/ButtonBase/TouchRipple.js

@@ -1,268 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { TransitionGroup } from 'react-transition-group';
-import clsx from 'clsx';
-import { keyframes } from '@mui/system';
-import useTimeout from '@mui/utils/useTimeout';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
-import Ripple from './Ripple';
-import touchRippleClasses from './touchRippleClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-var DURATION = 550;
-export var DELAY_RIPPLE = 80;
-var enterKeyframe = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 0.3;\n  }\n"])));
-var exitKeyframe = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
-var pulsateKeyframe = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.92);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n"])));
-export var TouchRippleRoot = styled('span', {
-  name: 'MuiTouchRipple',
-  slot: 'Root'
-})({
-  overflow: 'hidden',
-  pointerEvents: 'none',
-  position: 'absolute',
-  zIndex: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  borderRadius: 'inherit'
-});
-
-// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
-// in string templates. Do not convert these styles in JS object as it will break.
-export var TouchRippleRipple = styled(Ripple, {
-  name: 'MuiTouchRipple',
-  slot: 'Ripple'
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  opacity: 0;\n  position: absolute;\n\n  &.", " {\n    opacity: 0.3;\n    transform: scale(1);\n    animation-name: ", ";\n    animation-duration: ", "ms;\n    animation-timing-function: ", ";\n  }\n\n  &.", " {\n    animation-duration: ", "ms;\n  }\n\n  & .", " {\n    opacity: 1;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background-color: currentColor;\n  }\n\n  & .", " {\n    opacity: 0;\n    animation-name: ", ";\n    animation-duration: ", "ms;\n    animation-timing-function: ", ";\n  }\n\n  & .", " {\n    position: absolute;\n    /* @noflip */\n    left: 0px;\n    top: 0;\n    animation-name: ", ";\n    animation-duration: 2500ms;\n    animation-timing-function: ", ";\n    animation-iteration-count: infinite;\n    animation-delay: 200ms;\n  }\n"])), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, function (_ref) {
-  var theme = _ref.theme;
-  return theme.transitions.easing.easeInOut;
-}, touchRippleClasses.ripplePulsate, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.transitions.duration.shorter;
-}, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.transitions.easing.easeInOut;
-}, touchRippleClasses.childPulsate, pulsateKeyframe, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.transitions.easing.easeInOut;
-});
-
-/**
- * @ignore - internal component.
- *
- * TODO v5: Make private
- */
-var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiTouchRipple'
-  });
-  var _props$center = props.center,
-    centerProp = _props$center === void 0 ? false : _props$center,
-    _props$classes = props.classes,
-    classes = _props$classes === void 0 ? {} : _props$classes,
-    className = props.className,
-    other = _objectWithoutProperties(props, ["center", "classes", "className"]);
-  var _React$useState = React.useState([]),
-    ripples = _React$useState[0],
-    setRipples = _React$useState[1];
-  var nextKey = React.useRef(0);
-  var rippleCallback = React.useRef(null);
-  React.useEffect(function () {
-    if (rippleCallback.current) {
-      rippleCallback.current();
-      rippleCallback.current = null;
-    }
-  }, [ripples]);
-
-  // Used to filter out mouse emulated events on mobile.
-  var ignoringMouseDown = React.useRef(false);
-  // We use a timer in order to only show the ripples for touch "click" like events.
-  // We don't want to display the ripple for touch scroll events.
-  var startTimer = useTimeout();
-
-  // This is the hook called once the previous timeout is ready.
-  var startTimerCommit = React.useRef(null);
-  var container = React.useRef(null);
-  var startCommit = React.useCallback(function (params) {
-    var pulsate = params.pulsate,
-      rippleX = params.rippleX,
-      rippleY = params.rippleY,
-      rippleSize = params.rippleSize,
-      cb = params.cb;
-    setRipples(function (oldRipples) {
-      return [].concat(_toConsumableArray(oldRipples), [/*#__PURE__*/_jsx(TouchRippleRipple, {
-        classes: {
-          ripple: clsx(classes.ripple, touchRippleClasses.ripple),
-          rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),
-          ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),
-          child: clsx(classes.child, touchRippleClasses.child),
-          childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),
-          childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)
-        },
-        timeout: DURATION,
-        pulsate: pulsate,
-        rippleX: rippleX,
-        rippleY: rippleY,
-        rippleSize: rippleSize
-      }, nextKey.current)]);
-    });
-    nextKey.current += 1;
-    rippleCallback.current = cb;
-  }, [classes]);
-  var start = React.useCallback(function () {
-    var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
-    var _options$pulsate = options.pulsate,
-      pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
-      _options$center = options.center,
-      center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,
-      _options$fakeElement = options.fakeElement,
-      fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;
-    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
-      ignoringMouseDown.current = false;
-      return;
-    }
-    if ((event == null ? void 0 : event.type) === 'touchstart') {
-      ignoringMouseDown.current = true;
-    }
-    var element = fakeElement ? null : container.current;
-    var rect = element ? element.getBoundingClientRect() : {
-      width: 0,
-      height: 0,
-      left: 0,
-      top: 0
-    };
-
-    // Get the size of the ripple
-    var rippleX;
-    var rippleY;
-    var rippleSize;
-    if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
-      rippleX = Math.round(rect.width / 2);
-      rippleY = Math.round(rect.height / 2);
-    } else {
-      var _ref5 = event.touches && event.touches.length > 0 ? event.touches[0] : event,
-        clientX = _ref5.clientX,
-        clientY = _ref5.clientY;
-      rippleX = Math.round(clientX - rect.left);
-      rippleY = Math.round(clientY - rect.top);
-    }
-    if (center) {
-      rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3);
-
-      // For some reason the animation is broken on Mobile Chrome if the size is even.
-      if (rippleSize % 2 === 0) {
-        rippleSize += 1;
-      }
-    } else {
-      var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
-      var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
-      rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
-    }
-
-    // Touche devices
-    if (event != null && event.touches) {
-      // check that this isn't another touchstart due to multitouch
-      // otherwise we will only clear a single timer when unmounting while two
-      // are running
-      if (startTimerCommit.current === null) {
-        // Prepare the ripple effect.
-        startTimerCommit.current = function () {
-          startCommit({
-            pulsate: pulsate,
-            rippleX: rippleX,
-            rippleY: rippleY,
-            rippleSize: rippleSize,
-            cb: cb
-          });
-        };
-        // Delay the execution of the ripple effect.
-        // We have to make a tradeoff with this delay value.
-        startTimer.start(DELAY_RIPPLE, function () {
-          if (startTimerCommit.current) {
-            startTimerCommit.current();
-            startTimerCommit.current = null;
-          }
-        });
-      }
-    } else {
-      startCommit({
-        pulsate: pulsate,
-        rippleX: rippleX,
-        rippleY: rippleY,
-        rippleSize: rippleSize,
-        cb: cb
-      });
-    }
-  }, [centerProp, startCommit, startTimer]);
-  var pulsate = React.useCallback(function () {
-    start({}, {
-      pulsate: true
-    });
-  }, [start]);
-  var stop = React.useCallback(function (event, cb) {
-    startTimer.clear();
-
-    // The touch interaction occurs too quickly.
-    // We still want to show ripple effect.
-    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
-      startTimerCommit.current();
-      startTimerCommit.current = null;
-      startTimer.start(0, function () {
-        stop(event, cb);
-      });
-      return;
-    }
-    startTimerCommit.current = null;
-    setRipples(function (oldRipples) {
-      if (oldRipples.length > 0) {
-        return oldRipples.slice(1);
-      }
-      return oldRipples;
-    });
-    rippleCallback.current = cb;
-  }, [startTimer]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      pulsate: pulsate,
-      start: start,
-      stop: stop
-    };
-  }, [pulsate, start, stop]);
-  return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({
-    className: clsx(touchRippleClasses.root, classes.root, className),
-    ref: container
-  }, other, {
-    children: /*#__PURE__*/_jsx(TransitionGroup, {
-      component: null,
-      exit: true,
-      children: ripples
-    })
-  }));
-});
-process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
-  /**
-   * If `true`, the ripple starts at the center of the component
-   * rather than at the point of interaction.
-   */
-  center: PropTypes.bool,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string
-} : void 0;
-export default TouchRipple;

package/legacy/ButtonBase/buttonBaseClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getButtonBaseUtilityClass(slot) {
-  return generateUtilityClass('MuiButtonBase', slot);
-}
-var buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
-export default buttonBaseClasses;

package/legacy/ButtonBase/index.js

@@ -1,7 +0,0 @@
-'use client';
-
-export { default } from './ButtonBase';
-export { default as buttonBaseClasses } from './buttonBaseClasses';
-export * from './buttonBaseClasses';
-export { default as touchRippleClasses } from './touchRippleClasses';
-export * from './touchRippleClasses';

package/legacy/ButtonBase/touchRippleClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getTouchRippleUtilityClass(slot) {
-  return generateUtilityClass('MuiTouchRipple', slot);
-}
-var touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
-export default touchRippleClasses;

package/legacy/ButtonGroup/ButtonGroup.js

@@ -1,276 +0,0 @@
-'use client';
-
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
-import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
-import ButtonGroupContext from './ButtonGroupContext';
-import ButtonGroupButtonContext from './ButtonGroupButtonContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-var overridesResolver = function overridesResolver(props, styles) {
-  var ownerState = props.ownerState;
-  return [_defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles.grouped), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant)).concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant)).concat(capitalize(ownerState.color))]), _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton), styles.firstButton), _defineProperty({}, "& .".concat(buttonGroupClasses.lastButton), styles.lastButton), _defineProperty({}, "& .".concat(buttonGroupClasses.middleButton), styles.middleButton), styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
-};
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    color = ownerState.color,
-    disabled = ownerState.disabled,
-    disableElevation = ownerState.disableElevation,
-    fullWidth = ownerState.fullWidth,
-    orientation = ownerState.orientation,
-    variant = ownerState.variant;
-  var slots = {
-    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', "color".concat(capitalize(color))],
-    grouped: ['grouped', "grouped".concat(capitalize(orientation)), "grouped".concat(capitalize(variant)), "grouped".concat(capitalize(variant)).concat(capitalize(orientation)), "grouped".concat(capitalize(variant)).concat(capitalize(color)), disabled && 'disabled'],
-    firstButton: ['firstButton'],
-    lastButton: ['lastButton'],
-    middleButton: ['middleButton']
-  };
-  return composeClasses(slots, getButtonGroupUtilityClass, classes);
-};
-var ButtonGroupRoot = styled('div', {
-  name: 'MuiButtonGroup',
-  slot: 'Root',
-  overridesResolver: overridesResolver
-})(function (_ref9) {
-  var theme = _ref9.theme,
-    ownerState = _ref9.ownerState;
-  return _extends({
-    display: 'inline-flex',
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.variant === 'contained' && {
-    boxShadow: (theme.vars || theme).shadows[2]
-  }, ownerState.disableElevation && {
-    boxShadow: 'none'
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }, ownerState.orientation === 'vertical' && {
-    flexDirection: 'column'
-  }, _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.grouped), _extends({
-    minWidth: 40,
-    '&:hover': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: 'none'
-    })
-  }, ownerState.variant === 'contained' && {
-    boxShadow: 'none'
-  })), "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _extends({}, ownerState.orientation === 'horizontal' && {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && _defineProperty({
-    borderRight: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'text' && ownerState.orientation === 'vertical' && _defineProperty({
-    borderBottom: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    borderRightColor: 'transparent'
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    borderBottomColor: 'transparent'
-  }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && _defineProperty({
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.grey[400])
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && _defineProperty({
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.grey[400])
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    borderColor: (theme.vars || theme).palette[ownerState.color].dark
-  }, {
-    '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'currentColor'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'currentColor'
-    })
-  })), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), _extends({}, ownerState.orientation === 'horizontal' && {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    marginLeft: -1
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    marginTop: -1
-  })));
-});
-var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiButtonGroup'
-  });
-  var children = props.children,
-    className = props.className,
-    _props$color = props.color,
-    color = _props$color === void 0 ? 'primary' : _props$color,
-    _props$component = props.component,
-    component = _props$component === void 0 ? 'div' : _props$component,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$disableElevati = props.disableElevation,
-    disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,
-    _props$disableFocusRi = props.disableFocusRipple,
-    disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
-    _props$disableRipple = props.disableRipple,
-    disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,
-    _props$fullWidth = props.fullWidth,
-    fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
-    _props$orientation = props.orientation,
-    orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'outlined' : _props$variant,
-    other = _objectWithoutProperties(props, ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"]);
-  var ownerState = _extends({}, props, {
-    color: color,
-    component: component,
-    disabled: disabled,
-    disableElevation: disableElevation,
-    disableFocusRipple: disableFocusRipple,
-    disableRipple: disableRipple,
-    fullWidth: fullWidth,
-    orientation: orientation,
-    size: size,
-    variant: variant
-  });
-  var classes = useUtilityClasses(ownerState);
-  var context = React.useMemo(function () {
-    return {
-      className: classes.grouped,
-      color: color,
-      disabled: disabled,
-      disableElevation: disableElevation,
-      disableFocusRipple: disableFocusRipple,
-      disableRipple: disableRipple,
-      fullWidth: fullWidth,
-      size: size,
-      variant: variant
-    };
-  }, [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
-  var validChildren = getValidReactChildren(children);
-  var childrenCount = validChildren.length;
-  var getButtonPositionClassName = function getButtonPositionClassName(index) {
-    var isFirstButton = index === 0;
-    var isLastButton = index === childrenCount - 1;
-    if (isFirstButton && isLastButton) {
-      return '';
-    }
-    if (isFirstButton) {
-      return classes.firstButton;
-    }
-    if (isLastButton) {
-      return classes.lastButton;
-    }
-    return classes.middleButton;
-  };
-  return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
-    as: component,
-    role: "group",
-    className: clsx(classes.root, className),
-    ref: ref,
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
-      value: context,
-      children: validChildren.map(function (child, index) {
-        return /*#__PURE__*/_jsx(ButtonGroupButtonContext.Provider, {
-          value: getButtonPositionClassName(index),
-          children: child
-        }, index);
-      })
-    })
-  }));
-});
-process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.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]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, no elevation is used.
-   * @default false
-   */
-  disableElevation: PropTypes.bool,
-  /**
-   * If `true`, the button keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the button ripple effect is disabled.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * If `true`, the buttons will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * The component orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation: PropTypes.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]),
-  /**
-   * 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]),
-  /**
-   * The variant to use.
-   * @default 'outlined'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
-} : void 0;
-export default ButtonGroup;

package/legacy/ButtonGroup/ButtonGroupButtonContext.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-var ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
-}
-export default ButtonGroupButtonContext;

package/legacy/ButtonGroup/ButtonGroupContext.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-var ButtonGroupContext = /*#__PURE__*/React.createContext({});
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupContext.displayName = 'ButtonGroupContext';
-}
-export default ButtonGroupContext;

package/legacy/ButtonGroup/buttonGroupClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getButtonGroupUtilityClass(slot) {
-  return generateUtilityClass('MuiButtonGroup', slot);
-}
-var buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'horizontal', 'vertical', 'colorPrimary', 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
-export default buttonGroupClasses;

package/legacy/ButtonGroup/index.js

@@ -1,7 +0,0 @@
-'use client';
-
-export { default } from './ButtonGroup';
-export { default as buttonGroupClasses } from './buttonGroupClasses';
-export * from './buttonGroupClasses';
-export { default as ButtonGroupContext } from './ButtonGroupContext';
-export { default as ButtonGroupButtonContext } from './ButtonGroupButtonContext';