@nebula.js/stardust 5.0.0-alpha.1 → 5.0.0-alpha.2

package/dist/stardust.dev.js

@@ -1,6 +1,6 @@
 /*
-* @nebula.js/stardust v5.0.0-alpha.1
-* Copyright (c) 2023 QlikTech International AB
+* @nebula.js/stardust v5.0.0-alpha.2
+* Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
 
@@ -4266,65 +4266,14 @@
 	  client.hydrateRoot = m$2.hydrateRoot;
 	}
 
-	function _extends$6() {
-	  _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
-	    for (var i = 1; i < arguments.length; i++) {
-	      var source = arguments[i];
-	      for (var key in source) {
-	        if (Object.prototype.hasOwnProperty.call(source, key)) {
-	          target[key] = source[key];
-	        }
-	      }
-	    }
-	    return target;
-	  };
-	  return _extends$6.apply(this, arguments);
-	}
-
-	function isPlainObject(item) {
-	  return item !== null && typeof item === 'object' && item.constructor === Object;
-	}
-	function deepClone(source) {
-	  if (!isPlainObject(source)) {
-	    return source;
-	  }
-	  const output = {};
-	  Object.keys(source).forEach(key => {
-	    output[key] = deepClone(source[key]);
-	  });
-	  return output;
-	}
-	function deepmerge(target, source, options = {
-	  clone: true
-	}) {
-	  const output = options.clone ? _extends$6({}, target) : target;
-	  if (isPlainObject(target) && isPlainObject(source)) {
-	    Object.keys(source).forEach(key => {
-	      // Avoid prototype pollution
-	      if (key === '__proto__') {
-	        return;
-	      }
-	      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
-	        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
-	        output[key] = deepmerge(target[key], source[key], options);
-	      } else if (options.clone) {
-	        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
-	      } else {
-	        output[key] = source[key];
-	      }
-	    });
-	  }
-	  return output;
-	}
-
 	/**
 	 * WARNING: Don't import this directly.
-	 * Use `MuiError` from `@mui/utils/macros/MuiError.macro` instead.
+	 * Use `MuiError` from `@mui-internal/babel-macros/MuiError.macro` instead.
 	 * @param {number} code
 	 */
 	function formatMuiErrorMessage(code) {
 	  // Apply babel-plugin-transform-template-literals in loose mode
-	  // loose mode is safe iff we're concatenating primitives
+	  // loose mode is safe if we're concatenating primitives
 	  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
 	  /* eslint-disable prefer-template */
 	  let url = 'https://mui.com/production-error/?code=' + code;
@@ -4337,510 +4286,10 @@
 	  /* eslint-enable prefer-template */
 	}
 
-	var reactIs$1 = {exports: {}};
-
-	var reactIs_production_min = {};
-
-	/**
-	 * @license React
-	 * react-is.production.min.js
-	 *
-	 * Copyright (c) Facebook, Inc. and its affiliates.
-	 *
-	 * This source code is licensed under the MIT license found in the
-	 * LICENSE file in the root directory of this source tree.
-	 */
-	var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f$1=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k$1=Symbol.for("react.server_context"),l$1=Symbol.for("react.forward_ref"),m$1=Symbol.for("react.suspense"),n$1=Symbol.for("react.suspense_list"),p$1=Symbol.for("react.memo"),q$1=Symbol.for("react.lazy"),t$1=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
-	function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f$1:case e:case m$1:case n$1:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case h:case l$1:case q$1:case p$1:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l$1;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q$1;reactIs_production_min.Memo=p$1;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f$1;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m$1;
-	reactIs_production_min.SuspenseList=n$1;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l$1};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q$1};reactIs_production_min.isMemo=function(a){return v(a)===p$1};
-	reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f$1};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m$1};reactIs_production_min.isSuspenseList=function(a){return v(a)===n$1};
-	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f$1||a===e||a===m$1||a===n$1||a===t$1||"object"===typeof a&&null!==a&&(a.$$typeof===q$1||a.$$typeof===p$1||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l$1||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};reactIs_production_min.typeOf=v;
-
-	{
-	  reactIs$1.exports = reactIs_production_min;
-	}
-
-	var reactIsExports = reactIs$1.exports;
-
-	// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
-	//
-	// A strict capitalization should uppercase the first letter of each word in the sentence.
-	// We only handle the first word.
-	function capitalize(string) {
-	  if (typeof string !== 'string') {
-	    throw new Error(formatMuiErrorMessage(7));
-	  }
-	  return string.charAt(0).toUpperCase() + string.slice(1);
-	}
-
-	/**
-	 * Safe chained function.
-	 *
-	 * Will only create a new function if needed,
-	 * otherwise will pass back existing functions or null.
-	 */
-	function createChainedFunction(...funcs) {
-	  return funcs.reduce((acc, func) => {
-	    if (func == null) {
-	      return acc;
-	    }
-	    return function chainedFunction(...args) {
-	      acc.apply(this, args);
-	      func.apply(this, args);
-	    };
-	  }, () => {});
-	}
-
-	// Corresponds to 10 frames at 60 Hz.
-	// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
-	function debounce$1(func, wait = 166) {
-	  let timeout;
-	  function debounced(...args) {
-	    const later = () => {
-	      // @ts-ignore
-	      func.apply(this, args);
-	    };
-	    clearTimeout(timeout);
-	    timeout = setTimeout(later, wait);
-	  }
-	  debounced.clear = () => {
-	    clearTimeout(timeout);
-	  };
-	  return debounced;
-	}
-
-	function deprecatedPropType(validator, reason) {
-	  {
-	    return () => null;
-	  }
-	}
-
-	function isMuiElement(element, muiNames) {
-	  var _muiName, _element$type;
-	  return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
-	  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
-	  // eslint-disable-next-line no-underscore-dangle
-	  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
-	}
-
-	function ownerDocument(node) {
-	  return node && node.ownerDocument || document;
-	}
-
-	function ownerWindow(node) {
-	  const doc = ownerDocument(node);
-	  return doc.defaultView || window;
-	}
-
-	function requirePropFactory(componentNameInError, Component) {
-	  {
-	    return () => null;
-	  }
-	}
-
-	/**
-	 * TODO v5: consider making it private
-	 *
-	 * passes {value} to {ref}
-	 *
-	 * WARNING: Be sure to only call this inside a callback that is passed as a ref.
-	 * Otherwise, make sure to cleanup the previous {ref} if it changes. See
-	 * https://github.com/mui/material-ui/issues/13539
-	 *
-	 * Useful if you want to expose the ref of an inner component to the public API
-	 * while still using it inside the component.
-	 * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
-	 */
-	function setRef(ref, value) {
-	  if (typeof ref === 'function') {
-	    ref(value);
-	  } else if (ref) {
-	    ref.current = value;
-	  }
-	}
-
-	/**
-	 * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
-	 * This is useful for effects that are only needed for client-side rendering but not for SSR.
-	 *
-	 * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
-	 * and confirm it doesn't apply to your use-case.
-	 */
-	const useEnhancedEffect = typeof window !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect;
-	var useEnhancedEffect$1 = useEnhancedEffect;
-
-	let globalId = 0;
-	function useGlobalId(idOverride) {
-	  const [defaultId, setDefaultId] = reactExports.useState(idOverride);
-	  const id = idOverride || defaultId;
-	  reactExports.useEffect(() => {
-	    if (defaultId == null) {
-	      // Fallback to this default id when possible.
-	      // Use the incrementing value for client-side rendering only.
-	      // We can't use it server-side.
-	      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
-	      globalId += 1;
-	      setDefaultId(`mui-${globalId}`);
-	    }
-	  }, [defaultId]);
-	  return id;
-	}
-
-	// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
-	const maybeReactUseId = React$1['useId'.toString()];
-	/**
-	 *
-	 * @example <div id={useId()} />
-	 * @param idOverride
-	 * @returns {string}
-	 */
-	function useId(idOverride) {
-	  if (maybeReactUseId !== undefined) {
-	    const reactId = maybeReactUseId();
-	    return idOverride != null ? idOverride : reactId;
-	  }
-	  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
-	  return useGlobalId(idOverride);
-	}
-
-	function unsupportedProp(props, propName, componentName, location, propFullName) {
-	  {
-	    return null;
-	  }
-	}
-
-	function useControlled({
-	  controlled,
-	  default: defaultProp,
-	  name,
-	  state = 'value'
-	}) {
-	  // isControlled is ignored in the hook dependency lists as it should never change.
-	  const {
-	    current: isControlled
-	  } = reactExports.useRef(controlled !== undefined);
-	  const [valueState, setValue] = reactExports.useState(defaultProp);
-	  const value = isControlled ? controlled : valueState;
-	  const setValueIfUncontrolled = reactExports.useCallback(newValue => {
-	    if (!isControlled) {
-	      setValue(newValue);
-	    }
-	  }, []);
-	  return [value, setValueIfUncontrolled];
-	}
-
-	/**
-	 * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
-	 * See RFC in https://github.com/reactjs/rfcs/pull/220
-	 */
-
-	function useEventCallback(fn) {
-	  const ref = reactExports.useRef(fn);
-	  useEnhancedEffect$1(() => {
-	    ref.current = fn;
-	  });
-	  return reactExports.useRef((...args) =>
-	  // @ts-expect-error hide `this`
-	  (0, ref.current)(...args)).current;
-	}
-
-	function useForkRef(...refs) {
-	  /**
-	   * This will create a new function if the refs passed to this hook change and are all defined.
-	   * This means react will call the old forkRef with `null` and the new forkRef
-	   * with the ref. Cleanup naturally emerges from this behavior.
-	   */
-	  return reactExports.useMemo(() => {
-	    if (refs.every(ref => ref == null)) {
-	      return null;
-	    }
-	    return instance => {
-	      refs.forEach(ref => {
-	        setRef(ref, instance);
-	      });
-	    };
-	    // eslint-disable-next-line react-hooks/exhaustive-deps
-	  }, refs);
-	}
-
-	let hadKeyboardEvent = true;
-	let hadFocusVisibleRecently = false;
-	let hadFocusVisibleRecentlyTimeout;
-	const inputTypesWhitelist = {
-	  text: true,
-	  search: true,
-	  url: true,
-	  tel: true,
-	  email: true,
-	  password: true,
-	  number: true,
-	  date: true,
-	  month: true,
-	  week: true,
-	  time: true,
-	  datetime: true,
-	  'datetime-local': true
-	};
-
-	/**
-	 * Computes whether the given element should automatically trigger the
-	 * `focus-visible` class being added, i.e. whether it should always match
-	 * `:focus-visible` when focused.
-	 * @param {Element} node
-	 * @returns {boolean}
-	 */
-	function focusTriggersKeyboardModality(node) {
-	  const {
-	    type,
-	    tagName
-	  } = node;
-	  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
-	    return true;
-	  }
-	  if (tagName === 'TEXTAREA' && !node.readOnly) {
-	    return true;
-	  }
-	  if (node.isContentEditable) {
-	    return true;
-	  }
-	  return false;
-	}
-
-	/**
-	 * Keep track of our keyboard modality state with `hadKeyboardEvent`.
-	 * If the most recent user interaction was via the keyboard;
-	 * and the key press did not include a meta, alt/option, or control key;
-	 * then the modality is keyboard. Otherwise, the modality is not keyboard.
-	 * @param {KeyboardEvent} event
-	 */
-	function handleKeyDown(event) {
-	  if (event.metaKey || event.altKey || event.ctrlKey) {
-	    return;
-	  }
-	  hadKeyboardEvent = true;
-	}
-
-	/**
-	 * If at any point a user clicks with a pointing device, ensure that we change
-	 * the modality away from keyboard.
-	 * This avoids the situation where a user presses a key on an already focused
-	 * element, and then clicks on a different element, focusing it with a
-	 * pointing device, while we still think we're in keyboard modality.
-	 */
-	function handlePointerDown() {
-	  hadKeyboardEvent = false;
-	}
-	function handleVisibilityChange() {
-	  if (this.visibilityState === 'hidden') {
-	    // If the tab becomes active again, the browser will handle calling focus
-	    // on the element (Safari actually calls it twice).
-	    // If this tab change caused a blur on an element with focus-visible,
-	    // re-apply the class when the user switches back to the tab.
-	    if (hadFocusVisibleRecently) {
-	      hadKeyboardEvent = true;
-	    }
-	  }
-	}
-	function prepare(doc) {
-	  doc.addEventListener('keydown', handleKeyDown, true);
-	  doc.addEventListener('mousedown', handlePointerDown, true);
-	  doc.addEventListener('pointerdown', handlePointerDown, true);
-	  doc.addEventListener('touchstart', handlePointerDown, true);
-	  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
-	}
-	function isFocusVisible(event) {
-	  const {
-	    target
-	  } = event;
-	  try {
-	    return target.matches(':focus-visible');
-	  } catch (error) {
-	    // Browsers not implementing :focus-visible will throw a SyntaxError.
-	    // We use our own heuristic for those browsers.
-	    // Rethrow might be better if it's not the expected error but do we really
-	    // want to crash if focus-visible malfunctioned?
-	  }
-
-	  // No need for validFocusTarget check. The user does that by attaching it to
-	  // focusable events only.
-	  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
-	}
-	function useIsFocusVisible() {
-	  const ref = reactExports.useCallback(node => {
-	    if (node != null) {
-	      prepare(node.ownerDocument);
-	    }
-	  }, []);
-	  const isFocusVisibleRef = reactExports.useRef(false);
-
-	  /**
-	   * Should be called if a blur event is fired
-	   */
-	  function handleBlurVisible() {
-	    // checking against potential state variable does not suffice if we focus and blur synchronously.
-	    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
-	    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
-	    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
-	    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
-	    if (isFocusVisibleRef.current) {
-	      // To detect a tab/window switch, we look for a blur event followed
-	      // rapidly by a visibility change.
-	      // If we don't see a visibility change within 100ms, it's probably a
-	      // regular focus change.
-	      hadFocusVisibleRecently = true;
-	      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-	      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
-	        hadFocusVisibleRecently = false;
-	      }, 100);
-	      isFocusVisibleRef.current = false;
-	      return true;
-	    }
-	    return false;
-	  }
-
-	  /**
-	   * Should be called if a blur event is fired
-	   */
-	  function handleFocusVisible(event) {
-	    if (isFocusVisible(event)) {
-	      isFocusVisibleRef.current = true;
-	      return true;
-	    }
-	    return false;
-	  }
-	  return {
-	    isFocusVisibleRef,
-	    onFocus: handleFocusVisible,
-	    onBlur: handleBlurVisible,
-	    ref
-	  };
-	}
-
-	// A change of the browser zoom change the scrollbar size.
-	// Credit https://github.com/twbs/bootstrap/blob/488fd8afc535ca3a6ad4dc581f5e89217b6a36ac/js/src/util/scrollbar.js#L14-L18
-	function getScrollbarSize$1(doc) {
-	  // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-	  const documentWidth = doc.documentElement.clientWidth;
-	  return Math.abs(window.innerWidth - documentWidth);
-	}
-
-	const usePreviousProps = value => {
-	  const ref = reactExports.useRef({});
-	  reactExports.useEffect(() => {
-	    ref.current = value;
-	  });
-	  return ref.current;
-	};
-	var usePreviousProps$1 = usePreviousProps;
-
-	/**
-	 * Add keys, values of `defaultProps` that does not exist in `props`
-	 * @param {object} defaultProps
-	 * @param {object} props
-	 * @returns {object} resolved props
-	 */
-	function resolveProps(defaultProps, props) {
-	  const output = _extends$6({}, props);
-	  Object.keys(defaultProps).forEach(propName => {
-	    if (propName.toString().match(/^(components|slots)$/)) {
-	      output[propName] = _extends$6({}, defaultProps[propName], output[propName]);
-	    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
-	      const defaultSlotProps = defaultProps[propName] || {};
-	      const slotProps = props[propName];
-	      output[propName] = {};
-	      if (!slotProps || !Object.keys(slotProps)) {
-	        // Reduce the iteration if the slot props is empty
-	        output[propName] = defaultSlotProps;
-	      } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
-	        // Reduce the iteration if the default slot props is empty
-	        output[propName] = slotProps;
-	      } else {
-	        output[propName] = _extends$6({}, slotProps);
-	        Object.keys(defaultSlotProps).forEach(slotPropName => {
-	          output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
-	        });
-	      }
-	    } else if (output[propName] === undefined) {
-	      output[propName] = defaultProps[propName];
-	    }
-	  });
-	  return output;
-	}
-
-	function composeClasses(slots, getUtilityClass, classes = undefined) {
-	  const output = {};
-	  Object.keys(slots).forEach(
-	  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-	  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-	  slot => {
-	    output[slot] = slots[slot].reduce((acc, key) => {
-	      if (key) {
-	        const utilityClass = getUtilityClass(key);
-	        if (utilityClass !== '') {
-	          acc.push(utilityClass);
-	        }
-	        if (classes && classes[key]) {
-	          acc.push(classes[key]);
-	        }
-	      }
-	      return acc;
-	    }, []).join(' ');
-	  });
-	  return output;
-	}
-
-	const defaultGenerator = componentName => componentName;
-	const createClassNameGenerator = () => {
-	  let generate = defaultGenerator;
-	  return {
-	    configure(generator) {
-	      generate = generator;
-	    },
-	    generate(componentName) {
-	      return generate(componentName);
-	    },
-	    reset() {
-	      generate = defaultGenerator;
-	    }
-	  };
-	};
-	const ClassNameGenerator = createClassNameGenerator();
-	var ClassNameGenerator$1 = ClassNameGenerator;
-
-	// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
-	// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
-
-	const globalStateClassesMapping = {
-	  active: 'active',
-	  checked: 'checked',
-	  completed: 'completed',
-	  disabled: 'disabled',
-	  error: 'error',
-	  expanded: 'expanded',
-	  focused: 'focused',
-	  focusVisible: 'focusVisible',
-	  open: 'open',
-	  readOnly: 'readOnly',
-	  required: 'required',
-	  selected: 'selected'
-	};
-	function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
-	  const globalStateClass = globalStateClassesMapping[slot];
-	  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
-	}
-
-	function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
-	  const result = {};
-	  slots.forEach(slot => {
-	    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-	  });
-	  return result;
-	}
-
 	var THEME_ID = '$$material';
 
-	function _extends$5() {
-	  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
+	function _extends$6() {
+	  _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
 	    for (var i = 1; i < arguments.length; i++) {
 	      var source = arguments[i];
 	      for (var key in source) {
@@ -4851,7 +4300,7 @@
 	    }
 	    return target;
 	  };
-	  return _extends$5.apply(this, arguments);
+	  return _extends$6.apply(this, arguments);
 	}
 
 	function _objectWithoutPropertiesLoose$3(source, excluded) {
@@ -4867,8 +4316,8 @@
 	  return target;
 	}
 
-	function _extends$4() {
-	  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
+	function _extends$5() {
+	  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
 	    for (var i = 1; i < arguments.length; i++) {
 	      var source = arguments[i];
 
@@ -4881,7 +4330,7 @@
 
 	    return target;
 	  };
-	  return _extends$4.apply(this, arguments);
+	  return _extends$5.apply(this, arguments);
 	}
 
 	function memoize$1(fn) {
@@ -6141,6 +5590,31 @@
 	  return cache;
 	};
 
+	var reactIs$1 = {exports: {}};
+
+	var reactIs_production_min = {};
+
+	/**
+	 * @license React
+	 * react-is.production.min.js
+	 *
+	 * Copyright (c) Facebook, Inc. and its affiliates.
+	 *
+	 * This source code is licensed under the MIT license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f$1=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k$1=Symbol.for("react.server_context"),l$1=Symbol.for("react.forward_ref"),m$1=Symbol.for("react.suspense"),n$1=Symbol.for("react.suspense_list"),p$1=Symbol.for("react.memo"),q$1=Symbol.for("react.lazy"),t$1=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
+	function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f$1:case e:case m$1:case n$1:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case h:case l$1:case q$1:case p$1:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l$1;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q$1;reactIs_production_min.Memo=p$1;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f$1;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m$1;
+	reactIs_production_min.SuspenseList=n$1;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l$1};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q$1};reactIs_production_min.isMemo=function(a){return v(a)===p$1};
+	reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f$1};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m$1};reactIs_production_min.isSuspenseList=function(a){return v(a)===n$1};
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f$1||a===e||a===m$1||a===n$1||a===t$1||"object"===typeof a&&null!==a&&(a.$$typeof===q$1||a.$$typeof===p$1||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l$1||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};reactIs_production_min.typeOf=v;
+
+	{
+	  reactIs$1.exports = reactIs_production_min;
+	}
+
+	var reactIsExports = reactIs$1.exports;
+
 	var reactIs = reactIsExports;
 	var FORWARD_REF_STATICS = {
 	  '$$typeof': true,
@@ -6317,6 +5791,404 @@
 	  strokeWidth: 1
 	};
 
+	var hyphenateRegex$1 = /[A-Z]|^ms/g;
+	var animationRegex$1 = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+
+	var isCustomProperty$1 = function isCustomProperty(property) {
+	  return property.charCodeAt(1) === 45;
+	};
+
+	var isProcessableValue$1 = function isProcessableValue(value) {
+	  return value != null && typeof value !== 'boolean';
+	};
+
+	var processStyleName$1 = /* #__PURE__ */memoize$1(function (styleName) {
+	  return isCustomProperty$1(styleName) ? styleName : styleName.replace(hyphenateRegex$1, '-$&').toLowerCase();
+	});
+
+	var processStyleValue$1 = function processStyleValue(key, value) {
+	  switch (key) {
+	    case 'animation':
+	    case 'animationName':
+	      {
+	        if (typeof value === 'string') {
+	          return value.replace(animationRegex$1, function (match, p1, p2) {
+	            cursor$1 = {
+	              name: p1,
+	              styles: p2,
+	              next: cursor$1
+	            };
+	            return p1;
+	          });
+	        }
+	      }
+	  }
+
+	  if (unitlessKeys[key] !== 1 && !isCustomProperty$1(key) && typeof value === 'number' && value !== 0) {
+	    return value + 'px';
+	  }
+
+	  return value;
+	};
+
+	var noComponentSelectorMessage$1 = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+
+	function handleInterpolation$1(mergedProps, registered, interpolation) {
+	  if (interpolation == null) {
+	    return '';
+	  }
+
+	  if (interpolation.__emotion_styles !== undefined) {
+
+	    return interpolation;
+	  }
+
+	  switch (typeof interpolation) {
+	    case 'boolean':
+	      {
+	        return '';
+	      }
+
+	    case 'object':
+	      {
+	        if (interpolation.anim === 1) {
+	          cursor$1 = {
+	            name: interpolation.name,
+	            styles: interpolation.styles,
+	            next: cursor$1
+	          };
+	          return interpolation.name;
+	        }
+
+	        if (interpolation.styles !== undefined) {
+	          var next = interpolation.next;
+
+	          if (next !== undefined) {
+	            // not the most efficient thing ever but this is a pretty rare case
+	            // and there will be very few iterations of this generally
+	            while (next !== undefined) {
+	              cursor$1 = {
+	                name: next.name,
+	                styles: next.styles,
+	                next: cursor$1
+	              };
+	              next = next.next;
+	            }
+	          }
+
+	          var styles = interpolation.styles + ";";
+
+	          return styles;
+	        }
+
+	        return createStringFromObject$1(mergedProps, registered, interpolation);
+	      }
+
+	    case 'function':
+	      {
+	        if (mergedProps !== undefined) {
+	          var previousCursor = cursor$1;
+	          var result = interpolation(mergedProps);
+	          cursor$1 = previousCursor;
+	          return handleInterpolation$1(mergedProps, registered, result);
+	        }
+
+	        break;
+	      }
+	  } // finalize string values (regular strings and functions interpolated into css calls)
+
+
+	  if (registered == null) {
+	    return interpolation;
+	  }
+
+	  var cached = registered[interpolation];
+	  return cached !== undefined ? cached : interpolation;
+	}
+
+	function createStringFromObject$1(mergedProps, registered, obj) {
+	  var string = '';
+
+	  if (Array.isArray(obj)) {
+	    for (var i = 0; i < obj.length; i++) {
+	      string += handleInterpolation$1(mergedProps, registered, obj[i]) + ";";
+	    }
+	  } else {
+	    for (var _key in obj) {
+	      var value = obj[_key];
+
+	      if (typeof value !== 'object') {
+	        if (registered != null && registered[value] !== undefined) {
+	          string += _key + "{" + registered[value] + "}";
+	        } else if (isProcessableValue$1(value)) {
+	          string += processStyleName$1(_key) + ":" + processStyleValue$1(_key, value) + ";";
+	        }
+	      } else {
+	        if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {
+	          throw new Error(noComponentSelectorMessage$1);
+	        }
+
+	        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
+	          for (var _i = 0; _i < value.length; _i++) {
+	            if (isProcessableValue$1(value[_i])) {
+	              string += processStyleName$1(_key) + ":" + processStyleValue$1(_key, value[_i]) + ";";
+	            }
+	          }
+	        } else {
+	          var interpolated = handleInterpolation$1(mergedProps, registered, value);
+
+	          switch (_key) {
+	            case 'animation':
+	            case 'animationName':
+	              {
+	                string += processStyleName$1(_key) + ":" + interpolated + ";";
+	                break;
+	              }
+
+	            default:
+	              {
+
+	                string += _key + "{" + interpolated + "}";
+	              }
+	          }
+	        }
+	      }
+	    }
+	  }
+
+	  return string;
+	}
+
+	var labelPattern$1 = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+	// keyframes are stored on the SerializedStyles object as a linked list
+
+
+	var cursor$1;
+	var serializeStyles$1 = function serializeStyles(args, registered, mergedProps) {
+	  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+	    return args[0];
+	  }
+
+	  var stringMode = true;
+	  var styles = '';
+	  cursor$1 = undefined;
+	  var strings = args[0];
+
+	  if (strings == null || strings.raw === undefined) {
+	    stringMode = false;
+	    styles += handleInterpolation$1(mergedProps, registered, strings);
+	  } else {
+
+	    styles += strings[0];
+	  } // we start at 1 since we've already handled the first arg
+
+
+	  for (var i = 1; i < args.length; i++) {
+	    styles += handleInterpolation$1(mergedProps, registered, args[i]);
+
+	    if (stringMode) {
+
+	      styles += strings[i];
+	    }
+	  }
+
+
+	  labelPattern$1.lastIndex = 0;
+	  var identifierName = '';
+	  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+	  while ((match = labelPattern$1.exec(styles)) !== null) {
+	    identifierName += '-' + // $FlowFixMe we know it's not null
+	    match[1];
+	  }
+
+	  var name = murmur2(styles) + identifierName;
+
+	  return {
+	    name: name,
+	    styles: styles,
+	    next: cursor$1
+	  };
+	};
+
+	var isBrowser$2 = typeof document !== 'undefined';
+
+	var syncFallback = function syncFallback(create) {
+	  return create();
+	};
+
+	var useInsertionEffect = React$1['useInsertion' + 'Effect'] ? React$1['useInsertion' + 'Effect'] : false;
+	var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$2 ? syncFallback : useInsertionEffect || syncFallback;
+	var useInsertionEffectWithLayoutFallback = useInsertionEffect || reactExports.useLayoutEffect;
+
+	var isBrowser$1 = typeof document !== 'undefined';
+
+	var EmotionCacheContext = /* #__PURE__ */reactExports.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
+	// because this module is primarily intended for the browser and node
+	// but it's also required in react native and similar environments sometimes
+	// and we could have a special build just for that
+	// but this is much easier and the native packages
+	// might use a different theme context in the future anyway
+	typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
+	  key: 'css'
+	}) : null);
+
+	var CacheProvider = EmotionCacheContext.Provider;
+
+	var withEmotionCache = function withEmotionCache(func) {
+	  // $FlowFixMe
+	  return /*#__PURE__*/reactExports.forwardRef(function (props, ref) {
+	    // the cache will never be null in the browser
+	    var cache = reactExports.useContext(EmotionCacheContext);
+	    return func(props, cache, ref);
+	  });
+	};
+
+	if (!isBrowser$1) {
+	  withEmotionCache = function withEmotionCache(func) {
+	    return function (props) {
+	      var cache = reactExports.useContext(EmotionCacheContext);
+
+	      if (cache === null) {
+	        // yes, we're potentially creating this on every render
+	        // it doesn't actually matter though since it's only on the server
+	        // so there will only every be a single render
+	        // that could change in the future because of suspense and etc. but for now,
+	        // this works and i don't want to optimise for a future thing that we aren't sure about
+	        cache = createCache({
+	          key: 'css'
+	        });
+	        return /*#__PURE__*/reactExports.createElement(EmotionCacheContext.Provider, {
+	          value: cache
+	        }, func(props, cache));
+	      } else {
+	        return func(props, cache);
+	      }
+	    };
+	  };
+	}
+
+	var ThemeContext$2 = /* #__PURE__ */reactExports.createContext({});
+
+	// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
+	// initial client-side render from SSR, use place of hydrating tag
+
+	var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
+
+	  var styles = props.styles;
+	  var serialized = serializeStyles$1([styles], undefined, reactExports.useContext(ThemeContext$2));
+
+	  if (!isBrowser$1) {
+	    var _ref;
+
+	    var serializedNames = serialized.name;
+	    var serializedStyles = serialized.styles;
+	    var next = serialized.next;
+
+	    while (next !== undefined) {
+	      serializedNames += ' ' + next.name;
+	      serializedStyles += next.styles;
+	      next = next.next;
+	    }
+
+	    var shouldCache = cache.compat === true;
+	    var rules = cache.insert("", {
+	      name: serializedNames,
+	      styles: serializedStyles
+	    }, cache.sheet, shouldCache);
+
+	    if (shouldCache) {
+	      return null;
+	    }
+
+	    return /*#__PURE__*/reactExports.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
+	      __html: rules
+	    }, _ref.nonce = cache.sheet.nonce, _ref));
+	  } // yes, i know these hooks are used conditionally
+	  // but it is based on a constant that will never change at runtime
+	  // it's effectively like having two implementations and switching them out
+	  // so it's not actually breaking anything
+
+
+	  var sheetRef = reactExports.useRef();
+	  useInsertionEffectWithLayoutFallback(function () {
+	    var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
+
+	    var sheet = new cache.sheet.constructor({
+	      key: key,
+	      nonce: cache.sheet.nonce,
+	      container: cache.sheet.container,
+	      speedy: cache.sheet.isSpeedy
+	    });
+	    var rehydrating = false; // $FlowFixMe
+
+	    var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
+
+	    if (cache.sheet.tags.length) {
+	      sheet.before = cache.sheet.tags[0];
+	    }
+
+	    if (node !== null) {
+	      rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
+
+	      node.setAttribute('data-emotion', key);
+	      sheet.hydrate([node]);
+	    }
+
+	    sheetRef.current = [sheet, rehydrating];
+	    return function () {
+	      sheet.flush();
+	    };
+	  }, [cache]);
+	  useInsertionEffectWithLayoutFallback(function () {
+	    var sheetRefCurrent = sheetRef.current;
+	    var sheet = sheetRefCurrent[0],
+	        rehydrating = sheetRefCurrent[1];
+
+	    if (rehydrating) {
+	      sheetRefCurrent[1] = false;
+	      return;
+	    }
+
+	    if (serialized.next !== undefined) {
+	      // insert keyframes
+	      insertStyles(cache, serialized.next, true);
+	    }
+
+	    if (sheet.tags.length) {
+	      // if this doesn't exist then it will be null so the style element will be appended
+	      var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
+	      sheet.before = element;
+	      sheet.flush();
+	    }
+
+	    cache.insert("", serialized, sheet, false);
+	  }, [cache, serialized.name]);
+	  return null;
+	});
+
+	function css() {
+	  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+	    args[_key] = arguments[_key];
+	  }
+
+	  return serializeStyles$1(args);
+	}
+
+	var keyframes = function keyframes() {
+	  var insertable = css.apply(void 0, arguments);
+	  var name = "animation-" + insertable.name; // $FlowFixMe
+
+	  return {
+	    name: name,
+	    styles: "@keyframes " + name + "{" + insertable.styles + "}",
+	    anim: 1,
+	    toString: function toString() {
+	      return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
+	    }
+	  };
+	};
+
 	var hyphenateRegex = /[A-Z]|^ms/g;
 	var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
@@ -6537,184 +6409,6 @@
 	  };
 	};
 
-	var isBrowser$2 = typeof document !== 'undefined';
-
-	var syncFallback = function syncFallback(create) {
-	  return create();
-	};
-
-	var useInsertionEffect = React$1['useInsertion' + 'Effect'] ? React$1['useInsertion' + 'Effect'] : false;
-	var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$2 ? syncFallback : useInsertionEffect || syncFallback;
-	var useInsertionEffectWithLayoutFallback = useInsertionEffect || reactExports.useLayoutEffect;
-
-	var isBrowser$1 = typeof document !== 'undefined';
-
-	var EmotionCacheContext = /* #__PURE__ */reactExports.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
-	// because this module is primarily intended for the browser and node
-	// but it's also required in react native and similar environments sometimes
-	// and we could have a special build just for that
-	// but this is much easier and the native packages
-	// might use a different theme context in the future anyway
-	typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
-	  key: 'css'
-	}) : null);
-
-	var CacheProvider = EmotionCacheContext.Provider;
-
-	var withEmotionCache = function withEmotionCache(func) {
-	  // $FlowFixMe
-	  return /*#__PURE__*/reactExports.forwardRef(function (props, ref) {
-	    // the cache will never be null in the browser
-	    var cache = reactExports.useContext(EmotionCacheContext);
-	    return func(props, cache, ref);
-	  });
-	};
-
-	if (!isBrowser$1) {
-	  withEmotionCache = function withEmotionCache(func) {
-	    return function (props) {
-	      var cache = reactExports.useContext(EmotionCacheContext);
-
-	      if (cache === null) {
-	        // yes, we're potentially creating this on every render
-	        // it doesn't actually matter though since it's only on the server
-	        // so there will only every be a single render
-	        // that could change in the future because of suspense and etc. but for now,
-	        // this works and i don't want to optimise for a future thing that we aren't sure about
-	        cache = createCache({
-	          key: 'css'
-	        });
-	        return /*#__PURE__*/reactExports.createElement(EmotionCacheContext.Provider, {
-	          value: cache
-	        }, func(props, cache));
-	      } else {
-	        return func(props, cache);
-	      }
-	    };
-	  };
-	}
-
-	var ThemeContext$2 = /* #__PURE__ */reactExports.createContext({});
-
-	// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
-	// initial client-side render from SSR, use place of hydrating tag
-
-	var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
-
-	  var styles = props.styles;
-	  var serialized = serializeStyles([styles], undefined, reactExports.useContext(ThemeContext$2));
-
-	  if (!isBrowser$1) {
-	    var _ref;
-
-	    var serializedNames = serialized.name;
-	    var serializedStyles = serialized.styles;
-	    var next = serialized.next;
-
-	    while (next !== undefined) {
-	      serializedNames += ' ' + next.name;
-	      serializedStyles += next.styles;
-	      next = next.next;
-	    }
-
-	    var shouldCache = cache.compat === true;
-	    var rules = cache.insert("", {
-	      name: serializedNames,
-	      styles: serializedStyles
-	    }, cache.sheet, shouldCache);
-
-	    if (shouldCache) {
-	      return null;
-	    }
-
-	    return /*#__PURE__*/reactExports.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
-	      __html: rules
-	    }, _ref.nonce = cache.sheet.nonce, _ref));
-	  } // yes, i know these hooks are used conditionally
-	  // but it is based on a constant that will never change at runtime
-	  // it's effectively like having two implementations and switching them out
-	  // so it's not actually breaking anything
-
-
-	  var sheetRef = reactExports.useRef();
-	  useInsertionEffectWithLayoutFallback(function () {
-	    var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
-
-	    var sheet = new cache.sheet.constructor({
-	      key: key,
-	      nonce: cache.sheet.nonce,
-	      container: cache.sheet.container,
-	      speedy: cache.sheet.isSpeedy
-	    });
-	    var rehydrating = false; // $FlowFixMe
-
-	    var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
-
-	    if (cache.sheet.tags.length) {
-	      sheet.before = cache.sheet.tags[0];
-	    }
-
-	    if (node !== null) {
-	      rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
-
-	      node.setAttribute('data-emotion', key);
-	      sheet.hydrate([node]);
-	    }
-
-	    sheetRef.current = [sheet, rehydrating];
-	    return function () {
-	      sheet.flush();
-	    };
-	  }, [cache]);
-	  useInsertionEffectWithLayoutFallback(function () {
-	    var sheetRefCurrent = sheetRef.current;
-	    var sheet = sheetRefCurrent[0],
-	        rehydrating = sheetRefCurrent[1];
-
-	    if (rehydrating) {
-	      sheetRefCurrent[1] = false;
-	      return;
-	    }
-
-	    if (serialized.next !== undefined) {
-	      // insert keyframes
-	      insertStyles(cache, serialized.next, true);
-	    }
-
-	    if (sheet.tags.length) {
-	      // if this doesn't exist then it will be null so the style element will be appended
-	      var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
-	      sheet.before = element;
-	      sheet.flush();
-	    }
-
-	    cache.insert("", serialized, sheet, false);
-	  }, [cache, serialized.name]);
-	  return null;
-	});
-
-	function css() {
-	  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-	    args[_key] = arguments[_key];
-	  }
-
-	  return serializeStyles(args);
-	}
-
-	var keyframes = function keyframes() {
-	  var insertable = css.apply(void 0, arguments);
-	  var name = "animation-" + insertable.name; // $FlowFixMe
-
-	  return {
-	    name: name,
-	    styles: "@keyframes " + name + "{" + insertable.styles + "}",
-	    anim: 1,
-	    toString: function toString() {
-	      return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
-	    }
-	  };
-	};
-
 	var testOmitPropsOnStringTag = isPropValid;
 
 	var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
@@ -6852,151 +6546,674 @@
 	        }
 	      }
 
-	      newProps.className = className;
-	      newProps.ref = ref;
-	      return /*#__PURE__*/reactExports.createElement(reactExports.Fragment, null, /*#__PURE__*/reactExports.createElement(Insertion, {
-	        cache: cache,
-	        serialized: serialized,
-	        isStringTag: typeof FinalTag === 'string'
-	      }), /*#__PURE__*/reactExports.createElement(FinalTag, newProps));
-	    });
-	    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
-	    Styled.defaultProps = tag.defaultProps;
-	    Styled.__emotion_real = Styled;
-	    Styled.__emotion_base = baseTag;
-	    Styled.__emotion_styles = styles;
-	    Styled.__emotion_forwardProp = shouldForwardProp;
-	    Object.defineProperty(Styled, 'toString', {
-	      value: function value() {
-	        if (targetClassName === undefined && "production" !== 'production') {
-	          return 'NO_COMPONENT_SELECTOR';
-	        } // $FlowFixMe: coerce undefined to string
+	      newProps.className = className;
+	      newProps.ref = ref;
+	      return /*#__PURE__*/reactExports.createElement(reactExports.Fragment, null, /*#__PURE__*/reactExports.createElement(Insertion, {
+	        cache: cache,
+	        serialized: serialized,
+	        isStringTag: typeof FinalTag === 'string'
+	      }), /*#__PURE__*/reactExports.createElement(FinalTag, newProps));
+	    });
+	    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
+	    Styled.defaultProps = tag.defaultProps;
+	    Styled.__emotion_real = Styled;
+	    Styled.__emotion_base = baseTag;
+	    Styled.__emotion_styles = styles;
+	    Styled.__emotion_forwardProp = shouldForwardProp;
+	    Object.defineProperty(Styled, 'toString', {
+	      value: function value() {
+	        if (targetClassName === undefined && "production" !== 'production') {
+	          return 'NO_COMPONENT_SELECTOR';
+	        } // $FlowFixMe: coerce undefined to string
+
+
+	        return "." + targetClassName;
+	      }
+	    });
+
+	    Styled.withComponent = function (nextTag, nextOptions) {
+	      return createStyled(nextTag, _extends$5({}, options, nextOptions, {
+	        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+	      })).apply(void 0, styles);
+	    };
+
+	    return Styled;
+	  };
+	};
+
+	var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
+	'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
+
+	var newStyled = createStyled$1.bind();
+	tags.forEach(function (tagName) {
+	  // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
+	  newStyled[tagName] = newStyled(tagName);
+	});
+
+	var jsxRuntime = {exports: {}};
+
+	var reactJsxRuntime_production_min = {};
+
+	/**
+	 * @license React
+	 * react-jsx-runtime.production.min.js
+	 *
+	 * Copyright (c) Facebook, Inc. and its affiliates.
+	 *
+	 * This source code is licensed under the MIT license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+
+	{
+	  jsxRuntime.exports = reactJsxRuntime_production_min;
+	}
+
+	var jsxRuntimeExports = jsxRuntime.exports;
+
+	let cache$1;
+	if (typeof document === 'object') {
+	  cache$1 = createCache({
+	    key: 'css',
+	    prepend: true
+	  });
+	}
+	function StyledEngineProvider(props) {
+	  const {
+	    injectFirst,
+	    children
+	  } = props;
+	  return injectFirst && cache$1 ? /*#__PURE__*/jsxRuntimeExports.jsx(CacheProvider, {
+	    value: cache$1,
+	    children: children
+	  }) : children;
+	}
+
+	function isEmpty$4(obj) {
+	  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+	}
+	function GlobalStyles$2(props) {
+	  const {
+	    styles,
+	    defaultTheme = {}
+	  } = props;
+	  const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty$4(themeInput) ? defaultTheme : themeInput) : styles;
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(Global, {
+	    styles: globalStyles
+	  });
+	}
+
+	/**
+	 * @mui/styled-engine v5.15.2
+	 *
+	 * @license MIT
+	 * This source code is licensed under the MIT license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	function styled$2(tag, options) {
+	  const stylesFactory = newStyled(tag, options);
+	  return stylesFactory;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	const internal_processStyles = (tag, processor) => {
+	  // Emotion attaches all the styles as `__emotion_styles`.
+	  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
+	  if (Array.isArray(tag.__emotion_styles)) {
+	    tag.__emotion_styles = processor(tag.__emotion_styles);
+	  }
+	};
+
+	function _extends$4() {
+	  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
+	    for (var i = 1; i < arguments.length; i++) {
+	      var source = arguments[i];
+	      for (var key in source) {
+	        if (Object.prototype.hasOwnProperty.call(source, key)) {
+	          target[key] = source[key];
+	        }
+	      }
+	    }
+	    return target;
+	  };
+	  return _extends$4.apply(this, arguments);
+	}
+
+	function _objectWithoutPropertiesLoose$2(source, excluded) {
+	  if (source == null) return {};
+	  var target = {};
+	  var sourceKeys = Object.keys(source);
+	  var key, i;
+	  for (i = 0; i < sourceKeys.length; i++) {
+	    key = sourceKeys[i];
+	    if (excluded.indexOf(key) >= 0) continue;
+	    target[key] = source[key];
+	  }
+	  return target;
+	}
+
+	function _extends$3() {
+	  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
+	    for (var i = 1; i < arguments.length; i++) {
+	      var source = arguments[i];
+	      for (var key in source) {
+	        if (Object.prototype.hasOwnProperty.call(source, key)) {
+	          target[key] = source[key];
+	        }
+	      }
+	    }
+	    return target;
+	  };
+	  return _extends$3.apply(this, arguments);
+	}
+
+	function isPlainObject(item) {
+	  return item !== null && typeof item === 'object' && item.constructor === Object;
+	}
+	function deepClone(source) {
+	  if (!isPlainObject(source)) {
+	    return source;
+	  }
+	  const output = {};
+	  Object.keys(source).forEach(key => {
+	    output[key] = deepClone(source[key]);
+	  });
+	  return output;
+	}
+	function deepmerge(target, source, options = {
+	  clone: true
+	}) {
+	  const output = options.clone ? _extends$3({}, target) : target;
+	  if (isPlainObject(target) && isPlainObject(source)) {
+	    Object.keys(source).forEach(key => {
+	      // Avoid prototype pollution
+	      if (key === '__proto__') {
+	        return;
+	      }
+	      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+	        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
+	        output[key] = deepmerge(target[key], source[key], options);
+	      } else if (options.clone) {
+	        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
+	      } else {
+	        output[key] = source[key];
+	      }
+	    });
+	  }
+	  return output;
+	}
+
+	// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
+	//
+	// A strict capitalization should uppercase the first letter of each word in the sentence.
+	// We only handle the first word.
+	function capitalize(string) {
+	  if (typeof string !== 'string') {
+	    throw new Error(formatMuiErrorMessage(7));
+	  }
+	  return string.charAt(0).toUpperCase() + string.slice(1);
+	}
+
+	/**
+	 * Safe chained function.
+	 *
+	 * Will only create a new function if needed,
+	 * otherwise will pass back existing functions or null.
+	 */
+	function createChainedFunction(...funcs) {
+	  return funcs.reduce((acc, func) => {
+	    if (func == null) {
+	      return acc;
+	    }
+	    return function chainedFunction(...args) {
+	      acc.apply(this, args);
+	      func.apply(this, args);
+	    };
+	  }, () => {});
+	}
+
+	// Corresponds to 10 frames at 60 Hz.
+	// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
+	function debounce$1(func, wait = 166) {
+	  let timeout;
+	  function debounced(...args) {
+	    const later = () => {
+	      // @ts-ignore
+	      func.apply(this, args);
+	    };
+	    clearTimeout(timeout);
+	    timeout = setTimeout(later, wait);
+	  }
+	  debounced.clear = () => {
+	    clearTimeout(timeout);
+	  };
+	  return debounced;
+	}
+
+	function deprecatedPropType(validator, reason) {
+	  {
+	    return () => null;
+	  }
+	}
+
+	function isMuiElement(element, muiNames) {
+	  var _muiName, _element$type;
+	  return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+	  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+	  // eslint-disable-next-line no-underscore-dangle
+	  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
+	}
+
+	function ownerDocument(node) {
+	  return node && node.ownerDocument || document;
+	}
+
+	function ownerWindow(node) {
+	  const doc = ownerDocument(node);
+	  return doc.defaultView || window;
+	}
+
+	function requirePropFactory(componentNameInError, Component) {
+	  {
+	    return () => null;
+	  }
+	}
+
+	/**
+	 * TODO v5: consider making it private
+	 *
+	 * passes {value} to {ref}
+	 *
+	 * WARNING: Be sure to only call this inside a callback that is passed as a ref.
+	 * Otherwise, make sure to cleanup the previous {ref} if it changes. See
+	 * https://github.com/mui/material-ui/issues/13539
+	 *
+	 * Useful if you want to expose the ref of an inner component to the public API
+	 * while still using it inside the component.
+	 * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
+	 */
+	function setRef(ref, value) {
+	  if (typeof ref === 'function') {
+	    ref(value);
+	  } else if (ref) {
+	    ref.current = value;
+	  }
+	}
+
+	/**
+	 * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+	 * This is useful for effects that are only needed for client-side rendering but not for SSR.
+	 *
+	 * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+	 * and confirm it doesn't apply to your use-case.
+	 */
+	const useEnhancedEffect = typeof window !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect;
+
+	let globalId = 0;
+	function useGlobalId(idOverride) {
+	  const [defaultId, setDefaultId] = reactExports.useState(idOverride);
+	  const id = idOverride || defaultId;
+	  reactExports.useEffect(() => {
+	    if (defaultId == null) {
+	      // Fallback to this default id when possible.
+	      // Use the incrementing value for client-side rendering only.
+	      // We can't use it server-side.
+	      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+	      globalId += 1;
+	      setDefaultId(`mui-${globalId}`);
+	    }
+	  }, [defaultId]);
+	  return id;
+	}
+
+	// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
+	const maybeReactUseId = React$1['useId'.toString()];
+	/**
+	 *
+	 * @example <div id={useId()} />
+	 * @param idOverride
+	 * @returns {string}
+	 */
+	function useId(idOverride) {
+	  if (maybeReactUseId !== undefined) {
+	    const reactId = maybeReactUseId();
+	    return idOverride != null ? idOverride : reactId;
+	  }
+	  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+	  return useGlobalId(idOverride);
+	}
+
+	function unsupportedProp(props, propName, componentName, location, propFullName) {
+	  {
+	    return null;
+	  }
+	}
+
+	function useControlled({
+	  controlled,
+	  default: defaultProp,
+	  name,
+	  state = 'value'
+	}) {
+	  // isControlled is ignored in the hook dependency lists as it should never change.
+	  const {
+	    current: isControlled
+	  } = reactExports.useRef(controlled !== undefined);
+	  const [valueState, setValue] = reactExports.useState(defaultProp);
+	  const value = isControlled ? controlled : valueState;
+	  const setValueIfUncontrolled = reactExports.useCallback(newValue => {
+	    if (!isControlled) {
+	      setValue(newValue);
+	    }
+	  }, []);
+	  return [value, setValueIfUncontrolled];
+	}
 
+	/**
+	 * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+	 * See RFC in https://github.com/reactjs/rfcs/pull/220
+	 */
 
-	        return "." + targetClassName;
-	      }
-	    });
+	function useEventCallback(fn) {
+	  const ref = reactExports.useRef(fn);
+	  useEnhancedEffect(() => {
+	    ref.current = fn;
+	  });
+	  return reactExports.useRef((...args) =>
+	  // @ts-expect-error hide `this`
+	  (0, ref.current)(...args)).current;
+	}
 
-	    Styled.withComponent = function (nextTag, nextOptions) {
-	      return createStyled(nextTag, _extends$4({}, options, nextOptions, {
-	        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
-	      })).apply(void 0, styles);
+	function useForkRef(...refs) {
+	  /**
+	   * This will create a new function if the refs passed to this hook change and are all defined.
+	   * This means react will call the old forkRef with `null` and the new forkRef
+	   * with the ref. Cleanup naturally emerges from this behavior.
+	   */
+	  return reactExports.useMemo(() => {
+	    if (refs.every(ref => ref == null)) {
+	      return null;
+	    }
+	    return instance => {
+	      refs.forEach(ref => {
+	        setRef(ref, instance);
+	      });
 	    };
+	    // eslint-disable-next-line react-hooks/exhaustive-deps
+	  }, refs);
+	}
 
-	    return Styled;
-	  };
+	let hadKeyboardEvent = true;
+	let hadFocusVisibleRecently = false;
+	let hadFocusVisibleRecentlyTimeout;
+	const inputTypesWhitelist = {
+	  text: true,
+	  search: true,
+	  url: true,
+	  tel: true,
+	  email: true,
+	  password: true,
+	  number: true,
+	  date: true,
+	  month: true,
+	  week: true,
+	  time: true,
+	  datetime: true,
+	  'datetime-local': true
 	};
 
-	var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
-	'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
-
-	var newStyled = createStyled$1.bind();
-	tags.forEach(function (tagName) {
-	  // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
-	  newStyled[tagName] = newStyled(tagName);
-	});
-
-	var jsxRuntime = {exports: {}};
+	/**
+	 * Computes whether the given element should automatically trigger the
+	 * `focus-visible` class being added, i.e. whether it should always match
+	 * `:focus-visible` when focused.
+	 * @param {Element} node
+	 * @returns {boolean}
+	 */
+	function focusTriggersKeyboardModality(node) {
+	  const {
+	    type,
+	    tagName
+	  } = node;
+	  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
+	    return true;
+	  }
+	  if (tagName === 'TEXTAREA' && !node.readOnly) {
+	    return true;
+	  }
+	  if (node.isContentEditable) {
+	    return true;
+	  }
+	  return false;
+	}
 
-	var reactJsxRuntime_production_min = {};
+	/**
+	 * Keep track of our keyboard modality state with `hadKeyboardEvent`.
+	 * If the most recent user interaction was via the keyboard;
+	 * and the key press did not include a meta, alt/option, or control key;
+	 * then the modality is keyboard. Otherwise, the modality is not keyboard.
+	 * @param {KeyboardEvent} event
+	 */
+	function handleKeyDown(event) {
+	  if (event.metaKey || event.altKey || event.ctrlKey) {
+	    return;
+	  }
+	  hadKeyboardEvent = true;
+	}
 
 	/**
-	 * @license React
-	 * react-jsx-runtime.production.min.js
-	 *
-	 * Copyright (c) Facebook, Inc. and its affiliates.
-	 *
-	 * This source code is licensed under the MIT license found in the
-	 * LICENSE file in the root directory of this source tree.
+	 * If at any point a user clicks with a pointing device, ensure that we change
+	 * the modality away from keyboard.
+	 * This avoids the situation where a user presses a key on an already focused
+	 * element, and then clicks on a different element, focusing it with a
+	 * pointing device, while we still think we're in keyboard modality.
 	 */
-	var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
-	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+	function handlePointerDown() {
+	  hadKeyboardEvent = false;
+	}
+	function handleVisibilityChange() {
+	  if (this.visibilityState === 'hidden') {
+	    // If the tab becomes active again, the browser will handle calling focus
+	    // on the element (Safari actually calls it twice).
+	    // If this tab change caused a blur on an element with focus-visible,
+	    // re-apply the class when the user switches back to the tab.
+	    if (hadFocusVisibleRecently) {
+	      hadKeyboardEvent = true;
+	    }
+	  }
+	}
+	function prepare(doc) {
+	  doc.addEventListener('keydown', handleKeyDown, true);
+	  doc.addEventListener('mousedown', handlePointerDown, true);
+	  doc.addEventListener('pointerdown', handlePointerDown, true);
+	  doc.addEventListener('touchstart', handlePointerDown, true);
+	  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+	}
+	function isFocusVisible(event) {
+	  const {
+	    target
+	  } = event;
+	  try {
+	    return target.matches(':focus-visible');
+	  } catch (error) {
+	    // Browsers not implementing :focus-visible will throw a SyntaxError.
+	    // We use our own heuristic for those browsers.
+	    // Rethrow might be better if it's not the expected error but do we really
+	    // want to crash if focus-visible malfunctioned?
+	  }
 
-	{
-	  jsxRuntime.exports = reactJsxRuntime_production_min;
+	  // No need for validFocusTarget check. The user does that by attaching it to
+	  // focusable events only.
+	  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
 	}
+	function useIsFocusVisible() {
+	  const ref = reactExports.useCallback(node => {
+	    if (node != null) {
+	      prepare(node.ownerDocument);
+	    }
+	  }, []);
+	  const isFocusVisibleRef = reactExports.useRef(false);
 
-	var jsxRuntimeExports = jsxRuntime.exports;
+	  /**
+	   * Should be called if a blur event is fired
+	   */
+	  function handleBlurVisible() {
+	    // checking against potential state variable does not suffice if we focus and blur synchronously.
+	    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
+	    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
+	    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
+	    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
+	    if (isFocusVisibleRef.current) {
+	      // To detect a tab/window switch, we look for a blur event followed
+	      // rapidly by a visibility change.
+	      // If we don't see a visibility change within 100ms, it's probably a
+	      // regular focus change.
+	      hadFocusVisibleRecently = true;
+	      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+	      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
+	        hadFocusVisibleRecently = false;
+	      }, 100);
+	      isFocusVisibleRef.current = false;
+	      return true;
+	    }
+	    return false;
+	  }
 
-	let cache$1;
-	if (typeof document === 'object') {
-	  cache$1 = createCache({
-	    key: 'css',
-	    prepend: true
-	  });
-	}
-	function StyledEngineProvider(props) {
-	  const {
-	    injectFirst,
-	    children
-	  } = props;
-	  return injectFirst && cache$1 ? /*#__PURE__*/jsxRuntimeExports.jsx(CacheProvider, {
-	    value: cache$1,
-	    children: children
-	  }) : children;
+	  /**
+	   * Should be called if a blur event is fired
+	   */
+	  function handleFocusVisible(event) {
+	    if (isFocusVisible(event)) {
+	      isFocusVisibleRef.current = true;
+	      return true;
+	    }
+	    return false;
+	  }
+	  return {
+	    isFocusVisibleRef,
+	    onFocus: handleFocusVisible,
+	    onBlur: handleBlurVisible,
+	    ref
+	  };
 	}
 
-	function isEmpty$4(obj) {
-	  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+	// A change of the browser zoom change the scrollbar size.
+	// Credit https://github.com/twbs/bootstrap/blob/488fd8afc535ca3a6ad4dc581f5e89217b6a36ac/js/src/util/scrollbar.js#L14-L18
+	function getScrollbarSize$1(doc) {
+	  // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+	  const documentWidth = doc.documentElement.clientWidth;
+	  return Math.abs(window.innerWidth - documentWidth);
 	}
-	function GlobalStyles$2(props) {
-	  const {
-	    styles,
-	    defaultTheme = {}
-	  } = props;
-	  const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty$4(themeInput) ? defaultTheme : themeInput) : styles;
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(Global, {
-	    styles: globalStyles
+
+	const usePreviousProps = value => {
+	  const ref = reactExports.useRef({});
+	  reactExports.useEffect(() => {
+	    ref.current = value;
 	  });
-	}
+	  return ref.current;
+	};
 
 	/**
-	 * @mui/styled-engine v5.15.0
-	 *
-	 * @license MIT
-	 * This source code is licensed under the MIT license found in the
-	 * LICENSE file in the root directory of this source tree.
+	 * Add keys, values of `defaultProps` that does not exist in `props`
+	 * @param {object} defaultProps
+	 * @param {object} props
+	 * @returns {object} resolved props
 	 */
-	function styled$3(tag, options) {
-	  const stylesFactory = newStyled(tag, options);
-	  return stylesFactory;
+	function resolveProps(defaultProps, props) {
+	  const output = _extends$3({}, props);
+	  Object.keys(defaultProps).forEach(propName => {
+	    if (propName.toString().match(/^(components|slots)$/)) {
+	      output[propName] = _extends$3({}, defaultProps[propName], output[propName]);
+	    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
+	      const defaultSlotProps = defaultProps[propName] || {};
+	      const slotProps = props[propName];
+	      output[propName] = {};
+	      if (!slotProps || !Object.keys(slotProps)) {
+	        // Reduce the iteration if the slot props is empty
+	        output[propName] = defaultSlotProps;
+	      } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
+	        // Reduce the iteration if the default slot props is empty
+	        output[propName] = slotProps;
+	      } else {
+	        output[propName] = _extends$3({}, slotProps);
+	        Object.keys(defaultSlotProps).forEach(slotPropName => {
+	          output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
+	        });
+	      }
+	    } else if (output[propName] === undefined) {
+	      output[propName] = defaultProps[propName];
+	    }
+	  });
+	  return output;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	const internal_processStyles = (tag, processor) => {
-	  // Emotion attaches all the styles as `__emotion_styles`.
-	  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
-	  if (Array.isArray(tag.__emotion_styles)) {
-	    tag.__emotion_styles = processor(tag.__emotion_styles);
-	  }
-	};
-
-	function _extends$3() {
-	  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
-	    for (var i = 1; i < arguments.length; i++) {
-	      var source = arguments[i];
-	      for (var key in source) {
-	        if (Object.prototype.hasOwnProperty.call(source, key)) {
-	          target[key] = source[key];
+	function composeClasses(slots, getUtilityClass, classes = undefined) {
+	  const output = {};
+	  Object.keys(slots).forEach(
+	  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
+	  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
+	  slot => {
+	    output[slot] = slots[slot].reduce((acc, key) => {
+	      if (key) {
+	        const utilityClass = getUtilityClass(key);
+	        if (utilityClass !== '') {
+	          acc.push(utilityClass);
+	        }
+	        if (classes && classes[key]) {
+	          acc.push(classes[key]);
 	        }
 	      }
+	      return acc;
+	    }, []).join(' ');
+	  });
+	  return output;
+	}
+
+	const defaultGenerator = componentName => componentName;
+	const createClassNameGenerator = () => {
+	  let generate = defaultGenerator;
+	  return {
+	    configure(generator) {
+	      generate = generator;
+	    },
+	    generate(componentName) {
+	      return generate(componentName);
+	    },
+	    reset() {
+	      generate = defaultGenerator;
 	    }
-	    return target;
 	  };
-	  return _extends$3.apply(this, arguments);
+	};
+	const ClassNameGenerator = createClassNameGenerator();
+
+	// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
+	// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
+
+	const globalStateClassesMapping = {
+	  active: 'active',
+	  checked: 'checked',
+	  completed: 'completed',
+	  disabled: 'disabled',
+	  error: 'error',
+	  expanded: 'expanded',
+	  focused: 'focused',
+	  focusVisible: 'focusVisible',
+	  open: 'open',
+	  readOnly: 'readOnly',
+	  required: 'required',
+	  selected: 'selected'
+	};
+	function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
+	  const globalStateClass = globalStateClassesMapping[slot];
+	  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 	}
 
-	function _objectWithoutPropertiesLoose$2(source, excluded) {
-	  if (source == null) return {};
-	  var target = {};
-	  var sourceKeys = Object.keys(source);
-	  var key, i;
-	  for (i = 0; i < sourceKeys.length; i++) {
-	    key = sourceKeys[i];
-	    if (excluded.indexOf(key) >= 0) continue;
-	    target[key] = source[key];
-	  }
-	  return target;
+	function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
+	  const result = {};
+	  slots.forEach(slot => {
+	    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+	  });
+	  return result;
 	}
 
 	const _excluded$S = ["values", "unit", "step"];
@@ -7008,7 +7225,7 @@
 	  // Sort in ascending order
 	  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
 	  return breakpointsAsArray.reduce((acc, obj) => {
-	    return _extends$3({}, acc, {
+	    return _extends$4({}, acc, {
 	      [obj.key]: obj.val
 	    });
 	  }, {});
@@ -7065,7 +7282,7 @@
 	    }
 	    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
 	  }
-	  return _extends$3({
+	  return _extends$4({
 	    keys,
 	    values: sortedValues,
 	    up,
@@ -8061,7 +8278,6 @@
 	}
 	const styleFunctionSx = unstable_createStyleFunctionSx();
 	styleFunctionSx.filterProps = ['sx'];
-	var styleFunctionSx$1 = styleFunctionSx;
 
 	const _excluded$R = ["breakpoints", "palette", "spacing", "shape"];
 	function createTheme$1(options = {}, ...args) {
@@ -8079,16 +8295,16 @@
 	    direction: 'ltr',
 	    components: {},
 	    // Inject component definitions.
-	    palette: _extends$3({
+	    palette: _extends$4({
 	      mode: 'light'
 	    }, paletteInput),
 	    spacing,
-	    shape: _extends$3({}, shape$1, shapeInput)
+	    shape: _extends$4({}, shape$1, shapeInput)
 	  }, other);
 	  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-	  muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+	  muiTheme.unstable_sxConfig = _extends$4({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
 	  muiTheme.unstable_sx = function sx(props) {
-	    return styleFunctionSx$1({
+	    return styleFunctionSx({
 	      sx: props,
 	      theme: this
 	    });
@@ -8156,12 +8372,12 @@
 	      if (!isPlainObject(result)) {
 	        return systemProps;
 	      }
-	      return _extends$3({}, systemProps, result);
+	      return _extends$4({}, systemProps, result);
 	    };
 	  } else {
-	    finalSx = _extends$3({}, systemProps, inSx);
+	    finalSx = _extends$4({}, systemProps, inSx);
 	  }
-	  return _extends$3({}, otherProps, {
+	  return _extends$4({}, otherProps, {
 	    sx: finalSx
 	  });
 	}
@@ -8176,9 +8392,9 @@
 	    defaultClassName = 'MuiBox-root',
 	    generateClassName
 	  } = options;
-	  const BoxRoot = styled$3('div', {
+	  const BoxRoot = styled$2('div', {
 	    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-	  })(styleFunctionSx$1);
+	  })(styleFunctionSx);
 	  const Box = /*#__PURE__*/reactExports.forwardRef(function Box(inProps, ref) {
 	    const theme = useTheme$3(defaultTheme);
 	    const _extendSxProp = extendSxProp(inProps),
@@ -8187,7 +8403,7 @@
 	        component = 'div'
 	      } = _extendSxProp,
 	      other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$P);
-	    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$3({
+	    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$4({
 	      as: component,
 	      ref: ref,
 	      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
@@ -8243,10 +8459,17 @@
 	  return null;
 	};
 	const transformVariants = variants => {
+	  let numOfCallbacks = 0;
 	  const variantsStyles = {};
 	  if (variants) {
 	    variants.forEach(definition => {
-	      const key = propsToClassKey(definition.props);
+	      let key = '';
+	      if (typeof definition.props === 'function') {
+	        key = `callback${numOfCallbacks}`;
+	        numOfCallbacks += 1;
+	      } else {
+	        key = propsToClassKey(definition.props);
+	      }
 	      variantsStyles[key] = definition.style;
 	    });
 	  }
@@ -8264,16 +8487,29 @@
 	    ownerState = {}
 	  } = props;
 	  const variantsStyles = [];
+	  let numOfCallbacks = 0;
 	  if (variants) {
 	    variants.forEach(variant => {
 	      let isMatch = true;
-	      Object.keys(variant.props).forEach(key => {
-	        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-	          isMatch = false;
-	        }
-	      });
+	      if (typeof variant.props === 'function') {
+	        const propsToCheck = _extends$4({}, props, ownerState);
+	        isMatch = variant.props(propsToCheck);
+	      } else {
+	        Object.keys(variant.props).forEach(key => {
+	          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
+	            isMatch = false;
+	          }
+	        });
+	      }
 	      if (isMatch) {
-	        variantsStyles.push(styles[propsToClassKey(variant.props)]);
+	        if (typeof variant.props === 'function') {
+	          variantsStyles.push(styles[`callback${numOfCallbacks}`]);
+	        } else {
+	          variantsStyles.push(styles[propsToClassKey(variant.props)]);
+	        }
+	      }
+	      if (typeof variant.props === 'function') {
+	        numOfCallbacks += 1;
 	      }
 	    });
 	  }
@@ -8315,8 +8551,8 @@
 	  defaultTheme,
 	  themeId
 	}) => {
-	  const resolvedStyles = styledArg(_extends$3({}, props, {
-	    theme: resolveTheme(_extends$3({}, props, {
+	  const resolvedStyles = styledArg(_extends$4({}, props, {
+	    theme: resolveTheme(_extends$4({}, props, {
 	      defaultTheme,
 	      themeId
 	    }))
@@ -8340,8 +8576,8 @@
 	    slotShouldForwardProp = shouldForwardProp
 	  } = input;
 	  const systemSx = props => {
-	    return styleFunctionSx$1(_extends$3({}, props, {
-	      theme: resolveTheme(_extends$3({}, props, {
+	    return styleFunctionSx(_extends$4({}, props, {
+	      theme: resolveTheme(_extends$4({}, props, {
 	        defaultTheme,
 	        themeId
 	      }))
@@ -8382,7 +8618,7 @@
 	      // for string (html) tag, preserve the behavior in emotion & styled-components.
 	      shouldForwardPropOption = undefined;
 	    }
-	    const defaultStyledResolver = styled$3(tag, _extends$3({
+	    const defaultStyledResolver = styled$2(tag, _extends$4({
 	      shouldForwardProp: shouldForwardPropOption,
 	      label
 	    }, options));
@@ -8448,7 +8684,7 @@
 	      }
 	      if (componentName && overridesResolver) {
 	        expressionsWithDefaultTheme.push(props => {
-	          const theme = resolveTheme(_extends$3({}, props, {
+	          const theme = resolveTheme(_extends$4({}, props, {
 	            defaultTheme,
 	            themeId
 	          }));
@@ -8456,7 +8692,7 @@
 	          if (styleOverrides) {
 	            const resolvedStyleOverrides = {};
 	            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-	              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$3({}, props, {
+	              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$4({}, props, {
 	                theme
 	              })) : slotStyle;
 	            });
@@ -8467,7 +8703,7 @@
 	      }
 	      if (componentName && !skipVariantsResolver) {
 	        expressionsWithDefaultTheme.push(props => {
-	          const theme = resolveTheme(_extends$3({}, props, {
+	          const theme = resolveTheme(_extends$4({}, props, {
 	            defaultTheme,
 	            themeId
 	          }));
@@ -8497,8 +8733,7 @@
 	  };
 	}
 
-	const styled$2 = createStyled();
-	var systemStyled = styled$2;
+	const styled$1 = createStyled();
 
 	function getThemeProps(params) {
 	  const {
@@ -8820,7 +9055,7 @@
 	    const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
 	    if (typeof localTheme === 'function') {
 	      const mergedTheme = localTheme(resolvedTheme);
-	      const result = themeId ? _extends$3({}, upperTheme, {
+	      const result = themeId ? _extends$4({}, upperTheme, {
 	        [themeId]: mergedTheme
 	      }) : mergedTheme;
 	      // must return a function for the private theme to NOT merge with the upper theme.
@@ -8830,9 +9065,9 @@
 	      }
 	      return result;
 	    }
-	    return themeId ? _extends$3({}, upperTheme, {
+	    return themeId ? _extends$4({}, upperTheme, {
 	      [themeId]: localTheme
-	    }) : _extends$3({}, upperTheme, localTheme);
+	    }) : _extends$4({}, upperTheme, localTheme);
 	  }, [themeId, upperTheme, localTheme, isPrivate]);
 	}
 
@@ -8865,7 +9100,7 @@
 	const _excluded$M = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 	const defaultTheme$3 = createTheme$1();
 	// widening Theme to any so that the consumer can own the theme structure.
-	const defaultCreateStyledComponent = systemStyled('div', {
+	const defaultCreateStyledComponent = styled$1('div', {
 	  name: 'MuiStack',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => styles.root
@@ -8909,7 +9144,7 @@
 	  ownerState,
 	  theme
 	}) => {
-	  let styles = _extends$3({
+	  let styles = _extends$4({
 	    display: 'flex',
 	    flexDirection: 'column'
 	  }, handleBreakpoints({
@@ -9002,7 +9237,7 @@
 	      useFlexGap
 	    };
 	    const classes = useUtilityClasses();
-	    return /*#__PURE__*/jsxRuntimeExports.jsx(StackRoot, _extends$3({
+	    return /*#__PURE__*/jsxRuntimeExports.jsx(StackRoot, _extends$4({
 	      as: component,
 	      ownerState: ownerState,
 	      ref: ref,
@@ -9026,7 +9261,7 @@
 	      styleOverrides = {}
 	    } = inputTheme,
 	    other = _objectWithoutPropertiesLoose$3(inputTheme, _excluded$L);
-	  const theme = _extends$5({}, other, {
+	  const theme = _extends$6({}, other, {
 	    components: {}
 	  });
 
@@ -9060,13 +9295,13 @@
 	  // theme.mixins.gutters
 	  const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
 	  const spacing = theme.spacing;
-	  theme.mixins = _extends$5({
+	  theme.mixins = _extends$6({
 	    gutters: (styles = {}) => {
-	      return _extends$5({
+	      return _extends$6({
 	        paddingLeft: spacing(2),
 	        paddingRight: spacing(2)
 	      }, styles, {
-	        [breakpoints.up('sm')]: _extends$5({
+	        [breakpoints.up('sm')]: _extends$6({
 	          paddingLeft: spacing(3),
 	          paddingRight: spacing(3)
 	        }, styles[breakpoints.up('sm')])
@@ -9079,7 +9314,7 @@
 	    } = palette,
 	    paletteRest = _objectWithoutPropertiesLoose$3(palette, _excluded2$4);
 	  const finalMode = modeInput || typeInput || 'light';
-	  theme.palette = _extends$5({
+	  theme.palette = _extends$6({
 	    // theme.palette.text.hint
 	    text: {
 	      hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
@@ -9091,7 +9326,7 @@
 	}
 
 	function createMixins(breakpoints, mixins) {
-	  return _extends$5({
+	  return _extends$6({
 	    toolbar: {
 	      minHeight: 56,
 	      [breakpoints.up('xs')]: {
@@ -9429,7 +9664,7 @@
 	    lightShade = 300,
 	    darkShade = 700
 	  }) => {
-	    color = _extends$5({}, color);
+	    color = _extends$6({}, color);
 	    if (!color.main && color[mainShade]) {
 	      color.main = color[mainShade];
 	    }
@@ -9450,9 +9685,9 @@
 	    dark: dark$1,
 	    light: light$1
 	  };
-	  const paletteOutput = deepmerge(_extends$5({
+	  const paletteOutput = deepmerge(_extends$6({
 	    // A collection of common colors.
-	    common: _extends$5({}, common$1),
+	    common: _extends$6({}, common$1),
 	    // prevent mutable object.
 	    // The palette mode, can be light or dark.
 	    mode,
@@ -9540,7 +9775,7 @@
 	    other = _objectWithoutPropertiesLoose$3(_ref, _excluded$J);
 	  const coef = fontSize / 14;
 	  const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-	  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$5({
+	  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$6({
 	    fontFamily,
 	    fontWeight,
 	    fontSize: pxToRem(size),
@@ -9572,7 +9807,7 @@
 	      letterSpacing: 'inherit'
 	    }
 	  };
-	  return deepmerge(_extends$5({
+	  return deepmerge(_extends$6({
 	    htmlFontSize,
 	    pxToRem,
 	    fontFamily,
@@ -9595,7 +9830,6 @@
 
 	// Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
 	const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
-	var shadows$1 = shadows;
 
 	const _excluded$I = ["duration", "easing", "delay"];
 	// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
@@ -9640,8 +9874,8 @@
 	  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 	}
 	function createTransitions(inputTransitions) {
-	  const mergedEasing = _extends$5({}, easing, inputTransitions.easing);
-	  const mergedDuration = _extends$5({}, duration, inputTransitions.duration);
+	  const mergedEasing = _extends$6({}, easing, inputTransitions.easing);
+	  const mergedDuration = _extends$6({}, duration, inputTransitions.duration);
 	  const create = (props = ['all'], options = {}) => {
 	    const {
 	        duration: durationOption = mergedDuration.standard,
@@ -9651,7 +9885,7 @@
 	      _objectWithoutPropertiesLoose$3(options, _excluded$I);
 	    return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
 	  };
-	  return _extends$5({
+	  return _extends$6({
 	    getAutoHeightDuration,
 	    create
 	  }, inputTransitions, {
@@ -9692,16 +9926,16 @@
 	    mixins: createMixins(systemTheme.breakpoints, mixinsInput),
 	    palette,
 	    // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
-	    shadows: shadows$1.slice(),
+	    shadows: shadows.slice(),
 	    typography: createTypography(palette, typographyInput),
 	    transitions: createTransitions(transitionsInput),
-	    zIndex: _extends$5({}, zIndex$1)
+	    zIndex: _extends$6({}, zIndex$1)
 	  });
 	  muiTheme = deepmerge(muiTheme, other);
 	  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-	  muiTheme.unstable_sxConfig = _extends$5({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+	  muiTheme.unstable_sxConfig = _extends$6({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
 	  muiTheme.unstable_sx = function sx(props) {
-	    return styleFunctionSx$1({
+	    return styleFunctionSx({
 	      sx: props,
 	      theme: this
 	    });
@@ -9735,7 +9969,6 @@
 	  defaultTheme: defaultTheme$2,
 	  rootShouldForwardProp
 	});
-	var styled$1 = styled;
 
 	const _excluded$G = ["theme"];
 	function ThemeProvider(_ref) {
@@ -9744,7 +9977,7 @@
 	    } = _ref,
 	    props = _objectWithoutPropertiesLoose$3(_ref, _excluded$G);
 	  const scopedTheme = themeInput[THEME_ID];
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$5({}, props, {
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$6({}, props, {
 	    themeId: scopedTheme ? THEME_ID : undefined,
 	    theme: scopedTheme || themeInput
 	  }));
@@ -10565,7 +10798,6 @@
 	}
 
 	const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
-	var touchRippleClasses$1 = touchRippleClasses;
 
 	const _excluded$F = ["center", "classes", "className"];
 	let _$1 = t => t,
@@ -10608,7 +10840,7 @@
     transform: scale(1);
   }
 `));
-	const TouchRippleRoot = styled$1('span', {
+	const TouchRippleRoot = styled('span', {
 	  name: 'MuiTouchRipple',
 	  slot: 'Root'
 	})({
@@ -10625,7 +10857,7 @@
 
 	// 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.
-	const TouchRippleRipple = styled$1(Ripple, {
+	const TouchRippleRipple = styled(Ripple, {
 	  name: 'MuiTouchRipple',
 	  slot: 'Ripple'
 	})(_t4$1 || (_t4$1 = _$1`
@@ -10671,13 +10903,13 @@
     animation-iteration-count: infinite;
     animation-delay: 200ms;
   }
-`), touchRippleClasses$1.rippleVisible, enterKeyframe, DURATION, ({
+`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({
 	  theme
-	}) => theme.transitions.easing.easeInOut, touchRippleClasses$1.ripplePulsate, ({
+	}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({
 	  theme
-	}) => theme.transitions.duration.shorter, touchRippleClasses$1.child, touchRippleClasses$1.childLeaving, exitKeyframe, DURATION, ({
+	}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({
 	  theme
-	}) => theme.transitions.easing.easeInOut, touchRippleClasses$1.childPulsate, pulsateKeyframe, ({
+	}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({
 	  theme
 	}) => theme.transitions.easing.easeInOut);
 
@@ -10733,12 +10965,12 @@
 	    } = params;
 	    setRipples(oldRipples => [...oldRipples, /*#__PURE__*/jsxRuntimeExports.jsx(TouchRippleRipple, {
 	      classes: {
-	        ripple: clsx(classes.ripple, touchRippleClasses$1.ripple),
-	        rippleVisible: clsx(classes.rippleVisible, touchRippleClasses$1.rippleVisible),
-	        ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses$1.ripplePulsate),
-	        child: clsx(classes.child, touchRippleClasses$1.child),
-	        childLeaving: clsx(classes.childLeaving, touchRippleClasses$1.childLeaving),
-	        childPulsate: clsx(classes.childPulsate, touchRippleClasses$1.childPulsate)
+	        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,
@@ -10864,8 +11096,8 @@
 	    start,
 	    stop
 	  }), [pulsate, start, stop]);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(TouchRippleRoot, _extends$5({
-	    className: clsx(touchRippleClasses$1.root, classes.root, className),
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(TouchRippleRoot, _extends$6({
+	    className: clsx(touchRippleClasses.root, classes.root, className),
 	    ref: container
 	  }, other, {
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionGroup$1, {
@@ -10881,7 +11113,6 @@
 	  return generateUtilityClass('MuiButtonBase', slot);
 	}
 	const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
-	var buttonBaseClasses$1 = buttonBaseClasses;
 
 	const _excluded$E = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 	const useUtilityClasses$r = ownerState => {
@@ -10900,7 +11131,7 @@
 	  }
 	  return composedClasses;
 	};
-	const ButtonBaseRoot = styled$1('button', {
+	const ButtonBaseRoot = styled('button', {
 	  name: 'MuiButtonBase',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => styles.root
@@ -10934,7 +11165,7 @@
 	  '&::-moz-focus-inner': {
 	    borderStyle: 'none' // Remove Firefox dotted outline.
 	  },
-	  [`&.${buttonBaseClasses$1.disabled}`]: {
+	  [`&.${buttonBaseClasses.disabled}`]: {
 	    pointerEvents: 'none',
 	    // Disable link interactions
 	    cursor: 'default'
@@ -11133,7 +11364,7 @@
 	    }
 	  }
 	  const handleRef = useForkRef(ref, focusVisibleRef, buttonRef);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    centerRipple,
 	    component,
 	    disabled,
@@ -11144,7 +11375,7 @@
 	    focusVisible
 	  });
 	  const classes = useUtilityClasses$r(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonBaseRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonBaseRoot, _extends$6({
 	    as: ComponentProp,
 	    className: clsx(classes.root, className),
 	    ownerState: ownerState,
@@ -11168,7 +11399,7 @@
 	    children: [children, enableTouchRipple ?
 	    
 	    /* TouchRipple is only needed client-side, x2 boost on the server. */
-	    jsxRuntimeExports.jsx(TouchRipple$1, _extends$5({
+	    jsxRuntimeExports.jsx(TouchRipple$1, _extends$6({
 	      ref: handleRippleRef,
 	      center: centerRipple
 	    }, TouchRippleProps)) : null]
@@ -11211,9 +11442,9 @@
 	    endIcon: ['endIcon', `iconSize${capitalize(size)}`]
 	  };
 	  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
-	  return _extends$5({}, classes, composedClasses);
+	  return _extends$6({}, classes, composedClasses);
 	};
-	const commonIconStyles = ownerState => _extends$5({}, ownerState.size === 'small' && {
+	const commonIconStyles = ownerState => _extends$6({}, ownerState.size === 'small' && {
 	  '& > *:nth-of-type(1)': {
 	    fontSize: 18
 	  }
@@ -11226,7 +11457,7 @@
 	    fontSize: 22
 	  }
 	});
-	const ButtonRoot = styled$1(ButtonBase$1, {
+	const ButtonRoot = styled(ButtonBase$1, {
 	  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
 	  name: 'MuiButton',
 	  slot: 'Root',
@@ -11243,14 +11474,14 @@
 	  var _theme$palette$getCon, _theme$palette;
 	  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
 	  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
-	  return _extends$5({}, theme.typography.button, {
+	  return _extends$6({}, theme.typography.button, {
 	    minWidth: 64,
 	    padding: '6px 16px',
 	    borderRadius: (theme.vars || theme).shape.borderRadius,
 	    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
 	      duration: theme.transitions.duration.short
 	    }),
-	    '&:hover': _extends$5({
+	    '&:hover': _extends$6({
 	      textDecoration: 'none',
 	      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
 	      // Reset on touch devices, it doesn't add specificity
@@ -11285,13 +11516,13 @@
 	        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
 	      }
 	    }),
-	    '&:active': _extends$5({}, ownerState.variant === 'contained' && {
+	    '&:active': _extends$6({}, ownerState.variant === 'contained' && {
 	      boxShadow: (theme.vars || theme).shadows[8]
 	    }),
-	    [`&.${buttonClasses$1.focusVisible}`]: _extends$5({}, ownerState.variant === 'contained' && {
+	    [`&.${buttonClasses$1.focusVisible}`]: _extends$6({}, ownerState.variant === 'contained' && {
 	      boxShadow: (theme.vars || theme).shadows[6]
 	    }),
-	    [`&.${buttonClasses$1.disabled}`]: _extends$5({
+	    [`&.${buttonClasses$1.disabled}`]: _extends$6({
 	      color: (theme.vars || theme).palette.action.disabled
 	    }, ownerState.variant === 'outlined' && {
 	      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
@@ -11360,7 +11591,7 @@
 	    boxShadow: 'none'
 	  }
 	});
-	const ButtonStartIcon = styled$1('span', {
+	const ButtonStartIcon = styled('span', {
 	  name: 'MuiButton',
 	  slot: 'StartIcon',
 	  overridesResolver: (props, styles) => {
@@ -11371,14 +11602,14 @@
 	  }
 	})(({
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  display: 'inherit',
 	  marginRight: 8,
 	  marginLeft: -4
 	}, ownerState.size === 'small' && {
 	  marginLeft: -2
 	}, commonIconStyles(ownerState)));
-	const ButtonEndIcon = styled$1('span', {
+	const ButtonEndIcon = styled('span', {
 	  name: 'MuiButton',
 	  slot: 'EndIcon',
 	  overridesResolver: (props, styles) => {
@@ -11389,7 +11620,7 @@
 	  }
 	})(({
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  display: 'inherit',
 	  marginRight: -4,
 	  marginLeft: 8
@@ -11422,7 +11653,7 @@
 	      variant = 'text'
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$D);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    color,
 	    component,
 	    disabled,
@@ -11445,7 +11676,7 @@
 	    children: endIconProp
 	  });
 	  const positionClassName = buttonGroupButtonContextPositionClassName || '';
-	  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, _extends$6({
 	    ownerState: ownerState,
 	    className: clsx(contextProps.className, classes.root, className, positionClassName),
 	    component: component,
@@ -11793,8 +12024,8 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "5ec7" ;
-	ClassNameGenerator$1.configure(componentName => {
+	const NEBULA_VERSION_HASH = "b12a" ;
+	ClassNameGenerator.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
 
@@ -12025,7 +12256,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.1" );
+	  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.2" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -12109,7 +12340,7 @@
 	  };
 	  return composeClasses(slots, getSvgIconUtilityClass, classes);
 	};
-	const SvgIconRoot = styled$1('svg', {
+	const SvgIconRoot = styled('svg', {
 	  name: 'MuiSvgIcon',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -12167,7 +12398,7 @@
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$C);
 	  const hasSvgAsChild = /*#__PURE__*/reactExports.isValidElement(children) && children.type === 'svg';
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    color,
 	    component,
 	    fontSize,
@@ -12181,7 +12412,7 @@
 	    more.viewBox = viewBox;
 	  }
 	  const classes = useUtilityClasses$p(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$6({
 	    as: component,
 	    className: clsx(classes.root, className),
 	    focusable: "false",
@@ -12197,18 +12428,17 @@
 	  }));
 	});
 	SvgIcon$1.muiName = 'SvgIcon';
-	var SvgIcon$2 = SvgIcon$1;
 
 	function createSvgIcon$1(path, displayName) {
 	  function Component(props, ref) {
-	    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$2, _extends$5({
+	    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, _extends$6({
 	      "data-testid": `${displayName}Icon`,
 	      ref: ref
 	    }, props, {
 	      children: path
 	    }));
 	  }
-	  Component.muiName = SvgIcon$2.muiName;
+	  Component.muiName = SvgIcon$1.muiName;
 	  return /*#__PURE__*/reactExports.memo( /*#__PURE__*/reactExports.forwardRef(Component));
 	}
 
@@ -12216,7 +12446,7 @@
 	// eslint-disable-next-line @typescript-eslint/naming-convention
 	const unstable_ClassNameGenerator = {
 	  configure: generator => {
-	    ClassNameGenerator$1.configure(generator);
+	    ClassNameGenerator.configure(generator);
 	  }
 	};
 
@@ -12233,7 +12463,7 @@
 		requirePropFactory: requirePropFactory,
 		setRef: setRef,
 		unstable_ClassNameGenerator: unstable_ClassNameGenerator,
-		unstable_useEnhancedEffect: useEnhancedEffect$1,
+		unstable_useEnhancedEffect: useEnhancedEffect,
 		unstable_useId: useId,
 		unsupportedProp: unsupportedProp,
 		useControlled: useControlled,
@@ -12275,7 +12505,7 @@
 	  };
 	  return composeClasses(slots, getPaperUtilityClass, classes);
 	};
-	const PaperRoot = styled$1('div', {
+	const PaperRoot = styled('div', {
 	  name: 'MuiPaper',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -12289,7 +12519,7 @@
 	  ownerState
 	}) => {
 	  var _theme$vars$overlays;
-	  return _extends$5({
+	  return _extends$6({
 	    backgroundColor: (theme.vars || theme).palette.background.paper,
 	    color: (theme.vars || theme).palette.text.primary,
 	    transition: theme.transitions.create('box-shadow')
@@ -12297,7 +12527,7 @@
 	    borderRadius: theme.shape.borderRadius
 	  }, ownerState.variant === 'outlined' && {
 	    border: `1px solid ${(theme.vars || theme).palette.divider}`
-	  }, ownerState.variant === 'elevation' && _extends$5({
+	  }, ownerState.variant === 'elevation' && _extends$6({
 	    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
 	  }, !theme.vars && theme.palette.mode === 'dark' && {
 	    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha$1(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha$1(ownerState.elevation))})`
@@ -12318,14 +12548,14 @@
 	      variant = 'elevation'
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$B);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    component,
 	    elevation,
 	    square,
 	    variant
 	  });
 	  const classes = useUtilityClasses$o(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(PaperRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(PaperRoot, _extends$6({
 	    as: component,
 	    ownerState: ownerState,
 	    className: clsx(classes.root, className),
@@ -12338,7 +12568,6 @@
 	  return generateUtilityClass('MuiIconButton', slot);
 	}
 	const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
-	var iconButtonClasses$1 = iconButtonClasses;
 
 	const _excluded$A = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 	const useUtilityClasses$n = ownerState => {
@@ -12354,7 +12583,7 @@
 	  };
 	  return composeClasses(slots, getIconButtonUtilityClass, classes);
 	};
-	const IconButtonRoot = styled$1(ButtonBase$1, {
+	const IconButtonRoot = styled(ButtonBase$1, {
 	  name: 'MuiIconButton',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -12366,7 +12595,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  textAlign: 'center',
 	  flex: '0 0 auto',
 	  fontSize: theme.typography.pxToRem(24),
@@ -12396,12 +12625,12 @@
 	}) => {
 	  var _palette;
 	  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
-	  return _extends$5({}, ownerState.color === 'inherit' && {
+	  return _extends$6({}, ownerState.color === 'inherit' && {
 	    color: 'inherit'
-	  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends$5({
+	  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends$6({
 	    color: palette == null ? void 0 : palette.main
 	  }, !ownerState.disableRipple && {
-	    '&:hover': _extends$5({}, palette && {
+	    '&:hover': _extends$6({}, palette && {
 	      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
 	    }, {
 	      // Reset on touch devices, it doesn't add specificity
@@ -12416,7 +12645,7 @@
 	    padding: 12,
 	    fontSize: theme.typography.pxToRem(28)
 	  }, {
-	    [`&.${iconButtonClasses$1.disabled}`]: {
+	    [`&.${iconButtonClasses.disabled}`]: {
 	      backgroundColor: 'transparent',
 	      color: (theme.vars || theme).palette.action.disabled
 	    }
@@ -12442,7 +12671,7 @@
 	      size = 'medium'
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$A);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    edge,
 	    color,
 	    disabled,
@@ -12450,7 +12679,7 @@
 	    size
 	  });
 	  const classes = useUtilityClasses$n(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(IconButtonRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(IconButtonRoot, _extends$6({
 	    className: clsx(classes.root, className),
 	    centerRipple: true,
 	    focusRipple: !disableFocusRipple,
@@ -12483,7 +12712,7 @@
 	  };
 	  return composeClasses(slots, getTypographyUtilityClass, classes);
 	};
-	const TypographyRoot = styled$1('span', {
+	const TypographyRoot = styled('span', {
 	  name: 'MuiTypography',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -12495,7 +12724,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  margin: 0
 	}, ownerState.variant === 'inherit' && {
 	  // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
@@ -12542,7 +12771,7 @@
 	    name: 'MuiTypography'
 	  });
 	  const color = transformDeprecatedColors(themeProps.color);
-	  const props = extendSxProp(_extends$5({}, themeProps, {
+	  const props = extendSxProp(_extends$6({}, themeProps, {
 	    color
 	  }));
 	  const {
@@ -12556,7 +12785,7 @@
 	      variantMapping = defaultVariantMapping
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    align,
 	    color,
 	    className,
@@ -12569,7 +12798,7 @@
 	  });
 	  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
 	  const classes = useUtilityClasses$m(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(TypographyRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(TypographyRoot, _extends$6({
 	    as: Component,
 	    ref: ref,
 	    ownerState: ownerState,
@@ -12821,7 +13050,7 @@
 	    max: maxProp = 99,
 	    showZero = false
 	  } = parameters;
-	  const prevProps = usePreviousProps$1({
+	  const prevProps = usePreviousProps({
 	    badgeContent: badgeContentProp,
 	    max: maxProp
 	  });
@@ -14929,12 +15158,12 @@
 	  const [mountNode, setMountNode] = reactExports.useState(null);
 	  // @ts-expect-error TODO upstream fix
 	  const handleRef = useForkRef( /*#__PURE__*/reactExports.isValidElement(children) ? children.ref : null, forwardedRef);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    if (!disablePortal) {
 	      setMountNode(getContainer$1(container) || document.body);
 	    }
 	  }, [container, disablePortal]);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    if (mountNode && !disablePortal) {
 	      setRef(forwardedRef, mountNode);
 	      return () => {
@@ -15020,7 +15249,7 @@
 	  const popperRef = reactExports.useRef(null);
 	  const handlePopperRef = useForkRef(popperRef, popperRefProp);
 	  const handlePopperRefRef = reactExports.useRef(handlePopperRef);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    handlePopperRefRef.current = handlePopperRef;
 	  }, [handlePopperRef]);
 	  reactExports.useImperativeHandle(popperRefProp, () => popperRef.current, []);
@@ -15041,7 +15270,7 @@
 	      setResolvedAnchorElement(resolveAnchorEl$1(anchorEl));
 	    }
 	  }, [anchorEl]);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    if (!resolvedAnchorElement || !open) {
 	      return undefined;
 	    }
@@ -15722,7 +15951,7 @@
 	    }
 	    setState(prevState => updateState(prevState, newState));
 	  }, [getUpdatedState]);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    const syncHeightWithFlushSync = () => {
 	      const newState = getUpdatedState();
 	      if (isEmpty$1(newState)) {
@@ -15765,7 +15994,7 @@
 	      }
 	    };
 	  }, [getUpdatedState]);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    syncHeight();
 	  });
 	  reactExports.useEffect(() => {
@@ -15809,7 +16038,7 @@
 	});
 
 	const _excluded$v = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
-	const PopperRoot = styled$1(Popper$2, {
+	const PopperRoot = styled(Popper$2, {
 	  name: 'MuiPopper',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => styles.root
@@ -15853,7 +16082,7 @@
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$v);
 	  const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
-	  const otherProps = _extends$5({
+	  const otherProps = _extends$6({
 	    anchorEl,
 	    container,
 	    disablePortal,
@@ -15865,7 +16094,7 @@
 	    popperRef,
 	    transition
 	  }, other);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(PopperRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(PopperRoot, _extends$6({
 	    as: component,
 	    direction: theme == null ? void 0 : theme.direction,
 	    slots: {
@@ -15905,7 +16134,7 @@
 	}
 
 	function GlobalStyles(props) {
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$1, _extends$5({}, props, {
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$1, _extends$6({}, props, {
 	    defaultTheme: defaultTheme$2,
 	    themeId: THEME_ID
 	  }));
@@ -15974,14 +16203,14 @@
 	  };
 	  return composeClasses(slots, getInputBaseUtilityClass, classes);
 	};
-	const InputBaseRoot = styled$1('div', {
+	const InputBaseRoot = styled('div', {
 	  name: 'MuiInputBase',
 	  slot: 'Root',
 	  overridesResolver: rootOverridesResolver
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({}, theme.typography.body1, {
+	}) => _extends$6({}, theme.typography.body1, {
 	  color: (theme.vars || theme).palette.text.primary,
 	  lineHeight: '1.4375em',
 	  // 23px
@@ -15995,14 +16224,14 @@
 	    color: (theme.vars || theme).palette.text.disabled,
 	    cursor: 'default'
 	  }
-	}, ownerState.multiline && _extends$5({
+	}, ownerState.multiline && _extends$6({
 	  padding: '4px 0 5px'
 	}, ownerState.size === 'small' && {
 	  paddingTop: 1
 	}), ownerState.fullWidth && {
 	  width: '100%'
 	}));
-	const InputBaseComponent = styled$1('input', {
+	const InputBaseComponent = styled('input', {
 	  name: 'MuiInputBase',
 	  slot: 'Input',
 	  overridesResolver: inputOverridesResolver
@@ -16011,7 +16240,7 @@
 	  ownerState
 	}) => {
 	  const light = theme.palette.mode === 'light';
-	  const placeholder = _extends$5({
+	  const placeholder = _extends$6({
 	    color: 'currentColor'
 	  }, theme.vars ? {
 	    opacity: theme.vars.opacity.inputPlaceholder
@@ -16030,7 +16259,7 @@
 	  } : {
 	    opacity: light ? 0.42 : 0.5
 	  };
-	  return _extends$5({
+	  return _extends$6({
 	    font: 'inherit',
 	    letterSpacing: 'inherit',
 	    color: 'currentColor',
@@ -16206,7 +16435,7 @@
 	      onEmpty();
 	    }
 	  }, [onFilled, onEmpty]);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    if (isControlled) {
 	      checkDirty({
 	        value
@@ -16283,13 +16512,13 @@
 	  let inputProps = inputPropsProp;
 	  if (multiline && InputComponent === 'input') {
 	    if (rows) {
-	      inputProps = _extends$5({
+	      inputProps = _extends$6({
 	        type: undefined,
 	        minRows: rows,
 	        maxRows: rows
 	      }, inputProps);
 	    } else {
-	      inputProps = _extends$5({
+	      inputProps = _extends$6({
 	        type: undefined,
 	        maxRows,
 	        minRows
@@ -16308,7 +16537,7 @@
 	      muiFormControl.setAdornedStart(Boolean(startAdornment));
 	    }
 	  }, [muiFormControl, startAdornment]);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    color: fcs.color || 'primary',
 	    disabled: fcs.disabled,
 	    endAdornment,
@@ -16326,10 +16555,10 @@
 	  const Root = slots.root || components.Root || InputBaseRoot;
 	  const rootProps = slotProps.root || componentsProps.root || {};
 	  const Input = slots.input || components.Input || InputBaseComponent;
-	  inputProps = _extends$5({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
+	  inputProps = _extends$6({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(reactExports.Fragment, {
-	    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/jsxRuntimeExports.jsxs(Root, _extends$5({}, rootProps, !isHostComponent(Root) && {
-	      ownerState: _extends$5({}, ownerState, rootProps.ownerState)
+	    children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/jsxRuntimeExports.jsxs(Root, _extends$6({}, rootProps, !isHostComponent(Root) && {
+	      ownerState: _extends$6({}, ownerState, rootProps.ownerState)
 	    }, {
 	      ref: ref,
 	      onClick: handleClick
@@ -16337,7 +16566,7 @@
 	      className: clsx(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
 	      children: [startAdornment, /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext$1.Provider, {
 	        value: null,
-	        children: /*#__PURE__*/jsxRuntimeExports.jsx(Input, _extends$5({
+	        children: /*#__PURE__*/jsxRuntimeExports.jsx(Input, _extends$6({
 	          ownerState: ownerState,
 	          "aria-invalid": fcs.error,
 	          "aria-describedby": ariaDescribedby,
@@ -16358,7 +16587,7 @@
 	          type: type
 	        }, inputProps, !isHostComponent(Input) && {
 	          as: InputComponent,
-	          ownerState: _extends$5({}, ownerState, inputProps.ownerState)
+	          ownerState: _extends$6({}, ownerState, inputProps.ownerState)
 	        }, {
 	          ref: handleInputRef,
 	          className: clsx(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
@@ -16366,7 +16595,7 @@
 	          onChange: handleChange,
 	          onFocus: handleFocus
 	        }))
-	      }), endAdornment, renderSuffix ? renderSuffix(_extends$5({}, fcs, {
+	      }), endAdornment, renderSuffix ? renderSuffix(_extends$6({}, fcs, {
 	        startAdornment
 	      })) : null]
 	    }))]
@@ -16377,7 +16606,7 @@
 	function getOutlinedInputUtilityClass(slot) {
 	  return generateUtilityClass('MuiOutlinedInput', slot);
 	}
-	const outlinedInputClasses = _extends$5({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+	const outlinedInputClasses = _extends$6({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 	var outlinedInputClasses$1 = outlinedInputClasses;
 
 	const _excluded$t = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
@@ -16472,7 +16701,7 @@
 	      addEndListener(nodeRef.current, next);
 	    }
 	  };
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$6({
 	    appear: appear,
 	    in: inProp,
 	    nodeRef: nodeRef ,
@@ -16486,8 +16715,8 @@
 	    timeout: timeout
 	  }, other, {
 	    children: (state, childProps) => {
-	      return /*#__PURE__*/reactExports.cloneElement(children, _extends$5({
-	        style: _extends$5({
+	      return /*#__PURE__*/reactExports.cloneElement(children, _extends$6({
+	        style: _extends$6({
 	          opacity: 0,
 	          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
 	        }, styles$1[state], style, children.props.style),
@@ -16514,7 +16743,7 @@
 	  };
 	  return composeClasses(slots, getBackdropUtilityClass, classes);
 	};
-	const BackdropRoot = styled$1('div', {
+	const BackdropRoot = styled('div', {
 	  name: 'MuiBackdrop',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -16525,7 +16754,7 @@
 	  }
 	})(({
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  position: 'fixed',
 	  display: 'flex',
 	  alignItems: 'center',
@@ -16559,22 +16788,22 @@
 	      transitionDuration
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$s);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    component,
 	    invisible
 	  });
 	  const classes = useUtilityClasses$j(ownerState);
 	  const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$6({
 	    in: open,
 	    timeout: transitionDuration
 	  }, other, {
-	    children: /*#__PURE__*/jsxRuntimeExports.jsx(BackdropRoot, _extends$5({
+	    children: /*#__PURE__*/jsxRuntimeExports.jsx(BackdropRoot, _extends$6({
 	      "aria-hidden": true
 	    }, rootSlotProps, {
 	      as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
 	      className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
-	      ownerState: _extends$5({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+	      ownerState: _extends$6({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
 	      classes: classes,
 	      ref: ref,
 	      children: children
@@ -16609,7 +16838,7 @@
 	  };
 	  return composeClasses(slots, getBadgeUtilityClass, classes);
 	};
-	const BadgeRoot = styled$1('span', {
+	const BadgeRoot = styled('span', {
 	  name: 'MuiBadge',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => styles.root
@@ -16620,7 +16849,7 @@
 	  verticalAlign: 'middle',
 	  flexShrink: 0
 	});
-	const BadgeBadge = styled$1('span', {
+	const BadgeBadge = styled('span', {
 	  name: 'MuiBadge',
 	  slot: 'Badge',
 	  overridesResolver: (props, styles) => {
@@ -16630,109 +16859,170 @@
 	    return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible];
 	  }
 	})(({
-	  theme,
-	  ownerState
-	}) => _extends$5({
-	  display: 'flex',
-	  flexDirection: 'row',
-	  flexWrap: 'wrap',
-	  justifyContent: 'center',
-	  alignContent: 'center',
-	  alignItems: 'center',
-	  position: 'absolute',
-	  boxSizing: 'border-box',
-	  fontFamily: theme.typography.fontFamily,
-	  fontWeight: theme.typography.fontWeightMedium,
-	  fontSize: theme.typography.pxToRem(12),
-	  minWidth: RADIUS_STANDARD * 2,
-	  lineHeight: 1,
-	  padding: '0 6px',
-	  height: RADIUS_STANDARD * 2,
-	  borderRadius: RADIUS_STANDARD,
-	  zIndex: 1,
-	  // Render the badge on top of potential ripples.
-	  transition: theme.transitions.create('transform', {
-	    easing: theme.transitions.easing.easeInOut,
-	    duration: theme.transitions.duration.enteringScreen
-	  })
-	}, ownerState.color !== 'default' && {
-	  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-	  color: (theme.vars || theme).palette[ownerState.color].contrastText
-	}, ownerState.variant === 'dot' && {
-	  borderRadius: RADIUS_DOT,
-	  height: RADIUS_DOT * 2,
-	  minWidth: RADIUS_DOT * 2,
-	  padding: 0
-	}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
-	  top: 0,
-	  right: 0,
-	  transform: 'scale(1) translate(50%, -50%)',
-	  transformOrigin: '100% 0%',
-	  [`&.${badgeClasses$1.invisible}`]: {
-	    transform: 'scale(0) translate(50%, -50%)'
-	  }
-	}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
-	  bottom: 0,
-	  right: 0,
-	  transform: 'scale(1) translate(50%, 50%)',
-	  transformOrigin: '100% 100%',
-	  [`&.${badgeClasses$1.invisible}`]: {
-	    transform: 'scale(0) translate(50%, 50%)'
-	  }
-	}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
-	  top: 0,
-	  left: 0,
-	  transform: 'scale(1) translate(-50%, -50%)',
-	  transformOrigin: '0% 0%',
-	  [`&.${badgeClasses$1.invisible}`]: {
-	    transform: 'scale(0) translate(-50%, -50%)'
-	  }
-	}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
-	  bottom: 0,
-	  left: 0,
-	  transform: 'scale(1) translate(-50%, 50%)',
-	  transformOrigin: '0% 100%',
-	  [`&.${badgeClasses$1.invisible}`]: {
-	    transform: 'scale(0) translate(-50%, 50%)'
-	  }
-	}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
-	  top: '14%',
-	  right: '14%',
-	  transform: 'scale(1) translate(50%, -50%)',
-	  transformOrigin: '100% 0%',
-	  [`&.${badgeClasses$1.invisible}`]: {
-	    transform: 'scale(0) translate(50%, -50%)'
-	  }
-	}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
-	  bottom: '14%',
-	  right: '14%',
-	  transform: 'scale(1) translate(50%, 50%)',
-	  transformOrigin: '100% 100%',
-	  [`&.${badgeClasses$1.invisible}`]: {
-	    transform: 'scale(0) translate(50%, 50%)'
-	  }
-	}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
-	  top: '14%',
-	  left: '14%',
-	  transform: 'scale(1) translate(-50%, -50%)',
-	  transformOrigin: '0% 0%',
-	  [`&.${badgeClasses$1.invisible}`]: {
-	    transform: 'scale(0) translate(-50%, -50%)'
-	  }
-	}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
-	  bottom: '14%',
-	  left: '14%',
-	  transform: 'scale(1) translate(-50%, 50%)',
-	  transformOrigin: '0% 100%',
-	  [`&.${badgeClasses$1.invisible}`]: {
-	    transform: 'scale(0) translate(-50%, 50%)'
-	  }
-	}, ownerState.invisible && {
-	  transition: theme.transitions.create('transform', {
-	    easing: theme.transitions.easing.easeInOut,
-	    duration: theme.transitions.duration.leavingScreen
-	  })
-	}));
+	  theme
+	}) => {
+	  var _theme$vars;
+	  return {
+	    display: 'flex',
+	    flexDirection: 'row',
+	    flexWrap: 'wrap',
+	    justifyContent: 'center',
+	    alignContent: 'center',
+	    alignItems: 'center',
+	    position: 'absolute',
+	    boxSizing: 'border-box',
+	    fontFamily: theme.typography.fontFamily,
+	    fontWeight: theme.typography.fontWeightMedium,
+	    fontSize: theme.typography.pxToRem(12),
+	    minWidth: RADIUS_STANDARD * 2,
+	    lineHeight: 1,
+	    padding: '0 6px',
+	    height: RADIUS_STANDARD * 2,
+	    borderRadius: RADIUS_STANDARD,
+	    zIndex: 1,
+	    // Render the badge on top of potential ripples.
+	    transition: theme.transitions.create('transform', {
+	      easing: theme.transitions.easing.easeInOut,
+	      duration: theme.transitions.duration.enteringScreen
+	    }),
+	    variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(key => {
+	      var _theme$vars2, _theme$vars3;
+	      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main && ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette[key].contrastText;
+	    }).map(color => ({
+	      props: {
+	        color
+	      },
+	      style: {
+	        backgroundColor: (theme.vars || theme).palette[color].main,
+	        color: (theme.vars || theme).palette[color].contrastText
+	      }
+	    })), {
+	      props: {
+	        variant: 'dot'
+	      },
+	      style: {
+	        borderRadius: RADIUS_DOT,
+	        height: RADIUS_DOT * 2,
+	        minWidth: RADIUS_DOT * 2,
+	        padding: 0
+	      }
+	    }, {
+	      props: ({
+	        ownerState
+	      }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
+	      style: {
+	        top: 0,
+	        right: 0,
+	        transform: 'scale(1) translate(50%, -50%)',
+	        transformOrigin: '100% 0%',
+	        [`&.${badgeClasses$1.invisible}`]: {
+	          transform: 'scale(0) translate(50%, -50%)'
+	        }
+	      }
+	    }, {
+	      props: ({
+	        ownerState
+	      }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
+	      style: {
+	        bottom: 0,
+	        right: 0,
+	        transform: 'scale(1) translate(50%, 50%)',
+	        transformOrigin: '100% 100%',
+	        [`&.${badgeClasses$1.invisible}`]: {
+	          transform: 'scale(0) translate(50%, 50%)'
+	        }
+	      }
+	    }, {
+	      props: ({
+	        ownerState
+	      }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
+	      style: {
+	        top: 0,
+	        left: 0,
+	        transform: 'scale(1) translate(-50%, -50%)',
+	        transformOrigin: '0% 0%',
+	        [`&.${badgeClasses$1.invisible}`]: {
+	          transform: 'scale(0) translate(-50%, -50%)'
+	        }
+	      }
+	    }, {
+	      props: ({
+	        ownerState
+	      }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
+	      style: {
+	        bottom: 0,
+	        left: 0,
+	        transform: 'scale(1) translate(-50%, 50%)',
+	        transformOrigin: '0% 100%',
+	        [`&.${badgeClasses$1.invisible}`]: {
+	          transform: 'scale(0) translate(-50%, 50%)'
+	        }
+	      }
+	    }, {
+	      props: ({
+	        ownerState
+	      }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
+	      style: {
+	        top: '14%',
+	        right: '14%',
+	        transform: 'scale(1) translate(50%, -50%)',
+	        transformOrigin: '100% 0%',
+	        [`&.${badgeClasses$1.invisible}`]: {
+	          transform: 'scale(0) translate(50%, -50%)'
+	        }
+	      }
+	    }, {
+	      props: ({
+	        ownerState
+	      }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
+	      style: {
+	        bottom: '14%',
+	        right: '14%',
+	        transform: 'scale(1) translate(50%, 50%)',
+	        transformOrigin: '100% 100%',
+	        [`&.${badgeClasses$1.invisible}`]: {
+	          transform: 'scale(0) translate(50%, 50%)'
+	        }
+	      }
+	    }, {
+	      props: ({
+	        ownerState
+	      }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
+	      style: {
+	        top: '14%',
+	        left: '14%',
+	        transform: 'scale(1) translate(-50%, -50%)',
+	        transformOrigin: '0% 0%',
+	        [`&.${badgeClasses$1.invisible}`]: {
+	          transform: 'scale(0) translate(-50%, -50%)'
+	        }
+	      }
+	    }, {
+	      props: ({
+	        ownerState
+	      }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
+	      style: {
+	        bottom: '14%',
+	        left: '14%',
+	        transform: 'scale(1) translate(-50%, 50%)',
+	        transformOrigin: '0% 100%',
+	        [`&.${badgeClasses$1.invisible}`]: {
+	          transform: 'scale(0) translate(-50%, 50%)'
+	        }
+	      }
+	    }, {
+	      props: {
+	        invisible: true
+	      },
+	      style: {
+	        transition: theme.transitions.create('transform', {
+	          easing: theme.transitions.easing.easeInOut,
+	          duration: theme.transitions.duration.leavingScreen
+	        })
+	      }
+	    }]
+	  };
+	});
 	const Badge = /*#__PURE__*/reactExports.forwardRef(function Badge(inProps, ref) {
 	  var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
 	  const props = useThemeProps({
@@ -16771,7 +17061,7 @@
 	    badgeContent: badgeContentProp,
 	    showZero
 	  });
-	  const prevProps = usePreviousProps$1({
+	  const prevProps = usePreviousProps({
 	    anchorOrigin: anchorOriginProp,
 	    color: colorProp,
 	    overlap: overlapProp,
@@ -16786,7 +17076,7 @@
 	    variant = variantProp
 	  } = invisible ? prevProps : props;
 	  const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    badgeContent,
 	    invisible,
 	    max,
@@ -16821,8 +17111,8 @@
 	    ownerState,
 	    className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
 	  });
-	  return /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, _extends$5({}, rootProps, {
-	    children: [children, /*#__PURE__*/jsxRuntimeExports.jsx(BadgeSlot, _extends$5({}, badgeProps, {
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, _extends$6({}, rootProps, {
+	    children: [children, /*#__PURE__*/jsxRuntimeExports.jsx(BadgeSlot, _extends$6({}, badgeProps, {
 	      children: displayValue
 	    }))]
 	  }));
@@ -16837,7 +17127,7 @@
 	  themeId: THEME_ID,
 	  defaultTheme,
 	  defaultClassName: boxClasses$1.root,
-	  generateClassName: ClassNameGenerator$1.generate
+	  generateClassName: ClassNameGenerator.generate
 	});
 	var Box$1 = Box;
 
@@ -16860,9 +17150,9 @@
 	  };
 	  return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 	};
-	const SwitchBaseRoot = styled$1(ButtonBase$1)(({
+	const SwitchBaseRoot = styled(ButtonBase$1)(({
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  padding: 9,
 	  borderRadius: '50%'
 	}, ownerState.edge === 'start' && {
@@ -16870,7 +17160,7 @@
 	}, ownerState.edge === 'end' && {
 	  marginRight: ownerState.size === 'small' ? -3 : -12
 	}));
-	const SwitchBaseInput = styled$1('input', {
+	const SwitchBaseInput = styled('input', {
 	  shouldForwardProp: rootShouldForwardProp
 	})({
 	  cursor: 'inherit',
@@ -16955,14 +17245,14 @@
 	    }
 	  }
 	  const hasLabelFor = type === 'checkbox' || type === 'radio';
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    checked,
 	    disabled,
 	    disableFocusRipple,
 	    edge
 	  });
 	  const classes = useUtilityClasses$h(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsxs(SwitchBaseRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs(SwitchBaseRoot, _extends$6({
 	    component: "span",
 	    className: clsx(classes.root, className),
 	    centerRipple: true,
@@ -16975,7 +17265,7 @@
 	    ownerState: ownerState,
 	    ref: ref
 	  }, other, {
-	    children: [/*#__PURE__*/jsxRuntimeExports.jsx(SwitchBaseInput, _extends$5({
+	    children: [/*#__PURE__*/jsxRuntimeExports.jsx(SwitchBaseInput, _extends$6({
 	      autoFocus: autoFocus,
 	      checked: checkedProp,
 	      defaultChecked: defaultChecked,
@@ -17027,9 +17317,9 @@
 	    root: ['root', indeterminate && 'indeterminate', `color${capitalize(color)}`, `size${capitalize(size)}`]
 	  };
 	  const composedClasses = composeClasses(slots, getCheckboxUtilityClass, classes);
-	  return _extends$5({}, classes, composedClasses);
+	  return _extends$6({}, classes, composedClasses);
 	};
-	const CheckboxRoot = styled$1(SwitchBase$1, {
+	const CheckboxRoot = styled(SwitchBase$1, {
 	  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
 	  name: 'MuiCheckbox',
 	  slot: 'Root',
@@ -17042,7 +17332,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  color: (theme.vars || theme).palette.text.secondary
 	}, !ownerState.disableRipple && {
 	  '&:hover': {
@@ -17082,15 +17372,15 @@
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$p);
 	  const icon = indeterminate ? indeterminateIconProp : iconProp;
 	  const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    color,
 	    indeterminate,
 	    size
 	  });
 	  const classes = useUtilityClasses$g(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(CheckboxRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(CheckboxRoot, _extends$6({
 	    type: "checkbox",
-	    inputProps: _extends$5({
+	    inputProps: _extends$6({
 	      'data-indeterminate': indeterminate
 	    }, inputProps),
 	    icon: /*#__PURE__*/reactExports.cloneElement(icon, {
@@ -17159,7 +17449,7 @@
 	  };
 	  return composeClasses(slots, getCircularProgressUtilityClass, classes);
 	};
-	const CircularProgressRoot = styled$1('span', {
+	const CircularProgressRoot = styled('span', {
 	  name: 'MuiCircularProgress',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -17171,7 +17461,7 @@
 	})(({
 	  ownerState,
 	  theme
-	}) => _extends$5({
+	}) => _extends$6({
 	  display: 'inline-block'
 	}, ownerState.variant === 'determinate' && {
 	  transition: theme.transitions.create('transform')
@@ -17182,14 +17472,14 @@
 	}) => ownerState.variant === 'indeterminate' && css(_t3 || (_t3 = _`
       animation: ${0} 1.4s linear infinite;
     `), circularRotateKeyframe));
-	const CircularProgressSVG = styled$1('svg', {
+	const CircularProgressSVG = styled('svg', {
 	  name: 'MuiCircularProgress',
 	  slot: 'Svg',
 	  overridesResolver: (props, styles) => styles.svg
 	})({
 	  display: 'block' // Keeps the progress centered
 	});
-	const CircularProgressCircle = styled$1('circle', {
+	const CircularProgressCircle = styled('circle', {
 	  name: 'MuiCircularProgress',
 	  slot: 'Circle',
 	  overridesResolver: (props, styles) => {
@@ -17201,7 +17491,7 @@
 	})(({
 	  ownerState,
 	  theme
-	}) => _extends$5({
+	}) => _extends$6({
 	  stroke: 'currentColor'
 	}, ownerState.variant === 'determinate' && {
 	  transition: theme.transitions.create('stroke-dashoffset')
@@ -17238,7 +17528,7 @@
 	      variant = 'indeterminate'
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$o);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    color,
 	    disableShrink,
 	    size,
@@ -17257,9 +17547,9 @@
 	    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
 	    rootStyle.transform = 'rotate(-90deg)';
 	  }
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgressRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgressRoot, _extends$6({
 	    className: clsx(classes.root, className),
-	    style: _extends$5({
+	    style: _extends$6({
 	      width: size,
 	      height: size
 	    }, rootStyle, style),
@@ -17304,7 +17594,7 @@
 	  };
 	  return composeClasses(slots, getModalUtilityClass, classes);
 	};
-	const ModalRoot = styled$1('div', {
+	const ModalRoot = styled('div', {
 	  name: 'MuiModal',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -17316,7 +17606,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  position: 'fixed',
 	  zIndex: (theme.vars || theme).zIndex.modal,
 	  right: 0,
@@ -17326,7 +17616,7 @@
 	}, !ownerState.open && ownerState.exited && {
 	  visibility: 'hidden'
 	}));
-	const ModalBackdrop = styled$1(Backdrop$1, {
+	const ModalBackdrop = styled(Backdrop$1, {
 	  name: 'MuiModal',
 	  slot: 'Backdrop',
 	  overridesResolver: (props, styles) => {
@@ -17380,7 +17670,7 @@
 	      // eslint-disable-next-line react/prop-types
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$n);
-	  const propsWithDefaults = _extends$5({}, props, {
+	  const propsWithDefaults = _extends$6({}, props, {
 	    closeAfterTransition,
 	    disableAutoFocus,
 	    disableEnforceFocus,
@@ -17399,10 +17689,10 @@
 	    isTopModal,
 	    exited,
 	    hasTransition
-	  } = useModal(_extends$5({}, propsWithDefaults, {
+	  } = useModal(_extends$6({}, propsWithDefaults, {
 	    rootRef: ref
 	  }));
-	  const ownerState = _extends$5({}, propsWithDefaults, {
+	  const ownerState = _extends$6({}, propsWithDefaults, {
 	    exited
 	  });
 	  const classes = useUtilityClasses$e(ownerState);
@@ -17441,7 +17731,7 @@
 	    externalSlotProps: backdropSlotProps,
 	    additionalProps: BackdropProps,
 	    getSlotProps: otherHandlers => {
-	      return getBackdropProps(_extends$5({}, otherHandlers, {
+	      return getBackdropProps(_extends$6({}, otherHandlers, {
 	        onClick: e => {
 	          if (onBackdropClick) {
 	            onBackdropClick(e);
@@ -17462,8 +17752,8 @@
 	    ref: portalRef,
 	    container: container,
 	    disablePortal: disablePortal,
-	    children: /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, _extends$5({}, rootProps, {
-	      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntimeExports.jsx(BackdropSlot, _extends$5({}, backdropProps)) : null, /*#__PURE__*/jsxRuntimeExports.jsx(FocusTrap, {
+	    children: /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, _extends$6({}, rootProps, {
+	      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntimeExports.jsx(BackdropSlot, _extends$6({}, backdropProps)) : null, /*#__PURE__*/jsxRuntimeExports.jsx(FocusTrap, {
 	        disableEnforceFocus: disableEnforceFocus,
 	        disableAutoFocus: disableAutoFocus,
 	        disableRestoreFocus: disableRestoreFocus,
@@ -17500,7 +17790,7 @@
 	  };
 	  return composeClasses(slots, getDividerUtilityClass, classes);
 	};
-	const DividerRoot = styled$1('div', {
+	const DividerRoot = styled('div', {
 	  name: 'MuiDivider',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -17512,7 +17802,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  margin: 0,
 	  // Reset browser default style.
 	  flexShrink: 0,
@@ -17544,7 +17834,7 @@
 	  height: 'auto'
 	}), ({
 	  ownerState
-	}) => _extends$5({}, ownerState.children && {
+	}) => _extends$6({}, ownerState.children && {
 	  display: 'flex',
 	  whiteSpace: 'nowrap',
 	  textAlign: 'center',
@@ -17556,7 +17846,7 @@
 	}), ({
 	  theme,
 	  ownerState
-	}) => _extends$5({}, ownerState.children && ownerState.orientation !== 'vertical' && {
+	}) => _extends$6({}, ownerState.children && ownerState.orientation !== 'vertical' && {
 	  '&::before, &::after': {
 	    width: '100%',
 	    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
@@ -17564,7 +17854,7 @@
 	}), ({
 	  theme,
 	  ownerState
-	}) => _extends$5({}, ownerState.children && ownerState.orientation === 'vertical' && {
+	}) => _extends$6({}, ownerState.children && ownerState.orientation === 'vertical' && {
 	  flexDirection: 'column',
 	  '&::before, &::after': {
 	    height: '100%',
@@ -17572,7 +17862,7 @@
 	  }
 	}), ({
 	  ownerState
-	}) => _extends$5({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
+	}) => _extends$6({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
 	  '&::before': {
 	    width: '90%'
 	  },
@@ -17587,7 +17877,7 @@
 	    width: '90%'
 	  }
 	}));
-	const DividerWrapper = styled$1('span', {
+	const DividerWrapper = styled('span', {
 	  name: 'MuiDivider',
 	  slot: 'Wrapper',
 	  overridesResolver: (props, styles) => {
@@ -17599,7 +17889,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  display: 'inline-block',
 	  paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
 	  paddingRight: `calc(${theme.spacing(1)} * 1.2)`
@@ -17625,7 +17915,7 @@
 	      variant = 'fullWidth'
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$m);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    absolute,
 	    component,
 	    flexItem,
@@ -17636,7 +17926,7 @@
 	    variant
 	  });
 	  const classes = useUtilityClasses$d(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(DividerRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(DividerRoot, _extends$6({
 	    as: component,
 	    className: clsx(classes.root, className),
 	    role: role,
@@ -17659,7 +17949,7 @@
 	var Divider$1 = Divider;
 
 	const Stack = createStack({
-	  createStyledComponent: styled$1('div', {
+	  createStyledComponent: styled('div', {
 	    name: 'MuiStack',
 	    slot: 'Root',
 	    overridesResolver: (props, styles) => styles.root
@@ -17693,7 +17983,7 @@
 	  };
 	  return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
 	};
-	const FormControlLabelRoot = styled$1('label', {
+	const FormControlLabelRoot = styled('label', {
 	  name: 'MuiFormControlLabel',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -17707,7 +17997,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  display: 'inline-flex',
 	  alignItems: 'center',
 	  cursor: 'pointer',
@@ -17738,7 +18028,7 @@
 	    }
 	  }
 	}));
-	const AsteriskComponent = styled$1('span', {
+	const AsteriskComponent = styled('span', {
 	  name: 'MuiFormControlLabel',
 	  slot: 'Asterisk',
 	  overridesResolver: (props, styles) => styles.asterisk
@@ -17789,7 +18079,7 @@
 	    muiFormControl,
 	    states: ['error']
 	  });
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    disabled,
 	    labelPlacement,
 	    required,
@@ -17799,14 +18089,14 @@
 	  const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
 	  let label = labelProp;
 	  if (label != null && label.type !== Typography$1 && !disableTypography) {
-	    label = /*#__PURE__*/jsxRuntimeExports.jsx(Typography$1, _extends$5({
+	    label = /*#__PURE__*/jsxRuntimeExports.jsx(Typography$1, _extends$6({
 	      component: "span"
 	    }, typographySlotProps, {
 	      className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
 	      children: label
 	    }));
 	  }
-	  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormControlLabelRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormControlLabelRoot, _extends$6({
 	    className: clsx(classes.root, className),
 	    ownerState: ownerState,
 	    ref: ref
@@ -17906,7 +18196,7 @@
 
 	      // Close to the bootstrap implementation:
 	      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
-	      styles = _extends$5({
+	      styles = _extends$6({
 	        flexBasis: width,
 	        flexGrow: 0,
 	        maxWidth: width
@@ -18090,7 +18380,7 @@
 	// alignItems: 'flex-start',
 	// flexWrap: 'nowrap',
 	// justifyContent: 'flex-start',
-	const GridRoot = styled$1('div', {
+	const GridRoot = styled('div', {
 	  name: 'MuiGrid',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -18123,7 +18413,7 @@
 	  }
 	})(({
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  boxSizing: 'border-box'
 	}, ownerState.container && {
 	  display: 'flex',
@@ -18215,14 +18505,14 @@
 	  // columns set with default breakpoint unit of 12
 	  const columns = container ? columnsProp || 12 : columnsContext;
 	  const breakpointsValues = {};
-	  const otherFiltered = _extends$5({}, other);
+	  const otherFiltered = _extends$6({}, other);
 	  breakpoints.keys.forEach(breakpoint => {
 	    if (other[breakpoint] != null) {
 	      breakpointsValues[breakpoint] = other[breakpoint];
 	      delete otherFiltered[breakpoint];
 	    }
 	  });
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    columns,
 	    container,
 	    direction,
@@ -18238,7 +18528,7 @@
 	  const classes = useUtilityClasses$b(ownerState);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(GridContext$1.Provider, {
 	    value: columns,
-	    children: /*#__PURE__*/jsxRuntimeExports.jsx(GridRoot, _extends$5({
+	    children: /*#__PURE__*/jsxRuntimeExports.jsx(GridRoot, _extends$6({
 	      ownerState: ownerState,
 	      className: clsx(classes.root, className),
 	      as: component,
@@ -18394,7 +18684,7 @@
 	      clearTimeout(timer.current);
 	    };
 	  }, []);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$6({
 	    appear: appear,
 	    in: inProp,
 	    nodeRef: nodeRef,
@@ -18408,8 +18698,8 @@
 	    timeout: timeout === 'auto' ? null : timeout
 	  }, other, {
 	    children: (state, childProps) => {
-	      return /*#__PURE__*/reactExports.cloneElement(children, _extends$5({
-	        style: _extends$5({
+	      return /*#__PURE__*/reactExports.cloneElement(children, _extends$6({
+	        style: _extends$6({
 	          opacity: 0,
 	          transform: getScale(0.75),
 	          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
@@ -18439,7 +18729,7 @@
 	  };
 	  return composeClasses(slots, getIconUtilityClass, classes);
 	};
-	const IconRoot = styled$1('span', {
+	const IconRoot = styled('span', {
 	  name: 'MuiIcon',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -18495,14 +18785,14 @@
 	      fontSize = 'medium'
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$i);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    baseClassName,
 	    color,
 	    component: Component,
 	    fontSize
 	  });
 	  const classes = useUtilityClasses$a(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(IconRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(IconRoot, _extends$6({
 	    as: Component,
 	    className: clsx(baseClassName,
 	    // Prevent the translation of the text content.
@@ -18544,14 +18834,14 @@
 	  };
 	  return composeClasses(slots, getInputAdornmentUtilityClass, classes);
 	};
-	const InputAdornmentRoot = styled$1('div', {
+	const InputAdornmentRoot = styled('div', {
 	  name: 'MuiInputAdornment',
 	  slot: 'Root',
 	  overridesResolver: overridesResolver$2
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  display: 'flex',
 	  height: '0.01em',
 	  // Fix IE11 flexbox alignment. To remove at some point.
@@ -18595,7 +18885,7 @@
 	  if (muiFormControl && !variant) {
 	    variant = muiFormControl.variant;
 	  }
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    hiddenLabel: muiFormControl.hiddenLabel,
 	    size: muiFormControl.size,
 	    disablePointerEvents,
@@ -18605,7 +18895,7 @@
 	  const classes = useUtilityClasses$9(ownerState);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext$1.Provider, {
 	    value: null,
-	    children: /*#__PURE__*/jsxRuntimeExports.jsx(InputAdornmentRoot, _extends$5({
+	    children: /*#__PURE__*/jsxRuntimeExports.jsx(InputAdornmentRoot, _extends$6({
 	      as: component,
 	      ownerState: ownerState,
 	      className: clsx(classes.root, className),
@@ -18649,7 +18939,7 @@
 	  };
 	  return composeClasses(slots, getListUtilityClass, classes);
 	};
-	const ListRoot = styled$1('ul', {
+	const ListRoot = styled('ul', {
 	  name: 'MuiList',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -18660,7 +18950,7 @@
 	  }
 	})(({
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  listStyle: 'none',
 	  margin: 0,
 	  padding: 0,
@@ -18688,7 +18978,7 @@
 	  const context = reactExports.useMemo(() => ({
 	    dense
 	  }), [dense]);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    component,
 	    dense,
 	    disablePadding
@@ -18696,7 +18986,7 @@
 	  const classes = useUtilityClasses$8(ownerState);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext$1.Provider, {
 	    value: context,
-	    children: /*#__PURE__*/jsxRuntimeExports.jsxs(ListRoot, _extends$5({
+	    children: /*#__PURE__*/jsxRuntimeExports.jsxs(ListRoot, _extends$6({
 	      as: component,
 	      className: clsx(classes.root, className),
 	      ref: ref,
@@ -18733,7 +19023,7 @@
 	  };
 	  return composeClasses(slots, getListItemSecondaryActionClassesUtilityClass, classes);
 	};
-	const ListItemSecondaryActionRoot = styled$1('div', {
+	const ListItemSecondaryActionRoot = styled('div', {
 	  name: 'MuiListItemSecondaryAction',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -18744,7 +19034,7 @@
 	  }
 	})(({
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  position: 'absolute',
 	  right: 16,
 	  top: '50%',
@@ -18766,11 +19056,11 @@
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$f);
 	  const context = reactExports.useContext(ListContext$1);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    disableGutters: context.disableGutters
 	  });
 	  const classes = useUtilityClasses$7(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(ListItemSecondaryActionRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(ListItemSecondaryActionRoot, _extends$6({
 	    className: clsx(classes.root, className),
 	    ownerState: ownerState,
 	    ref: ref
@@ -18806,14 +19096,14 @@
 	  };
 	  return composeClasses(slots, getListItemUtilityClass, classes);
 	};
-	const ListItemRoot = styled$1('div', {
+	const ListItemRoot = styled('div', {
 	  name: 'MuiListItem',
 	  slot: 'Root',
 	  overridesResolver: overridesResolver$1
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  display: 'flex',
 	  justifyContent: 'flex-start',
 	  alignItems: 'center',
@@ -18822,7 +19112,7 @@
 	  width: '100%',
 	  boxSizing: 'border-box',
 	  textAlign: 'left'
-	}, !ownerState.disablePadding && _extends$5({
+	}, !ownerState.disablePadding && _extends$6({
 	  paddingTop: 8,
 	  paddingBottom: 8
 	}, ownerState.dense && {
@@ -18881,7 +19171,7 @@
 	  // is absolutely positioned.
 	  paddingRight: 48
 	}));
-	const ListItemContainer = styled$1('li', {
+	const ListItemContainer = styled('li', {
 	  name: 'MuiListItem',
 	  slot: 'Container',
 	  overridesResolver: (props, styles) => styles.container
@@ -18930,7 +19220,7 @@
 	    disableGutters
 	  }), [alignItems, context.dense, dense, disableGutters]);
 	  const listItemRef = reactExports.useRef(null);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    if (autoFocus) {
 	      if (listItemRef.current) {
 	        listItemRef.current.focus();
@@ -18941,7 +19231,7 @@
 
 	  // v4 implementation, deprecated in v5, will be removed in v6
 	  const hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    alignItems,
 	    autoFocus,
 	    button,
@@ -18957,7 +19247,7 @@
 	  const handleRef = useForkRef(listItemRef, ref);
 	  const Root = slots.root || components.Root || ListItemRoot;
 	  const rootProps = slotProps.root || componentsProps.root || {};
-	  const componentProps = _extends$5({
+	  const componentProps = _extends$6({
 	    className: clsx(classes.root, rootProps.className, className),
 	    disabled
 	  }, other);
@@ -18983,15 +19273,15 @@
 	    }
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext$1.Provider, {
 	      value: childContext,
-	      children: /*#__PURE__*/jsxRuntimeExports.jsxs(ListItemContainer, _extends$5({
+	      children: /*#__PURE__*/jsxRuntimeExports.jsxs(ListItemContainer, _extends$6({
 	        as: ContainerComponent,
 	        className: clsx(classes.container, ContainerClassName),
 	        ref: handleRef,
 	        ownerState: ownerState
 	      }, ContainerProps, {
-	        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Root, _extends$5({}, rootProps, !isHostComponent(Root) && {
+	        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Root, _extends$6({}, rootProps, !isHostComponent(Root) && {
 	          as: Component,
-	          ownerState: _extends$5({}, ownerState, rootProps.ownerState)
+	          ownerState: _extends$6({}, ownerState, rootProps.ownerState)
 	        }, componentProps, {
 	          children: children
 	        })), children.pop()]
@@ -19000,11 +19290,11 @@
 	  }
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext$1.Provider, {
 	    value: childContext,
-	    children: /*#__PURE__*/jsxRuntimeExports.jsxs(Root, _extends$5({}, rootProps, {
+	    children: /*#__PURE__*/jsxRuntimeExports.jsxs(Root, _extends$6({}, rootProps, {
 	      as: Component,
 	      ref: handleRef
 	    }, !isHostComponent(Root) && {
-	      ownerState: _extends$5({}, ownerState, rootProps.ownerState)
+	      ownerState: _extends$6({}, ownerState, rootProps.ownerState)
 	    }, componentProps, {
 	      children: [children, secondaryAction && /*#__PURE__*/jsxRuntimeExports.jsx(ListItemSecondaryAction$1, {
 	        children: secondaryAction
@@ -19031,7 +19321,7 @@
 	  };
 	  return composeClasses(slots, getListItemIconUtilityClass, classes);
 	};
-	const ListItemIconRoot = styled$1('div', {
+	const ListItemIconRoot = styled('div', {
 	  name: 'MuiListItemIcon',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => {
@@ -19043,7 +19333,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  minWidth: 56,
 	  color: (theme.vars || theme).palette.action.active,
 	  flexShrink: 0,
@@ -19065,11 +19355,11 @@
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$d);
 	  const context = reactExports.useContext(ListContext$1);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    alignItems: context.alignItems
 	  });
 	  const classes = useUtilityClasses$5(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(ListItemIconRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(ListItemIconRoot, _extends$6({
 	    className: clsx(classes.root, className),
 	    ownerState: ownerState,
 	    ref: ref
@@ -19170,7 +19460,7 @@
 	    previousKeyMatched: true,
 	    lastTime: null
 	  });
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    if (autoFocus) {
 	      listRef.current.focus();
 	    }
@@ -19288,7 +19578,7 @@
 	    }
 	    return child;
 	  });
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(List$1, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(List$1, _extends$6({
 	    role: "menu",
 	    ref: handleRef,
 	    className: className,
@@ -19346,12 +19636,12 @@
 	  };
 	  return composeClasses(slots, getPopoverUtilityClass, classes);
 	};
-	const PopoverRoot = styled$1(Modal$1, {
+	const PopoverRoot = styled(Modal$1, {
 	  name: 'MuiPopover',
 	  slot: 'Root',
 	  overridesResolver: (props, styles) => styles.root
 	})({});
-	const PopoverPaper = styled$1(Paper$1, {
+	const PopoverPaper = styled(Paper$1, {
 	  name: 'MuiPopover',
 	  slot: 'Paper',
 	  overridesResolver: (props, styles) => styles.paper
@@ -19408,7 +19698,7 @@
 	  const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
 	  const paperRef = reactExports.useRef();
 	  const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    anchorOrigin,
 	    anchorReference,
 	    elevation,
@@ -19572,8 +19862,8 @@
 	  const PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
 	  const paperProps = useSlotProps({
 	    elementType: PaperSlot,
-	    externalSlotProps: _extends$5({}, externalPaperSlotProps, {
-	      style: isPositioned ? externalPaperSlotProps.style : _extends$5({}, externalPaperSlotProps.style, {
+	    externalSlotProps: _extends$6({}, externalPaperSlotProps, {
+	      style: isPositioned ? externalPaperSlotProps.style : _extends$6({}, externalPaperSlotProps.style, {
 	        opacity: 0
 	      })
 	    }),
@@ -19605,18 +19895,18 @@
 	      slotProps: rootSlotPropsProp
 	    } = _useSlotProps,
 	    rootProps = _objectWithoutPropertiesLoose$3(_useSlotProps, _excluded3);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(RootSlot, _extends$5({}, rootProps, !isHostComponent(RootSlot) && {
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(RootSlot, _extends$6({}, rootProps, !isHostComponent(RootSlot) && {
 	    slotProps: rootSlotPropsProp,
 	    disableScrollLock
 	  }, {
-	    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
+	    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$6({
 	      appear: true,
 	      in: open,
 	      onEntering: handleEntering,
 	      onExited: handleExited,
 	      timeout: transitionDuration
 	    }, TransitionProps, {
-	      children: /*#__PURE__*/jsxRuntimeExports.jsx(PaperSlot, _extends$5({}, paperProps, {
+	      children: /*#__PURE__*/jsxRuntimeExports.jsx(PaperSlot, _extends$6({}, paperProps, {
 	        children: children
 	      }))
 	    }))
@@ -19650,9 +19940,9 @@
 	    root: ['root', dense && 'dense', disabled && 'disabled', !disableGutters && 'gutters', divider && 'divider', selected && 'selected']
 	  };
 	  const composedClasses = composeClasses(slots, getMenuItemUtilityClass, classes);
-	  return _extends$5({}, classes, composedClasses);
+	  return _extends$6({}, classes, composedClasses);
 	};
-	const MenuItemRoot = styled$1(ButtonBase$1, {
+	const MenuItemRoot = styled(ButtonBase$1, {
 	  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
 	  name: 'MuiMenuItem',
 	  slot: 'Root',
@@ -19660,7 +19950,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({}, theme.typography.body1, {
+	}) => _extends$6({}, theme.typography.body1, {
 	  display: 'flex',
 	  justifyContent: 'flex-start',
 	  alignItems: 'center',
@@ -19726,7 +20016,7 @@
 	  [theme.breakpoints.up('sm')]: {
 	    minHeight: 'auto'
 	  }
-	}, ownerState.dense && _extends$5({
+	}, ownerState.dense && _extends$6({
 	  minHeight: 32,
 	  // https://m2.material.io/components/menus#specs > Dense
 	  paddingTop: 4,
@@ -19759,14 +20049,14 @@
 	    disableGutters
 	  }), [context.dense, dense, disableGutters]);
 	  const menuItemRef = reactExports.useRef(null);
-	  useEnhancedEffect$1(() => {
+	  useEnhancedEffect(() => {
 	    if (autoFocus) {
 	      if (menuItemRef.current) {
 	        menuItemRef.current.focus();
 	      }
 	    }
 	  }, [autoFocus]);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    dense: childContext.dense,
 	    divider,
 	    disableGutters
@@ -19779,7 +20069,7 @@
 	  }
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext$1.Provider, {
 	    value: childContext,
-	    children: /*#__PURE__*/jsxRuntimeExports.jsx(MenuItemRoot, _extends$5({
+	    children: /*#__PURE__*/jsxRuntimeExports.jsx(MenuItemRoot, _extends$6({
 	      ref: handleRef,
 	      role: role,
 	      tabIndex: tabIndex,
@@ -19796,7 +20086,7 @@
 
 	var _span;
 	const _excluded$9 = ["children", "classes", "className", "label", "notched"];
-	const NotchedOutlineRoot$1 = styled$1('fieldset', {
+	const NotchedOutlineRoot$1 = styled('fieldset', {
 	  shouldForwardProp: rootShouldForwardProp
 	})({
 	  textAlign: 'left',
@@ -19814,12 +20104,12 @@
 	  overflow: 'hidden',
 	  minWidth: '0%'
 	});
-	const NotchedOutlineLegend = styled$1('legend', {
+	const NotchedOutlineLegend = styled('legend', {
 	  shouldForwardProp: rootShouldForwardProp
 	})(({
 	  ownerState,
 	  theme
-	}) => _extends$5({
+	}) => _extends$6({
 	  float: 'unset',
 	  // Fix conflict with bootstrap
 	  width: 'auto',
@@ -19833,7 +20123,7 @@
 	    duration: 150,
 	    easing: theme.transitions.easing.easeOut
 	  })
-	}, ownerState.withLabel && _extends$5({
+	}, ownerState.withLabel && _extends$6({
 	  display: 'block',
 	  // Fix conflict with normalize.css and sanitize.css
 	  padding: 0,
@@ -19874,11 +20164,11 @@
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$9);
 	  const withLabel = label != null && label !== '';
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    notched,
 	    withLabel
 	  });
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(NotchedOutlineRoot$1, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(NotchedOutlineRoot$1, _extends$6({
 	    "aria-hidden": true,
 	    className: className,
 	    ownerState: ownerState
@@ -19907,9 +20197,9 @@
 	    input: ['input']
 	  };
 	  const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes);
-	  return _extends$5({}, classes, composedClasses);
+	  return _extends$6({}, classes, composedClasses);
 	};
-	const OutlinedInputRoot = styled$1(InputBaseRoot, {
+	const OutlinedInputRoot = styled(InputBaseRoot, {
 	  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
 	  name: 'MuiOutlinedInput',
 	  slot: 'Root',
@@ -19919,7 +20209,7 @@
 	  ownerState
 	}) => {
 	  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
-	  return _extends$5({
+	  return _extends$6({
 	    position: 'relative',
 	    borderRadius: (theme.vars || theme).shape.borderRadius,
 	    [`&:hover .${outlinedInputClasses$1.notchedOutline}`]: {
@@ -19945,13 +20235,13 @@
 	    paddingLeft: 14
 	  }, ownerState.endAdornment && {
 	    paddingRight: 14
-	  }, ownerState.multiline && _extends$5({
+	  }, ownerState.multiline && _extends$6({
 	    padding: '16.5px 14px'
 	  }, ownerState.size === 'small' && {
 	    padding: '8.5px 14px'
 	  }));
 	});
-	const NotchedOutlineRoot = styled$1(NotchedOutline, {
+	const NotchedOutlineRoot = styled(NotchedOutline, {
 	  name: 'MuiOutlinedInput',
 	  slot: 'NotchedOutline',
 	  overridesResolver: (props, styles) => styles.notchedOutline
@@ -19963,14 +20253,14 @@
 	    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
 	  };
 	});
-	const OutlinedInputInput = styled$1(InputBaseComponent, {
+	const OutlinedInputInput = styled(InputBaseComponent, {
 	  name: 'MuiOutlinedInput',
 	  slot: 'Input',
 	  overridesResolver: inputOverridesResolver
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  padding: '16.5px 14px'
 	}, !theme.vars && {
 	  '&:-webkit-autofill': {
@@ -20023,7 +20313,7 @@
 	    muiFormControl,
 	    states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
 	  });
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    color: fcs.color || 'primary',
 	    disabled: fcs.disabled,
 	    error: fcs.error,
@@ -20037,7 +20327,7 @@
 	  });
 	  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : OutlinedInputRoot;
 	  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : OutlinedInputInput;
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(InputBase$1, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(InputBase$1, _extends$6({
 	    slots: {
 	      root: RootSlot,
 	      input: InputSlot
@@ -20056,7 +20346,7 @@
 	    ref: ref,
 	    type: type
 	  }, other, {
-	    classes: _extends$5({}, classes, {
+	    classes: _extends$6({}, classes, {
 	      notchedOutline: null
 	    })
 	  }));
@@ -20072,20 +20362,20 @@
 	  d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
 	}), 'RadioButtonChecked');
 
-	const RadioButtonIconRoot = styled$1('span', {
+	const RadioButtonIconRoot = styled('span', {
 	  shouldForwardProp: rootShouldForwardProp
 	})({
 	  position: 'relative',
 	  display: 'flex'
 	});
-	const RadioButtonIconBackground = styled$1(RadioButtonUncheckedIcon)({
+	const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
 	  // Scale applied to prevent dot misalignment in Safari
 	  transform: 'scale(1)'
 	});
-	const RadioButtonIconDot = styled$1(RadioButtonCheckedIcon)(({
+	const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  left: 0,
 	  position: 'absolute',
 	  transform: 'scale(0)',
@@ -20110,7 +20400,7 @@
 	    classes = {},
 	    fontSize
 	  } = props;
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    checked
 	  });
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(RadioButtonIconRoot, {
@@ -20142,7 +20432,6 @@
 	  return generateUtilityClass('MuiRadio', slot);
 	}
 	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
-	var radioClasses$1 = radioClasses;
 
 	const _excluded$7 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 	const useUtilityClasses$1 = ownerState => {
@@ -20154,9 +20443,9 @@
 	  const slots = {
 	    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
 	  };
-	  return _extends$5({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
+	  return _extends$6({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
 	};
-	const RadioRoot = styled$1(SwitchBase$1, {
+	const RadioRoot = styled(SwitchBase$1, {
 	  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
 	  name: 'MuiRadio',
 	  slot: 'Root',
@@ -20169,7 +20458,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  color: (theme.vars || theme).palette.text.secondary
 	}, !ownerState.disableRipple && {
 	  '&:hover': {
@@ -20180,11 +20469,11 @@
 	    }
 	  }
 	}, ownerState.color !== 'default' && {
-	  [`&.${radioClasses$1.checked}`]: {
+	  [`&.${radioClasses.checked}`]: {
 	    color: (theme.vars || theme).palette[ownerState.color].main
 	  }
 	}, {
-	  [`&.${radioClasses$1.disabled}`]: {
+	  [`&.${radioClasses.disabled}`]: {
 	    color: (theme.vars || theme).palette.action.disabled
 	  }
 	}));
@@ -20217,7 +20506,7 @@
 	      className
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$7);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    color,
 	    size
 	  });
@@ -20234,7 +20523,7 @@
 	      name = radioGroup.name;
 	    }
 	  }
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(RadioRoot, _extends$5({
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(RadioRoot, _extends$6({
 	    type: "radio",
 	    icon: /*#__PURE__*/reactExports.cloneElement(icon, {
 	      fontSize: (_defaultIcon$props$fo = defaultIcon.props.fontSize) != null ? _defaultIcon$props$fo : size
@@ -20278,7 +20567,7 @@
 	  };
 	  return composeClasses(slots, getTooltipUtilityClass, classes);
 	};
-	const TooltipPopper = styled$1(Popper$1, {
+	const TooltipPopper = styled(Popper$1, {
 	  name: 'MuiTooltip',
 	  slot: 'Popper',
 	  overridesResolver: (props, styles) => {
@@ -20291,7 +20580,7 @@
 	  theme,
 	  ownerState,
 	  open
-	}) => _extends$5({
+	}) => _extends$6({
 	  zIndex: (theme.vars || theme).zIndex.tooltip,
 	  pointerEvents: 'none'
 	}, !ownerState.disableInteractive && {
@@ -20313,7 +20602,7 @@
 	      transformOrigin: '100% 0'
 	    }
 	  },
-	  [`&[data-popper-placement*="right"] .${tooltipClasses$1.arrow}`]: _extends$5({}, !ownerState.isRtl ? {
+	  [`&[data-popper-placement*="right"] .${tooltipClasses$1.arrow}`]: _extends$6({}, !ownerState.isRtl ? {
 	    left: 0,
 	    marginLeft: '-0.71em'
 	  } : {
@@ -20326,7 +20615,7 @@
 	      transformOrigin: '100% 100%'
 	    }
 	  }),
-	  [`&[data-popper-placement*="left"] .${tooltipClasses$1.arrow}`]: _extends$5({}, !ownerState.isRtl ? {
+	  [`&[data-popper-placement*="left"] .${tooltipClasses$1.arrow}`]: _extends$6({}, !ownerState.isRtl ? {
 	    right: 0,
 	    marginRight: '-0.71em'
 	  } : {
@@ -20340,7 +20629,7 @@
 	    }
 	  })
 	}));
-	const TooltipTooltip = styled$1('div', {
+	const TooltipTooltip = styled('div', {
 	  name: 'MuiTooltip',
 	  slot: 'Tooltip',
 	  overridesResolver: (props, styles) => {
@@ -20352,7 +20641,7 @@
 	})(({
 	  theme,
 	  ownerState
-	}) => _extends$5({
+	}) => _extends$6({
 	  backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92),
 	  borderRadius: (theme.vars || theme).shape.borderRadius,
 	  color: (theme.vars || theme).palette.common.white,
@@ -20372,42 +20661,42 @@
 	  lineHeight: `${round$1(16 / 14)}em`,
 	  fontWeight: theme.typography.fontWeightRegular
 	}, {
-	  [`.${tooltipClasses$1.popper}[data-popper-placement*="left"] &`]: _extends$5({
+	  [`.${tooltipClasses$1.popper}[data-popper-placement*="left"] &`]: _extends$6({
 	    transformOrigin: 'right center'
-	  }, !ownerState.isRtl ? _extends$5({
+	  }, !ownerState.isRtl ? _extends$6({
 	    marginRight: '14px'
 	  }, ownerState.touch && {
 	    marginRight: '24px'
-	  }) : _extends$5({
+	  }) : _extends$6({
 	    marginLeft: '14px'
 	  }, ownerState.touch && {
 	    marginLeft: '24px'
 	  })),
-	  [`.${tooltipClasses$1.popper}[data-popper-placement*="right"] &`]: _extends$5({
+	  [`.${tooltipClasses$1.popper}[data-popper-placement*="right"] &`]: _extends$6({
 	    transformOrigin: 'left center'
-	  }, !ownerState.isRtl ? _extends$5({
+	  }, !ownerState.isRtl ? _extends$6({
 	    marginLeft: '14px'
 	  }, ownerState.touch && {
 	    marginLeft: '24px'
-	  }) : _extends$5({
+	  }) : _extends$6({
 	    marginRight: '14px'
 	  }, ownerState.touch && {
 	    marginRight: '24px'
 	  })),
-	  [`.${tooltipClasses$1.popper}[data-popper-placement*="top"] &`]: _extends$5({
+	  [`.${tooltipClasses$1.popper}[data-popper-placement*="top"] &`]: _extends$6({
 	    transformOrigin: 'center bottom',
 	    marginBottom: '14px'
 	  }, ownerState.touch && {
 	    marginBottom: '24px'
 	  }),
-	  [`.${tooltipClasses$1.popper}[data-popper-placement*="bottom"] &`]: _extends$5({
+	  [`.${tooltipClasses$1.popper}[data-popper-placement*="bottom"] &`]: _extends$6({
 	    transformOrigin: 'center top',
 	    marginTop: '14px'
 	  }, ownerState.touch && {
 	    marginTop: '24px'
 	  })
 	}));
-	const TooltipArrow = styled$1('span', {
+	const TooltipArrow = styled('span', {
 	  name: 'MuiTooltip',
 	  slot: 'Arrow',
 	  overridesResolver: (props, styles) => styles.arrow
@@ -20688,7 +20977,7 @@
 	    nameOrDescProps['aria-label'] = titleIsString ? title : null;
 	    nameOrDescProps['aria-labelledby'] = open && !titleIsString ? id : null;
 	  }
-	  const childrenProps = _extends$5({}, nameOrDescProps, other, children.props, {
+	  const childrenProps = _extends$6({}, nameOrDescProps, other, children.props, {
 	    className: clsx(other.className, children.props.className),
 	    onTouchStart: detectTouchStart,
 	    ref: handleRef
@@ -20729,11 +21018,11 @@
 	    if ((_PopperProps$popperOp = PopperProps.popperOptions) != null && _PopperProps$popperOp.modifiers) {
 	      tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
 	    }
-	    return _extends$5({}, PopperProps.popperOptions, {
+	    return _extends$6({}, PopperProps.popperOptions, {
 	      modifiers: tooltipModifiers
 	    });
 	  }, [arrowRef, PopperProps]);
-	  const ownerState = _extends$5({}, props, {
+	  const ownerState = _extends$6({}, props, {
 	    isRtl,
 	    arrow,
 	    disableInteractive,
@@ -20746,18 +21035,18 @@
 	  const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : Grow$1;
 	  const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
 	  const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
-	  const popperProps = appendOwnerState(PopperComponent, _extends$5({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
+	  const popperProps = appendOwnerState(PopperComponent, _extends$6({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
 	    className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
 	  }), ownerState);
-	  const transitionProps = appendOwnerState(TransitionComponent, _extends$5({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
-	  const tooltipProps = appendOwnerState(TooltipComponent, _extends$5({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
+	  const transitionProps = appendOwnerState(TransitionComponent, _extends$6({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
+	  const tooltipProps = appendOwnerState(TooltipComponent, _extends$6({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
 	    className: clsx(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
 	  }), ownerState);
-	  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends$5({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
+	  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends$6({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
 	    className: clsx(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
 	  }), ownerState);
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(reactExports.Fragment, {
-	    children: [/*#__PURE__*/reactExports.cloneElement(children, childrenProps), /*#__PURE__*/jsxRuntimeExports.jsx(PopperComponent, _extends$5({
+	    children: [/*#__PURE__*/reactExports.cloneElement(children, childrenProps), /*#__PURE__*/jsxRuntimeExports.jsx(PopperComponent, _extends$6({
 	      as: PopperComponentProp != null ? PopperComponentProp : Popper$1,
 	      placement: placement,
 	      anchorEl: followCursor ? {
@@ -20778,11 +21067,11 @@
 	      popperOptions: popperOptions,
 	      children: ({
 	        TransitionProps: TransitionPropsInner
-	      }) => /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
+	      }) => /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$6({
 	        timeout: theme.transitions.duration.shorter
 	      }, TransitionPropsInner, transitionProps, {
-	        children: /*#__PURE__*/jsxRuntimeExports.jsxs(TooltipComponent, _extends$5({}, tooltipProps, {
-	          children: [title, arrow ? /*#__PURE__*/jsxRuntimeExports.jsx(ArrowComponent, _extends$5({}, tooltipArrowProps, {
+	        children: /*#__PURE__*/jsxRuntimeExports.jsxs(TooltipComponent, _extends$6({}, tooltipProps, {
+	          children: [title, arrow ? /*#__PURE__*/jsxRuntimeExports.jsx(ArrowComponent, _extends$6({}, tooltipArrowProps, {
 	            ref: setArrowRef
 	          })) : null]
 	        }))
@@ -21988,7 +22277,7 @@
 	};
 	const iconWidth = 24; // tick and lock icon width in px
 
-	const RowColRoot = styled$1('div', {
+	const RowColRoot = styled('div', {
 	  shouldForwardProp: prop => !['checkboxes', 'isGridMode', 'isGridCol', 'dense', 'direction', 'sizes', 'frequencyMode', 'freqHitsValue', 'layout', 'styles'].includes(prop)
 	})(_ref4 => {
 	  let {
@@ -22196,7 +22485,7 @@
 	  checkbox: "".concat(PREFIX$b, "-checkbox"),
 	  dense: "".concat(PREFIX$b, "-dense")
 	};
-	const StyledCheckbox = styled$1(Checkbox$1, {
+	const StyledCheckbox = styled(Checkbox$1, {
 	  shouldForwardProp: p => p !== 'styles'
 	})(_ref => {
 	  let {
@@ -22293,7 +22582,7 @@
 	  denseRadioButton: "".concat(PREFIX$a, "-denseRadioButton"),
 	  radioButton: "".concat(PREFIX$a, "-radioButton")
 	};
-	const StyledRadio = styled$1(Radio$1)(_ref => {
+	const StyledRadio = styled(Radio$1)(_ref => {
 	  let {
 	    theme,
 	    checked
@@ -22610,7 +22899,7 @@
 	  }
 	}
 
-	const ItemGrid = styled$1(Grid$1, {
+	const ItemGrid = styled(Grid$1, {
 	  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight', 'direction', 'fillHeight'].includes(prop)
 	})(_ref => {
 	  let {
@@ -25378,7 +25667,7 @@
 	  };
 	}
 
-	const StyledText = styled$1(Typography$1, {
+	const StyledText = styled(Typography$1, {
 	  shouldForwardProp: p => !['width', 'dense'].includes(p)
 	})(_ref => {
 	  let {
@@ -25470,7 +25759,7 @@
 	}), 'Close');
 	default_1 = Close.default = _default;
 
-	const RootContainer = styled$1(Paper$1)(_ref => {
+	const RootContainer = styled(Paper$1)(_ref => {
 	  let {
 	    theme,
 	    left
@@ -25484,11 +25773,11 @@
 	    left
 	  };
 	});
-	const LeftItem = styled$1('div')(() => ({
+	const LeftItem = styled('div')(() => ({
 	  paddingLeft: '6px',
 	  flexGrow: 1
 	}));
-	const RightItem = styled$1('div')(_ref2 => {
+	const RightItem = styled('div')(_ref2 => {
 	  let {
 	    dense
 	  } = _ref2;
@@ -25497,7 +25786,7 @@
 	    alignItems: "".concat(dense ? 'center' : 'flex-start')
 	  };
 	});
-	const SmallCloseIcon = styled$1(default_1)(() => ({
+	const SmallCloseIcon = styled(default_1)(() => ({
 	  fontSize: '14px'
 	}));
 	function ListBoxFooter(_ref3) {
@@ -25646,7 +25935,7 @@
 
 	const _excluded$4 = ["isLoadingData"];
 	const DEFAULT_MIN_BATCH_SIZE = 100;
-	const StyledWrapper = styled$1('div')(() => ({
+	const StyledWrapper = styled('div')(() => ({
 	  ["& .screenReaderOnly"]: {
 	    position: 'absolute',
 	    height: 0,
@@ -26250,7 +26539,7 @@
 	const classes$8 = {
 	  icon: "".concat(PREFIX$8, "-icon")
 	};
-	const StyledPopover$1 = styled$1(Popover$1)(_ref => {
+	const StyledPopover$1 = styled(Popover$1)(_ref => {
 	  let {
 	    theme
 	  } = _ref;
@@ -26422,7 +26711,7 @@
 	  item: "".concat(PREFIX$7, "-item"),
 	  itemSpacing: "".concat(PREFIX$7, "-itemSpacing")
 	};
-	const StyledPopover = styled$1(Popover$1)(_ref => {
+	const StyledPopover = styled(Popover$1)(_ref => {
 	  let {
 	    theme
 	  } = _ref;
@@ -26653,7 +26942,7 @@
 
 	const TREE_PATH = '/qListObjectDef';
 	const WILDCARD = '**';
-	const StyledOutlinedInput = styled$1(OutlinedInput$1, {
+	const StyledOutlinedInput = styled(OutlinedInput$1, {
 	  shouldForwardProp: p => !['styles', 'dense', 'isRtl'].includes(p)
 	})(_ref => {
 	  let {
@@ -29755,7 +30044,7 @@
 	const classes$6 = {
 	  item: "".concat(PREFIX$6, "-item")
 	};
-	const StyledGrid$5 = styled$1(Grid$1)(_ref => {
+	const StyledGrid$5 = styled(Grid$1)(_ref => {
 	  let {
 	    theme
 	  } = _ref;
@@ -29920,7 +30209,7 @@
 	  item: "".concat(PREFIX$5, "-item"),
 	  badge: "".concat(PREFIX$5, "-badge")
 	};
-	const StyledGrid$4 = styled$1(Grid$1)(_ref => {
+	const StyledGrid$4 = styled(Grid$1)(_ref => {
 	  let {
 	    theme
 	  } = _ref;
@@ -31011,7 +31300,7 @@
 	  };
 	}
 
-	const StyledDiv = styled$1('div')(() => ({
+	const StyledDiv = styled('div')(() => ({
 	  display: 'flex',
 	  width: '100%',
 	  height: '100%',
@@ -31068,7 +31357,7 @@
 	  screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly"),
 	  listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 	};
-	const StyledGrid$3 = styled$1(Grid$1, {
+	const StyledGrid$3 = styled(Grid$1, {
 	  shouldForwardProp: p => !['containerPadding', 'isGridMode', 'styles'].includes(p)
 	})(_ref => {
 	  let {
@@ -31103,7 +31392,7 @@
 	    }
 	  });
 	});
-	const StyledGridHeader = styled$1(Grid$1, {
+	const StyledGridHeader = styled(Grid$1, {
 	  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
 	})(_ref2 => {
 	  let {
@@ -31122,7 +31411,7 @@
 	    }
 	  });
 	});
-	const Title = styled$1(Typography$1)(_ref3 => {
+	const Title = styled(Typography$1)(_ref3 => {
 	  let {
 	    styles
 	  } = _ref3;
@@ -33449,7 +33738,7 @@
 	  front: "".concat(PREFIX$3, "-front"),
 	  back: "".concat(PREFIX$3, "-back")
 	};
-	const Root = styled$1('div')(_ref => {
+	const Root = styled('div')(_ref => {
 	  let {
 	    theme
 	  } = _ref;
@@ -33504,7 +33793,7 @@
 	const classes$2 = {
 	  stripes: "".concat(PREFIX$2, "-stripes")
 	};
-	const StyledGrid$2 = styled$1(Grid$1)(() => ({
+	const StyledGrid$2 = styled(Grid$1)(() => ({
 	  ["& .".concat(classes$2.stripes)]: {
 	    '&::before': {
 	      position: 'absolute',
@@ -33630,7 +33919,7 @@
 	  containerStyle: "".concat(PREFIX$1, "-containerStyle"),
 	  containerTitleStyle: "".concat(PREFIX$1, "-containerTitleStyle")
 	};
-	const StyledGrid$1 = styled$1(Grid$1)(_ref => {
+	const StyledGrid$1 = styled(Grid$1)(_ref => {
 	  let {
 	    theme
 	  } = _ref;
@@ -33749,7 +34038,7 @@
 	const classes = {
 	  itemStyle: "".concat(PREFIX, "-itemStyle")
 	};
-	const StyledGrid = styled$1(Grid$1)(_ref => {
+	const StyledGrid = styled(Grid$1)(_ref => {
 	  let {
 	    theme
 	  } = _ref;
@@ -40658,6 +40947,8 @@
 	  };
 	}
 
+	/* eslint-disable no-underscore-dangle */
+
 	// To cover test
 	// eslint-disable-next-line no-undef
 	const crt = globalThis.crypto || {
@@ -40669,7 +40960,7 @@
 	function uuidv4() {
 	  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crt.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
 	}
-	function CreateSessionObjectMock() {
+	function CreateSessionObjectMock(session) {
 	  return props => {
 	    const properties = extend$2({}, props);
 	    properties.qInfo = properties.qInfo || {};
@@ -40680,15 +40971,17 @@
 	      delete properties._mock;
 	      layout = extend$2({}, properties, mockedInclusions);
 	    }
-	    return Promise.resolve(_objectSpread2({
+	    return Promise.resolve({
 	      on: () => {},
 	      once: () => {},
 	      getLayout: () => Promise.resolve(layout),
 	      getProperties: () => Promise.resolve(properties),
 	      getEffectiveProperties: () => Promise.resolve(properties),
 	      removeListener: () => {},
-	      id: properties.qInfo.qId
-	    }, properties));
+	      id: properties.qInfo.qId,
+	      properties,
+	      session
+	    });
 	  };
 	}
 
@@ -40909,7 +41202,7 @@
 	function fromGenericObjects(genericObjects) {
 	  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 	  const session = new SessionMock();
-	  const createSessionObject = new CreateSessionObjectMock();
+	  const createSessionObject = new CreateSessionObjectMock(session);
 	  const getObject = new GetObjectMock(genericObjects, options);
 	  const getAppLayout = new GetAppLayoutMock();
 	  const app = {