@mui/x-date-pickers-pro 5.0.0 → 5.0.2

package/modern/DateRangePicker/DateRangePickerViewDesktop.js

@@ -1,21 +1,44 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "parsedValue", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText"];
+const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "parsedValue", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "className", "classes"];
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useDefaultDates, useUtils, useLocaleText, PickersArrowSwitcher, usePreviousMonthDisabled, useNextMonthDisabled, DayPicker, buildDeprecatedPropsWarning, DAY_MARGIN } from '@mui/x-date-pickers/internals';
 import { calculateRangePreview } from './date-range-manager';
 import { DateRangePickerDay } from '../DateRangePickerDay';
 import { isWithinRange, isStartOfRange, isEndOfRange } from '../internal/utils/date-utils';
 import { doNothing } from '../internal/utils/utils';
+import { getDateRangePickerViewDesktopUtilityClass } from './dateRangePickerViewDesktopClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DateRangePickerViewDesktopRoot = styled('div')({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    container: ['container']
+  };
+  return composeClasses(slots, getDateRangePickerViewDesktopUtilityClass, classes);
+};
+
+const DateRangePickerViewDesktopRoot = styled('div', {
+  name: 'MuiDateRangePickerViewDesktop',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
   display: 'flex',
   flexDirection: 'row'
 });
-const DateRangePickerViewDesktopContainer = styled('div')(({
+const DateRangePickerViewDesktopContainer = styled('div', {
+  name: 'MuiDateRangePickerViewDesktop',
+  slot: 'Container',
+  overridesResolver: (_, styles) => styles.container
+})(({
   theme
 }) => ({
   '&:not(:last-of-type)': {
@@ -57,7 +80,12 @@ const deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translatio
  * @ignore - internal component.
  */
 
-export function DateRangePickerViewDesktop(props) {
+export function DateRangePickerViewDesktop(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerViewDesktop'
+  });
+
   const {
     calendars,
     changeMonth,
@@ -73,7 +101,8 @@ export function DateRangePickerViewDesktop(props) {
     minDate: minDateProp,
     onSelectedDaysChange,
     renderDay = (_, dateRangeProps) => /*#__PURE__*/_jsx(DateRangePickerDay, _extends({}, dateRangeProps)),
-    rightArrowButtonText: rightArrowButtonTextProp
+    rightArrowButtonText: rightArrowButtonTextProp,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -85,6 +114,7 @@ export function DateRangePickerViewDesktop(props) {
   const leftArrowButtonText = leftArrowButtonTextProp ?? localeText.previousMonth;
   const rightArrowButtonText = rightArrowButtonTextProp ?? localeText.nextMonth;
   const utils = useUtils();
+  const classes = useUtilityClasses(props);
   const defaultDates = useDefaultDates();
   const minDate = minDateProp ?? defaultDates.minDate;
   const maxDate = maxDateProp ?? defaultDates.maxDate;
@@ -126,9 +156,11 @@ export function DateRangePickerViewDesktop(props) {
     changeMonth(utils.getPreviousMonth(currentMonth));
   }, [changeMonth, currentMonth, utils]);
   return /*#__PURE__*/_jsx(DateRangePickerViewDesktopRoot, {
+    className: clsx(className, classes.root),
     children: getCalendarsArray(calendars).map((_, index) => {
       const monthOnIteration = utils.setMonth(currentMonth, utils.getMonth(currentMonth) + index);
       return /*#__PURE__*/_jsxs(DateRangePickerViewDesktopContainer, {
+        className: classes.container,
         children: [/*#__PURE__*/_jsx(DateRangePickerViewDesktopArrowSwitcher, {
           onLeftClick: selectPreviousMonth,
           onRightClick: selectNextMonth,

package/modern/DateRangePicker/DateRangePickerViewMobile.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["changeMonth", "components", "componentsProps", "parsedValue", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "disabled", "readOnly"];
+const _excluded = ["changeMonth", "components", "componentsProps", "parsedValue", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "disabled", "readOnly", "classes"];
 import * as React from 'react';
 import { PickersCalendarHeader, useDefaultDates, useUtils, DayPicker } from '@mui/x-date-pickers/internals';
 import { doNothing } from '../internal/utils/utils';

package/modern/DateRangePicker/dateRangePickerInputClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateRangePickerInputUtilityClass(slot) {
+  return generateUtilityClass('MuiDateRangePickerInput', slot);
+}
+export const dateRangePickerInputClasses = generateUtilityClasses('MuiDateRangePickerInput', ['root']);

package/modern/DateRangePicker/dateRangePickerToolbarClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateRangePickerToolbarUtilityClass(slot) {
+  return generateUtilityClass('MuiDateRangePickerToolbar', slot);
+}
+export const dateRangePickerToolbarClasses = generateUtilityClasses('MuiDateRangePickerToolbar', ['root', 'container']);

package/modern/DateRangePicker/dateRangePickerViewDesktopClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateRangePickerViewDesktopUtilityClass(slot) {
+  return generateUtilityClass('MuiDateRangePickerViewDesktop', slot);
+}
+export const dateRangePickerViewDesktopClasses = generateUtilityClasses('MuiDateRangePickerViewDesktop', ['root', 'container']);

package/modern/DateRangePicker/index.js

@@ -1 +1,4 @@
-export { DateRangePicker } from './DateRangePicker';
+export { DateRangePicker } from './DateRangePicker';
+export { getDateRangePickerInputUtilityClass, dateRangePickerInputClasses } from './dateRangePickerInputClasses';
+export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
+export { getDateRangePickerViewDesktopUtilityClass, dateRangePickerViewDesktopClasses } from './dateRangePickerViewDesktopClasses';

package/modern/DateRangePickerDay/DateRangePickerDay.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useLicenseVerifier } from '@mui/x-license-pro';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { DAY_MARGIN, useUtils, areDayPropsEqual } from '@mui/x-date-pickers/internals';
 import { PickersDay } from '@mui/x-date-pickers/PickersDay';
@@ -47,7 +47,13 @@ const startBorderStyle = {
 const DateRangePickerDayRoot = styled('div', {
   name: 'MuiDateRangePickerDay',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => [{
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayHighlight}`]: styles.rangeIntervalDayHighlight
+  }, {
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayHighlightStart}`]: styles.rangeIntervalDayHighlightStart
+  }, {
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayHighlightEnd}`]: styles.rangeIntervalDayHighlightEnd
+  }, styles.root]
 })(({
   theme,
   ownerState
@@ -80,7 +86,14 @@ DateRangePickerDayRoot.propTypes = {
 };
 const DateRangePickerDayRangeIntervalPreview = styled('div', {
   name: 'MuiDateRangePickerDay',
-  slot: 'RangeIntervalPreview'
+  slot: 'RangeIntervalPreview',
+  overridesResolver: (_, styles) => [{
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: styles.rangeIntervalDayPreview
+  }, {
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayPreviewStart}`]: styles.rangeIntervalDayPreviewStart
+  }, {
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayPreviewEnd}`]: styles.rangeIntervalDayPreviewEnd
+  }, styles.rangeIntervalPreview]
 })(({
   theme,
   ownerState
@@ -106,7 +119,14 @@ DateRangePickerDayRangeIntervalPreview.propTypes = {
 };
 const DateRangePickerDayDay = styled(PickersDay, {
   name: 'MuiDateRangePickerDay',
-  slot: 'Day'
+  slot: 'Day',
+  overridesResolver: (_, styles) => [{
+    [`&.${dateRangePickerDayClasses.dayInsideRangeInterval}`]: styles.dayInsideRangeInterval
+  }, {
+    [`&.${dateRangePickerDayClasses.dayOutsideRangeInterval}`]: styles.dayOutsideRangeInterval
+  }, {
+    [`&.${dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
+  }, styles.day]
 })(({
   theme,
   ownerState
@@ -125,7 +145,12 @@ const DateRangePickerDayDay = styled(PickersDay, {
 }, !ownerState.selected && ownerState.isHighlighting && {
   color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6))
 }));
-const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(props, ref) {
+const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerDay'
+  });
+
   const {
     className,
     day,

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["displayStaticWrapperAs", "value", "onChange", "components", "componentsProps"];
+const _excluded = ["displayStaticWrapperAs", "value", "onChange", "components", "componentsProps", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier } from '@mui/x-license-pro';
@@ -36,7 +36,8 @@ export const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function Stat
   const {
     displayStaticWrapperAs = 'mobile',
     components,
-    componentsProps
+    componentsProps,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -52,7 +53,8 @@ export const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function Stat
   return /*#__PURE__*/_jsx(PickerStaticWrapper, _extends({
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
-    componentsProps: componentsProps
+    componentsProps: componentsProps,
+    className: className
   }, wrapperProps, {
     children: /*#__PURE__*/_jsx(DateRangePickerView, _extends({
       open: wrapperProps.open,

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0
+/** @license MUI v5.0.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY2MjA2NjAwMDAwMA==";
+  const releaseInfo = "MTY2MzI5NzIwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/DateRangePicker/DateRangePickerInput.js

@@ -13,19 +13,39 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _styles = require("@mui/material/styles");
 
+var _material = require("@mui/material");
+
 var _internals = require("@mui/x-date-pickers/internals");
 
+var _dateRangePickerInputClasses = require("./dateRangePickerInputClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "endText", "onBlur", "onChange", "open", "openPicker", "rawValue", "rawValue", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "startText", "TextFieldProps", "validationError"];
+const _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "endText", "onBlur", "onChange", "open", "openPicker", "rawValue", "rawValue", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "startText", "TextFieldProps", "validationError", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const DateRangePickerInputRoot = (0, _styles.styled)('div')(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _dateRangePickerInputClasses.getDateRangePickerInputUtilityClass, classes);
+};
+
+const DateRangePickerInputRoot = (0, _styles.styled)('div', {
+  name: 'MuiDateRangePickerInput',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   theme
 }) => ({
   display: 'flex',
@@ -39,7 +59,11 @@ const DateRangePickerInputRoot = (0, _styles.styled)('div')(({
 /**
  * @ignore - internal component.
  */
-const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePickerInput(props, ref) {
+const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePickerInput(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDateRangePickerInput'
+  });
   const {
     currentlySelectingRangeEnd,
     disableOpenPicker,
@@ -54,12 +78,14 @@ const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePic
     setCurrentlySelectingRangeEnd,
     startText,
     TextFieldProps,
-    validationError: [startValidationError, endValidationError]
+    validationError: [startValidationError, endValidationError],
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _internals.useUtils)();
   const startRef = React.useRef(null);
   const endRef = React.useRef(null);
+  const classes = useUtilityClasses(props);
   React.useEffect(() => {
     if (!open) {
       return;
@@ -154,6 +180,7 @@ const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePic
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerInputRoot, {
     onBlur: onBlur,
     ref: ref,
+    className: (0, _clsx.default)(classes.root, className),
     children: renderInput(startInputProps, endInputProps)
   });
 });

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dateRangePickerToolbarClasses = exports.DateRangePickerToolbar = void 0;
+exports.DateRangePickerToolbar = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -17,33 +17,52 @@ var _material = require("@mui/material");
 
 var _internals = require("@mui/x-date-pickers/internals");
 
+var _dateRangePickerToolbarClasses = require("./dateRangePickerToolbarClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const dateRangePickerToolbarClasses = (0, _material.generateUtilityClasses)('MuiDateRangePickerToolbar', ['root']);
-exports.dateRangePickerToolbarClasses = dateRangePickerToolbarClasses;
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    container: ['container']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _dateRangePickerToolbarClasses.getDateRangePickerToolbarUtilityClass, classes);
+};
+
 const DateRangePickerToolbarRoot = (0, _styles.styled)(_internals.PickersToolbar, {
   name: 'MuiDateRangePickerToolbar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => styles.root
 })({
   [`& .${_internals.pickersToolbarClasses.penIconButton}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DateRangePickerToolbarContainer = (0, _styles.styled)('div')({
+const DateRangePickerToolbarContainer = (0, _styles.styled)('div', {
+  name: 'MuiDateRangePickerToolbar',
+  slot: 'Container',
+  overridesResolver: (_, styles) => styles.container
+})({
   display: 'flex'
 });
 /**
  * @ignore - internal component.
  */
 
-const DateRangePickerToolbar = props => {
+const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangePickerToolbar(inProps, ref) {
   const utils = (0, _internals.useUtils)();
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDateRangePickerToolbar'
+  });
   const {
     currentlySelectingRangeEnd,
     parsedValue: [start, end],
@@ -60,14 +79,17 @@ const DateRangePickerToolbar = props => {
   const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : startText;
   const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : endText;
   const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerToolbarRoot, {
     toolbarTitle: toolbarTitle,
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: false,
-    className: dateRangePickerToolbarClasses.root,
+    className: classes.root,
     ownerState: ownerState,
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangePickerToolbarContainer, {
+      className: classes.container,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersToolbarButton, {
         variant: start !== null ? 'h5' : 'h6',
         value: startDateValue,
@@ -84,6 +106,5 @@ const DateRangePickerToolbar = props => {
       })]
     })
   });
-};
-
+});
 exports.DateRangePickerToolbar = DateRangePickerToolbar;

package/node/DateRangePicker/DateRangePickerViewDesktop.js

@@ -13,8 +13,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _styles = require("@mui/material/styles");
 
+var _material = require("@mui/material");
+
 var _internals = require("@mui/x-date-pickers/internals");
 
 var _dateRangeManager = require("./date-range-manager");
@@ -25,19 +29,40 @@ var _dateUtils = require("../internal/utils/date-utils");
 
 var _utils = require("../internal/utils/utils");
 
+var _dateRangePickerViewDesktopClasses = require("./dateRangePickerViewDesktopClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "parsedValue", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText"];
+const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "parsedValue", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "className", "classes"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const DateRangePickerViewDesktopRoot = (0, _styles.styled)('div')({
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    container: ['container']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _dateRangePickerViewDesktopClasses.getDateRangePickerViewDesktopUtilityClass, classes);
+};
+
+const DateRangePickerViewDesktopRoot = (0, _styles.styled)('div', {
+  name: 'MuiDateRangePickerViewDesktop',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
   display: 'flex',
   flexDirection: 'row'
 });
-const DateRangePickerViewDesktopContainer = (0, _styles.styled)('div')(({
+const DateRangePickerViewDesktopContainer = (0, _styles.styled)('div', {
+  name: 'MuiDateRangePickerViewDesktop',
+  slot: 'Container',
+  overridesResolver: (_, styles) => styles.container
+})(({
   theme
 }) => ({
   '&:not(:last-of-type)': {
@@ -79,7 +104,11 @@ const deprecatedPropsWarning = (0, _internals.buildDeprecatedPropsWarning)('Prop
  * @ignore - internal component.
  */
 
-function DateRangePickerViewDesktop(props) {
+function DateRangePickerViewDesktop(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDateRangePickerViewDesktop'
+  });
   const {
     calendars,
     changeMonth,
@@ -95,7 +124,8 @@ function DateRangePickerViewDesktop(props) {
     minDate: minDateProp,
     onSelectedDaysChange,
     renderDay = (_, dateRangeProps) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateRangePickerDay.DateRangePickerDay, (0, _extends2.default)({}, dateRangeProps)),
-    rightArrowButtonText: rightArrowButtonTextProp
+    rightArrowButtonText: rightArrowButtonTextProp,
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   deprecatedPropsWarning({
@@ -106,6 +136,7 @@ function DateRangePickerViewDesktop(props) {
   const leftArrowButtonText = leftArrowButtonTextProp != null ? leftArrowButtonTextProp : localeText.previousMonth;
   const rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
   const utils = (0, _internals.useUtils)();
+  const classes = useUtilityClasses(props);
   const defaultDates = (0, _internals.useDefaultDates)();
   const minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
   const maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate;
@@ -147,9 +178,11 @@ function DateRangePickerViewDesktop(props) {
     changeMonth(utils.getPreviousMonth(currentMonth));
   }, [changeMonth, currentMonth, utils]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerViewDesktopRoot, {
+    className: (0, _clsx.default)(className, classes.root),
     children: getCalendarsArray(calendars).map((_, index) => {
       const monthOnIteration = utils.setMonth(currentMonth, utils.getMonth(currentMonth) + index);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangePickerViewDesktopContainer, {
+        className: classes.container,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerViewDesktopArrowSwitcher, {
           onLeftClick: selectPreviousMonth,
           onRightClick: selectNextMonth,

package/node/DateRangePicker/DateRangePickerViewMobile.js

@@ -23,7 +23,7 @@ var _dateUtils = require("../internal/utils/date-utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["changeMonth", "components", "componentsProps", "parsedValue", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "disabled", "readOnly"];
+const _excluded = ["changeMonth", "components", "componentsProps", "parsedValue", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "disabled", "readOnly", "classes"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/node/DateRangePicker/dateRangePickerInputClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateRangePickerInputClasses = void 0;
+exports.getDateRangePickerInputUtilityClass = getDateRangePickerInputUtilityClass;
+
+var _material = require("@mui/material");
+
+function getDateRangePickerInputUtilityClass(slot) {
+  return (0, _material.generateUtilityClass)('MuiDateRangePickerInput', slot);
+}
+
+const dateRangePickerInputClasses = (0, _material.generateUtilityClasses)('MuiDateRangePickerInput', ['root']);
+exports.dateRangePickerInputClasses = dateRangePickerInputClasses;

package/node/DateRangePicker/dateRangePickerToolbarClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateRangePickerToolbarClasses = void 0;
+exports.getDateRangePickerToolbarUtilityClass = getDateRangePickerToolbarUtilityClass;
+
+var _material = require("@mui/material");
+
+function getDateRangePickerToolbarUtilityClass(slot) {
+  return (0, _material.generateUtilityClass)('MuiDateRangePickerToolbar', slot);
+}
+
+const dateRangePickerToolbarClasses = (0, _material.generateUtilityClasses)('MuiDateRangePickerToolbar', ['root', 'container']);
+exports.dateRangePickerToolbarClasses = dateRangePickerToolbarClasses;

package/node/DateRangePicker/dateRangePickerViewDesktopClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateRangePickerViewDesktopClasses = void 0;
+exports.getDateRangePickerViewDesktopUtilityClass = getDateRangePickerViewDesktopUtilityClass;
+
+var _material = require("@mui/material");
+
+function getDateRangePickerViewDesktopUtilityClass(slot) {
+  return (0, _material.generateUtilityClass)('MuiDateRangePickerViewDesktop', slot);
+}
+
+const dateRangePickerViewDesktopClasses = (0, _material.generateUtilityClasses)('MuiDateRangePickerViewDesktop', ['root', 'container']);
+exports.dateRangePickerViewDesktopClasses = dateRangePickerViewDesktopClasses;

package/node/DateRangePicker/index.js

@@ -9,5 +9,47 @@ Object.defineProperty(exports, "DateRangePicker", {
     return _DateRangePicker.DateRangePicker;
   }
 });
+Object.defineProperty(exports, "dateRangePickerInputClasses", {
+  enumerable: true,
+  get: function () {
+    return _dateRangePickerInputClasses.dateRangePickerInputClasses;
+  }
+});
+Object.defineProperty(exports, "dateRangePickerToolbarClasses", {
+  enumerable: true,
+  get: function () {
+    return _dateRangePickerToolbarClasses.dateRangePickerToolbarClasses;
+  }
+});
+Object.defineProperty(exports, "dateRangePickerViewDesktopClasses", {
+  enumerable: true,
+  get: function () {
+    return _dateRangePickerViewDesktopClasses.dateRangePickerViewDesktopClasses;
+  }
+});
+Object.defineProperty(exports, "getDateRangePickerInputUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _dateRangePickerInputClasses.getDateRangePickerInputUtilityClass;
+  }
+});
+Object.defineProperty(exports, "getDateRangePickerToolbarUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _dateRangePickerToolbarClasses.getDateRangePickerToolbarUtilityClass;
+  }
+});
+Object.defineProperty(exports, "getDateRangePickerViewDesktopUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _dateRangePickerViewDesktopClasses.getDateRangePickerViewDesktopUtilityClass;
+  }
+});
+
+var _DateRangePicker = require("./DateRangePicker");
+
+var _dateRangePickerInputClasses = require("./dateRangePickerInputClasses");
+
+var _dateRangePickerToolbarClasses = require("./dateRangePickerToolbarClasses");
 
-var _DateRangePicker = require("./DateRangePicker");
+var _dateRangePickerViewDesktopClasses = require("./dateRangePickerViewDesktopClasses");