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

package/core/esm/dev.js

@@ -1,6 +1,6 @@
 /*
-* @nebula.js/stardust v5.0.0-alpha.1
-* Copyright (c) 2023 QlikTech International AB
+* @nebula.js/stardust v5.0.0-alpha.3
+* 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, ButtonBase, CircularProgress, Icon } 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;
@@ -709,26 +709,40 @@ var runtime = {exports: {}};
   }
 })(runtime);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
@@ -785,20 +799,6 @@ function _objectWithoutProperties(source, excluded) {
   }
   return target;
 }
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 const format = function () {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -1932,6 +1932,26 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"zh-TW": "不符計算條件"
 	}
 };
+var SelectionToolbar_ClickToLock = {
+	id: "SelectionToolbar.ClickToLock",
+	locale: {
+		"de-DE": "Klicken zum Sperren",
+		"en-US": "Click to lock",
+		"es-ES": "Haga clic para bloquearla",
+		"fr-FR": "Cliquez pour verrouiller",
+		"it-IT": "Fare clic per bloccare",
+		"ja-JP": "クリックしてロック",
+		"ko-KR": "잠그려면 클릭하십시오.",
+		"nl-NL": "Klik om te vergrendelen",
+		"pl-PL": "Aby zablokować, kliknij",
+		"pt-BR": "Clique para travar",
+		"ru-RU": "Щелкните, чтобы заблокировать",
+		"sv-SE": "Klicka för att låsa",
+		"tr-TR": "Kilitlemek için tıklayın",
+		"zh-CN": "单击以锁定",
+		"zh-TW": "按一下鎖定"
+	}
+};
 var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
@@ -1984,7 +2004,8 @@ var all = {
 	Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 	Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 	Visualization_LayoutError: Visualization_LayoutError,
-	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+	SelectionToolbar_ClickToLock: SelectionToolbar_ClickToLock
 };
 
 function appLocaleFn(language) {
@@ -3063,10 +3084,27 @@ var _variables = {
 };
 var type = "dark";
 var color$1 = "@B98";
+var object$1 = {
+	listBox: {
+		backgroundColor: "@B20",
+		title: {
+			main: {
+				color: "@B98",
+				fontSize: "14px",
+				fontWeight: "bold"
+			}
+		},
+		content: {
+			color: "#@B98",
+			fontSize: "12px"
+		}
+	}
+};
 var darkRawJSON = {
 	_variables: _variables,
 	type: type,
-	color: color$1
+	color: color$1,
+	object: object$1
 };
 
 var object = {
@@ -3096,7 +3134,7 @@ function setTheme(t, resolve) {
   if (t._inherit === false || t._inherit === 'false') {
     baseInherit = {};
   }
-  const root = extend$2(true, {}, baseRawJSON, colorRawJSON, baseInherit);
+  const root = extend$2(true, {}, baseRawJSON, baseInherit, colorRawJSON);
   // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
   const rawThemeJSON = extend$2(true, {}, root, {
     scales: null,
@@ -3824,65 +3862,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;
@@ -3895,916 +3882,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;
-  }
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
-  return useGlobalId(idOverride);
-}
+styleSheet.insert('#box { border: 1px solid red; }')
+- appends a css rule into the stylesheet
 
-function unsupportedProp(props, propName, componentName, location, propFullName) {
-  {
-    return null;
+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 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];
+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';
+
 /**
- * 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`
-  (0, ref.current)(...args)).current;
+/**
+ * @param {number}
+ * @return {string}
+ */
+var from = String.fromCharCode;
+
+/**
+ * @param {object}
+ * @return {object}
+ */
+var assign = Object.assign;
+
+/**
+ * @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 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 {string} value
+ * @return {string}
+ */
+function trim$1 (value) {
+	return value.trim()
 }
 
-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 {RegExp} pattern
+ * @return {string?}
+ */
+function match (value, pattern) {
+	return (value = pattern.exec(value)) ? value[0] : value
+}
 
 /**
- * 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
+ * @param {(string|RegExp)} pattern
+ * @param {string} replacement
+ * @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 replace (value, pattern, replacement) {
+	return value.replace(pattern, replacement)
 }
 
 /**
- * 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 {string} search
+ * @return {number}
  */
-function handleKeyDown(event) {
-  if (event.metaKey || event.altKey || event.ctrlKey) {
-    return;
-  }
-  hadKeyboardEvent = true;
+function indexof (value, search) {
+	return value.indexOf(search)
 }
 
 /**
- * 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 {number} index
+ * @return {number}
  */
-function handlePointerDown() {
-  hadKeyboardEvent = false;
+function charat (value, index) {
+	return value.charCodeAt(index) | 0
 }
-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 {number} begin
+ * @param {number} end
+ * @return {string}
+ */
+function substr (value, begin, end) {
+	return value.slice(begin, end)
 }
-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
+ * @return {number}
+ */
+function strlen (value) {
+	return value.length
 }
-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);
+/**
+ * @param {any[]} value
+ * @return {number}
+ */
+function sizeof (value) {
+	return value.length
 }
-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;
-  }
+/**
+ * @param {any} value
+ * @param {any[]} array
+ * @return {any}
+ */
+function append (value, array) {
+	return array.push(value), value
+}
 
-  /**
-   * 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[]} 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 = '';
+
 /**
- * Add keys, values of `defaultProps` that does not exist in `props`
- * @param {object} defaultProps
+ * @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
- * @returns {object} resolved props
+ * @return {object}
  */
-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 copy (root, props) {
+	return assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
 }
 
-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;
+/**
+ * @return {number}
+ */
+function char () {
+	return character
 }
 
-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;
+/**
+ * @return {number}
+ */
+function prev () {
+	character = position > 0 ? charat(characters, --position) : 0;
 
-// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
-// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
+	if (column--, character === 10)
+		column = 1, line--;
 
-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}`;
+	return character
 }
 
-function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
-  const result = {};
-  slots.forEach(slot => {
-    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-  });
-  return result;
-}
+/**
+ * @return {number}
+ */
+function next () {
+	character = position < length ? charat(characters, position++) : 0;
 
-var THEME_ID = '$$material';
+	if (column++, character === 10)
+		column = 1, line++;
 
-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);
+	return character
 }
 
-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;
-}
-
-/*
-
-Based off glamor's StyleSheet, thanks Sunil ❤️
-
-high performance StyleSheet for css-in-js systems
-
-- uses multiple style tags behind the scenes for millions of rules
-- uses `insertRule` for appending in production for *much* faster performance
-
-// usage
-
-import { StyleSheet } from '@emotion/sheet'
-
-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';
-
 /**
- * @param {number}
  * @return {number}
  */
-var abs = Math.abs;
+function peek () {
+	return charat(characters, position)
+}
 
 /**
- * @param {number}
- * @return {string}
+ * @return {number}
  */
-var from = String.fromCharCode;
+function caret () {
+	return position
+}
 
 /**
- * @param {object}
- * @return {object}
+ * @param {number} begin
+ * @param {number} end
+ * @return {string}
  */
-var assign = Object.assign;
+function slice (begin, end) {
+	return substr(characters, begin, end)
+}
 
 /**
- * @param {string} value
- * @param {number} length
+ * @param {number} type
  * @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 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 {string}
+ * @return {any[]}
  */
-function trim$1 (value) {
-	return value.trim()
+function alloc (value) {
+	return line = column = 1, length = strlen(characters = value), position = 0, []
 }
 
 /**
- * @param {string} value
- * @param {RegExp} pattern
- * @return {string?}
+ * @param {any} value
+ * @return {any}
  */
-function match (value, pattern) {
-	return (value = pattern.exec(value)) ? value[0] : value
+function dealloc (value) {
+	return characters = '', value
 }
 
 /**
- * @param {string} value
- * @param {(string|RegExp)} pattern
- * @param {string} replacement
+ * @param {number} type
  * @return {string}
  */
-function replace (value, pattern, replacement) {
-	return value.replace(pattern, replacement)
+function delimit (type) {
+	return trim$1(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
 }
 
 /**
- * @param {string} value
- * @param {string} search
- * @return {number}
+ * @param {number} type
+ * @return {string}
  */
-function indexof (value, search) {
-	return value.indexOf(search)
+function whitespace (type) {
+	while (character = peek())
+		if (character < 33)
+			next();
+		else
+			break
+
+	return token(type) > 2 || token(character) > 3 ? '' : ' '
 }
 
 /**
- * @param {string} value
  * @param {number} index
- * @return {number}
+ * @param {number} count
+ * @return {string}
  */
-function charat (value, index) {
-	return value.charCodeAt(index) | 0
-}
-
-/**
- * @param {string} value
- * @param {number} begin
- * @param {number} end
- * @return {string}
- */
-function substr (value, begin, end) {
-	return value.slice(begin, end)
-}
-
-/**
- * @param {string} value
- * @return {number}
- */
-function strlen (value) {
-	return value.length
-}
-
-/**
- * @param {any[]} value
- * @return {number}
- */
-function sizeof (value) {
-	return value.length
-}
-
-/**
- * @param {any} value
- * @param {any[]} array
- * @return {any}
- */
-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))
 }
 
 /**
@@ -5669,14 +5198,14 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @mui/styled-engine v5.15.0
+ * @mui/styled-engine v5.15.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function styled$2(tag, options) {
-  const stylesFactory = styled$3(tag, options);
+function styled$1(tag, options) {
+  const stylesFactory = styled$2(tag, options);
   return stylesFactory;
 }
 
@@ -5689,6 +5218,34 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
+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++) {
@@ -5699,22 +5256,535 @@ function _extends$2() {
         }
       }
     }
-    return target;
+    return target;
+  };
+  return _extends$2.apply(this, arguments);
+}
+
+// https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
+function isPlainObject(item) {
+  if (typeof item !== 'object' || item === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(item);
+  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
+}
+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);
+}
+
+class Timeout {
+  constructor() {
+    this.currentId = 0;
+    this.clear = () => {
+      if (this.currentId !== 0) {
+        clearTimeout(this.currentId);
+        this.currentId = 0;
+      }
+    };
+    this.disposeEffect = () => {
+      return this.clear;
+    };
+  }
+  static create() {
+    return new Timeout();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = 0;
+      fn();
+    }, delay);
+  }
+}
+
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+const hadFocusVisibleRecentlyTimeout = new Timeout();
+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;
+      hadFocusVisibleRecentlyTimeout.start(100, () => {
+        hadFocusVisibleRecently = false;
+      });
+      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
+  };
+}
+
+/**
+ * Add keys, values of `defaultProps` that does not exist in `props`
+ * @param {object} defaultProps
+ * @param {object} props
+ * @returns {object} resolved props
+ */
+function resolveProps(defaultProps, props) {
+  const output = _extends$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;
+}
+
+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 _extends$2.apply(this, arguments);
+};
+const ClassNameGenerator = createClassNameGenerator();
+
+const globalStateClasses = {
+  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 = globalStateClasses[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;
+}
+
+function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+  return Math.max(min, Math.min(val, max));
 }
 
 const _excluded$g = ["values", "unit", "step"];
@@ -5726,7 +5796,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
     });
   }, {});
@@ -5783,7 +5853,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,
@@ -6724,7 +6794,81 @@ function unstable_createStyleFunctionSx() {
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var styleFunctionSx$1 = styleFunctionSx;
+
+/**
+ * A universal utility to style components with multiple color modes. Always use it from the theme object.
+ * It works with:
+ *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
+ *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - Zero-runtime engine
+ *
+ * Tips: Use an array over object spread and place `theme.applyStyles()` last.
+ *
+ * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
+ *
+ * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
+ *
+ * @example
+ * 1. using with `styled`:
+ * ```jsx
+ *   const Component = styled('div')(({ theme }) => [
+ *     { background: '#e5e5e5' },
+ *     theme.applyStyles('dark', {
+ *       background: '#1c1c1c',
+ *       color: '#fff',
+ *     }),
+ *   ]);
+ * ```
+ *
+ * @example
+ * 2. using with `sx` prop:
+ * ```jsx
+ *   <Box sx={theme => [
+ *     { background: '#e5e5e5' },
+ *     theme.applyStyles('dark', {
+ *        background: '#1c1c1c',
+ *        color: '#fff',
+ *      }),
+ *     ]}
+ *   />
+ * ```
+ *
+ * @example
+ * 3. theming a component:
+ * ```jsx
+ *   extendTheme({
+ *     components: {
+ *       MuiButton: {
+ *         styleOverrides: {
+ *           root: ({ theme }) => [
+ *             { background: '#e5e5e5' },
+ *             theme.applyStyles('dark', {
+ *               background: '#1c1c1c',
+ *               color: '#fff',
+ *             }),
+ *           ],
+ *         },
+ *       }
+ *     }
+ *   })
+ *```
+ */
+function applyStyles(key, styles) {
+  // @ts-expect-error this is 'any' type
+  const theme = this;
+  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
+    // If CssVarsProvider is used as a provider,
+    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
+    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+    return {
+      [selector]: styles
+    };
+  }
+  if (theme.palette.mode === key) {
+    return styles;
+  }
+  return {};
+}
 
 const _excluded$f = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
@@ -6742,16 +6886,17 @@ 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.applyStyles = applyStyles;
   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
     });
@@ -6772,7 +6917,7 @@ function useTheme$3(defaultTheme = systemDefaultTheme$1) {
   return useTheme$4(defaultTheme);
 }
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const _excluded$e = ["variant"];
 function isEmpty$2(string) {
@@ -6820,10 +6965,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;
     });
   }
@@ -6841,16 +6993,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;
       }
     });
   }
@@ -6892,8 +7057,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
     }))
@@ -6917,8 +7082,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
       }))
@@ -6959,7 +7124,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));
@@ -7025,7 +7190,7 @@ function createStyled(input = {}) {
       }
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme(_extends$3({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7033,7 +7198,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;
             });
@@ -7044,7 +7209,7 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme(_extends$3({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7104,7 +7269,6 @@ function useThemeProps$1({
   return mergedProps;
 }
 
-/* eslint-disable @typescript-eslint/naming-convention */
 /**
  * Returns a number whose value is limited to the given range.
  * @param {number} value The value to be clamped
@@ -7112,8 +7276,8 @@ function useThemeProps$1({
  * @param {number} max The upper boundary of the output range
  * @returns {number} A number in the range [min, max]
  */
-function clamp(value, min = 0, max = 1) {
-  return Math.min(Math.max(min, value), max);
+function clampWrapper(value, min = 0, max = 1) {
+  return clamp(value, min, max);
 }
 
 /**
@@ -7275,7 +7439,7 @@ function getContrastRatio(foreground, background) {
  */
 function darken(color, coefficient) {
   color = decomposeColor(color);
-  coefficient = clamp(coefficient);
+  coefficient = clampWrapper(coefficient);
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] *= 1 - coefficient;
   } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
@@ -7294,7 +7458,7 @@ function darken(color, coefficient) {
  */
 function lighten(color, coefficient) {
   color = decomposeColor(color);
-  coefficient = clamp(coefficient);
+  coefficient = clampWrapper(coefficient);
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] += (100 - color.values[2]) * coefficient;
   } else if (color.type.indexOf('rgb') !== -1) {
@@ -7373,7 +7537,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.
@@ -7383,9 +7547,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]);
 }
 
@@ -7427,7 +7591,7 @@ function adaptV4Theme(inputTheme) {
       styleOverrides = {}
     } = inputTheme,
     other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$c);
-  const theme = _extends$3({}, other, {
+  const theme = _extends$4({}, other, {
     components: {}
   });
 
@@ -7461,13 +7625,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')])
@@ -7480,7 +7644,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)'
@@ -7492,7 +7656,7 @@ function adaptV4Theme(inputTheme) {
 }
 
 function createMixins(breakpoints, mixins) {
-  return _extends$3({
+  return _extends$4({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -7830,7 +7994,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];
     }
@@ -7851,9 +8015,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,
@@ -7941,7 +8105,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),
@@ -7973,7 +8137,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends$3({
+  return deepmerge(_extends$4({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -7996,7 +8160,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
@@ -8041,8 +8204,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,
@@ -8052,7 +8215,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, {
@@ -8093,16 +8256,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
     });
@@ -8136,7 +8299,6 @@ const styled = createStyled({
   defaultTheme: defaultTheme$1,
   rootShouldForwardProp
 });
-var styled$1 = styled;
 
 const _excluded$7 = ["theme"];
 function ThemeProvider(_ref) {
@@ -8145,7 +8307,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
   }));
@@ -8242,6 +8404,7 @@ const colors = {
   grey90: '#E6E6E6',
   grey85: '#D9D9D9',
   grey55: '#8C8C8C',
+  grey45: '#737373',
   grey30: '#4D4D4D',
   grey25: '#404040',
   grey20: '#333333',
@@ -8296,7 +8459,9 @@ const light = {
     custom: {
       focusBorder: colors.blue,
       focusOutline: 'rgba(70, 157, 205, 0.3)',
-      inputBackground: 'rgba(255, 255, 255, 1)'
+      inputBackground: 'rgba(255, 255, 255, 1)',
+      disabledBackground: colors.grey45,
+      disabledContrastText: colors.grey100
     },
     selected: {
       main: colors.green,
@@ -8364,7 +8529,9 @@ const dark = {
     custom: {
       focusBorder: colors.blue,
       focusOutline: 'rgba(70, 157, 205, 0.3)',
-      inputBackground: 'rgba(0, 0, 0, 0.2)'
+      inputBackground: 'rgba(0, 0, 0, 0.2)',
+      disabledBackground: colors.grey45,
+      disabledContrastText: colors.grey100
     },
     selected: {
       main: colors.green,
@@ -8525,8 +8692,8 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "5ec7" ;
-ClassNameGenerator$1.configure(componentName => {
+const NEBULA_VERSION_HASH = "fc09" ;
+ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
 
@@ -8757,7 +8924,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.1" );
+  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -9106,7 +9273,7 @@ function getFontSize(size) {
   }
   return '16px';
 }
-function SvgIcon$2(_ref) {
+function SvgIcon$1(_ref) {
   let {
     size,
     style = {},
@@ -9156,7 +9323,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: [{
@@ -9166,9 +9333,10 @@ 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), {}, {
+  viewBox: '0 0 12 16',
   shapes: [{
     type: 'path',
     attrs: {
@@ -9176,7 +9344,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,
@@ -9817,7 +9985,7 @@ const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Tick = (props => SvgIcon$2(tick(props)));
+var Tick = (props => SvgIcon$1(tick(props)));
 
 /**
  * @ignore
@@ -10020,7 +10188,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 {
@@ -10228,7 +10396,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 {
@@ -10325,7 +10493,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
@@ -10642,7 +10810,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 {
@@ -11206,12 +11374,13 @@ function RowColumn(_ref) {
     flexGrow: 1,
     paddingLeft: isRtl ? 8 : checkboxes ? 0 : undefined,
     paddingRight: checkboxes ? 0 : isRtl ? 8 : 0,
-    justifyContent: valueTextAlign
+    justifyContent: valueTextAlign,
+    textAlign: valueTextAlign
   };
   const isFirstElement = index === 0;
-  const showLock = isSelected && isLocked;
-  const showTick = !checkboxes && isSelected && !isLocked;
-  const showIcon = !checkboxes && sizePermitsTickOrLock;
+  const showLockIcon = isSelected && isLocked;
+  const showTickIcon = !checkboxes && isSelected && !isLocked;
+  const showAnyIcon = !checkboxes && sizePermitsTickOrLock;
   const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
   const ariaLabel = getValueLabel({
     translator,
@@ -11307,13 +11476,13 @@ function RowColumn(_ref) {
     checkboxes: checkboxes,
     dense: dense,
     showGray: showGray
-  }), showIcon && /*#__PURE__*/React__default.createElement(Grid, {
+  }), showAnyIcon && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: rowColClasses.icon
-  }, showLock && /*#__PURE__*/React__default.createElement(Lock, {
+  }, showLockIcon && /*#__PURE__*/React__default.createElement(Lock, {
     style: iconStyles,
     size: "small"
-  }), showTick && /*#__PURE__*/React__default.createElement(Tick, {
+  }), showTickIcon && /*#__PURE__*/React__default.createElement(Tick, {
     style: iconStyles,
     size: "small"
   }))));
@@ -12783,7 +12952,7 @@ function getStyledComponents() {
       backgroundColor: scrollBarThumbHover
     }
   });
-  const StyledFixedSizeList = styled$3(FixedSizeList, {
+  const StyledFixedSizeList = styled$2(FixedSizeList, {
     shouldForwardProp: prop => prop !== 'scrollDisabled'
   })(_ref => {
     let {
@@ -12793,7 +12962,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 {
@@ -13410,7 +13579,7 @@ function useDataStore(model) {
   };
 }
 
-const StyledText = styled$1(Typography, {
+const StyledText = styled(Typography, {
   shouldForwardProp: p => !['width', 'dense'].includes(p)
 })(_ref => {
   let {
@@ -13483,7 +13652,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) => {
@@ -13541,7 +13710,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,
@@ -13555,7 +13724,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",
@@ -13571,18 +13740,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));
 }
 
@@ -13590,7 +13758,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);
   }
 };
 
@@ -13647,12 +13815,11 @@ Object.defineProperty(Close, "__esModule", {
 var default_1 = Close.default = void 0;
 var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
 var _jsxRuntime = jsxRuntimeExports;
-var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+default_1 = Close.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), 'Close');
-default_1 = Close.default = _default;
 
-const RootContainer = styled$1(Paper)(_ref => {
+const RootContainer = styled(Paper)(_ref => {
   let {
     theme,
     left
@@ -13666,11 +13833,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;
@@ -13679,7 +13846,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) {
@@ -13828,7 +13995,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,
@@ -14344,7 +14511,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,
@@ -14373,11 +14540,12 @@ const clearSelections = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var ClearSelections = (props => SvgIcon$2(clearSelections(props)));
+var ClearSelections = (props => SvgIcon$1(clearSelections(props)));
 
 function useDefaultSelectionActions(_ref) {
   let {
     api,
+    layout,
     onConfirm = () => {},
     onCancel = () => {},
     onKeyDeactivate = () => {}
@@ -14389,14 +14557,14 @@ function useDefaultSelectionActions(_ref) {
     key: 'clear',
     type: 'icon-button',
     label: translator.get('Selection.Clear'),
-    enabled: () => api.canClear(),
+    enabled: () => api.canClear(layout),
     action: () => api.clear(),
     getSvgIconShape: clearSelections
   }, {
     key: 'cancel',
     type: 'icon-button',
     label: translator.get('Selection.Cancel'),
-    enabled: () => api.canCancel(),
+    enabled: () => api.canCancel(layout),
     action: () => {
       onCancel();
       api.cancel();
@@ -14411,7 +14579,7 @@ function useDefaultSelectionActions(_ref) {
     key: 'confirm',
     type: 'icon-button',
     label: translator.get('Selection.Confirm'),
-    enabled: () => api.canConfirm(),
+    enabled: () => api.canConfirm(layout),
     action: () => {
       onConfirm();
       api.confirm();
@@ -14432,7 +14600,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;
@@ -14467,7 +14635,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;
 }
@@ -14516,7 +14684,7 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   }), /*#__PURE__*/React__default.createElement(MenuList, {
     id: "moreMenuList"
   }, actions.map((item, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(MoreItem, {
     key: ix,
@@ -14546,7 +14714,8 @@ function getActionsKeyDownHandler(_ref) {
     keyboardNavigation,
     focusHandler,
     getEnabledButton,
-    selections
+    selections,
+    isRtl
   } = _ref;
   const handleActionsKeyDown = evt => {
     const {
@@ -14565,7 +14734,8 @@ function getActionsKeyDownHandler(_ref) {
           const isActionButton = target.classList.contains('njs-cell-action');
           if (isActionButton) {
             const index = getActionButtonIndex(target);
-            const pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+            let pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+            pressedLeft = isRtl ? !pressedLeft : pressedLeft; // invert direction when using RTL
             focusButton(pressedLeft ? index - 1 : index + 1);
           }
           evt.stopPropagation();
@@ -14604,7 +14774,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;
@@ -14670,6 +14840,7 @@ function ActionsToolbar(_ref3) {
       onConfirm: () => {},
       onCancel: () => {}
     },
+    extraItems,
     more: more$1 = {
       enabled: false,
       actions: [],
@@ -14684,10 +14855,13 @@ function ActionsToolbar(_ref3) {
     focusHandler = null,
     actionsRefMock = null,
     // for testing
-    direction = 'ltr',
-    autoConfirm = false
+    isRtl,
+    autoConfirm = false,
+    layout
   } = _ref3;
-  const defaultSelectionActions = useDefaultSelectionActions(selections);
+  const defaultSelectionActions = useDefaultSelectionActions(_objectSpread2(_objectSpread2({}, selections), {}, {
+    layout
+  }));
   const {
     translator,
     keyboardNavigation
@@ -14713,8 +14887,9 @@ function ActionsToolbar(_ref3) {
     keyboardNavigation,
     focusHandler,
     getEnabledButton,
-    selections
-  }), [keyboardNavigation, focusHandler, getEnabledButton, selections]);
+    selections,
+    isRtl
+  }), [keyboardNavigation, focusHandler, getEnabledButton, selections, isRtl]);
   useEffect$1(() => () => {
     setShowMoreItems(false);
   }, [popover.show, show, selections.show]);
@@ -14722,11 +14897,11 @@ function ActionsToolbar(_ref3) {
     if (!focusHandler) return;
     const focusFirst = () => {
       const enabledButton = getEnabledButton(false);
-      enabledButton && enabledButton.focus();
+      enabledButton === null || enabledButton === void 0 || enabledButton.focus();
     };
     const focusLast = () => {
       const enabledButton = getEnabledButton(true);
-      enabledButton && enabledButton.focus();
+      enabledButton === null || enabledButton === void 0 || enabledButton.focus();
     };
     focusHandler.on('focus_toolbar_first', focusFirst);
     focusHandler.on('focus_toolbar_last', focusLast);
@@ -14760,7 +14935,6 @@ function ActionsToolbar(_ref3) {
   const showActions = newActions.length > 0;
   const showMore = moreActions.length > 0;
   const showDivider = showActions && selections.show || showMore && selections.show;
-  const isRtl = direction === 'rtl';
   const Actions = /*#__PURE__*/React__default.createElement(Grid, {
     ref: actionsRef,
     onKeyDown: handleActionsKeyDown,
@@ -14772,7 +14946,11 @@ function ActionsToolbar(_ref3) {
     sx: {
       flexDirection: isRtl ? 'row-reverse' : 'row'
     }
-  }, showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+  }, (extraItems === null || extraItems === void 0 ? void 0 : extraItems.length) && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+    className: "actions-toolbar-extra-actions",
+    actions: extraItems,
+    isRtl: isRtl
+  }), showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     actions: newActions
   }), showMore && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     id: "actions-toolbar-show-more",
@@ -14831,11 +15009,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 {
@@ -14974,7 +15152,7 @@ function ListBoxSearch(_ref2) {
   };
   function focusRow(container) {
     const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
-    row.setAttribute('tabIndex', 0);
+    row === null || row === void 0 || row.setAttribute('tabIndex', 0);
     row === null || row === void 0 || row.focus();
   }
   const onKeyDown = async e => {
@@ -17494,6 +17672,11 @@ function getSearchColor(getListboxStyle) {
   const color = getContrastingColor('#fff', desiredTextColor);
   return color;
 }
+function getSearchBGColor(bgCol, getListboxStyle) {
+  const searchBgColorObj = new Color(getListboxStyle('', 'backgroundColor'));
+  searchBgColorObj.setAlpha(0.7);
+  return searchBgColorObj.isInvalid() ? bgCol : searchBgColorObj.toRGBA();
+}
 function getStyles(_ref3) {
   var _themeOverrides$heade, _themeOverrides$backg, _themeOverrides$heade2, _themeOverrides$conte, _themeOverrides$heade3, _themeOverrides$heade4, _themeOverrides$conte2, _themeOverrides$conte3;
   let {
@@ -17522,7 +17705,8 @@ function getStyles(_ref3) {
   const bgImage = (_themeOverrides$backg = themeOverrides.background) !== null && _themeOverrides$backg !== void 0 && _themeOverrides$backg.image ? resolveBgImage({
     bgImage: themeOverrides.background.image
   }, app) : undefined;
-  const searchBgColor = 'rgba(255, 255, 255, 0.7)';
+  const bgColor = bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default;
+  const searchBgColor = getSearchBGColor(bgColor, getListboxStyle);
   const searchColor = getSearchColor(getListboxStyle);
   const headerFontStyle = ((_themeOverrides$heade2 = themeOverrides.header) === null || _themeOverrides$heade2 === void 0 ? void 0 : _themeOverrides$heade2.fontStyle) || {};
   const contentFontStyle = ((_themeOverrides$conte = themeOverrides.content) === null || _themeOverrides$conte === void 0 ? void 0 : _themeOverrides$conte.fontStyle) || {};
@@ -17531,7 +17715,7 @@ function getStyles(_ref3) {
   const getWithFallback = (value, trueValue, falseValue) => value === true && trueValue || value === false && falseValue || undefined;
   return {
     background: {
-      backgroundColor: bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
+      backgroundColor: bgColor,
       backgroundImage: bgImage !== null && bgImage !== void 0 && bgImage.url && !(bgImage !== null && bgImage !== void 0 && bgImage.url.startsWith('url(')) ? "url('".concat(bgImage.url, "')") : undefined,
       backgroundRepeat: 'no-repeat',
       backgroundSize: bgImage === null || bgImage === void 0 ? void 0 : bgImage.size,
@@ -17672,9 +17856,11 @@ function ListBoxPopover(_ref) {
     anchorEl: alignTo.current,
     anchorOrigin: anchorOrigin,
     transformOrigin: transformOrigin,
-    PaperProps: {
-      style: {
-        minWidth: '250px'
+    slotProps: {
+      paper: {
+        style: {
+          minWidth: '250px'
+        }
       }
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -17708,6 +17894,7 @@ function ListBoxPopover(_ref) {
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(ActionsToolbar, {
+    layout: layout,
     more: {
       enabled: !isLocked,
       actions: listboxSelectionToolbarItems,
@@ -17931,13 +18118,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;
@@ -18037,7 +18224,7 @@ function MultiState(_ref2) {
     variant: "contained",
     fullWidth: true
   }, clearAllStates)), field.states.map((s, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(ListItem, {
     key: ix,
@@ -18102,7 +18289,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;
@@ -18215,7 +18402,7 @@ function More(_ref2) {
   }, /*#__PURE__*/React__default.createElement(List, {
     dense: true
   }, items.map((s, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(ListItem, {
     key: ix,
@@ -18373,7 +18560,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: [{
@@ -18383,7 +18570,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 => ({
@@ -18769,16 +18956,15 @@ class AutoSizer extends Component {
         onResize
       } = this.props;
       if (this._parentNode) {
-        var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
         // Guard against AutoSizer component being removed from the DOM immediately after being added.
         // This can result in invalid style values which can result in NaN values if we don't handle them.
         // See issue #150 for more context.
 
         const style = window.getComputedStyle(this._parentNode) || {};
-        const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
-        const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
-        const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
-        const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
+        const paddingLeft = parseFloat(style.paddingLeft || "0");
+        const paddingRight = parseFloat(style.paddingRight || "0");
+        const paddingTop = parseFloat(style.paddingTop || "0");
+        const paddingBottom = parseFloat(style.paddingBottom || "0");
         const rect = this._parentNode.getBoundingClientRect();
         const scaledHeight = rect.height - paddingTop - paddingBottom;
         const scaledWidth = rect.width - paddingLeft - paddingRight;
@@ -18907,16 +19093,6 @@ class AutoSizer extends Component {
   }
 }
 
-const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
-    }
-  }]
-});
-var DrillDownIcon = (props => SvgIcon$2(drillDown(props)));
-
 function removeInnnerTabStops(container) {
   container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
     elm.setAttribute('tabIndex', -1);
@@ -18970,14 +19146,17 @@ function useTempKeyboard(_ref) {
       const lastSelectedRow = c === null || c === void 0 ? void 0 : c.querySelector('.value.last-focused');
       const firstRowElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value');
       const confirmButton = c === null || c === void 0 ? void 0 : c.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-      const elementToFocus = searchField || lastSelectedRow || firstRowElement || confirmButton;
+      const unlockCoverButton = c === null || c === void 0 ? void 0 : c.querySelector('#listbox-unlock-button');
+      const elementToFocus = searchField || lastSelectedRow || firstRowElement || unlockCoverButton || confirmButton;
       elementToFocus === null || elementToFocus === void 0 || elementToFocus.setAttribute('tabIndex', 0);
       elementToFocus === null || elementToFocus === void 0 || elementToFocus.focus();
     },
     focusSelection() {
+      const unlockCoverButton = document.querySelector('#listbox-unlock-button');
       const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-      confirmButton === null || confirmButton === void 0 || confirmButton.setAttribute('tabIndex', 0);
-      confirmButton === null || confirmButton === void 0 || confirmButton.focus();
+      const btnToFocus = unlockCoverButton || confirmButton;
+      btnToFocus === null || btnToFocus === void 0 || btnToFocus.setAttribute('tabIndex', 0);
+      btnToFocus === null || btnToFocus === void 0 || btnToFocus.focus();
     }
   };
   return keyboard;
@@ -19133,18 +19312,79 @@ function getListboxContainerKeyboardNavigation(_ref) {
   };
 }
 
+const StyledDiv = styled('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center'
+}));
+function ListBoxError(_ref) {
+  let {
+    text
+  } = _ref;
+  const {
+    translator: translatorDynamic
+  } = useContext(InstanceContext);
+  return /*#__PURE__*/React__default.createElement(StyledDiv, null, translatorDynamic.get(text));
+}
+
+function isDirectQueryEnabled(_ref) {
+  let {
+    appLayout
+  } = _ref;
+  const isDQ = !!(appLayout !== null && appLayout !== void 0 && appLayout.qIsDirectQueryMode);
+  return isDQ;
+}
+
+function getContainerPadding(_ref) {
+  let {
+    isGridMode,
+    dense,
+    height,
+    layoutOrder
+  } = _ref;
+  let containerPadding;
+  if (isGridMode) {
+    const itemHeight = getItemHeight({
+      isGridMode,
+      dense
+    });
+    let paddingY;
+    if (itemHeight > height) {
+      paddingY = '0px';
+    } else {
+      paddingY = '2px';
+    }
+    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
+  } else {
+    containerPadding = undefined;
+  }
+  return containerPadding;
+}
+
+const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
+    }
+  }]
+});
+var DrillDownIcon = (props => SvgIcon$1(drillDown(props)));
+
 function showToolbarDetached(_ref) {
   var _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
   let {
     containerRect,
     titleRef,
     iconsWidth,
-    headerPaddingLeft,
-    headerPaddingRight
+    paddingLeft,
+    paddingRight
   } = _ref;
   const containerWidth = containerRect.width;
   const preventTruncation = 2;
-  const padding = headerPaddingLeft + headerPaddingRight;
+  const padding = paddingLeft + paddingRight;
   const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 || (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding + preventTruncation;
   const actionToolbarWidth = 128;
   const notSufficientSpace = containerWidth < contentWidth + actionToolbarWidth;
@@ -19160,15 +19400,18 @@ function getListboxActionProps(_ref) {
     containerRef,
     isLocked,
     listboxSelectionToolbarItems,
+    extraItems,
     selections,
     keyboard
   } = _ref;
   return {
+    isDetached,
     show: showToolbar && !isDetached,
     popover: {
       show: showToolbar && isDetached,
       anchorEl: containerRef.current
     },
+    extraItems,
     more: {
       enabled: !isLocked,
       actions: listboxSelectionToolbarItems,
@@ -19193,55 +19436,293 @@ function getListboxActionProps(_ref) {
   };
 }
 
-const StyledDiv = styled$1('div')(() => ({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  alignItems: 'center',
-  justifyContent: 'center'
-}));
-function ListBoxError(_ref) {
+const iconStyle = {
+  fontSize: '12px'
+};
+const UnlockButton = styled(ButtonBase)(_ref => {
   let {
-    text
+    theme,
+    isLoading
   } = _ref;
-  const {
-    translator: translatorDynamic
-  } = useContext(InstanceContext);
-  return /*#__PURE__*/React__default.createElement(StyledDiv, null, translatorDynamic.get(text));
-}
-
-function isDirectQueryEnabled(_ref) {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: 48,
+    zIndex: 2,
+    // so it goes on top of action buttons
+    background: theme.palette.custom.disabledBackground,
+    opacity: 1,
+    color: theme.palette.custom.disabledContrastText,
+    width: '100%',
+    display: 'flex',
+    justifyContent: isLoading ? 'center' : 'flex-start',
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius: 0,
+    '& *, & p': {
+      color: theme.palette.custom.disabledContrastText
+    },
+    '& i': {
+      padding: "".concat(ICON_PADDING, "px")
+    }
+  };
+});
+const StyledGridHeader = styled(Grid, {
+  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
+})(_ref2 => {
   let {
-    appLayout
-  } = _ref;
-  const isDQ = !!(appLayout !== null && appLayout !== void 0 && appLayout.qIsDirectQueryMode);
-  return isDQ;
+    styles,
+    isRtl
+  } = _ref2;
+  return _objectSpread2(_objectSpread2({
+    flexDirection: isRtl ? 'row-reverse' : 'row',
+    wrap: 'nowrap',
+    minHeight: 32,
+    alignContent: 'center'
+  }, styles.header), {}, {
+    '& *': {
+      color: styles.header.color
+    }
+  });
+});
+const HeaderTitle = styled(Typography)(_ref3 => {
+  let {
+    styles
+  } = _ref3;
+  return _objectSpread2(_objectSpread2({}, styles.header), {}, {
+    display: 'block',
+    // needed for text-overflow to work
+    alignItems: 'center',
+    paddingRight: '1px' // make place for italic font style
+  });
+});
+function UnlockCoverButton(_ref4) {
+  let {
+    translator,
+    toggleLock,
+    keyboard,
+    isLoading
+  } = _ref4;
+  const fontSize = '14px';
+  const unLockText = translator.get('SelectionToolbar.ClickToUnlock');
+  const component = /*#__PURE__*/React__default.createElement(UnlockButton, {
+    title: unLockText,
+    tabIndex: keyboard.enabled ? 0 : -1,
+    onClick: toggleLock,
+    "data-testid": "listbox-unlock-button",
+    id: "listbox-unlock-button",
+    isLoading: isLoading
+  }, isLoading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: 16,
+    variant: "indeterminate",
+    color: "primary"
+  }) : /*#__PURE__*/React__default.createElement(Lock, {
+    disableRipple: true,
+    style: iconStyle
+  }), !isLoading && /*#__PURE__*/React__default.createElement(Typography, {
+    fontSize: fontSize
+  }, unLockText));
+  return component;
 }
 
-function getContainerPadding(_ref) {
+// ms that needs to pass before the lock button can be toggled again
+const lockTimeFrameMs = 500;
+let lastTime = 0;
+function getToggleLock(_ref) {
   let {
-    isGridMode,
-    dense,
-    height,
-    layoutOrder
+    isLocked,
+    setLocked,
+    settingLockedState,
+    model,
+    setSettingLockedState
   } = _ref;
-  let containerPadding;
-  if (isGridMode) {
-    const itemHeight = getItemHeight({
-      isGridMode,
-      dense
+  return () => {
+    const now = new Date();
+    const curTime = now - lastTime;
+    if (curTime < lockTimeFrameMs) {
+      return Promise.resolve();
+    }
+    if (settingLockedState) {
+      return () => {};
+    }
+    setSettingLockedState(true);
+    lastTime = now;
+    const func = isLocked ? model.unlock : model.lock;
+    setLocked(!isLocked);
+    return func.call(model, '/qListObjectDef').catch(() => {
+      setLocked(isLocked); // revert to the layout value
+    }).finally(() => {
+      setTimeout(() => {
+        setSettingLockedState(false);
+      }, 0);
     });
-    let paddingY;
-    if (itemHeight > height) {
-      paddingY = '0px';
-    } else {
-      paddingY = '2px';
+  };
+}
+function ListBoxHeader(_ref2) {
+  var _layout$qListObject, _layout$qListObject3;
+  let {
+    layout,
+    translator,
+    styles,
+    isRtl,
+    showLock,
+    selectDisabled,
+    showSearchIcon,
+    isDrillDown,
+    constraints,
+    onShowSearch,
+    classes,
+    containerRect,
+    isPopover,
+    showToolbar,
+    showDetachedToolbarOnly,
+    containerRef,
+    model,
+    selectionState,
+    isDirectQuery,
+    selections,
+    keyboard,
+    autoConfirm
+  } = _ref2;
+  const [isToolbarDetached, setIsToolbarDetached] = useState$1(showDetachedToolbarOnly);
+  const [isLocked, setLocked] = useState$1(layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked);
+  const [settingLockedState, setSettingLockedState] = useState$1(false);
+  useEffect$1(() => {
+    var _layout$qListObject2;
+    setLocked(layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qLocked);
+  }, [layout === null || layout === void 0 || (_layout$qListObject3 = layout.qListObject) === null || _layout$qListObject3 === void 0 || (_layout$qListObject3 = _layout$qListObject3.qDimensionInfo) === null || _layout$qListObject3 === void 0 ? void 0 : _layout$qListObject3.qLocked]);
+  const titleRef = useRef(null);
+  const showUnlock = showLock && isLocked;
+  const showLockIcon = !showLock && isLocked; // shows instead of the cover button when field/dim is locked.
+  const showLeftIcon = showSearchIcon || showLockIcon || isDrillDown; // the left-most icon outside of the actions/selections toolbar.
+
+  const paddingLeft = CELL_PADDING_LEFT - (showLeftIcon ? ICON_PADDING : 0);
+  const paddingRight = isRtl ? CELL_PADDING_LEFT - (showLeftIcon ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
+
+  // Calculate explicit width for icons container. Search and lock cannot exist combined.
+  const iconsWidth = (showSearchIcon ? BUTTON_ICON_WIDTH : 0) + (showLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? BUTTON_ICON_WIDTH : 0);
+  const toggleLock = getToggleLock({
+    isLocked,
+    setLocked,
+    settingLockedState,
+    setSettingLockedState,
+    model
+  });
+  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
+    layout,
+    model,
+    translator,
+    selectionState,
+    isDirectQuery
+  });
+  const extraItems = isLocked || !showLock ? undefined : [{
+    key: 'lock',
+    type: undefined,
+    label: translator.get('SelectionToolbar.ClickToLock'),
+    getSvgIconShape: unlock,
+    enabled: () => !settingLockedState && !selectDisabled() && hasSelections(layout),
+    action: toggleLock
+  }];
+  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  }) : /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onShowSearch,
+    tabIndex: -1,
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    disableRipple: true,
+    "data-testid": "search-toggle-btn"
+  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
+    style: iconStyle
+  }));
+  useEffect$1(() => {
+    if (!titleRef.current || !containerRect) {
+      return;
     }
-    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
-  } else {
-    containerPadding = undefined;
+    const mustShowDetached = showToolbarDetached({
+      containerRect,
+      titleRef,
+      iconsWidth,
+      paddingLeft,
+      paddingRight
+    });
+    const isDetached = showDetachedToolbarOnly || mustShowDetached;
+    setIsToolbarDetached(isDetached);
+  }, [iconsWidth, paddingLeft, paddingRight, titleRef.current, showDetachedToolbarOnly, Object.entries(containerRect || {}).sort().join(',')]);
+  const toolbarProps = getListboxActionProps({
+    isDetached: isPopover ? false : isToolbarDetached,
+    showToolbar,
+    containerRef,
+    isLocked,
+    extraItems,
+    listboxSelectionToolbarItems,
+    selections,
+    keyboard,
+    autoConfirm
+  });
+  const actionsToolbar = /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
+    isRtl: isRtl,
+    layout: layout
+  }, toolbarProps));
+  if (showDetachedToolbarOnly) {
+    return actionsToolbar;
   }
-  return containerPadding;
+
+  // Always show a lock symbol when locked and showLock is false
+  const lockedIconComp = showLockIcon ? /*#__PURE__*/React__default.createElement(Lock, {
+    size: "large",
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  }) : undefined;
+  return /*#__PURE__*/React__default.createElement(StyledGridHeader, {
+    item: true,
+    container: true,
+    styles: styles,
+    isRtl: isRtl,
+    marginY: 1,
+    paddingLeft: "".concat(paddingLeft, "px"),
+    paddingRight: "".concat(paddingRight, "px"),
+    className: "header-container"
+  }, showUnlock && /*#__PURE__*/React__default.createElement(UnlockCoverButton, {
+    isLoading: settingLockedState,
+    translator: translator,
+    toggleLock: toggleLock,
+    keyboard: keyboard
+  }), showLeftIcon && /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    container: true,
+    alignItems: "center",
+    width: iconsWidth,
+    className: "header-action-container"
+  }, lockedIconComp || showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
+    tabIndex: -1,
+    title: translator.get('Listbox.DrillDown'),
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: true,
+    minWidth: 0 // needed to text-overflow see: https://css-tricks.com/flexbox-truncated-text/
+    ,
+    justifyContent: isRtl ? 'flex-end' : 'flex-start',
+    className: classes.listBoxHeader
+  }, /*#__PURE__*/React__default.createElement(HeaderTitle, {
+    variant: "h6",
+    noWrap: true,
+    ref: titleRef,
+    title: layout.title,
+    styles: styles
+  }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    display: "flex"
+  }, actionsToolbar));
 }
 
 const PREFIX$4 = 'ListBoxInline';
@@ -19250,7 +19731,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 {
@@ -19285,47 +19766,20 @@ const StyledGrid$3 = styled$1(Grid, {
     }
   });
 });
-const StyledGridHeader = styled$1(Grid, {
-  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
-})(_ref2 => {
-  let {
-    styles,
-    isRtl
-  } = _ref2;
-  return _objectSpread2(_objectSpread2({
-    flexDirection: isRtl ? 'row-reverse' : 'row',
-    wrap: 'nowrap',
-    minHeight: 32,
-    alignContent: 'center'
-  }, styles.header), {}, {
-    '& *': {
-      // Assign the styles color as defaul color for all elements in the header
-      color: styles.header.color
-    }
-  });
-});
-const Title = styled$1(Typography)(_ref3 => {
-  let {
-    styles
-  } = _ref3;
-  return _objectSpread2(_objectSpread2({}, styles.header), {}, {
-    paddingRight: '1px' // make place for italic font style
-  });
-});
-const isModal = _ref4 => {
+const isModal = _ref2 => {
   var _app$isInModalSelecti, _app$isInModalSelecti2;
   let {
     app,
     appSelections
-  } = _ref4;
+  } = _ref2;
   return (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
 };
-function ListBoxInline(_ref5) {
-  var _layout$qListObject, _layout$qListObject2, _layoutOptions$dense, _containerRef$current;
+function ListBoxInline(_ref3) {
+  var _layout$qListObject, _layout$qListObject2, _layout$title, _layoutOptions$dense, _containerRef$current;
   let {
     options,
     layout
-  } = _ref5;
+  } = _ref3;
   const {
     app,
     direction,
@@ -19346,6 +19800,7 @@ function ListBoxInline(_ref5) {
     renderedCallback,
     toolbar = true,
     isPopover = false,
+    showLock = false,
     components
   } = options;
 
@@ -19361,9 +19816,6 @@ function ListBoxInline(_ref5) {
     return [ref, setRef];
   };
   const theme = useTheme$1();
-  const unlock = useCallback(() => {
-    model.unlock('/qListObjectDef');
-  }, [model]);
   const {
     translator,
     keyboardNavigation,
@@ -19400,7 +19852,6 @@ function ListBoxInline(_ref5) {
     stop: 0
   });
   const [appSelections] = useAppSelections(app);
-  const titleRef = useRef(null);
   const [selectionState$1] = useState$1(() => selectionState());
   const keyboard = useTempKeyboard({
     containerRef,
@@ -19412,7 +19863,6 @@ function ListBoxInline(_ref5) {
   }), [app, appSelections]);
   const isInvalid = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qError;
   const errorText = isInvalid && constraints.active ? 'Visualization.Invalid.Dimension' : 'Visualization.Incomplete';
-  const [isToolbarDetached, setIsToolbarDetached] = useState$1(false);
   const {
     handleKeyDown,
     handleOnMouseEnter,
@@ -19429,8 +19879,6 @@ function ListBoxInline(_ref5) {
     constraints,
     isModal: isModalMode
   }), [keyboard, hovering, updateKeyScroll, containerRef, currentScrollIndex, app, appSelections, constraints, isModalMode]);
-  const showDetachedToolbarOnly = toolbar && ((layout === null || layout === void 0 ? void 0 : layout.title) === '' || (layout === null || layout === void 0 ? void 0 : layout.showTitle) === false) && !isPopover;
-  const showToolbarWithTitle = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '' && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false || isPopover;
   useEffect$1(() => {
     document.addEventListener('keydown', globalKeyDown);
     return () => {
@@ -19438,6 +19886,9 @@ function ListBoxInline(_ref5) {
     };
   }, [globalKeyDown]);
   useEffect$1(() => {
+    if (search === true) {
+      setShowSearch(true);
+    }
     const show = () => {
       setShowToolbar(true);
     };
@@ -19448,6 +19899,7 @@ function ListBoxInline(_ref5) {
       }
     };
     if (isPopover) {
+      // When isPopover, toolbar == false will be ignored.
       if (!selections.isActive()) {
         selections.begin('/qListObjectDef');
         selections.on('activated', show);
@@ -19455,7 +19907,7 @@ function ListBoxInline(_ref5) {
       }
       setShowToolbar(isPopover);
     }
-    if (selections) {
+    if (toolbar && selections) {
       if (!selections.isModal()) {
         selections.on('activated', show);
         selections.on('deactivated', hide);
@@ -19468,7 +19920,7 @@ function ListBoxInline(_ref5) {
         selections.removeListener('deactivated', hide);
       }
     };
-  }, [selections, isPopover]);
+  }, [toolbar, selections, isPopover]);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -19485,64 +19937,31 @@ function ListBoxInline(_ref5) {
     autoConfirm = false,
     layoutOptions = {}
   } = layout !== null && layout !== void 0 ? layout : {};
-  const showSearchIcon = searchEnabled !== false && search === 'toggle';
-  const isLocked = (layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked) === true;
-  const showSearchOrLockIcon = isLocked || showSearchIcon;
+  const isLocked = layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked;
+  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !isLocked;
   const isDrillDown = (layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qGrouping) === 'H';
-  const showIcons = showSearchOrLockIcon || isDrillDown;
-  const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
+  const canShowTitle = (layout === null || layout === void 0 || (_layout$title = layout.title) === null || _layout$title === void 0 ? void 0 : _layout$title.length) && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false;
+  const showDetachedToolbarOnly = toolbar && !canShowTitle && !isPopover;
+  const showAttachedToolbar = toolbar && canShowTitle || isPopover;
   const isRtl = direction === 'rtl';
-  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
-  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
-  useEffect$1(() => {
-    if (!titleRef.current || !containerRect) {
-      return;
-    }
-    const isDetached = showToolbarDetached({
-      containerRect,
-      titleRef,
-      iconsWidth,
-      headerPaddingLeft,
-      headerPaddingRight
-    });
-    setIsToolbarDetached(isDetached);
-  }, [titleRef.current, containerRect]);
   if (!model || !layout || !translator) {
     return null;
   }
-  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
-    layout,
-    model,
-    translator,
-    selectionState: selectionState$1,
-    isDirectQuery
-  });
   const showSearchToggle = search === 'toggle' && showSearch;
-  const searchVisible = (search === true || showSearchToggle) && !selectDisabled() && searchEnabled !== false;
+  const searchVisible = search === true || showSearchToggle && !selectDisabled() && searchEnabled !== false;
   const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
-  const onShowSearch = () => {
+  const handleShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
   };
   const onCtrlF = () => {
     if (search === 'toggle') {
-      onShowSearch();
+      handleShowSearch();
     } else {
       const input = searchContainer.current.querySelector('input');
       input === null || input === void 0 || input.focus();
     }
   };
-  const getActionToolbarProps = isDetached => _objectSpread2(_objectSpread2({}, getListboxActionProps({
-    isDetached: isPopover ? false : isDetached,
-    showToolbar,
-    containerRef,
-    isLocked,
-    listboxSelectionToolbarItems,
-    selections,
-    keyboard
-  })), {}, {
-    autoConfirm
-  });
   const shouldAutoFocus = searchVisible && search === 'toggle';
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
@@ -19553,49 +19972,35 @@ function ListBoxInline(_ref5) {
     height: (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight,
     layoutOrder: layoutOptions.layoutOrder
   });
-  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
-    title: translator.get('Listbox.Search'),
-    size: "large",
-    style: {
-      fontSize: '12px',
-      padding: '7px'
-    }
-  }) : /*#__PURE__*/React__default.createElement(IconButton, {
-    onClick: onShowSearch,
-    tabIndex: -1,
-    title: translator.get('Listbox.Search'),
-    size: "large",
-    disableRipple: true,
-    "data-testid": "search-toggle-btn"
-  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
-    style: {
-      fontSize: '12px'
-    }
-  }));
-  const lockIconComp = selectDisabled() ? /*#__PURE__*/React__default.createElement(Lock, {
-    size: "large",
-    style: {
-      fontSize: '12px',
-      padding: '7px'
-    }
-  }) : /*#__PURE__*/React__default.createElement(IconButton, {
-    title: translator.get('SelectionToolbar.ClickToUnlock'),
-    tabIndex: -1,
-    onClick: unlock,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Lock, {
-    disableRipple: true,
-    style: {
-      fontSize: '12px'
-    }
-  }));
   if (isInvalid) {
     renderedCallback === null || renderedCallback === void 0 || renderedCallback();
   }
-  const listBoxMinHeight = showToolbarWithTitle ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
-    direction: direction
-  }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
+  const listBoxMinHeight = showAttachedToolbar ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
+  const listBoxHeader = /*#__PURE__*/React__default.createElement(ListBoxHeader, {
+    selectDisabled: selectDisabled,
+    showSearchIcon: showSearchIcon,
+    isDrillDown: isDrillDown,
+    onShowSearch: handleShowSearch,
+    isPopover: isPopover,
+    showToolbar: showToolbar,
+    isDirectQuery: isDirectQuery,
+    autoConfirm: autoConfirm,
+    showDetachedToolbarOnly: showDetachedToolbarOnly,
+    layout: layout,
+    translator: translator,
+    styles: styles,
+    isRtl: isRtl,
+    showLock: showLock,
+    constraints: constraints,
+    classes: classes$4,
+    containerRect: containerRect,
+    containerRef: containerRef,
+    model: model,
+    selectionState: selectionState$1,
+    selections: selections,
+    keyboard: keyboard
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && listBoxHeader, /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
     tabIndex: keyboard.enabled ? -1 : undefined,
@@ -19616,45 +20021,7 @@ function ListBoxInline(_ref5) {
     },
     isGridMode: isGridMode,
     "aria-label": keyboard.active ? translator.get('Listbox.ScreenReaderInstructions') : ''
-  }, showToolbarWithTitle && /*#__PURE__*/React__default.createElement(StyledGridHeader, {
-    item: true,
-    container: true,
-    styles: styles,
-    isRtl: isRtl,
-    marginY: 1,
-    paddingLeft: "".concat(headerPaddingLeft, "px"),
-    paddingRight: "".concat(headerPaddingRight, "px")
-  }, showIcons && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    alignItems: "center",
-    width: iconsWidth
-  }, isLocked ? lockIconComp : showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
-    tabIndex: -1,
-    title: translator.get('Listbox.DrillDown'),
-    size: "large",
-    style: {
-      fontSize: '12px'
-    }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true,
-    minWidth: 0 // needed to text-overflow see: https://css-tricks.com/flexbox-truncated-text/
-    ,
-    justifyContent: isRtl ? 'flex-end' : 'flex-start',
-    className: classes$4.listBoxHeader
-  }, /*#__PURE__*/React__default.createElement(Title, {
-    variant: "h6",
-    noWrap: true,
-    ref: titleRef,
-    title: layout.title,
-    styles: styles
-  }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    display: "flex"
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
-    direction: direction
-  }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, showAttachedToolbar && listBoxHeader, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
@@ -19677,7 +20044,7 @@ function ListBoxInline(_ref5) {
     wildCardSearch: wildCardSearch,
     searchEnabled: searchEnabled,
     direction: direction,
-    hide: showSearchIcon && onShowSearch,
+    hide: showSearchIcon && handleShowSearch,
     styles: styles
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -19685,11 +20052,11 @@ function ListBoxInline(_ref5) {
     className: classes$4.listboxWrapper
   }, isInvalid ? /*#__PURE__*/React__default.createElement(ListBoxError, {
     text: errorText
-  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref6 => {
+  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref4 => {
     let {
       height,
       width
-    } = _ref6;
+    } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
@@ -19731,10 +20098,10 @@ function ListBoxInline(_ref5) {
   })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
-function IsolateUseLayoutWrapper(_ref7) {
+function IsolateUseLayoutWrapper(_ref5) {
   let {
     options = {}
-  } = _ref7;
+  } = _ref5;
   const {
     model
   } = options;
@@ -19763,24 +20130,26 @@ function useExistingModel(_ref) {
     throw new Error("Option \"".concat(usedForbiddenOptions.join(', '), "\" is not applicable for existing objects."));
   }
   useEffect$1(() => {
-    async function fetchObject() {
-      const modelFromStore = modelStore.get(qId);
-      if (modelFromStore) {
-        setModel(modelFromStore);
-      } else {
-        const m = await app.getObject(qId);
-        modelStore.set(m.id, m);
-        m.once('closed', () => {
-          modelStore.clear(m.id);
-        });
-        setModel(m);
+    function storeModel(m) {
+      if (modelStore.get(m.id)) {
+        return;
       }
+      // Nebula gets the model from this store in some of its
+      // core functions, so it must always be stored here.
+      modelStore.set(m.id, m);
+      m.once('closed', () => {
+        modelStore.clear(m.id);
+      });
     }
-    if (sessionModel) {
-      setModel(sessionModel);
-    } else {
-      fetchObject();
+    async function fetchObject(modelId) {
+      const m = modelStore.get(modelId) || (await app.getObject(modelId));
+      return m;
     }
+    const p = Promise.resolve(sessionModel || fetchObject(qId));
+    p.then(m => {
+      storeModel(m);
+      setModel(m);
+    });
   }, []);
   return model;
 }
@@ -21492,7 +21861,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) {
@@ -21631,7 +22000,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;
@@ -21686,7 +22055,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',
@@ -21812,7 +22181,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;
@@ -21896,7 +22265,8 @@ function Header(_ref2) {
       show: showPopoverToolbar,
       anchorEl
     },
-    focusHandler: focusHandler
+    focusHandler: focusHandler,
+    layout: layout
   });
   return /*#__PURE__*/React__default.createElement(StyledGrid$1, {
     ref: containerRef,
@@ -21931,7 +22301,7 @@ const PREFIX = 'Footer';
 const classes = {
   itemStyle: "".concat(PREFIX, "-itemStyle")
 };
-const StyledGrid = styled$1(Grid)(_ref => {
+const StyledGrid = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -23574,11 +23944,17 @@ function useState(initial) {
 }
 
 /**
+ * Callback function that should return a function that in turns gets
+ * called before the hook runs again or when the component is destroyed.
+ * For example to remove any listeners added in the callback itself.
  * @typedef {function():(void | function():void)} EffectCallback
  */
 
 /**
  * Triggers a callback function when a dependent value changes.
+ *
+ * Omitting the dependency array will have the hook run on each update
+ * and an empty dependency array runs only once.
  * @entry
  * @param {EffectCallback} effect - The callback.
  * @param {Array<any>=} deps - The dependencies that should trigger the callback.
@@ -23591,6 +23967,15 @@ function useState(initial) {
  *     console.log('unmounted');
  *   };
  * }, []);
+ *
+ * useEffect(() => {
+ *   const clickHandler = () => { console.log('click') };
+ *   const button = element.querySelector('.button');
+ *   button.addEventListener('click', clickHandler);
+ *   return () => {
+ *     button.removeEventListener('click', clickHandler);
+ *   };
+ * }, []);
  */
 function useEffect(cb, deps) {
   {
@@ -23650,17 +24035,20 @@ function useMemo(fn, deps) {
 
 /**
  * Runs a callback function when a dependent changes.
+ *
+ * Useful for async operations that otherwise cause no side effects.
+ * Do not add for example listeners withing the callback as there is no teardown function.
  * @entry
  * @template P
  * @param {function():Promise<P>} factory - The factory function that calls the promise.
  * @param {Array<any>=} deps - The dependencies.
- * @returns {Array<P,Error>} The resolved value.
+ * @returns {Array<P,Error>} The resolved value or rejected error
  * @example
  * import { usePromise } from '@nebula.js/stardust';
  * import { useModel } from '@nebula.js/stardust';
  * // ...
  * const model = useModel();
- * const [resolved, rejected] = usePromise(() => model.getLayout(), []);
+ * const [resolved, rejected] = usePromise(() => model.getLayout(), [model]);
  */
 function usePromise(p, deps) {
   const [obj, setObj] = useState(() => ({
@@ -28259,7 +28647,7 @@ const DEFAULT_SNAPSHOT_CONFIG = /** @lends SnapshotConfiguration */{
 
 /**
  * @interface Configuration
- * @property {LoadType=} load Fallback load function for missing types
+ * @property {Function(LoadType):Promise<Visualization>=} load Fallback load function for missing types
  * @property {Context=} context Settings for the rendering instance
  * @property {Array<TypeInfo>=} types Visualization types to register
  * @property {Array<ThemeInfo>=} themes Themes to register
@@ -28678,6 +29066,7 @@ function nuked() {
            * @param {FrequencyMode=} [options.frequencyMode=none] Show frequency none|value|percent|relative
            * @param {boolean=} [options.histogram=false] Show histogram bar (not applicable for existing objects)
            * @param {SearchMode=} [options.search=true] Show the search bar permanently, using the toggle button or when in selection: false|true|toggle
+           * @param {boolean=} [options.showLock=false] Show the button for toggling locked state.
            * @param {boolean=} [options.toolbar=true] Show the toolbar
            * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields (not applicable for existing objects)
            * @param {boolean=} [options.dense=false] Reduces padding and text size (not applicable for existing objects)
@@ -28840,6 +29229,8 @@ function SessionMock() {
   };
 }
 
+/* eslint-disable no-underscore-dangle */
+
 // To cover test
 // eslint-disable-next-line no-undef
 const crt = globalThis.crypto || {
@@ -28851,7 +29242,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 || {};
@@ -28862,15 +29253,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
+    });
   };
 }
 
@@ -29091,7 +29484,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 = {