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

package/core/esm/dev.js

@@ -1,6 +1,6 @@
 /*
-* @nebula.js/stardust v5.0.0-alpha.0
-* 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.
 */
 
@@ -8,8 +8,8 @@ import * as React from 'react';
 import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useContext, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, Component } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$4, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
-import styled$3 from '@emotion/styled';
+import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$3, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
+import styled$2 from '@emotion/styled';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -282,8 +282,9 @@ var runtime = {exports: {}};
             throw arg;
           }
 
-          // Be forgiving, per 25.3.3.3.3 of the spec:
-          // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
+          // Be forgiving, per GeneratorResume behavior specified since ES2015:
+          // ES2015 spec, step 3: https://262.ecma-international.org/6.0/#sec-generatorresume
+          // Latest spec, step 2: https://tc39.es/ecma262/#sec-generatorresume
           return doneResult();
         }
         context.method = method;
@@ -343,7 +344,7 @@ var runtime = {exports: {}};
       var method = delegate.iterator[methodName];
       if (method === undefined$1) {
         // A .throw or .return when the delegate iterator has no .throw
-        // method, or a missing .next mehtod, always terminate the
+        // method, or a missing .next method, always terminate the
         // yield* loop.
         context.delegate = null;
 
@@ -482,7 +483,7 @@ var runtime = {exports: {}};
       };
     };
     function values(iterable) {
-      if (iterable || iterable === "") {
+      if (iterable != null) {
         var iteratorMethod = iterable[iteratorSymbol];
         if (iteratorMethod) {
           return iteratorMethod.call(iterable);
@@ -2819,7 +2820,7 @@ var extend$1 = function extend() {
 
 var extend$2 = /*@__PURE__*/getDefaultExportFromCjs(extend$1);
 
-var fontSize = "13px";
+var fontSize = "12px";
 var fontFamily = "'Source Sans Pro', 'Arial', 'sans-serif'";
 var backgroundColor$1 = "transparent";
 var dataColors = {
@@ -3823,65 +3824,14 @@ var m$1 = ReactDOM;
   client.hydrateRoot = m$1.hydrateRoot;
 }
 
-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 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$4({}, 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;
@@ -3894,916 +3844,458 @@ function formatMuiErrorMessage(code) {
   /* eslint-enable prefer-template */
 }
 
-// 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);
-}
+var THEME_ID = '$$material';
 
-/**
- * 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;
+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 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(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 target;
   };
-  return debounced;
+  return _extends$4.apply(this, arguments);
 }
 
-function deprecatedPropType(validator, reason) {
-  {
-    return () => null;
+function _objectWithoutPropertiesLoose$1(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 isMuiElement(element, muiNames) {
-  var _muiName, _element$type;
-  return /*#__PURE__*/React.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;
-}
+Based off glamor's StyleSheet, thanks Sunil ❤️
 
-function ownerWindow(node) {
-  const doc = ownerDocument(node);
-  return doc.defaultView || window;
-}
+high performance StyleSheet for css-in-js systems
 
-function requirePropFactory(componentNameInError, Component) {
-  {
-    return () => null;
-  }
-}
+- uses multiple style tags behind the scenes for millions of rules
+- uses `insertRule` for appending in production for *much* faster performance
 
-/**
- * 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;
-  }
-}
+// usage
 
-/**
- * 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' ? React.useLayoutEffect : React.useEffect;
-var useEnhancedEffect$1 = useEnhancedEffect;
+import { StyleSheet } from '@emotion/sheet'
 
-let globalId = 0;
-function useGlobalId(idOverride) {
-  const [defaultId, setDefaultId] = React.useState(idOverride);
-  const id = idOverride || defaultId;
-  React.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;
-}
+let styleSheet = new StyleSheet({ key: '', container: document.head })
 
-// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseId = React['useId'.toString()];
-/**
- *
- * @example <div id={useId()} />
- * @param idOverride
- * @returns {string}
- */
-function useId(idOverride) {
-  if (maybeReactUseId !== undefined) {
-    const reactId = maybeReactUseId();
-    return idOverride != null ? idOverride : reactId;
+styleSheet.insert('#box { border: 1px solid red; }')
+- appends a css rule into the stylesheet
+
+styleSheet.flush()
+- empties the stylesheet of all its contents
+
+*/
+// $FlowFixMe
+function sheetForTag(tag) {
+  if (tag.sheet) {
+    // $FlowFixMe
+    return tag.sheet;
+  } // this weirdness brought to you by firefox
+
+  /* istanbul ignore next */
+
+
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    if (document.styleSheets[i].ownerNode === tag) {
+      // $FlowFixMe
+      return document.styleSheets[i];
+    }
   }
-  // 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 createStyleElement(options) {
+  var tag = document.createElement('style');
+  tag.setAttribute('data-emotion', options.key);
+
+  if (options.nonce !== undefined) {
+    tag.setAttribute('nonce', options.nonce);
   }
-}
 
-function useControlled({
-  controlled,
-  default: defaultProp,
-  name,
-  state = 'value'
-}) {
-  // isControlled is ignored in the hook dependency lists as it should never change.
-  const {
-    current: isControlled
-  } = React.useRef(controlled !== undefined);
-  const [valueState, setValue] = React.useState(defaultProp);
-  const value = isControlled ? controlled : valueState;
-  const setValueIfUncontrolled = React.useCallback(newValue => {
-    if (!isControlled) {
-      setValue(newValue);
-    }
-  }, []);
-  return [value, setValueIfUncontrolled];
+  tag.appendChild(document.createTextNode(''));
+  tag.setAttribute('data-s', '');
+  return tag;
 }
 
+var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
+  function StyleSheet(options) {
+    var _this = this;
+
+    this._insertTag = function (tag) {
+      var before;
+
+      if (_this.tags.length === 0) {
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
+      } else {
+        before = _this.tags[_this.tags.length - 1].nextSibling;
+      }
+
+      _this.container.insertBefore(tag, before);
+
+      _this.tags.push(tag);
+    };
+
+    this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
+    this.tags = [];
+    this.ctr = 0;
+    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+    this.key = options.key;
+    this.container = options.container;
+    this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
+    this.before = null;
+  }
+
+  var _proto = StyleSheet.prototype;
+
+  _proto.hydrate = function hydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
+  _proto.insert = function insert(rule) {
+    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+    // it's 1 in dev because we insert source maps that map a single rule to a location
+    // and you can only have one source map per style tag
+    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+      this._insertTag(createStyleElement(this));
+    }
+
+    var tag = this.tags[this.tags.length - 1];
+
+    if (this.isSpeedy) {
+      var sheet = sheetForTag(tag);
+
+      try {
+        // this is the ultrafast version, works across browsers
+        // the big drawback is that the css won't be editable in devtools
+        sheet.insertRule(rule, sheet.cssRules.length);
+      } catch (e) {
+      }
+    } else {
+      tag.appendChild(document.createTextNode(rule));
+    }
+
+    this.ctr++;
+  };
+
+  _proto.flush = function flush() {
+    // $FlowFixMe
+    this.tags.forEach(function (tag) {
+      return tag.parentNode && tag.parentNode.removeChild(tag);
+    });
+    this.tags = [];
+    this.ctr = 0;
+  };
+
+  return StyleSheet;
+}();
+
+var MS = '-ms-';
+var MOZ = '-moz-';
+var WEBKIT = '-webkit-';
+
+var COMMENT = 'comm';
+var RULESET = 'rule';
+var DECLARATION = 'decl';
+var IMPORT = '@import';
+var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
+
 /**
- * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
- * See RFC in https://github.com/reactjs/rfcs/pull/220
+ * @param {number}
+ * @return {number}
  */
+var abs = Math.abs;
 
-function useEventCallback(fn) {
-  const ref = React.useRef(fn);
-  useEnhancedEffect$1(() => {
-    ref.current = fn;
-  });
-  return React.useRef((...args) =>
-  // @ts-expect-error hide `this`
-  // tslint:disable-next-line:ban-comma-operator
-  (0, ref.current)(...args)).current;
-}
+/**
+ * @param {number}
+ * @return {string}
+ */
+var from = String.fromCharCode;
 
-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 React.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);
-}
+/**
+ * @param {object}
+ * @return {object}
+ */
+var assign = Object.assign;
 
-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
-};
+/**
+ * @param {string} value
+ * @param {number} length
+ * @return {number}
+ */
+function hash (value, length) {
+	return charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0
+}
 
 /**
- * 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}
+ * @param {string} value
+ * @return {string}
  */
-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;
+function trim$1 (value) {
+	return value.trim()
 }
 
 /**
- * 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
+ * @param {string} value
+ * @param {RegExp} pattern
+ * @return {string?}
  */
-function handleKeyDown(event) {
-  if (event.metaKey || event.altKey || event.ctrlKey) {
-    return;
-  }
-  hadKeyboardEvent = true;
+function match (value, pattern) {
+	return (value = pattern.exec(value)) ? value[0] : value
 }
 
 /**
- * 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.
+ * @param {string} value
+ * @param {(string|RegExp)} pattern
+ * @param {string} replacement
+ * @return {string}
  */
-function handlePointerDown() {
-  hadKeyboardEvent = false;
+function replace (value, pattern, replacement) {
+	return value.replace(pattern, replacement)
 }
-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;
-    }
-  }
+
+/**
+ * @param {string} value
+ * @param {string} search
+ * @return {number}
+ */
+function indexof (value, search) {
+	return value.indexOf(search)
 }
-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);
+
+/**
+ * @param {string} value
+ * @param {number} index
+ * @return {number}
+ */
+function charat (value, index) {
+	return value.charCodeAt(index) | 0
 }
-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 = React.useCallback(node => {
-    if (node != null) {
-      prepare(node.ownerDocument);
-    }
-  }, []);
-  const isFocusVisibleRef = React.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
-  };
+/**
+ * @param {string} value
+ * @param {number} begin
+ * @param {number} end
+ * @return {string}
+ */
+function substr (value, begin, end) {
+	return value.slice(begin, end)
 }
 
 /**
- * Add keys, values of `defaultProps` that does not exist in `props`
- * @param {object} defaultProps
- * @param {object} props
- * @returns {object} resolved props
+ * @param {string} value
+ * @return {number}
  */
-function resolveProps(defaultProps, props) {
-  const output = _extends$4({}, props);
-  Object.keys(defaultProps).forEach(propName => {
-    if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = _extends$4({}, 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$4({}, 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 strlen (value) {
+	return value.length
 }
 
-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;
+/**
+ * @param {any[]} value
+ * @return {number}
+ */
+function sizeof (value) {
+	return value.length
 }
 
-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}`;
+/**
+ * @param {any} value
+ * @param {any[]} array
+ * @return {any}
+ */
+function append (value, array) {
+	return array.push(value), value
 }
 
-function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
-  const result = {};
-  slots.forEach(slot => {
-    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-  });
-  return result;
+/**
+ * @param {string[]} array
+ * @param {function} callback
+ * @return {string}
+ */
+function combine (array, callback) {
+	return array.map(callback).join('')
 }
 
-var THEME_ID = '$$material';
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = '';
 
-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);
+/**
+ * @param {string} value
+ * @param {object | null} root
+ * @param {object | null} parent
+ * @param {string} type
+ * @param {string[] | string} props
+ * @param {object[] | string} children
+ * @param {number} length
+ */
+function node (value, root, parent, type, props, children, length) {
+	return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
 }
 
-function _objectWithoutPropertiesLoose$1(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;
+/**
+ * @param {object} root
+ * @param {object} props
+ * @return {object}
+ */
+function copy (root, props) {
+	return assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
 }
 
-/*
+/**
+ * @return {number}
+ */
+function char () {
+	return character
+}
 
-Based off glamor's StyleSheet, thanks Sunil ❤️
+/**
+ * @return {number}
+ */
+function prev () {
+	character = position > 0 ? charat(characters, --position) : 0;
 
-high performance StyleSheet for css-in-js systems
+	if (column--, character === 10)
+		column = 1, line--;
 
-- uses multiple style tags behind the scenes for millions of rules
-- uses `insertRule` for appending in production for *much* faster performance
+	return character
+}
 
-// usage
+/**
+ * @return {number}
+ */
+function next () {
+	character = position < length ? charat(characters, position++) : 0;
 
-import { StyleSheet } from '@emotion/sheet'
+	if (column++, character === 10)
+		column = 1, line++;
 
-let styleSheet = new StyleSheet({ key: '', container: document.head })
-
-styleSheet.insert('#box { border: 1px solid red; }')
-- appends a css rule into the stylesheet
-
-styleSheet.flush()
-- empties the stylesheet of all its contents
-
-*/
-// $FlowFixMe
-function sheetForTag(tag) {
-  if (tag.sheet) {
-    // $FlowFixMe
-    return tag.sheet;
-  } // this weirdness brought to you by firefox
-
-  /* istanbul ignore next */
-
-
-  for (var i = 0; i < document.styleSheets.length; i++) {
-    if (document.styleSheets[i].ownerNode === tag) {
-      // $FlowFixMe
-      return document.styleSheets[i];
-    }
-  }
-}
-
-function createStyleElement(options) {
-  var tag = document.createElement('style');
-  tag.setAttribute('data-emotion', options.key);
-
-  if (options.nonce !== undefined) {
-    tag.setAttribute('nonce', options.nonce);
-  }
-
-  tag.appendChild(document.createTextNode(''));
-  tag.setAttribute('data-s', '');
-  return tag;
-}
-
-var StyleSheet = /*#__PURE__*/function () {
-  // Using Node instead of HTMLElement since container may be a ShadowRoot
-  function StyleSheet(options) {
-    var _this = this;
-
-    this._insertTag = function (tag) {
-      var before;
-
-      if (_this.tags.length === 0) {
-        if (_this.insertionPoint) {
-          before = _this.insertionPoint.nextSibling;
-        } else if (_this.prepend) {
-          before = _this.container.firstChild;
-        } else {
-          before = _this.before;
-        }
-      } else {
-        before = _this.tags[_this.tags.length - 1].nextSibling;
-      }
-
-      _this.container.insertBefore(tag, before);
-
-      _this.tags.push(tag);
-    };
-
-    this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
-    this.tags = [];
-    this.ctr = 0;
-    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
-
-    this.key = options.key;
-    this.container = options.container;
-    this.prepend = options.prepend;
-    this.insertionPoint = options.insertionPoint;
-    this.before = null;
-  }
-
-  var _proto = StyleSheet.prototype;
-
-  _proto.hydrate = function hydrate(nodes) {
-    nodes.forEach(this._insertTag);
-  };
-
-  _proto.insert = function insert(rule) {
-    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
-    // it's 1 in dev because we insert source maps that map a single rule to a location
-    // and you can only have one source map per style tag
-    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      this._insertTag(createStyleElement(this));
-    }
-
-    var tag = this.tags[this.tags.length - 1];
-
-    if (this.isSpeedy) {
-      var sheet = sheetForTag(tag);
-
-      try {
-        // this is the ultrafast version, works across browsers
-        // the big drawback is that the css won't be editable in devtools
-        sheet.insertRule(rule, sheet.cssRules.length);
-      } catch (e) {
-      }
-    } else {
-      tag.appendChild(document.createTextNode(rule));
-    }
-
-    this.ctr++;
-  };
-
-  _proto.flush = function flush() {
-    // $FlowFixMe
-    this.tags.forEach(function (tag) {
-      return tag.parentNode && tag.parentNode.removeChild(tag);
-    });
-    this.tags = [];
-    this.ctr = 0;
-  };
-
-  return StyleSheet;
-}();
-
-var MS = '-ms-';
-var MOZ = '-moz-';
-var WEBKIT = '-webkit-';
-
-var COMMENT = 'comm';
-var RULESET = 'rule';
-var DECLARATION = 'decl';
-var IMPORT = '@import';
-var KEYFRAMES = '@keyframes';
-var LAYER = '@layer';
+	return character
+}
 
 /**
- * @param {number}
  * @return {number}
  */
-var abs = Math.abs;
-
-/**
- * @param {number}
- * @return {string}
- */
-var from = String.fromCharCode;
-
-/**
- * @param {object}
- * @return {object}
- */
-var assign = Object.assign;
+function peek () {
+	return charat(characters, position)
+}
 
 /**
- * @param {string} value
- * @param {number} length
  * @return {number}
  */
-function hash (value, length) {
-	return charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0
+function caret () {
+	return position
 }
 
 /**
- * @param {string} value
+ * @param {number} begin
+ * @param {number} end
  * @return {string}
  */
-function trim$1 (value) {
-	return value.trim()
+function slice (begin, end) {
+	return substr(characters, begin, end)
 }
 
 /**
- * @param {string} value
- * @param {RegExp} pattern
- * @return {string?}
+ * @param {number} type
+ * @return {number}
  */
-function match (value, pattern) {
-	return (value = pattern.exec(value)) ? value[0] : value
-}
+function token (type) {
+	switch (type) {
+		// \0 \t \n \r \s whitespace token
+		case 0: case 9: case 10: case 13: case 32:
+			return 5
+		// ! + , / > @ ~ isolate token
+		case 33: case 43: case 44: case 47: case 62: case 64: case 126:
+		// ; { } breakpoint token
+		case 59: case 123: case 125:
+			return 4
+		// : accompanied token
+		case 58:
+			return 3
+		// " ' ( [ opening delimit token
+		case 34: case 39: case 40: case 91:
+			return 2
+		// ) ] closing delimit token
+		case 41: case 93:
+			return 1
+	}
 
-/**
- * @param {string} value
- * @param {(string|RegExp)} pattern
- * @param {string} replacement
- * @return {string}
- */
-function replace (value, pattern, replacement) {
-	return value.replace(pattern, replacement)
+	return 0
 }
 
 /**
  * @param {string} value
- * @param {string} search
- * @return {number}
+ * @return {any[]}
  */
-function indexof (value, search) {
-	return value.indexOf(search)
+function alloc (value) {
+	return line = column = 1, length = strlen(characters = value), position = 0, []
 }
 
 /**
- * @param {string} value
- * @param {number} index
- * @return {number}
+ * @param {any} value
+ * @return {any}
  */
-function charat (value, index) {
-	return value.charCodeAt(index) | 0
+function dealloc (value) {
+	return characters = '', value
 }
 
 /**
- * @param {string} value
- * @param {number} begin
- * @param {number} end
+ * @param {number} type
  * @return {string}
  */
-function substr (value, begin, end) {
-	return value.slice(begin, end)
+function delimit (type) {
+	return trim$1(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
 }
 
 /**
- * @param {string} value
- * @return {number}
+ * @param {number} type
+ * @return {string}
  */
-function strlen (value) {
-	return value.length
-}
+function whitespace (type) {
+	while (character = peek())
+		if (character < 33)
+			next();
+		else
+			break
 
-/**
- * @param {any[]} value
- * @return {number}
- */
-function sizeof (value) {
-	return value.length
+	return token(type) > 2 || token(character) > 3 ? '' : ' '
 }
 
 /**
- * @param {any} value
- * @param {any[]} array
- * @return {any}
+ * @param {number} index
+ * @param {number} count
+ * @return {string}
  */
-function append (value, array) {
-	return array.push(value), value
-}
-
-/**
- * @param {string[]} array
- * @param {function} callback
- * @return {string}
- */
-function combine (array, callback) {
-	return array.map(callback).join('')
-}
-
-var line = 1;
-var column = 1;
-var length = 0;
-var position = 0;
-var character = 0;
-var characters = '';
-
-/**
- * @param {string} value
- * @param {object | null} root
- * @param {object | null} parent
- * @param {string} type
- * @param {string[] | string} props
- * @param {object[] | string} children
- * @param {number} length
- */
-function node (value, root, parent, type, props, children, length) {
-	return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
-}
-
-/**
- * @param {object} root
- * @param {object} props
- * @return {object}
- */
-function copy (root, props) {
-	return assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
-}
-
-/**
- * @return {number}
- */
-function char () {
-	return character
-}
-
-/**
- * @return {number}
- */
-function prev () {
-	character = position > 0 ? charat(characters, --position) : 0;
-
-	if (column--, character === 10)
-		column = 1, line--;
-
-	return character
-}
-
-/**
- * @return {number}
- */
-function next () {
-	character = position < length ? charat(characters, position++) : 0;
-
-	if (column++, character === 10)
-		column = 1, line++;
-
-	return character
-}
-
-/**
- * @return {number}
- */
-function peek () {
-	return charat(characters, position)
-}
-
-/**
- * @return {number}
- */
-function caret () {
-	return position
-}
-
-/**
- * @param {number} begin
- * @param {number} end
- * @return {string}
- */
-function slice (begin, end) {
-	return substr(characters, begin, end)
-}
-
-/**
- * @param {number} type
- * @return {number}
- */
-function token (type) {
-	switch (type) {
-		// \0 \t \n \r \s whitespace token
-		case 0: case 9: case 10: case 13: case 32:
-			return 5
-		// ! + , / > @ ~ isolate token
-		case 33: case 43: case 44: case 47: case 62: case 64: case 126:
-		// ; { } breakpoint token
-		case 59: case 123: case 125:
-			return 4
-		// : accompanied token
-		case 58:
-			return 3
-		// " ' ( [ opening delimit token
-		case 34: case 39: case 40: case 91:
-			return 2
-		// ) ] closing delimit token
-		case 41: case 93:
-			return 1
-	}
-
-	return 0
-}
-
-/**
- * @param {string} value
- * @return {any[]}
- */
-function alloc (value) {
-	return line = column = 1, length = strlen(characters = value), position = 0, []
-}
-
-/**
- * @param {any} value
- * @return {any}
- */
-function dealloc (value) {
-	return characters = '', value
-}
-
-/**
- * @param {number} type
- * @return {string}
- */
-function delimit (type) {
-	return trim$1(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
-}
-
-/**
- * @param {number} type
- * @return {string}
- */
-function whitespace (type) {
-	while (character = peek())
-		if (character < 33)
-			next();
-		else
-			break
-
-	return token(type) > 2 || token(character) > 3 ? '' : ' '
-}
-
-/**
- * @param {number} index
- * @param {number} count
- * @return {string}
- */
-function escaping (index, count) {
-	while (--count && next())
-		// not 0-9 A-F a-f
-		if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))
-			break
-
-	return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))
+function escaping (index, count) {
+	while (--count && next())
+		// not 0-9 A-F a-f
+		if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))
+			break
+
+	return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))
 }
 
 /**
@@ -5649,71 +5141,579 @@ function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&
 
 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;
+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;
+}
+
+/**
+ * @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$1(tag, options) {
+  const stylesFactory = styled$2(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$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 _objectWithoutPropertiesLoose(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$2() {
+  _extends$2 = 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$2.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$2({}, 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(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__*/React.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' ? React.useLayoutEffect : React.useEffect;
+var useEnhancedEffect$1 = useEnhancedEffect;
+
+let globalId = 0;
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.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['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
+  } = React.useRef(controlled !== undefined);
+  const [valueState, setValue] = React.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  const setValueIfUncontrolled = React.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 = React.useRef(fn);
+  useEnhancedEffect$1(() => {
+    ref.current = fn;
+  });
+  return React.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 React.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 = React.useCallback(node => {
+    if (node != null) {
+      prepare(node.ownerDocument);
+    }
+  }, []);
+  const isFocusVisibleRef = React.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
+  };
 }
 
 /**
- * @mui/styled-engine v5.14.19
- *
- * @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$2(tag, options) {
-  const stylesFactory = styled$3(tag, options);
-  return stylesFactory;
+function resolveProps(defaultProps, props) {
+  const output = _extends$2({}, props);
+  Object.keys(defaultProps).forEach(propName => {
+    if (propName.toString().match(/^(components|slots)$/)) {
+      output[propName] = _extends$2({}, 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$2({}, 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$2() {
-  _extends$2 = 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$2.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(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$g = ["values", "unit", "step"];
@@ -5725,7 +5725,7 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends$2({}, acc, {
+    return _extends$3({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
@@ -5747,7 +5747,6 @@ function createBreakpoints(breakpoints) {
         // desktop
         xl: 1536 // large screen
       },
-
       unit = 'px',
       step = 5
     } = breakpoints,
@@ -5783,7 +5782,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends$2({
+  return _extends$3({
     keys,
     values: sortedValues,
     up,
@@ -5822,7 +5821,6 @@ const values = {
   // desktop
   xl: 1536 // large screen
 };
-
 const defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
@@ -6069,8 +6067,6 @@ padding.filterProps = paddingKeys;
 
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.
-/* tslint:disable:unified-signatures */
-/* tslint:enable:unified-signatures */
 
 function createSpacing(spacingInput = 8) {
   // Already transformed.
@@ -6672,7 +6668,6 @@ function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-
     const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig$1;
 
     /*
@@ -6728,7 +6723,6 @@ function unstable_createStyleFunctionSx() {
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var styleFunctionSx$1 = styleFunctionSx;
 
 const _excluded$f = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
@@ -6746,16 +6740,16 @@ function createTheme$1(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends$2({
+    palette: _extends$3({
       mode: 'light'
     }, paletteInput),
     spacing,
-    shape: _extends$2({}, shape$1, shapeInput)
+    shape: _extends$3({}, shape$1, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends$2({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx$1({
+    return styleFunctionSx({
       sx: props,
       theme: this
     });
@@ -6824,10 +6818,17 @@ const getStyleOverrides = (name, theme) => {
   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;
     });
   }
@@ -6845,16 +6846,29 @@ const variantsResolver = (props, styles, variants) => {
     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$3({}, 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;
       }
     });
   }
@@ -6896,8 +6910,8 @@ const muiStyledFunctionResolver = ({
   defaultTheme,
   themeId
 }) => {
-  const resolvedStyles = styledArg(_extends$2({}, props, {
-    theme: resolveTheme(_extends$2({}, props, {
+  const resolvedStyles = styledArg(_extends$3({}, props, {
+    theme: resolveTheme(_extends$3({}, props, {
       defaultTheme,
       themeId
     }))
@@ -6921,8 +6935,8 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx$1(_extends$2({}, props, {
-      theme: resolveTheme(_extends$2({}, props, {
+    return styleFunctionSx(_extends$3({}, props, {
+      theme: resolveTheme(_extends$3({}, props, {
         defaultTheme,
         themeId
       }))
@@ -6963,7 +6977,7 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$2(tag, _extends$2({
+    const defaultStyledResolver = styled$1(tag, _extends$3({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
@@ -7029,7 +7043,7 @@ function createStyled(input = {}) {
       }
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme(_extends$3({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7037,7 +7051,7 @@ function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$2({}, props, {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$3({}, props, {
                 theme
               })) : slotStyle;
             });
@@ -7048,7 +7062,7 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme(_extends$3({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7250,7 +7264,6 @@ function getLuminance(color) {
     if (color.type !== 'color') {
       val /= 255; // normalized
     }
-
     return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
   });
 
@@ -7378,7 +7391,7 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? _extends$2({}, upperTheme, {
+      const result = themeId ? _extends$3({}, upperTheme, {
         [themeId]: mergedTheme
       }) : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
@@ -7388,9 +7401,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? _extends$2({}, upperTheme, {
+    return themeId ? _extends$3({}, upperTheme, {
       [themeId]: localTheme
-    }) : _extends$2({}, upperTheme, localTheme);
+    }) : _extends$3({}, upperTheme, localTheme);
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 
@@ -7432,7 +7445,7 @@ function adaptV4Theme(inputTheme) {
       styleOverrides = {}
     } = inputTheme,
     other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$c);
-  const theme = _extends$3({}, other, {
+  const theme = _extends$4({}, other, {
     components: {}
   });
 
@@ -7466,13 +7479,13 @@ function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = _extends$3({
+  theme.mixins = _extends$4({
     gutters: (styles = {}) => {
-      return _extends$3({
+      return _extends$4({
         paddingLeft: spacing(2),
         paddingRight: spacing(2)
       }, styles, {
-        [breakpoints.up('sm')]: _extends$3({
+        [breakpoints.up('sm')]: _extends$4({
           paddingLeft: spacing(3),
           paddingRight: spacing(3)
         }, styles[breakpoints.up('sm')])
@@ -7485,7 +7498,7 @@ function adaptV4Theme(inputTheme) {
     } = palette,
     paletteRest = _objectWithoutPropertiesLoose$1(palette, _excluded2$1);
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = _extends$3({
+  theme.palette = _extends$4({
     // theme.palette.text.hint
     text: {
       hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
@@ -7497,7 +7510,7 @@ function adaptV4Theme(inputTheme) {
 }
 
 function createMixins(breakpoints, mixins) {
-  return _extends$3({
+  return _extends$4({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -7835,7 +7848,7 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends$3({}, color);
+    color = _extends$4({}, color);
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -7856,9 +7869,9 @@ function createPalette(palette) {
     dark: dark$1,
     light: light$1
   };
-  const paletteOutput = deepmerge(_extends$3({
+  const paletteOutput = deepmerge(_extends$4({
     // A collection of common colors.
-    common: _extends$3({}, common$1),
+    common: _extends$4({}, common$1),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -7946,7 +7959,7 @@ function createTypography(palette, typography) {
     other = _objectWithoutPropertiesLoose$1(_ref, _excluded$a);
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$3({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$4({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
@@ -7978,7 +7991,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends$3({
+  return deepmerge(_extends$4({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -8001,7 +8014,6 @@ function createShadow(...px) {
 
 // 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$9 = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
@@ -8046,8 +8058,8 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = _extends$3({}, easing, inputTransitions.easing);
-  const mergedDuration = _extends$3({}, duration, inputTransitions.duration);
+  const mergedEasing = _extends$4({}, easing, inputTransitions.easing);
+  const mergedDuration = _extends$4({}, duration, inputTransitions.duration);
   const create = (props = ['all'], options = {}) => {
     const {
         duration: durationOption = mergedDuration.standard,
@@ -8057,7 +8069,7 @@ function createTransitions(inputTransitions) {
       _objectWithoutPropertiesLoose$1(options, _excluded$9);
     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$3({
+  return _extends$4({
     getAutoHeightDuration,
     create
   }, inputTransitions, {
@@ -8098,16 +8110,16 @@ function createTheme(options = {}, ...args) {
     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$3({}, zIndex$1)
+    zIndex: _extends$4({}, zIndex$1)
   });
   muiTheme = deepmerge(muiTheme, 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
     });
@@ -8141,7 +8153,6 @@ const styled = createStyled({
   defaultTheme: defaultTheme$1,
   rootShouldForwardProp
 });
-var styled$1 = styled;
 
 const _excluded$7 = ["theme"];
 function ThemeProvider(_ref) {
@@ -8150,7 +8161,7 @@ function ThemeProvider(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose$1(_ref, _excluded$7);
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$3({}, props, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$4({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
   }));
@@ -8530,8 +8541,8 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "117f" ;
-ClassNameGenerator$1.configure(componentName => {
+const NEBULA_VERSION_HASH = "b12a" ;
+ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
 
@@ -8762,7 +8773,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.0" );
+  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.2" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -9111,7 +9122,7 @@ function getFontSize(size) {
   }
   return '16px';
 }
-function SvgIcon$2(_ref) {
+function SvgIcon$1(_ref) {
   let {
     size,
     style = {},
@@ -9161,7 +9172,7 @@ const remove = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Remove = (props => SvgIcon$2(remove(props)));
+var Remove = (props => SvgIcon$1(remove(props)));
 
 const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -9171,7 +9182,7 @@ const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Lock = (props => SvgIcon$2(lock(props)));
+var Lock = (props => SvgIcon$1(lock(props)));
 
 const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -9181,7 +9192,7 @@ const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Unlock = (props => SvgIcon$2(unlock(props)));
+var Unlock = (props => SvgIcon$1(unlock(props)));
 
 function isRangeVisible(_ref) {
   var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
@@ -9822,7 +9833,7 @@ const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Tick = (props => SvgIcon$2(tick(props)));
+var Tick = (props => SvgIcon$1(tick(props)));
 
 /**
  * @ignore
@@ -10025,7 +10036,7 @@ const ellipsis = {
 };
 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 {
@@ -10233,7 +10244,7 @@ const classes$b = {
   checkbox: "".concat(PREFIX$b, "-checkbox"),
   dense: "".concat(PREFIX$b, "-dense")
 };
-const StyledCheckbox = styled$1(Checkbox, {
+const StyledCheckbox = styled(Checkbox, {
   shouldForwardProp: p => p !== 'styles'
 })(_ref => {
   let {
@@ -10330,7 +10341,7 @@ const classes$a = {
   denseRadioButton: "".concat(PREFIX$a, "-denseRadioButton"),
   radioButton: "".concat(PREFIX$a, "-radioButton")
 };
-const StyledRadio = styled$1(Radio)(_ref => {
+const StyledRadio = styled(Radio)(_ref => {
   let {
     theme,
     checked
@@ -10647,7 +10658,7 @@ function getGridItemSizes(_ref) {
   }
 }
 
-const ItemGrid = styled$1(Grid, {
+const ItemGrid = styled(Grid, {
   shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight', 'direction', 'fillHeight'].includes(prop)
 })(_ref => {
   let {
@@ -12788,7 +12799,7 @@ function getStyledComponents() {
       backgroundColor: scrollBarThumbHover
     }
   });
-  const StyledFixedSizeList = styled$3(FixedSizeList, {
+  const StyledFixedSizeList = styled$2(FixedSizeList, {
     shouldForwardProp: prop => prop !== 'scrollDisabled'
   })(_ref => {
     let {
@@ -12798,7 +12809,7 @@ function getStyledComponents() {
       ["&.".concat(classes$9.styledScrollbars)]: getScrollbarStyling(scrollDisabled)
     };
   });
-  const StyledFixedSizeGrid = styled$3(FixedSizeGrid, {
+  const StyledFixedSizeGrid = styled$2(FixedSizeGrid, {
     shouldForwardProp: prop => prop !== 'scrollDisabled'
   })(_ref2 => {
     let {
@@ -13415,7 +13426,7 @@ function useDataStore(model) {
   };
 }
 
-const StyledText = styled$1(Typography, {
+const StyledText = styled(Typography, {
   shouldForwardProp: p => !['width', 'dense'].includes(p)
 })(_ref => {
   let {
@@ -13488,7 +13499,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSvgIconUtilityClass, classes);
 };
-const SvgIconRoot = styled$1('svg', {
+const SvgIconRoot = styled('svg', {
   name: 'MuiSvgIcon',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -13546,7 +13557,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
   const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
-  const ownerState = _extends$3({}, props, {
+  const ownerState = _extends$4({}, props, {
     color,
     component,
     fontSize,
@@ -13560,7 +13571,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     more.viewBox = viewBox;
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$3({
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$4({
     as: component,
     className: clsx(classes.root, className),
     focusable: "false",
@@ -13576,18 +13587,17 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   }));
 });
 SvgIcon.muiName = 'SvgIcon';
-var SvgIcon$1 = SvgIcon;
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, _extends$3({
+    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon, _extends$4({
       "data-testid": `${displayName}Icon`,
       ref: ref
     }, props, {
       children: path
     }));
   }
-  Component.muiName = SvgIcon$1.muiName;
+  Component.muiName = SvgIcon.muiName;
   return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
 }
 
@@ -13595,7 +13605,7 @@ function createSvgIcon(path, displayName) {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const unstable_ClassNameGenerator = {
   configure: generator => {
-    ClassNameGenerator$1.configure(generator);
+    ClassNameGenerator.configure(generator);
   }
 };
 
@@ -13657,7 +13667,7 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
 }), 'Close');
 default_1 = Close.default = _default;
 
-const RootContainer = styled$1(Paper)(_ref => {
+const RootContainer = styled(Paper)(_ref => {
   let {
     theme,
     left
@@ -13671,11 +13681,11 @@ const RootContainer = styled$1(Paper)(_ref => {
     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;
@@ -13684,7 +13694,7 @@ const RightItem = styled$1('div')(_ref2 => {
     alignItems: "".concat(dense ? 'center' : 'flex-start')
   };
 });
-const SmallCloseIcon = styled$1(default_1)(() => ({
+const SmallCloseIcon = styled(default_1)(() => ({
   fontSize: '14px'
 }));
 function ListBoxFooter(_ref3) {
@@ -13833,7 +13843,7 @@ function deduceFrequencyMode(pages) {
 
 const _excluded$4 = ["isLoadingData"];
 const DEFAULT_MIN_BATCH_SIZE = 100;
-const StyledWrapper = styled$4('div')(() => ({
+const StyledWrapper = styled$3('div')(() => ({
   ["& .screenReaderOnly"]: {
     position: 'absolute',
     height: 0,
@@ -14349,7 +14359,7 @@ const Item = React__default.forwardRef((_ref, ref) => {
     "aria-expanded": ariaExpanded,
     "aria-controls": "moreMenuList",
     "data-testid": btnId
-  }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
+  }, hasSvgIconShape && SvgIcon$1(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
       bottom: -spacing,
@@ -14378,7 +14388,7 @@ const clearSelections = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var ClearSelections = (props => SvgIcon$2(clearSelections(props)));
+var ClearSelections = (props => SvgIcon$1(clearSelections(props)));
 
 function useDefaultSelectionActions(_ref) {
   let {
@@ -14437,7 +14447,7 @@ const ActionsToolbarMoreElement = {
 const classes$8 = {
   icon: "".concat(PREFIX$8, "-icon")
 };
-const StyledPopover$1 = styled$1(Popover)(_ref => {
+const StyledPopover$1 = styled(Popover)(_ref => {
   let {
     theme
   } = _ref;
@@ -14472,7 +14482,7 @@ function MoreItem(_ref2) {
     tabindex: "0"
   }, hasSvgIconShape && /*#__PURE__*/React__default.createElement(ListItemIcon, {
     className: classes$8.icon
-  }, SvgIcon$2(item.getSvgIconShape())), /*#__PURE__*/React__default.createElement(Typography, {
+  }, SvgIcon$1(item.getSvgIconShape())), /*#__PURE__*/React__default.createElement(Typography, {
     noWrap: true
   }, item.label)) : null;
 }
@@ -14609,7 +14619,7 @@ const classes$7 = {
   item: "".concat(PREFIX$7, "-item"),
   itemSpacing: "".concat(PREFIX$7, "-itemSpacing")
 };
-const StyledPopover = styled$1(Popover)(_ref => {
+const StyledPopover = styled(Popover)(_ref => {
   let {
     theme
   } = _ref;
@@ -14836,11 +14846,11 @@ const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var SearchIcon = (props => SvgIcon$2(search(props)));
+var SearchIcon = (props => SvgIcon$1(search(props)));
 
 const TREE_PATH = '/qListObjectDef';
 const WILDCARD = '**';
-const StyledOutlinedInput = styled$1(OutlinedInput, {
+const StyledOutlinedInput = styled(OutlinedInput, {
   shouldForwardProp: p => !['styles', 'dense', 'isRtl'].includes(p)
 })(_ref => {
   let {
@@ -14866,6 +14876,7 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
     fontSize: 14,
     borderRadius: 0,
     backgroundColor: styles.search.backgroundColor,
+    backdropFilter: styles.background.backgroundImage ? styles.search.backdropFilter : undefined,
     paddingLeft: "".concat(CELL_PADDING_LEFT, "px"),
     flexDirection: isRtl ? 'row-reverse' : 'row',
     '& fieldset': {
@@ -14873,6 +14884,9 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
       borderWidth: '1px 0 1px 0',
       borderRadius: 0
     },
+    '&.Mui-focused fieldset': {
+      borderColor: "".concat(styles.search.highlightBorderColor, " !important")
+    },
     '& .MuiInputBase-root': _objectSpread2({}, styles.search),
     '& *': {
       color: styles.search.color
@@ -14880,9 +14894,6 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
     '& input': {
       color: styles.search.color,
       textAlign: isRtl ? 'right' : 'left'
-    },
-    '&.Mui-focused fieldset.OutlinedInput-notchedOutline': {
-      borderColor: "".concat(styles.search.highlightBorderColor, " !important")
     }
   }, denseProps);
 });
@@ -17332,7 +17343,7 @@ function resolveBgImage(bgComp, app) {
 function resolveBgColor(comp, theme, objectType) {
   const bgColor = comp === null || comp === void 0 ? void 0 : comp.bgColor;
   if (bgColor && theme) {
-    if (bgColor.useExpression) {
+    if (bgColor.useExpression || bgColor.useColorExpression) {
       return theme.validateColor(bgColor.colorExpression);
     }
   }
@@ -17427,24 +17438,25 @@ function getOverridesAsObject() {
   return overrides;
 }
 function getSelectionColors(_ref) {
-  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _selectionColors$sele, _theme$palette2, _selectionColors$alte, _theme$palette3, _selectionColors$excl, _theme$palette4, _selectionColors$sele2, _theme$palette5, _selectionColors$poss, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
+  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _theme$palette2, _theme$palette3, _theme$palette4, _theme$palette5, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
   let {
+    getColorPickerColor,
     theme,
     getListboxStyle,
     overrides,
     checkboxes
   } = _ref;
-  const componentContentTextColor = (_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.fontColor) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.color;
-  const desiredTextColor = componentContentTextColor || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
+  const componentContentTextColor = (_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.fontColor;
+  const desiredTextColor = getColorPickerColor(componentContentTextColor) || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
   const useContrastTextColor = !checkboxes && ((_overrides$theme$cont = (_overrides$theme2 = overrides.theme) === null || _overrides$theme2 === void 0 || (_overrides$theme2 = _overrides$theme2.content) === null || _overrides$theme2 === void 0 ? void 0 : _overrides$theme2.useContrastColor) !== null && _overrides$theme$cont !== void 0 ? _overrides$theme$cont : true);
 
   // Background colors
   const selectionColors = ((_overrides$selections = overrides.selections) === null || _overrides$selections === void 0 ? void 0 : _overrides$selections.colors) || {};
-  const selected = ((_selectionColors$sele = selectionColors.selected) === null || _selectionColors$sele === void 0 ? void 0 : _selectionColors$sele.color) || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected.main) || '#009845';
-  const alternative = ((_selectionColors$alte = selectionColors.alternative) === null || _selectionColors$alte === void 0 ? void 0 : _selectionColors$alte.color) || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected.alternative) || '#E4E4E4';
-  const excluded = ((_selectionColors$excl = selectionColors.excluded) === null || _selectionColors$excl === void 0 ? void 0 : _selectionColors$excl.color) || ((_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.selected.excluded) || '#A9A9A9';
-  const selectedExcluded = ((_selectionColors$sele2 = selectionColors.selectedExcluded) === null || _selectionColors$sele2 === void 0 ? void 0 : _selectionColors$sele2.color) || ((_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.selected.selectedExcluded) || '#A9A9A9';
-  const possible = ((_selectionColors$poss = selectionColors.possible) === null || _selectionColors$poss === void 0 ? void 0 : _selectionColors$poss.color) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
+  const selected = getColorPickerColor(selectionColors.selected) || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected.main) || '#009845';
+  const alternative = getColorPickerColor(selectionColors.alternative) || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected.alternative) || '#E4E4E4';
+  const excluded = getColorPickerColor(selectionColors.excluded) || ((_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.selected.excluded) || '#A9A9A9';
+  const selectedExcluded = getColorPickerColor(selectionColors.selectedExcluded) || ((_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.selected.selectedExcluded) || '#A9A9A9';
+  const possible = getColorPickerColor(selectionColors.possible) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
 
   // Font colors
   let selectedContrast = desiredTextColor || ((_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.selected.selectedContrastText);
@@ -17488,8 +17500,7 @@ function getBackgroundColor(_ref2) {
       bgColor
     }, themeApi, 'listBox');
   } else {
-    var _themeApi$getColorPic;
-    color = (_themeApi$getColorPic = themeApi.getColorPickerColor(bgColor, true)) === null || _themeApi$getColorPic === void 0 ? void 0 : _themeApi$getColorPic.color;
+    color = themeApi.getColorPickerColor(bgColor === null || bgColor === void 0 ? void 0 : bgColor.color, false);
   }
   return color;
 }
@@ -17509,14 +17520,16 @@ function getStyles(_ref3) {
   } = _ref3;
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
+  const getColorPickerColor = c => (c === null || c === void 0 ? void 0 : c.index) > 0 || c !== null && c !== void 0 && c.color ? themeApi.getColorPickerColor(c, false) : undefined;
   const selections = getSelectionColors({
+    getColorPickerColor,
     theme,
     getListboxStyle,
     overrides,
     checkboxes
   });
   const themeOverrides = overrides.theme || {};
-  const headerColor = ((_themeOverrides$heade = themeOverrides.header) === null || _themeOverrides$heade === void 0 || (_themeOverrides$heade = _themeOverrides$heade.fontColor) === null || _themeOverrides$heade === void 0 ? void 0 : _themeOverrides$heade.color) || getListboxStyle('title.main', 'color');
+  const headerColor = getColorPickerColor((_themeOverrides$heade = themeOverrides.header) === null || _themeOverrides$heade === void 0 ? void 0 : _themeOverrides$heade.fontColor) || getListboxStyle('title.main', 'color');
   const bgComponentColor = getBackgroundColor({
     themeApi,
     themeOverrides
@@ -17559,8 +17572,9 @@ function getStyles(_ref3) {
     search: {
       color: searchColor,
       borderColor: theme.palette.divider,
-      highlightBorderColor: theme.palette.primary.main,
-      backgroundColor: searchBgColor
+      highlightBorderColor: theme.palette.custom.focusBorder,
+      backgroundColor: searchBgColor,
+      backdropFilter: 'blur(8px)'
     },
     selections
   };
@@ -17932,13 +17946,13 @@ const downArrow = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var DownArrow = (props => SvgIcon$2(downArrow(props)));
+var DownArrow = (props => SvgIcon$1(downArrow(props)));
 
 const PREFIX$6 = 'MultiState';
 const classes$6 = {
   item: "".concat(PREFIX$6, "-item")
 };
-const StyledGrid$5 = styled$1(Grid)(_ref => {
+const StyledGrid$5 = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -18103,7 +18117,7 @@ const classes$5 = {
   item: "".concat(PREFIX$5, "-item"),
   badge: "".concat(PREFIX$5, "-badge")
 };
-const StyledGrid$4 = styled$1(Grid)(_ref => {
+const StyledGrid$4 = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -18374,7 +18388,7 @@ const selectionsBack = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var SelectionsBack = (props => SvgIcon$2(selectionsBack(props)));
+var SelectionsBack = (props => SvgIcon$1(selectionsBack(props)));
 
 const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -18384,7 +18398,7 @@ const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {},
     }
   }]
 });
-var SelectionsForward = (props => SvgIcon$2(selectionsForward(props)));
+var SelectionsForward = (props => SvgIcon$1(selectionsForward(props)));
 
 const patchAlternateState = (currentSelectionsModel, currentSelectionsLayout, appLayout) => {
   const states = [...(appLayout.qStateNames || [])].map(s => ({
@@ -18916,7 +18930,7 @@ const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var DrillDownIcon = (props => SvgIcon$2(drillDown(props)));
+var DrillDownIcon = (props => SvgIcon$1(drillDown(props)));
 
 function removeInnnerTabStops(container) {
   container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
@@ -19194,7 +19208,7 @@ function getListboxActionProps(_ref) {
   };
 }
 
-const StyledDiv = styled$1('div')(() => ({
+const StyledDiv = styled('div')(() => ({
   display: 'flex',
   width: '100%',
   height: '100%',
@@ -19240,7 +19254,7 @@ function getContainerPadding(_ref) {
     }
     containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
   } else {
-    containerPadding = undefined; // to prevent overriding any default padding
+    containerPadding = undefined;
   }
   return containerPadding;
 }
@@ -19251,7 +19265,7 @@ const classes$4 = {
   screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly"),
   listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 };
-const StyledGrid$3 = styled$1(Grid, {
+const StyledGrid$3 = styled(Grid, {
   shouldForwardProp: p => !['containerPadding', 'isGridMode', 'styles'].includes(p)
 })(_ref => {
   let {
@@ -19286,7 +19300,7 @@ const StyledGrid$3 = styled$1(Grid, {
     }
   });
 });
-const StyledGridHeader = styled$1(Grid, {
+const StyledGridHeader = styled(Grid, {
   shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
 })(_ref2 => {
   let {
@@ -19305,7 +19319,7 @@ const StyledGridHeader = styled$1(Grid, {
     }
   });
 });
-const Title = styled$1(Typography)(_ref3 => {
+const Title = styled(Typography)(_ref3 => {
   let {
     styles
   } = _ref3;
@@ -21493,7 +21507,7 @@ const warning = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var WarningTriangle = (props => SvgIcon$2(warning(props)));
+var WarningTriangle = (props => SvgIcon$1(warning(props)));
 
 /* eslint-disable react/no-array-index-key */
 function DescriptionRow(_ref) {
@@ -21632,7 +21646,7 @@ const classes$3 = {
   front: "".concat(PREFIX$3, "-front"),
   back: "".concat(PREFIX$3, "-back")
 };
-const Root = styled$1('div')(_ref => {
+const Root = styled('div')(_ref => {
   let {
     theme
   } = _ref;
@@ -21687,7 +21701,7 @@ const PREFIX$2 = 'LongRunningQuery';
 const classes$2 = {
   stripes: "".concat(PREFIX$2, "-stripes")
 };
-const StyledGrid$2 = styled$1(Grid)(() => ({
+const StyledGrid$2 = styled(Grid)(() => ({
   ["& .".concat(classes$2.stripes)]: {
     '&::before': {
       position: 'absolute',
@@ -21813,7 +21827,7 @@ const classes$1 = {
   containerStyle: "".concat(PREFIX$1, "-containerStyle"),
   containerTitleStyle: "".concat(PREFIX$1, "-containerTitleStyle")
 };
-const StyledGrid$1 = styled$1(Grid)(_ref => {
+const StyledGrid$1 = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -21932,7 +21946,7 @@ const PREFIX = 'Footer';
 const classes = {
   itemStyle: "".concat(PREFIX, "-itemStyle")
 };
-const StyledGrid = styled$1(Grid)(_ref => {
+const StyledGrid = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -26506,6 +26520,7 @@ try {
 
 // A linked list to keep track of recently-used-ness
 const Yallist = yallist;
+
 const MAX = Symbol('max');
 const LENGTH = Symbol('length');
 const LENGTH_CALCULATOR = Symbol('lengthCalculator');
@@ -26516,6 +26531,7 @@ const NO_DISPOSE_ON_SET = Symbol('noDisposeOnSet');
 const LRU_LIST = Symbol('lruList');
 const CACHE = Symbol('cache');
 const UPDATE_AGE_ON_GET = Symbol('updateAgeOnGet');
+
 const naiveLength = () => 1;
 
 // lruList is a yallist where the head is the youngest
@@ -26527,18 +26543,23 @@ const naiveLength = () => 1;
 // cache is a Map (or PseudoMap) that matches the keys to
 // the Yallist.Node object.
 class LRUCache {
-  constructor(options) {
-    if (typeof options === 'number') options = {
-      max: options
-    };
-    if (!options) options = {};
-    if (options.max && (typeof options.max !== 'number' || options.max < 0)) throw new TypeError('max must be a non-negative number');
+  constructor (options) {
+    if (typeof options === 'number')
+      options = { max: options };
+
+    if (!options)
+      options = {};
+
+    if (options.max && (typeof options.max !== 'number' || options.max < 0))
+      throw new TypeError('max must be a non-negative number')
     // Kind of weird to have a default max of Infinity, but oh well.
     this[MAX] = options.max || Infinity;
+
     const lc = options.length || naiveLength;
-    this[LENGTH_CALCULATOR] = typeof lc !== 'function' ? naiveLength : lc;
+    this[LENGTH_CALCULATOR] = (typeof lc !== 'function') ? naiveLength : lc;
     this[ALLOW_STALE] = options.stale || false;
-    if (options.maxAge && typeof options.maxAge !== 'number') throw new TypeError('maxAge must be a number');
+    if (options.maxAge && typeof options.maxAge !== 'number')
+      throw new TypeError('maxAge must be a number')
     this[MAX_AGE] = options.maxAge || 0;
     this[DISPOSE] = options.dispose;
     this[NO_DISPOSE_ON_SET] = options.noDisposeOnSet || false;
@@ -26547,32 +26568,40 @@ class LRUCache {
   }
 
   // resize the cache when the max changes.
-  set max(mL) {
-    if (typeof mL !== 'number' || mL < 0) throw new TypeError('max must be a non-negative number');
+  set max (mL) {
+    if (typeof mL !== 'number' || mL < 0)
+      throw new TypeError('max must be a non-negative number')
+
     this[MAX] = mL || Infinity;
     trim(this);
   }
-  get max() {
-    return this[MAX];
+  get max () {
+    return this[MAX]
   }
-  set allowStale(allowStale) {
+
+  set allowStale (allowStale) {
     this[ALLOW_STALE] = !!allowStale;
   }
-  get allowStale() {
-    return this[ALLOW_STALE];
+  get allowStale () {
+    return this[ALLOW_STALE]
   }
-  set maxAge(mA) {
-    if (typeof mA !== 'number') throw new TypeError('maxAge must be a non-negative number');
+
+  set maxAge (mA) {
+    if (typeof mA !== 'number')
+      throw new TypeError('maxAge must be a non-negative number')
+
     this[MAX_AGE] = mA;
     trim(this);
   }
-  get maxAge() {
-    return this[MAX_AGE];
+  get maxAge () {
+    return this[MAX_AGE]
   }
 
   // resize the cache when the lengthCalculator changes.
-  set lengthCalculator(lC) {
-    if (typeof lC !== 'function') lC = naiveLength;
+  set lengthCalculator (lC) {
+    if (typeof lC !== 'function')
+      lC = naiveLength;
+
     if (lC !== this[LENGTH_CALCULATOR]) {
       this[LENGTH_CALCULATOR] = lC;
       this[LENGTH] = 0;
@@ -26583,16 +26612,12 @@ class LRUCache {
     }
     trim(this);
   }
-  get lengthCalculator() {
-    return this[LENGTH_CALCULATOR];
-  }
-  get length() {
-    return this[LENGTH];
-  }
-  get itemCount() {
-    return this[LRU_LIST].length;
-  }
-  rforEach(fn, thisp) {
+  get lengthCalculator () { return this[LENGTH_CALCULATOR] }
+
+  get length () { return this[LENGTH] }
+  get itemCount () { return this[LRU_LIST].length }
+
+  rforEach (fn, thisp) {
     thisp = thisp || this;
     for (let walker = this[LRU_LIST].tail; walker !== null;) {
       const prev = walker.prev;
@@ -26600,7 +26625,8 @@ class LRUCache {
       walker = prev;
     }
   }
-  forEach(fn, thisp) {
+
+  forEach (fn, thisp) {
     thisp = thisp || this;
     for (let walker = this[LRU_LIST].head; walker !== null;) {
       const next = walker.next;
@@ -26608,48 +26634,65 @@ class LRUCache {
       walker = next;
     }
   }
-  keys() {
-    return this[LRU_LIST].toArray().map(k => k.key);
+
+  keys () {
+    return this[LRU_LIST].toArray().map(k => k.key)
   }
-  values() {
-    return this[LRU_LIST].toArray().map(k => k.value);
+
+  values () {
+    return this[LRU_LIST].toArray().map(k => k.value)
   }
-  reset() {
-    if (this[DISPOSE] && this[LRU_LIST] && this[LRU_LIST].length) {
+
+  reset () {
+    if (this[DISPOSE] &&
+        this[LRU_LIST] &&
+        this[LRU_LIST].length) {
       this[LRU_LIST].forEach(hit => this[DISPOSE](hit.key, hit.value));
     }
+
     this[CACHE] = new Map(); // hash of items by key
     this[LRU_LIST] = new Yallist(); // list of items in order of use recency
     this[LENGTH] = 0; // length of items in the list
   }
-  dump() {
-    return this[LRU_LIST].map(hit => isStale(this, hit) ? false : {
-      k: hit.key,
-      v: hit.value,
-      e: hit.now + (hit.maxAge || 0)
-    }).toArray().filter(h => h);
+
+  dump () {
+    return this[LRU_LIST].map(hit =>
+      isStale(this, hit) ? false : {
+        k: hit.key,
+        v: hit.value,
+        e: hit.now + (hit.maxAge || 0)
+      }).toArray().filter(h => h)
   }
-  dumpLru() {
-    return this[LRU_LIST];
+
+  dumpLru () {
+    return this[LRU_LIST]
   }
-  set(key, value, maxAge) {
+
+  set (key, value, maxAge) {
     maxAge = maxAge || this[MAX_AGE];
-    if (maxAge && typeof maxAge !== 'number') throw new TypeError('maxAge must be a number');
+
+    if (maxAge && typeof maxAge !== 'number')
+      throw new TypeError('maxAge must be a number')
+
     const now = maxAge ? Date.now() : 0;
     const len = this[LENGTH_CALCULATOR](value, key);
+
     if (this[CACHE].has(key)) {
       if (len > this[MAX]) {
         del(this, this[CACHE].get(key));
-        return false;
+        return false
       }
+
       const node = this[CACHE].get(key);
       const item = node.value;
 
       // dispose of the old one before overwriting
       // split out into 2 ifs for better coverage tracking
       if (this[DISPOSE]) {
-        if (!this[NO_DISPOSE_ON_SET]) this[DISPOSE](key, item.value);
+        if (!this[NO_DISPOSE_ON_SET])
+          this[DISPOSE](key, item.value);
       }
+
       item.now = now;
       item.maxAge = maxAge;
       item.value = value;
@@ -26657,44 +26700,57 @@ class LRUCache {
       item.length = len;
       this.get(key);
       trim(this);
-      return true;
+      return true
     }
+
     const hit = new Entry(key, value, len, now, maxAge);
 
     // oversized objects fall out of cache automatically.
     if (hit.length > this[MAX]) {
-      if (this[DISPOSE]) this[DISPOSE](key, value);
-      return false;
+      if (this[DISPOSE])
+        this[DISPOSE](key, value);
+
+      return false
     }
+
     this[LENGTH] += hit.length;
     this[LRU_LIST].unshift(hit);
     this[CACHE].set(key, this[LRU_LIST].head);
     trim(this);
-    return true;
+    return true
   }
-  has(key) {
-    if (!this[CACHE].has(key)) return false;
+
+  has (key) {
+    if (!this[CACHE].has(key)) return false
     const hit = this[CACHE].get(key).value;
-    return !isStale(this, hit);
+    return !isStale(this, hit)
   }
-  get(key) {
-    return get(this, key, true);
+
+  get (key) {
+    return get(this, key, true)
   }
-  peek(key) {
-    return get(this, key, false);
+
+  peek (key) {
+    return get(this, key, false)
   }
-  pop() {
+
+  pop () {
     const node = this[LRU_LIST].tail;
-    if (!node) return null;
+    if (!node)
+      return null
+
     del(this, node);
-    return node.value;
+    return node.value
   }
-  del(key) {
+
+  del (key) {
     del(this, this[CACHE].get(key));
   }
-  load(arr) {
+
+  load (arr) {
     // reset the cache
     this.reset();
+
     const now = Date.now();
     // A previous serialized cache has the most recent items first
     for (let l = arr.length - 1; l >= 0; l--) {
@@ -26702,7 +26758,8 @@ class LRUCache {
       const expiresAt = hit.e || 0;
       if (expiresAt === 0)
         // the item was created without expiration in a non aged cache
-        this.set(hit.k, hit.v);else {
+        this.set(hit.k, hit.v);
+      else {
         const maxAge = expiresAt - now;
         // dont add already expired items
         if (maxAge > 0) {
@@ -26711,34 +26768,44 @@ class LRUCache {
       }
     }
   }
-  prune() {
+
+  prune () {
     this[CACHE].forEach((value, key) => get(this, key, false));
   }
 }
+
 const get = (self, key, doUse) => {
   const node = self[CACHE].get(key);
   if (node) {
     const hit = node.value;
     if (isStale(self, hit)) {
       del(self, node);
-      if (!self[ALLOW_STALE]) return undefined;
+      if (!self[ALLOW_STALE])
+        return undefined
     } else {
       if (doUse) {
-        if (self[UPDATE_AGE_ON_GET]) node.value.now = Date.now();
+        if (self[UPDATE_AGE_ON_GET])
+          node.value.now = Date.now();
         self[LRU_LIST].unshiftNode(node);
       }
     }
-    return hit.value;
+    return hit.value
   }
 };
+
 const isStale = (self, hit) => {
-  if (!hit || !hit.maxAge && !self[MAX_AGE]) return false;
+  if (!hit || (!hit.maxAge && !self[MAX_AGE]))
+    return false
+
   const diff = Date.now() - hit.now;
-  return hit.maxAge ? diff > hit.maxAge : self[MAX_AGE] && diff > self[MAX_AGE];
+  return hit.maxAge ? diff > hit.maxAge
+    : self[MAX_AGE] && (diff > self[MAX_AGE])
 };
+
 const trim = self => {
   if (self[LENGTH] > self[MAX]) {
-    for (let walker = self[LRU_LIST].tail; self[LENGTH] > self[MAX] && walker !== null;) {
+    for (let walker = self[LRU_LIST].tail;
+      self[LENGTH] > self[MAX] && walker !== null;) {
       // We know that we're about to delete this one, and also
       // what the next least recently used key will be, so just
       // go ahead and set it now.
@@ -26748,17 +26815,21 @@ const trim = self => {
     }
   }
 };
+
 const del = (self, node) => {
   if (node) {
     const hit = node.value;
-    if (self[DISPOSE]) self[DISPOSE](hit.key, hit.value);
+    if (self[DISPOSE])
+      self[DISPOSE](hit.key, hit.value);
+
     self[LENGTH] -= hit.length;
     self[CACHE].delete(hit.key);
     self[LRU_LIST].removeNode(node);
   }
 };
+
 class Entry {
-  constructor(key, value, length, now, maxAge) {
+  constructor (key, value, length, now, maxAge) {
     this.key = key;
     this.value = value;
     this.length = length;
@@ -26766,14 +26837,18 @@ class Entry {
     this.maxAge = maxAge || 0;
   }
 }
+
 const forEachStep = (self, fn, node, thisp) => {
   let hit = node.value;
   if (isStale(self, hit)) {
     del(self, node);
-    if (!self[ALLOW_STALE]) hit = undefined;
+    if (!self[ALLOW_STALE])
+      hit = undefined;
   }
-  if (hit) fn.call(thisp, hit.value, hit.key, self);
+  if (hit)
+    fn.call(thisp, hit.value, hit.key, self);
 };
+
 var lruCache = LRUCache;
 
 // parse out just the options we care about
@@ -28780,6 +28855,8 @@ function SessionMock() {
   };
 }
 
+/* eslint-disable no-underscore-dangle */
+
 // To cover test
 // eslint-disable-next-line no-undef
 const crt = globalThis.crypto || {
@@ -28791,7 +28868,7 @@ const crt = globalThis.crypto || {
 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 || {};
@@ -28802,15 +28879,17 @@ function CreateSessionObjectMock() {
       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
+    });
   };
 }
 
@@ -29031,7 +29110,7 @@ function GetAppLayoutMock() {
 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 = {