@sitecore/sc-contenthub-blok 1.0.28 → 2.0.1

package/node_modules/@mui/material/MenuList/MenuList.mjs

@@ -185,7 +185,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       return focusInitialTarget(true);
     }
   }), [focusInitialTarget]);
-  const rovingContainerProps = getContainerProps();
+  const rovingContainerProps = getContainerProps(undefined, other.onFocus);
   const handleRef = useForkRef(listRef, rovingContainerProps.ref, ref);
   const menuListContextValue = React.useMemo(() => ({
     itemsFocusableWhenDisabled: disabledItemsFocusable,
@@ -235,9 +235,9 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     ref: handleRef,
     className: className,
     onKeyDown: handleKeyDown,
-    onFocus: rovingContainerProps.onFocus,
     tabIndex: -1,
     ...other,
+    onFocus: rovingContainerProps.onFocus,
     children: /*#__PURE__*/_jsx(MenuListContext.Provider, {
       value: menuListContextValue,
       children: /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
@@ -281,6 +281,10 @@ process.env.NODE_ENV !== "production" ? MenuList.propTypes /* remove-proptypes *
    * @default false
    */
   disableListWrap: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
   /**
    * @ignore
    */

package/node_modules/@mui/material/MobileStepper/MobileStepper.js

@@ -21,6 +21,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _mobileStepperClasses = require("./mobileStepperClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -112,7 +113,7 @@ const MobileStepperDot = (0, _zeroStyled.styled)('div', {
       variant: 'dots'
     },
     style: {
-      transition: theme.transitions.create('background-color', {
+      ...(0, _utils.getTransitionStyles)(theme, 'background-color', {
         duration: theme.transitions.duration.shortest
       }),
       backgroundColor: (theme.vars || theme).palette.action.disabled,

package/node_modules/@mui/material/MobileStepper/MobileStepper.mjs

@@ -14,6 +14,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.mjs";
 import { getMobileStepperUtilityClass } from "./mobileStepperClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -105,7 +106,7 @@ const MobileStepperDot = styled('div', {
       variant: 'dots'
     },
     style: {
-      transition: theme.transitions.create('background-color', {
+      ...getTransitionStyles(theme, 'background-color', {
         duration: theme.transitions.duration.shortest
       }),
       backgroundColor: (theme.vars || theme).palette.action.disabled,

package/node_modules/@mui/material/Modal/Modal.js

@@ -127,6 +127,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     getBackdropProps,
     getTransitionProps,
     portalRef,
+    portalContainer,
     isTopModal,
     exited,
     hasTransition
@@ -191,7 +192,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
     ref: portalRef,
-    container: container,
+    container: portalContainer,
     disablePortal: disablePortal,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
       ...rootProps,

package/node_modules/@mui/material/Modal/Modal.mjs

@@ -120,6 +120,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     getBackdropProps,
     getTransitionProps,
     portalRef,
+    portalContainer,
     isTopModal,
     exited,
     hasTransition
@@ -184,7 +185,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   }
   return /*#__PURE__*/_jsx(Portal, {
     ref: portalRef,
-    container: container,
+    container: portalContainer,
     disablePortal: disablePortal,
     children: /*#__PURE__*/_jsxs(RootSlot, {
       ...rootProps,

package/node_modules/@mui/material/Modal/ModalManager.js

@@ -12,7 +12,7 @@ var _getScrollbarSize = _interopRequireDefault(require("@mui/utils/getScrollbarS
 // Is a vertical scrollbar displayed?
 function isOverflowing(container) {
   const doc = (0, _ownerDocument.default)(container);
-  if (doc.body === container) {
+  if (container === doc.body || container === doc.documentElement) {
     return (0, _ownerWindow.default)(container).innerWidth > doc.documentElement.clientWidth;
   }
   return container.scrollHeight > container.clientHeight;
@@ -46,31 +46,30 @@ function ariaHiddenSiblings(container, mountElement, currentElement, elementsToE
     }
   });
 }
-function findIndexOf(items, callback) {
-  let idx = -1;
-  items.some((item, index) => {
-    if (callback(item)) {
-      idx = index;
-      return true;
-    }
-    return false;
-  });
-  return idx;
-}
 function handleContainer(containerInfo, props) {
   const restoreStyle = [];
   const container = containerInfo.container;
   if (!props.disableScrollLock) {
-    if (isOverflowing(container)) {
+    let scrollContainer;
+    if (container.parentNode instanceof DocumentFragment) {
+      scrollContainer = (0, _ownerDocument.default)(container).body;
+    } else {
+      // Support html overflow-y: auto for scroll stability between pages
+      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      const parent = container.parentElement;
+      const containerWindow = (0, _ownerWindow.default)(container);
+      scrollContainer = parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+    }
+    if (isOverflowing(scrollContainer)) {
       // Compute the size before applying overflow hidden to avoid any scroll jumps.
-      const scrollbarSize = (0, _getScrollbarSize.default)((0, _ownerWindow.default)(container));
+      const scrollbarSize = (0, _getScrollbarSize.default)((0, _ownerWindow.default)(scrollContainer));
       restoreStyle.push({
-        value: container.style.paddingRight,
+        value: scrollContainer.style.paddingRight,
         property: 'padding-right',
-        el: container
+        el: scrollContainer
       });
       // Use computed style, here to get the real padding to add our scrollbar width.
-      container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
+      scrollContainer.style.paddingRight = `${getPaddingRight(scrollContainer) + scrollbarSize}px`;
 
       // .mui-fixed is a global helper.
       const fixedElements = (0, _ownerDocument.default)(container).querySelectorAll('.mui-fixed');
@@ -83,16 +82,6 @@ function handleContainer(containerInfo, props) {
         element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`;
       });
     }
-    let scrollContainer;
-    if (container.parentNode instanceof DocumentFragment) {
-      scrollContainer = (0, _ownerDocument.default)(container).body;
-    } else {
-      // Support html overflow-y: auto for scroll stability between pages
-      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
-      const parent = container.parentElement;
-      const containerWindow = (0, _ownerWindow.default)(container);
-      scrollContainer = parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
-    }
 
     // Block the scroll even if no scrollbar is visible to account for mobile keyboard
     // screensize shrink.
@@ -161,7 +150,7 @@ class ModalManager {
     }
     const hiddenSiblings = getHiddenSiblings(container);
     ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true);
-    const containerIndex = findIndexOf(this.containers, item => item.container === container);
+    const containerIndex = this.containers.findIndex(item => item.container === container);
     if (containerIndex !== -1) {
       this.containers[containerIndex].modals.push(modal);
       return modalIndex;
@@ -175,7 +164,7 @@ class ModalManager {
     return modalIndex;
   }
   mount(modal, props) {
-    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
+    const containerIndex = this.containers.findIndex(item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     if (!containerInfo.restore) {
       containerInfo.restore = handleContainer(containerInfo, props);
@@ -186,7 +175,7 @@ class ModalManager {
     if (modalIndex === -1) {
       return modalIndex;
     }
-    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
+    const containerIndex = this.containers.findIndex(item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
     this.modals.splice(modalIndex, 1);

package/node_modules/@mui/material/Modal/ModalManager.mjs

@@ -4,7 +4,7 @@ import getScrollbarSize from '@mui/utils/getScrollbarSize';
 // Is a vertical scrollbar displayed?
 function isOverflowing(container) {
   const doc = ownerDocument(container);
-  if (doc.body === container) {
+  if (container === doc.body || container === doc.documentElement) {
     return ownerWindow(container).innerWidth > doc.documentElement.clientWidth;
   }
   return container.scrollHeight > container.clientHeight;
@@ -38,31 +38,30 @@ function ariaHiddenSiblings(container, mountElement, currentElement, elementsToE
     }
   });
 }
-function findIndexOf(items, callback) {
-  let idx = -1;
-  items.some((item, index) => {
-    if (callback(item)) {
-      idx = index;
-      return true;
-    }
-    return false;
-  });
-  return idx;
-}
 function handleContainer(containerInfo, props) {
   const restoreStyle = [];
   const container = containerInfo.container;
   if (!props.disableScrollLock) {
-    if (isOverflowing(container)) {
+    let scrollContainer;
+    if (container.parentNode instanceof DocumentFragment) {
+      scrollContainer = ownerDocument(container).body;
+    } else {
+      // Support html overflow-y: auto for scroll stability between pages
+      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      const parent = container.parentElement;
+      const containerWindow = ownerWindow(container);
+      scrollContainer = parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+    }
+    if (isOverflowing(scrollContainer)) {
       // Compute the size before applying overflow hidden to avoid any scroll jumps.
-      const scrollbarSize = getScrollbarSize(ownerWindow(container));
+      const scrollbarSize = getScrollbarSize(ownerWindow(scrollContainer));
       restoreStyle.push({
-        value: container.style.paddingRight,
+        value: scrollContainer.style.paddingRight,
         property: 'padding-right',
-        el: container
+        el: scrollContainer
       });
       // Use computed style, here to get the real padding to add our scrollbar width.
-      container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
+      scrollContainer.style.paddingRight = `${getPaddingRight(scrollContainer) + scrollbarSize}px`;
 
       // .mui-fixed is a global helper.
       const fixedElements = ownerDocument(container).querySelectorAll('.mui-fixed');
@@ -75,16 +74,6 @@ function handleContainer(containerInfo, props) {
         element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`;
       });
     }
-    let scrollContainer;
-    if (container.parentNode instanceof DocumentFragment) {
-      scrollContainer = ownerDocument(container).body;
-    } else {
-      // Support html overflow-y: auto for scroll stability between pages
-      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
-      const parent = container.parentElement;
-      const containerWindow = ownerWindow(container);
-      scrollContainer = parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
-    }
 
     // Block the scroll even if no scrollbar is visible to account for mobile keyboard
     // screensize shrink.
@@ -153,7 +142,7 @@ export class ModalManager {
     }
     const hiddenSiblings = getHiddenSiblings(container);
     ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true);
-    const containerIndex = findIndexOf(this.containers, item => item.container === container);
+    const containerIndex = this.containers.findIndex(item => item.container === container);
     if (containerIndex !== -1) {
       this.containers[containerIndex].modals.push(modal);
       return modalIndex;
@@ -167,7 +156,7 @@ export class ModalManager {
     return modalIndex;
   }
   mount(modal, props) {
-    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
+    const containerIndex = this.containers.findIndex(item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     if (!containerInfo.restore) {
       containerInfo.restore = handleContainer(containerInfo, props);
@@ -178,7 +167,7 @@ export class ModalManager {
     if (modalIndex === -1) {
       return modalIndex;
     }
-    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
+    const containerIndex = this.containers.findIndex(item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
     this.modals.splice(modalIndex, 1);

package/node_modules/@mui/material/Modal/useModal.js

@@ -41,6 +41,7 @@ function useModal(parameters) {
   // @ts-ignore internal logic
   const modal = React.useRef({});
   const mountNodeRef = React.useRef(null);
+  const lastMountNodeRef = React.useRef(null);
   const modalRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(modalRef, rootRef);
   const [exited, setExited] = React.useState(!open);
@@ -80,6 +81,7 @@ function useModal(parameters) {
     if (!node) {
       return;
     }
+    lastMountNodeRef.current = node;
     if (open && isTopModal()) {
       handleMounted();
     } else if (modalRef.current) {
@@ -184,12 +186,17 @@ function useModal(parameters) {
       onExited: (0, _createChainedFunction.default)(handleExited, children?.props.onExited ?? noop)
     };
   };
+
+  // Changing a portal's container remounts its children. Keep an exiting transition in its
+  // current container so it can finish and notify the modal that it is safe to unmount.
+  const portalContainer = !open && hasTransition && !exited ? lastMountNodeRef.current ?? container : container;
   return {
     getRootProps,
     getBackdropProps,
     getTransitionProps,
     rootRef: handleRef,
     portalRef: handlePortalRef,
+    portalContainer,
     isTopModal,
     exited,
     hasTransition

package/node_modules/@mui/material/Modal/useModal.mjs

@@ -34,6 +34,7 @@ function useModal(parameters) {
   // @ts-ignore internal logic
   const modal = React.useRef({});
   const mountNodeRef = React.useRef(null);
+  const lastMountNodeRef = React.useRef(null);
   const modalRef = React.useRef(null);
   const handleRef = useForkRef(modalRef, rootRef);
   const [exited, setExited] = React.useState(!open);
@@ -73,6 +74,7 @@ function useModal(parameters) {
     if (!node) {
       return;
     }
+    lastMountNodeRef.current = node;
     if (open && isTopModal()) {
       handleMounted();
     } else if (modalRef.current) {
@@ -177,12 +179,17 @@ function useModal(parameters) {
       onExited: createChainedFunction(handleExited, children?.props.onExited ?? noop)
     };
   };
+
+  // Changing a portal's container remounts its children. Keep an exiting transition in its
+  // current container so it can finish and notify the modal that it is safe to unmount.
+  const portalContainer = !open && hasTransition && !exited ? lastMountNodeRef.current ?? container : container;
   return {
     getRootProps,
     getBackdropProps,
     getTransitionProps,
     rootRef: handleRef,
     portalRef: handlePortalRef,
+    portalContainer,
     isTopModal,
     exited,
     hasTransition

package/node_modules/@mui/material/Modal/useModal.types.d.mts

@@ -98,6 +98,11 @@ export interface UseModalReturnValue {
    * A ref to the component's portal DOM element.
    */
   portalRef: React.RefCallback<Element> | null;
+  /**
+   * The container used by the portal. While a transition is exiting, this remains the last
+   * resolved mount node so changing containers does not remount the transition.
+   */
+  portalContainer: PortalProps['container'];
   /**
    * If `true`, the modal is the top most one.
    */

package/node_modules/@mui/material/Modal/useModal.types.d.ts

@@ -98,6 +98,11 @@ export interface UseModalReturnValue {
    * A ref to the component's portal DOM element.
    */
   portalRef: React.RefCallback<Element> | null;
+  /**
+   * The container used by the portal. While a transition is exiting, this remains the last
+   * resolved mount node so changing containers does not remount the transition.
+   */
+  portalContainer: PortalProps['container'];
   /**
    * If `true`, the modal is the top most one.
    */

package/node_modules/@mui/material/NativeSelect/NativeSelectInput.js

@@ -14,8 +14,10 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _nativeSelectClasses = _interopRequireWildcard(require("./nativeSelectClasses"));
+var _inputBaseClasses = _interopRequireDefault(require("../InputBase/inputBaseClasses"));
 var _zeroStyled = require("../zero-styled");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _inputAdornmentClasses = _interopRequireDefault(require("../InputAdornment/inputAdornmentClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -60,14 +62,29 @@ const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)(
   '&:not([multiple]) option, &:not([multiple]) optgroup': {
     backgroundColor: (theme.vars || theme).palette.background.paper
   },
+  [`& ~ .${_inputAdornmentClasses.default.root}`]: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    right: 'calc(var(--_caret, 24px) + (var(--_endAdornment, 28px) - 1.5rem)/2)' // 1.5rem is the default icon size
+  },
+  [`.${_inputBaseClasses.default.root}:has(> &)`]: {
+    '--_endAdornment': '0px'
+  },
   variants: [{
     props: ({
       ownerState
     }) => ownerState.variant !== 'filled' && ownerState.variant !== 'outlined',
     style: {
+      [`.${_inputBaseClasses.default.root}:has(> &)`]: {
+        '--_caret': '24px'
+      },
+      [`.${_inputBaseClasses.default.root}:has(> & ~ .${_inputAdornmentClasses.default.root})`]: {
+        '--_endAdornment': '28px'
+      },
       // Bump specificity to allow extending custom inputs
       '&&&': {
-        paddingRight: 24,
+        paddingRight: 'calc(var(--_caret, 24px) + var(--_endAdornment, 0px))',
         minWidth: 16 // So it doesn't collapse.
       }
     }
@@ -76,8 +93,14 @@ const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)(
       variant: 'filled'
     },
     style: {
+      [`.${_inputBaseClasses.default.root}:has(> &)`]: {
+        '--_caret': '32px'
+      },
+      [`.${_inputBaseClasses.default.root}:has(> & ~ .${_inputAdornmentClasses.default.root})`]: {
+        '--_endAdornment': '28px'
+      },
       '&&&': {
-        paddingRight: 32
+        paddingRight: 'calc(var(--_caret, 32px) + var(--_endAdornment, 0px))'
       }
     }
   }, {
@@ -85,12 +108,18 @@ const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)(
       variant: 'outlined'
     },
     style: {
+      [`.${_inputBaseClasses.default.root}:has(> &)`]: {
+        '--_caret': '32px'
+      },
+      [`.${_inputBaseClasses.default.root}:has(> & ~ .${_inputAdornmentClasses.default.root})`]: {
+        '--_endAdornment': '28px'
+      },
       borderRadius: (theme.vars || theme).shape.borderRadius,
       '&:focus': {
         borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
       },
       '&&&': {
-        paddingRight: 32
+        paddingRight: 'calc(var(--_caret, 32px) + var(--_endAdornment, 0px))'
       }
     }
   }]

package/node_modules/@mui/material/NativeSelect/NativeSelectInput.mjs

@@ -7,8 +7,10 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from "../utils/capitalize.mjs";
 import nativeSelectClasses, { getNativeSelectUtilityClasses } from "./nativeSelectClasses.mjs";
+import inputBaseClasses from "../InputBase/inputBaseClasses.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
+import inputAdornmentClasses from "../InputAdornment/inputAdornmentClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -53,14 +55,29 @@ export const StyledSelectSelect = styled('select', {
   '&:not([multiple]) option, &:not([multiple]) optgroup': {
     backgroundColor: (theme.vars || theme).palette.background.paper
   },
+  [`& ~ .${inputAdornmentClasses.root}`]: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    right: 'calc(var(--_caret, 24px) + (var(--_endAdornment, 28px) - 1.5rem)/2)' // 1.5rem is the default icon size
+  },
+  [`.${inputBaseClasses.root}:has(> &)`]: {
+    '--_endAdornment': '0px'
+  },
   variants: [{
     props: ({
       ownerState
     }) => ownerState.variant !== 'filled' && ownerState.variant !== 'outlined',
     style: {
+      [`.${inputBaseClasses.root}:has(> &)`]: {
+        '--_caret': '24px'
+      },
+      [`.${inputBaseClasses.root}:has(> & ~ .${inputAdornmentClasses.root})`]: {
+        '--_endAdornment': '28px'
+      },
       // Bump specificity to allow extending custom inputs
       '&&&': {
-        paddingRight: 24,
+        paddingRight: 'calc(var(--_caret, 24px) + var(--_endAdornment, 0px))',
         minWidth: 16 // So it doesn't collapse.
       }
     }
@@ -69,8 +86,14 @@ export const StyledSelectSelect = styled('select', {
       variant: 'filled'
     },
     style: {
+      [`.${inputBaseClasses.root}:has(> &)`]: {
+        '--_caret': '32px'
+      },
+      [`.${inputBaseClasses.root}:has(> & ~ .${inputAdornmentClasses.root})`]: {
+        '--_endAdornment': '28px'
+      },
       '&&&': {
-        paddingRight: 32
+        paddingRight: 'calc(var(--_caret, 32px) + var(--_endAdornment, 0px))'
       }
     }
   }, {
@@ -78,12 +101,18 @@ export const StyledSelectSelect = styled('select', {
       variant: 'outlined'
     },
     style: {
+      [`.${inputBaseClasses.root}:has(> &)`]: {
+        '--_caret': '32px'
+      },
+      [`.${inputBaseClasses.root}:has(> & ~ .${inputAdornmentClasses.root})`]: {
+        '--_endAdornment': '28px'
+      },
       borderRadius: (theme.vars || theme).shape.borderRadius,
       '&:focus': {
         borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
       },
       '&&&': {
-        paddingRight: 32
+        paddingRight: 'calc(var(--_caret, 32px) + var(--_endAdornment, 0px))'
       }
     }
   }]

package/node_modules/@mui/material/NoSsr/NoSsr.js

@@ -43,6 +43,7 @@ function NoSsr(props) {
   }, [defer]);
   React.useEffect(() => {
     if (defer) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setMountedState(true);
     }
   }, [defer]);

package/node_modules/@mui/material/NoSsr/NoSsr.mjs

@@ -36,6 +36,7 @@ function NoSsr(props) {
   }, [defer]);
   React.useEffect(() => {
     if (defer) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setMountedState(true);
     }
   }, [defer]);

package/node_modules/@mui/material/OutlinedInput/NotchedOutline.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
 const NotchedOutlineRoot = (0, _zeroStyled.styled)('fieldset', {
@@ -51,7 +52,7 @@ const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
       padding: 0,
       lineHeight: '11px',
       // sync with `height` in `legend` styles
-      transition: theme.transitions.create('width', {
+      ...(0, _utils.getTransitionStyles)(theme, 'width', {
         duration: 150,
         easing: theme.transitions.easing.easeOut
       })
@@ -69,7 +70,7 @@ const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
       fontSize: '0.75em',
       visibility: 'hidden',
       maxWidth: 0.01,
-      transition: theme.transitions.create('max-width', {
+      ...(0, _utils.getTransitionStyles)(theme, 'max-width', {
         duration: 50,
         easing: theme.transitions.easing.easeOut
       }),
@@ -88,7 +89,7 @@ const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
     }) => ownerState.withLabel && ownerState.notched,
     style: {
       maxWidth: '100%',
-      transition: theme.transitions.create('max-width', {
+      ...(0, _utils.getTransitionStyles)(theme, 'max-width', {
         duration: 100,
         easing: theme.transitions.easing.easeOut,
         delay: 50

package/node_modules/@mui/material/OutlinedInput/NotchedOutline.mjs

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
   name: 'MuiNotchedOutlined',
@@ -45,7 +46,7 @@ const NotchedOutlineLegend = styled('legend', {
       padding: 0,
       lineHeight: '11px',
       // sync with `height` in `legend` styles
-      transition: theme.transitions.create('width', {
+      ...getTransitionStyles(theme, 'width', {
         duration: 150,
         easing: theme.transitions.easing.easeOut
       })
@@ -63,7 +64,7 @@ const NotchedOutlineLegend = styled('legend', {
       fontSize: '0.75em',
       visibility: 'hidden',
       maxWidth: 0.01,
-      transition: theme.transitions.create('max-width', {
+      ...getTransitionStyles(theme, 'max-width', {
         duration: 50,
         easing: theme.transitions.easing.easeOut
       }),
@@ -82,7 +83,7 @@ const NotchedOutlineLegend = styled('legend', {
     }) => ownerState.withLabel && ownerState.notched,
     style: {
       maxWidth: '100%',
-      transition: theme.transitions.create('max-width', {
+      ...getTransitionStyles(theme, 'max-width', {
         duration: 100,
         easing: theme.transitions.easing.easeOut,
         delay: 50

package/node_modules/@mui/material/OutlinedInput/OutlinedInput.js

@@ -19,6 +19,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _outlinedInputClasses = _interopRequireWildcard(require("./outlinedInputClasses"));
+var _selectClasses = _interopRequireDefault(require("../Select/selectClasses"));
 var _InputBase = _interopRequireWildcard(require("../InputBase/InputBase"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -94,7 +95,12 @@ const OutlinedInputRoot = (0, _zeroStyled.styled)(_InputBase.InputBaseRoot, {
         ownerState
       }) => ownerState.endAdornment,
       style: {
-        paddingRight: 14
+        // use CSS variable to keep specificity
+        '--_trailingPad': '14px',
+        paddingRight: 'var(--_trailingPad)',
+        [`&.${_selectClasses.default.root}`]: {
+          '--_trailingPad': '0px'
+        }
       }
     }, {
       props: ({