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

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v5.0.0-alpha.2
+* @nebula.js/stardust v5.0.0-alpha.3
 * Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
@@ -723,26 +723,40 @@
 	  }
 	})(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);
@@ -799,20 +813,6 @@
 	  }
 	  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);
-	}
 
 	var react = {exports: {}};
 
@@ -1989,6 +1989,26 @@
 			"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,
@@ -2041,7 +2061,8 @@
 		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) {
@@ -3120,10 +3141,27 @@
 	};
 	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 = {
@@ -3153,7 +3191,7 @@
 	  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,
@@ -6645,7 +6683,7 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.15.2
+	 * @mui/styled-engine v5.15.7
 	 *
 	 * @license MIT
 	 * This source code is licensed under the MIT license found in the
@@ -6708,8 +6746,13 @@
 	  return _extends$3.apply(this, arguments);
 	}
 
+	// https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
 	function isPlainObject(item) {
-	  return item !== null && typeof item === 'object' && item.constructor === Object;
+	  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)) {
@@ -6944,9 +6987,70 @@
 	  }, refs);
 	}
 
+	const UNINITIALIZED = {};
+
+	/**
+	 * A React.useRef() that is initialized lazily with a function. Note that it accepts an optional
+	 * initialization argument, so the initialization function doesn't need to be an inline closure.
+	 *
+	 * @usage
+	 *   const ref = useLazyRef(sortColumns, columns)
+	 */
+	function useLazyRef(init, initArg) {
+	  const ref = reactExports.useRef(UNINITIALIZED);
+	  if (ref.current === UNINITIALIZED) {
+	    ref.current = init(initArg);
+	  }
+	  return ref;
+	}
+
+	const EMPTY = [];
+
+	/**
+	 * A React.useEffect equivalent that runs once, when the component is mounted.
+	 */
+	function useOnMount(fn) {
+	  /* eslint-disable react-hooks/exhaustive-deps */
+	  reactExports.useEffect(fn, EMPTY);
+	  /* eslint-enable react-hooks/exhaustive-deps */
+	}
+
+	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);
+	  }
+	}
+	function useTimeout() {
+	  const timeout = useLazyRef(Timeout.create).current;
+	  useOnMount(timeout.disposeEffect);
+	  return timeout;
+	}
+
 	let hadKeyboardEvent = true;
 	let hadFocusVisibleRecently = false;
-	let hadFocusVisibleRecentlyTimeout;
+	const hadFocusVisibleRecentlyTimeout = new Timeout();
 	const inputTypesWhitelist = {
 	  text: true,
 	  search: true,
@@ -7069,10 +7173,9 @@
 	      // 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(() => {
+	      hadFocusVisibleRecentlyTimeout.start(100, () => {
 	        hadFocusVisibleRecently = false;
-	      }, 100);
+	      });
 	      isFocusVisibleRef.current = false;
 	      return true;
 	    }
@@ -7186,10 +7289,7 @@
 	};
 	const ClassNameGenerator = createClassNameGenerator();
 
-	// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
-	// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
-
-	const globalStateClassesMapping = {
+	const globalStateClasses = {
 	  active: 'active',
 	  checked: 'checked',
 	  completed: 'completed',
@@ -7203,19 +7303,23 @@
 	  required: 'required',
 	  selected: 'selected'
 	};
-	function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
-	  const globalStateClass = globalStateClassesMapping[slot];
+	function generateUtilityClass$1(componentName, slot, globalStatePrefix = 'Mui') {
+	  const globalStateClass = globalStateClasses[slot];
 	  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 	}
 
-	function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
+	function generateUtilityClasses$1(componentName, slots, globalStatePrefix = 'Mui') {
 	  const result = {};
 	  slots.forEach(slot => {
-	    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+	    result[slot] = generateUtilityClass$1(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$S = ["values", "unit", "step"];
 	const sortBreakpointsValues = values => {
 	  const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -8279,6 +8383,81 @@
 	const styleFunctionSx = unstable_createStyleFunctionSx();
 	styleFunctionSx.filterProps = ['sx'];
 
+	/**
+	 * 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$2(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$R = ["breakpoints", "palette", "spacing", "shape"];
 	function createTheme$1(options = {}, ...args) {
 	  const {
@@ -8301,6 +8480,7 @@
 	    spacing,
 	    shape: _extends$4({}, shape$1, shapeInput)
 	  }, other);
+	  muiTheme.applyStyles = applyStyles$2;
 	  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
 	  muiTheme.unstable_sxConfig = _extends$4({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
 	  muiTheme.unstable_sx = function sx(props) {
@@ -8382,7 +8562,7 @@
 	  });
 	}
 
-	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$P = ["className", "component"];
 	function createBox(options = {}) {
@@ -8747,7 +8927,7 @@
 	  return resolveProps(theme.components[name].defaultProps, props);
 	}
 
-	function useThemeProps$1({
+	function useThemeProps$2({
 	  props,
 	  name,
 	  defaultTheme,
@@ -8765,7 +8945,6 @@
 	  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
@@ -8773,8 +8952,8 @@
 	 * @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);
 	}
 
 	/**
@@ -8937,7 +9116,7 @@
 	 */
 	function alpha(color, value) {
 	  color = decomposeColor(color);
-	  value = clamp(value);
+	  value = clampWrapper(value);
 	  if (color.type === 'rgb' || color.type === 'hsl') {
 	    color.type += 'a';
 	  }
@@ -8957,7 +9136,7 @@
 	 */
 	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) {
@@ -8976,7 +9155,7 @@
 	 */
 	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) {
@@ -9106,7 +9285,7 @@
 	  overridesResolver: (props, styles) => styles.root
 	});
 	function useThemePropsDefault(props) {
-	  return useThemeProps$1({
+	  return useThemeProps$2({
 	    props,
 	    name: 'MuiStack',
 	    defaultTheme: defaultTheme$3
@@ -9215,7 +9394,7 @@
 	    const slots = {
 	      root: ['root']
 	    };
-	    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+	    return composeClasses(slots, slot => generateUtilityClass$1(componentName, slot), {});
 	  };
 	  const StackRoot = createStyledComponent(style);
 	  const Stack = /*#__PURE__*/reactExports.forwardRef(function Grid(inProps, ref) {
@@ -9951,11 +10130,11 @@
 	  return theme[THEME_ID] || theme;
 	}
 
-	function useThemeProps({
+	function useThemeProps$1({
 	  props,
 	  name
 	}) {
-	  return useThemeProps$1({
+	  return useThemeProps$2({
 	    props,
 	    name,
 	    defaultTheme: defaultTheme$2,
@@ -10797,7 +10976,7 @@
 	  });
 	}
 
-	const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
+	const touchRippleClasses = generateUtilityClasses$1('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 
 	const _excluded$F = ["center", "classes", "className"];
 	let _$1 = t => t,
@@ -10919,7 +11098,7 @@
 	 * TODO v5: Make private
 	 */
 	const TouchRipple = /*#__PURE__*/reactExports.forwardRef(function TouchRipple(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiTouchRipple'
 	  });
@@ -10943,18 +11122,11 @@
 	  const ignoringMouseDown = reactExports.useRef(false);
 	  // We use a timer in order to only show the ripples for touch "click" like events.
 	  // We don't want to display the ripple for touch scroll events.
-	  const startTimer = reactExports.useRef(0);
+	  const startTimer = useTimeout();
 
 	  // This is the hook called once the previous timeout is ready.
 	  const startTimerCommit = reactExports.useRef(null);
 	  const container = reactExports.useRef(null);
-	  reactExports.useEffect(() => {
-	    return () => {
-	      if (startTimer.current) {
-	        clearTimeout(startTimer.current);
-	      }
-	    };
-	  }, []);
 	  const startCommit = reactExports.useCallback(params => {
 	    const {
 	      pulsate,
@@ -11047,12 +11219,13 @@
 	          });
 	        };
 	        // Delay the execution of the ripple effect.
-	        startTimer.current = setTimeout(() => {
+	        // We have to make a tradeoff with this delay value.
+	        startTimer.start(DELAY_RIPPLE, () => {
 	          if (startTimerCommit.current) {
 	            startTimerCommit.current();
 	            startTimerCommit.current = null;
 	          }
-	        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
+	        });
 	      }
 	    } else {
 	      startCommit({
@@ -11063,21 +11236,21 @@
 	        cb
 	      });
 	    }
-	  }, [centerProp, startCommit]);
+	  }, [centerProp, startCommit, startTimer]);
 	  const pulsate = reactExports.useCallback(() => {
 	    start({}, {
 	      pulsate: true
 	    });
 	  }, [start]);
 	  const stop = reactExports.useCallback((event, cb) => {
-	    clearTimeout(startTimer.current);
+	    startTimer.clear();
 
 	    // The touch interaction occurs too quickly.
 	    // We still want to show ripple effect.
 	    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
 	      startTimerCommit.current();
 	      startTimerCommit.current = null;
-	      startTimer.current = setTimeout(() => {
+	      startTimer.start(0, () => {
 	        stop(event, cb);
 	      });
 	      return;
@@ -11090,7 +11263,7 @@
 	      return oldRipples;
 	    });
 	    rippleCallback.current = cb;
-	  }, []);
+	  }, [startTimer]);
 	  reactExports.useImperativeHandle(ref, () => ({
 	    pulsate,
 	    start,
@@ -11110,9 +11283,9 @@
 	var TouchRipple$1 = TouchRipple;
 
 	function getButtonBaseUtilityClass(slot) {
-	  return generateUtilityClass('MuiButtonBase', slot);
+	  return generateUtilityClass$1('MuiButtonBase', slot);
 	}
-	const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
+	const buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
 	const _excluded$E = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 	const useUtilityClasses$r = ownerState => {
@@ -11181,7 +11354,7 @@
 	 * It contains a load of style reset and some focus/ripple logic.
 	 */
 	const ButtonBase = /*#__PURE__*/reactExports.forwardRef(function ButtonBase(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiButtonBase'
 	  });
@@ -11397,7 +11570,7 @@
 	    type: type
 	  }, buttonProps, other, {
 	    children: [children, enableTouchRipple ?
-	    
+	    /*#__PURE__*/
 	    /* TouchRipple is only needed client-side, x2 boost on the server. */
 	    jsxRuntimeExports.jsx(TouchRipple$1, _extends$6({
 	      ref: handleRippleRef,
@@ -11408,9 +11581,9 @@
 	var ButtonBase$1 = ButtonBase;
 
 	function getButtonUtilityClass(slot) {
-	  return generateUtilityClass('MuiButton', slot);
+	  return generateUtilityClass$1('MuiButton', slot);
 	}
-	const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+	const buttonClasses = generateUtilityClasses$1('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 	var buttonClasses$1 = buttonClasses;
 
 	/**
@@ -11632,7 +11805,7 @@
 	  const contextProps = reactExports.useContext(ButtonGroupContext$1);
 	  const buttonGroupButtonContextPositionClassName = reactExports.useContext(ButtonGroupButtonContext$1);
 	  const resolvedProps = resolveProps(contextProps, inProps);
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: resolvedProps,
 	    name: 'MuiButton'
 	  });
@@ -11741,6 +11914,7 @@
 	  grey90: '#E6E6E6',
 	  grey85: '#D9D9D9',
 	  grey55: '#8C8C8C',
+	  grey45: '#737373',
 	  grey30: '#4D4D4D',
 	  grey25: '#404040',
 	  grey20: '#333333',
@@ -11795,7 +11969,9 @@
 	    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,
@@ -11863,7 +12039,9 @@
 	    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,
@@ -12024,7 +12202,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "b12a" ;
+	const NEBULA_VERSION_HASH = "fc09" ;
 	ClassNameGenerator.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -12256,7 +12434,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.2" );
+	  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.3" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -12324,9 +12502,9 @@
 	}
 
 	function getSvgIconUtilityClass(slot) {
-	  return generateUtilityClass('MuiSvgIcon', slot);
+	  return generateUtilityClass$1('MuiSvgIcon', slot);
 	}
-	generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+	generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
 	const _excluded$C = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 	const useUtilityClasses$p = ownerState => {
@@ -12381,7 +12559,7 @@
 	  };
 	});
 	const SvgIcon$1 = /*#__PURE__*/reactExports.forwardRef(function SvgIcon(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiSvgIcon'
 	  });
@@ -12488,9 +12666,9 @@
 	}
 
 	function getPaperUtilityClass(slot) {
-	  return generateUtilityClass('MuiPaper', slot);
+	  return generateUtilityClass$1('MuiPaper', slot);
 	}
-	generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
+	generateUtilityClasses$1('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
 	const _excluded$B = ["className", "component", "elevation", "square", "variant"];
 	const useUtilityClasses$o = ownerState => {
@@ -12536,7 +12714,7 @@
 	  }));
 	});
 	const Paper = /*#__PURE__*/reactExports.forwardRef(function Paper(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiPaper'
 	  });
@@ -12564,12 +12742,238 @@
 	});
 	var Paper$1 = Paper;
 
+	function _extends() {
+	  _extends = 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.apply(this, arguments);
+	}
+
+	/**
+	 * Determines if a given element is a DOM element name (i.e. not a React component).
+	 */
+	function isHostComponent(element) {
+	  return typeof element === 'string';
+	}
+
+	/**
+	 * Type of the ownerState based on the type of an element it applies to.
+	 * This resolves to the provided OwnerState for React components and `undefined` for host components.
+	 * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+	 */
+
+	/**
+	 * Appends the ownerState object to the props, merging with the existing one if necessary.
+	 *
+	 * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.
+	 * @param otherProps Props of the element.
+	 * @param ownerState
+	 */
+	function appendOwnerState(elementType, otherProps, ownerState) {
+	  if (elementType === undefined || isHostComponent(elementType)) {
+	    return otherProps;
+	  }
+	  return _extends({}, otherProps, {
+	    ownerState: _extends({}, otherProps.ownerState, ownerState)
+	  });
+	}
+
+	const defaultContextValue = {
+	  disableDefaultClasses: false
+	};
+	const ClassNameConfiguratorContext = /*#__PURE__*/reactExports.createContext(defaultContextValue);
+	/**
+	 * @ignore - internal hook.
+	 *
+	 * Wraps the `generateUtilityClass` function and controls how the classes are generated.
+	 * Currently it only affects whether the classes are applied or not.
+	 *
+	 * @returns Function to be called with the `generateUtilityClass` function specific to a component to generate the classes.
+	 */
+	function useClassNamesOverride(generateUtilityClass) {
+	  const {
+	    disableDefaultClasses
+	  } = reactExports.useContext(ClassNameConfiguratorContext);
+	  return slot => {
+	    if (disableDefaultClasses) {
+	      return '';
+	    }
+	    return generateUtilityClass(slot);
+	  };
+	}
+
+	/**
+	 * Extracts event handlers from a given object.
+	 * A prop is considered an event handler if it is a function and its name starts with `on`.
+	 *
+	 * @param object An object to extract event handlers from.
+	 * @param excludeKeys An array of keys to exclude from the returned object.
+	 */
+	function extractEventHandlers(object, excludeKeys = []) {
+	  if (object === undefined) {
+	    return {};
+	  }
+	  const result = {};
+	  Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
+	    result[prop] = object[prop];
+	  });
+	  return result;
+	}
+
+	/**
+	 * If `componentProps` is a function, calls it with the provided `ownerState`.
+	 * Otherwise, just returns `componentProps`.
+	 */
+	function resolveComponentProps(componentProps, ownerState, slotState) {
+	  if (typeof componentProps === 'function') {
+	    return componentProps(ownerState, slotState);
+	  }
+	  return componentProps;
+	}
+
+	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;
+	}
+
+	/**
+	 * Removes event handlers from the given object.
+	 * A field is considered an event handler if it is a function with a name beginning with `on`.
+	 *
+	 * @param object Object to remove event handlers from.
+	 * @returns Object with event handlers removed.
+	 */
+	function omitEventHandlers(object) {
+	  if (object === undefined) {
+	    return {};
+	  }
+	  const result = {};
+	  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
+	    result[prop] = object[prop];
+	  });
+	  return result;
+	}
+
+	/**
+	 * Merges the slot component internal props (usually coming from a hook)
+	 * with the externally provided ones.
+	 *
+	 * The merge order is (the latter overrides the former):
+	 * 1. The internal props (specified as a getter function to work with get*Props hook result)
+	 * 2. Additional props (specified internally on a Base UI component)
+	 * 3. External props specified on the owner component. These should only be used on a root slot.
+	 * 4. External props specified in the `slotProps.*` prop.
+	 * 5. The `className` prop - combined from all the above.
+	 * @param parameters
+	 * @returns
+	 */
+	function mergeSlotProps(parameters) {
+	  const {
+	    getSlotProps,
+	    additionalProps,
+	    externalSlotProps,
+	    externalForwardedProps,
+	    className
+	  } = parameters;
+	  if (!getSlotProps) {
+	    // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
+	    // so we can simply merge all the props without having to worry about extracting event handlers.
+	    const joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
+	    const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+	    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+	    if (joinedClasses.length > 0) {
+	      props.className = joinedClasses;
+	    }
+	    if (Object.keys(mergedStyle).length > 0) {
+	      props.style = mergedStyle;
+	    }
+	    return {
+	      props,
+	      internalRef: undefined
+	    };
+	  }
+
+	  // In this case, getSlotProps is responsible for calling the external event handlers.
+	  // We don't need to include them in the merged props because of this.
+
+	  const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
+	  const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
+	  const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
+	  const internalSlotProps = getSlotProps(eventHandlers);
+
+	  // The order of classes is important here.
+	  // Emotion (that we use in libraries consuming Base UI) depends on this order
+	  // to properly override style. It requires the most important classes to be last
+	  // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
+	  const joinedClasses = clsx(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
+	  const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+	  const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
+	  if (joinedClasses.length > 0) {
+	    props.className = joinedClasses;
+	  }
+	  if (Object.keys(mergedStyle).length > 0) {
+	    props.style = mergedStyle;
+	  }
+	  return {
+	    props,
+	    internalRef: internalSlotProps.ref
+	  };
+	}
+
+	const _excluded$A = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
+	/**
+	 * @ignore - do not document.
+	 * Builds the props to be passed into the slot of an unstyled component.
+	 * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
+	 * If the slot component is not a host component, it also merges in the `ownerState`.
+	 *
+	 * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.
+	 */
+	function useSlotProps(parameters) {
+	  var _parameters$additiona;
+	  const {
+	      elementType,
+	      externalSlotProps,
+	      ownerState,
+	      skipResolvingSlotProps = false
+	    } = parameters,
+	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$A);
+	  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
+	  const {
+	    props: mergedProps,
+	    internalRef
+	  } = mergeSlotProps(_extends({}, rest, {
+	    externalSlotProps: resolvedComponentsProps
+	  }));
+	  const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
+	  const props = appendOwnerState(elementType, _extends({}, mergedProps, {
+	    ref
+	  }), ownerState);
+	  return props;
+	}
+
 	function getIconButtonUtilityClass(slot) {
-	  return generateUtilityClass('MuiIconButton', slot);
+	  return generateUtilityClass$1('MuiIconButton', slot);
 	}
-	const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+	const iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 
-	const _excluded$A = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+	const _excluded$z = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 	const useUtilityClasses$n = ownerState => {
 	  const {
 	    classes,
@@ -12657,7 +13061,7 @@
 	 * regarding the available icon options.
 	 */
 	const IconButton = /*#__PURE__*/reactExports.forwardRef(function IconButton(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiIconButton'
 	  });
@@ -12670,7 +13074,7 @@
 	      disableFocusRipple = false,
 	      size = 'medium'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$A);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
 	  const ownerState = _extends$6({}, props, {
 	    edge,
 	    color,
@@ -12693,11 +13097,11 @@
 	var IconButton$1 = IconButton;
 
 	function getTypographyUtilityClass(slot) {
-	  return generateUtilityClass('MuiTypography', slot);
+	  return generateUtilityClass$1('MuiTypography', slot);
 	}
-	generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
+	generateUtilityClasses$1('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-	const _excluded$z = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+	const _excluded$y = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 	const useUtilityClasses$m = ownerState => {
 	  const {
 	    align,
@@ -12766,7 +13170,7 @@
 	  return colorTransformations[color] || color;
 	};
 	const Typography = /*#__PURE__*/reactExports.forwardRef(function Typography(inProps, ref) {
-	  const themeProps = useThemeProps({
+	  const themeProps = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiTypography'
 	  });
@@ -12784,7 +13188,7 @@
 	      variant = 'body1',
 	      variantMapping = defaultVariantMapping
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$y);
 	  const ownerState = _extends$6({}, props, {
 	    align,
 	    color,
@@ -12807,232 +13211,6 @@
 	});
 	var Typography$1 = Typography;
 
-	function _extends() {
-	  _extends = 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.apply(this, arguments);
-	}
-
-	/**
-	 * Determines if a given element is a DOM element name (i.e. not a React component).
-	 */
-	function isHostComponent(element) {
-	  return typeof element === 'string';
-	}
-
-	/**
-	 * Type of the ownerState based on the type of an element it applies to.
-	 * This resolves to the provided OwnerState for React components and `undefined` for host components.
-	 * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
-	 */
-
-	/**
-	 * Appends the ownerState object to the props, merging with the existing one if necessary.
-	 *
-	 * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.
-	 * @param otherProps Props of the element.
-	 * @param ownerState
-	 */
-	function appendOwnerState(elementType, otherProps, ownerState) {
-	  if (elementType === undefined || isHostComponent(elementType)) {
-	    return otherProps;
-	  }
-	  return _extends({}, otherProps, {
-	    ownerState: _extends({}, otherProps.ownerState, ownerState)
-	  });
-	}
-
-	const defaultContextValue = {
-	  disableDefaultClasses: false
-	};
-	const ClassNameConfiguratorContext = /*#__PURE__*/reactExports.createContext(defaultContextValue);
-	/**
-	 * @ignore - internal hook.
-	 *
-	 * Wraps the `generateUtilityClass` function and controls how the classes are generated.
-	 * Currently it only affects whether the classes are applied or not.
-	 *
-	 * @returns Function to be called with the `generateUtilityClass` function specific to a component to generate the classes.
-	 */
-	function useClassNamesOverride(generateUtilityClass) {
-	  const {
-	    disableDefaultClasses
-	  } = reactExports.useContext(ClassNameConfiguratorContext);
-	  return slot => {
-	    if (disableDefaultClasses) {
-	      return '';
-	    }
-	    return generateUtilityClass(slot);
-	  };
-	}
-
-	/**
-	 * Extracts event handlers from a given object.
-	 * A prop is considered an event handler if it is a function and its name starts with `on`.
-	 *
-	 * @param object An object to extract event handlers from.
-	 * @param excludeKeys An array of keys to exclude from the returned object.
-	 */
-	function extractEventHandlers(object, excludeKeys = []) {
-	  if (object === undefined) {
-	    return {};
-	  }
-	  const result = {};
-	  Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
-	    result[prop] = object[prop];
-	  });
-	  return result;
-	}
-
-	/**
-	 * If `componentProps` is a function, calls it with the provided `ownerState`.
-	 * Otherwise, just returns `componentProps`.
-	 */
-	function resolveComponentProps(componentProps, ownerState, slotState) {
-	  if (typeof componentProps === 'function') {
-	    return componentProps(ownerState, slotState);
-	  }
-	  return componentProps;
-	}
-
-	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;
-	}
-
-	/**
-	 * Removes event handlers from the given object.
-	 * A field is considered an event handler if it is a function with a name beginning with `on`.
-	 *
-	 * @param object Object to remove event handlers from.
-	 * @returns Object with event handlers removed.
-	 */
-	function omitEventHandlers(object) {
-	  if (object === undefined) {
-	    return {};
-	  }
-	  const result = {};
-	  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
-	    result[prop] = object[prop];
-	  });
-	  return result;
-	}
-
-	/**
-	 * Merges the slot component internal props (usually coming from a hook)
-	 * with the externally provided ones.
-	 *
-	 * The merge order is (the latter overrides the former):
-	 * 1. The internal props (specified as a getter function to work with get*Props hook result)
-	 * 2. Additional props (specified internally on a Base UI component)
-	 * 3. External props specified on the owner component. These should only be used on a root slot.
-	 * 4. External props specified in the `slotProps.*` prop.
-	 * 5. The `className` prop - combined from all the above.
-	 * @param parameters
-	 * @returns
-	 */
-	function mergeSlotProps(parameters) {
-	  const {
-	    getSlotProps,
-	    additionalProps,
-	    externalSlotProps,
-	    externalForwardedProps,
-	    className
-	  } = parameters;
-	  if (!getSlotProps) {
-	    // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
-	    // so we can simply merge all the props without having to worry about extracting event handlers.
-	    const joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
-	    const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
-	    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
-	    if (joinedClasses.length > 0) {
-	      props.className = joinedClasses;
-	    }
-	    if (Object.keys(mergedStyle).length > 0) {
-	      props.style = mergedStyle;
-	    }
-	    return {
-	      props,
-	      internalRef: undefined
-	    };
-	  }
-
-	  // In this case, getSlotProps is responsible for calling the external event handlers.
-	  // We don't need to include them in the merged props because of this.
-
-	  const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
-	  const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
-	  const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
-	  const internalSlotProps = getSlotProps(eventHandlers);
-
-	  // The order of classes is important here.
-	  // Emotion (that we use in libraries consuming Base UI) depends on this order
-	  // to properly override style. It requires the most important classes to be last
-	  // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
-	  const joinedClasses = clsx(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
-	  const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
-	  const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
-	  if (joinedClasses.length > 0) {
-	    props.className = joinedClasses;
-	  }
-	  if (Object.keys(mergedStyle).length > 0) {
-	    props.style = mergedStyle;
-	  }
-	  return {
-	    props,
-	    internalRef: internalSlotProps.ref
-	  };
-	}
-
-	const _excluded$y = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
-	/**
-	 * @ignore - do not document.
-	 * Builds the props to be passed into the slot of an unstyled component.
-	 * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
-	 * If the slot component is not a host component, it also merges in the `ownerState`.
-	 *
-	 * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.
-	 */
-	function useSlotProps(parameters) {
-	  var _parameters$additiona;
-	  const {
-	      elementType,
-	      externalSlotProps,
-	      ownerState,
-	      skipResolvingSlotProps = false
-	    } = parameters,
-	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$y);
-	  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
-	  const {
-	    props: mergedProps,
-	    internalRef
-	  } = mergeSlotProps(_extends({}, rest, {
-	    externalSlotProps: resolvedComponentsProps
-	  }));
-	  const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
-	  const props = appendOwnerState(elementType, _extends({}, mergedProps, {
-	    ref
-	  }), ownerState);
-	  return props;
-	}
-
 	/**
 	 *
 	 * Demos:
@@ -13071,6 +13249,26 @@
 	  };
 	}
 
+	const GLOBAL_CLASS_PREFIX = 'base';
+	function buildStateClass(state) {
+	  return `${GLOBAL_CLASS_PREFIX}--${state}`;
+	}
+	function buildSlotClass(componentName, slot) {
+	  return `${GLOBAL_CLASS_PREFIX}-${componentName}-${slot}`;
+	}
+	function generateUtilityClass(componentName, slot) {
+	  const globalStateClass = globalStateClasses[slot];
+	  return globalStateClass ? buildStateClass(globalStateClass) : buildSlotClass(componentName, slot);
+	}
+
+	function generateUtilityClasses(componentName, slots) {
+	  const result = {};
+	  slots.forEach(slot => {
+	    result[slot] = generateUtilityClass(componentName, slot);
+	  });
+	  return result;
+	}
+
 	// Inspired by https://github.com/focus-trap/tabbable
 	const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
 	function getTabIndex(node) {
@@ -15188,10 +15386,11 @@
 	  });
 	});
 
+	const COMPONENT_NAME = 'Popper';
 	function getPopperUtilityClass(slot) {
-	  return generateUtilityClass('MuiPopper', slot);
+	  return generateUtilityClass(COMPONENT_NAME, slot);
 	}
-	generateUtilityClasses('MuiPopper', ['root']);
+	generateUtilityClasses(COMPONENT_NAME, ['root']);
 
 	const _excluded$x = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
 	  _excluded2$3 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
@@ -16059,7 +16258,7 @@
 	const Popper = /*#__PURE__*/reactExports.forwardRef(function Popper(inProps, ref) {
 	  var _slots$root;
 	  const theme = useTheme$4();
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiPopper'
 	  });
@@ -16162,9 +16361,9 @@
 	}
 
 	function getInputBaseUtilityClass(slot) {
-	  return generateUtilityClass('MuiInputBase', slot);
+	  return generateUtilityClass$1('MuiInputBase', slot);
 	}
-	const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
+	const inputBaseClasses = generateUtilityClasses$1('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 	var inputBaseClasses$1 = inputBaseClasses;
 
 	const _excluded$u = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
@@ -16356,7 +16555,7 @@
 	 */
 	const InputBase = /*#__PURE__*/reactExports.forwardRef(function InputBase(inProps, ref) {
 	  var _slotProps$input;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiInputBase'
 	  });
@@ -16604,9 +16803,9 @@
 	var InputBase$1 = InputBase;
 
 	function getOutlinedInputUtilityClass(slot) {
-	  return generateUtilityClass('MuiOutlinedInput', slot);
+	  return generateUtilityClass$1('MuiOutlinedInput', slot);
 	}
-	const outlinedInputClasses = _extends$6({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+	const outlinedInputClasses = _extends$6({}, inputBaseClasses$1, generateUtilityClasses$1('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 	var outlinedInputClasses$1 = outlinedInputClasses;
 
 	const _excluded$t = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
@@ -16728,9 +16927,9 @@
 	var Fade$1 = Fade;
 
 	function getBackdropUtilityClass(slot) {
-	  return generateUtilityClass('MuiBackdrop', slot);
+	  return generateUtilityClass$1('MuiBackdrop', slot);
 	}
-	generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+	generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
 
 	const _excluded$s = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 	const useUtilityClasses$j = ownerState => {
@@ -16770,7 +16969,7 @@
 	}));
 	const Backdrop = /*#__PURE__*/reactExports.forwardRef(function Backdrop(inProps, ref) {
 	  var _slotProps$root, _ref, _slots$root;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiBackdrop'
 	  });
@@ -16812,10 +17011,15 @@
 	});
 	var Backdrop$1 = Backdrop;
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	function createUseThemeProps(name) {
+	  return useThemeProps$1;
+	}
+
 	function getBadgeUtilityClass(slot) {
-	  return generateUtilityClass('MuiBadge', slot);
+	  return generateUtilityClass$1('MuiBadge', slot);
 	}
-	const badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular',
+	const badgeClasses = generateUtilityClasses$1('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular',
 	// TODO: v6 remove the overlap value from these class keys
 	'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
 	var badgeClasses$1 = badgeClasses;
@@ -16823,6 +17027,7 @@
 	const _excluded$r = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 	const RADIUS_STANDARD = 10;
 	const RADIUS_DOT = 4;
+	const useThemeProps = createUseThemeProps();
 	const useUtilityClasses$i = ownerState => {
 	  const {
 	    color,
@@ -17119,7 +17324,7 @@
 	});
 	var Badge$1 = Badge;
 
-	const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+	const boxClasses = generateUtilityClasses$1('MuiBox', ['root']);
 	var boxClasses$1 = boxClasses;
 
 	const defaultTheme = createTheme();
@@ -17132,9 +17337,9 @@
 	var Box$1 = Box;
 
 	function getSwitchBaseUtilityClass(slot) {
-	  return generateUtilityClass('PrivateSwitchBase', slot);
+	  return generateUtilityClass$1('PrivateSwitchBase', slot);
 	}
-	generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
+	generateUtilityClasses$1('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
 	const _excluded$q = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 	const useUtilityClasses$h = ownerState => {
@@ -17300,9 +17505,9 @@
 	}), 'IndeterminateCheckBox');
 
 	function getCheckboxUtilityClass(slot) {
-	  return generateUtilityClass('MuiCheckbox', slot);
+	  return generateUtilityClass$1('MuiCheckbox', slot);
 	}
-	const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
+	const checkboxClasses = generateUtilityClasses$1('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 	var checkboxClasses$1 = checkboxClasses;
 
 	const _excluded$p = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
@@ -17355,7 +17560,7 @@
 	const defaultIndeterminateIcon = /*#__PURE__*/jsxRuntimeExports.jsx(IndeterminateCheckBoxIcon, {});
 	const Checkbox = /*#__PURE__*/reactExports.forwardRef(function Checkbox(inProps, ref) {
 	  var _icon$props$fontSize, _indeterminateIcon$pr;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiCheckbox'
 	  });
@@ -17399,9 +17604,9 @@
 	var Checkbox$1 = Checkbox;
 
 	function getCircularProgressUtilityClass(slot) {
-	  return generateUtilityClass('MuiCircularProgress', slot);
+	  return generateUtilityClass$1('MuiCircularProgress', slot);
 	}
-	generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+	generateUtilityClasses$1('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 
 	const _excluded$o = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 	let _ = t => t,
@@ -17513,7 +17718,7 @@
 	 * attribute to `true` on that region until it has finished loading.
 	 */
 	const CircularProgress = /*#__PURE__*/reactExports.forwardRef(function CircularProgress(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiCircularProgress'
 	  });
@@ -17577,9 +17782,9 @@
 	var CircularProgress$1 = CircularProgress;
 
 	function getModalUtilityClass(slot) {
-	  return generateUtilityClass('MuiModal', slot);
+	  return generateUtilityClass$1('MuiModal', slot);
 	}
-	generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+	generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
 
 	const _excluded$n = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 	const useUtilityClasses$e = ownerState => {
@@ -17641,7 +17846,7 @@
 	 */
 	const Modal = /*#__PURE__*/reactExports.forwardRef(function Modal(inProps, ref) {
 	  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    name: 'MuiModal',
 	    props: inProps
 	  });
@@ -17767,9 +17972,9 @@
 	var Modal$1 = Modal;
 
 	function getDividerUtilityClass(slot) {
-	  return generateUtilityClass('MuiDivider', slot);
+	  return generateUtilityClass$1('MuiDivider', slot);
 	}
-	const dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
+	const dividerClasses = generateUtilityClasses$1('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
 	var dividerClasses$1 = dividerClasses;
 
 	const _excluded$m = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
@@ -17898,7 +18103,7 @@
 	  paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
 	}));
 	const Divider = /*#__PURE__*/reactExports.forwardRef(function Divider(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiDivider'
 	  });
@@ -17954,7 +18159,7 @@
 	    slot: 'Root',
 	    overridesResolver: (props, styles) => styles.root
 	  }),
-	  useThemeProps: inProps => useThemeProps({
+	  useThemeProps: inProps => useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiStack'
 	  })
@@ -17962,9 +18167,9 @@
 	var Stack$1 = Stack;
 
 	function getFormControlLabelUtilityClasses(slot) {
-	  return generateUtilityClass('MuiFormControlLabel', slot);
+	  return generateUtilityClass$1('MuiFormControlLabel', slot);
 	}
-	const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
+	const formControlLabelClasses = generateUtilityClasses$1('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 	var formControlLabelClasses$1 = formControlLabelClasses;
 
 	const _excluded$l = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
@@ -18046,7 +18251,7 @@
 	 */
 	const FormControlLabel = /*#__PURE__*/reactExports.forwardRef(function FormControlLabel(inProps, ref) {
 	  var _ref, _slotProps$typography;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiFormControlLabel'
 	  });
@@ -18121,13 +18326,13 @@
 	var GridContext$1 = GridContext;
 
 	function getGridUtilityClass(slot) {
-	  return generateUtilityClass('MuiGrid', slot);
+	  return generateUtilityClass$1('MuiGrid', slot);
 	}
 	const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
 	const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 	const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-	const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth',
+	const gridClasses = generateUtilityClasses$1('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth',
 	// spacings
 	...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
 	// direction values
@@ -18476,7 +18681,7 @@
 	  return composeClasses(slots, getGridUtilityClass, classes);
 	};
 	const Grid = /*#__PURE__*/reactExports.forwardRef(function Grid(inProps, ref) {
-	  const themeProps = useThemeProps({
+	  const themeProps = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiGrid'
 	  });
@@ -18583,7 +18788,7 @@
 	      TransitionComponent = Transition$1
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$j);
-	  const timer = reactExports.useRef();
+	  const timer = useTimeout();
 	  const autoTimeout = reactExports.useRef();
 	  const theme = useTheme$1();
 	  const nodeRef = reactExports.useRef(null);
@@ -18672,18 +18877,13 @@
 	  const handleExited = normalizedTransitionCallback(onExited);
 	  const handleAddEndListener = next => {
 	    if (timeout === 'auto') {
-	      timer.current = setTimeout(next, autoTimeout.current || 0);
+	      timer.start(autoTimeout.current || 0, next);
 	    }
 	    if (addEndListener) {
 	      // Old call signature before `react-transition-group` implemented `nodeRef`
 	      addEndListener(nodeRef.current, next);
 	    }
 	  };
-	  reactExports.useEffect(() => {
-	    return () => {
-	      clearTimeout(timer.current);
-	    };
-	  }, []);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$6({
 	    appear: appear,
 	    in: inProp,
@@ -18713,9 +18913,9 @@
 	var Grow$1 = Grow;
 
 	function getIconUtilityClass(slot) {
-	  return generateUtilityClass('MuiIcon', slot);
+	  return generateUtilityClass$1('MuiIcon', slot);
 	}
-	generateUtilityClasses('MuiIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+	generateUtilityClasses$1('MuiIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
 	const _excluded$i = ["baseClassName", "className", "color", "component", "fontSize"];
 	const useUtilityClasses$a = ownerState => {
@@ -18773,7 +18973,7 @@
 	  }[ownerState.color]
 	}));
 	const Icon = /*#__PURE__*/reactExports.forwardRef(function Icon(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiIcon'
 	  });
@@ -18807,9 +19007,9 @@
 	var Icon$1 = Icon;
 
 	function getInputAdornmentUtilityClass(slot) {
-	  return generateUtilityClass('MuiInputAdornment', slot);
+	  return generateUtilityClass$1('MuiInputAdornment', slot);
 	}
-	const inputAdornmentClasses = generateUtilityClasses('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
+	const inputAdornmentClasses = generateUtilityClasses$1('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
 	var inputAdornmentClasses$1 = inputAdornmentClasses;
 
 	var _span$1;
@@ -18865,7 +19065,7 @@
 	  pointerEvents: 'none'
 	}));
 	const InputAdornment = /*#__PURE__*/reactExports.forwardRef(function InputAdornment(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiInputAdornment'
 	  });
@@ -18922,9 +19122,9 @@
 	var ListContext$1 = ListContext;
 
 	function getListUtilityClass(slot) {
-	  return generateUtilityClass('MuiList', slot);
+	  return generateUtilityClass$1('MuiList', slot);
 	}
-	generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
+	generateUtilityClasses$1('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
 	const _excluded$g = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 	const useUtilityClasses$8 = ownerState => {
@@ -18962,7 +19162,7 @@
 	  paddingTop: 0
 	}));
 	const List = /*#__PURE__*/reactExports.forwardRef(function List(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiList'
 	  });
@@ -18999,18 +19199,18 @@
 	var List$1 = List;
 
 	function getListItemUtilityClass(slot) {
-	  return generateUtilityClass('MuiListItem', slot);
+	  return generateUtilityClass$1('MuiListItem', slot);
 	}
-	const listItemClasses = generateUtilityClasses('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
+	const listItemClasses = generateUtilityClasses$1('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
 	var listItemClasses$1 = listItemClasses;
 
-	const listItemButtonClasses = generateUtilityClasses('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
+	const listItemButtonClasses = generateUtilityClasses$1('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
 	var listItemButtonClasses$1 = listItemButtonClasses;
 
 	function getListItemSecondaryActionClassesUtilityClass(slot) {
-	  return generateUtilityClass('MuiListItemSecondaryAction', slot);
+	  return generateUtilityClass$1('MuiListItemSecondaryAction', slot);
 	}
-	generateUtilityClasses('MuiListItemSecondaryAction', ['root', 'disableGutters']);
+	generateUtilityClasses$1('MuiListItemSecondaryAction', ['root', 'disableGutters']);
 
 	const _excluded$f = ["className"];
 	const useUtilityClasses$7 = ownerState => {
@@ -19047,7 +19247,7 @@
 	 * Must be used as the last child of ListItem to function properly.
 	 */
 	const ListItemSecondaryAction = /*#__PURE__*/reactExports.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiListItemSecondaryAction'
 	  });
@@ -19183,7 +19383,7 @@
 	 * Uses an additional container component if `ListItemSecondaryAction` is the last child.
 	 */
 	const ListItem = /*#__PURE__*/reactExports.forwardRef(function ListItem(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiListItem'
 	  });
@@ -19305,9 +19505,9 @@
 	var ListItem$1 = ListItem;
 
 	function getListItemIconUtilityClass(slot) {
-	  return generateUtilityClass('MuiListItemIcon', slot);
+	  return generateUtilityClass$1('MuiListItemIcon', slot);
 	}
-	const listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
+	const listItemIconClasses = generateUtilityClasses$1('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
 	var listItemIconClasses$1 = listItemIconClasses;
 
 	const _excluded$d = ["className"];
@@ -19346,7 +19546,7 @@
 	 * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
 	 */
 	const ListItemIcon = /*#__PURE__*/reactExports.forwardRef(function ListItemIcon(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiListItemIcon'
 	  });
@@ -19367,7 +19567,7 @@
 	});
 	var ListItemIcon$1 = ListItemIcon;
 
-	const listItemTextClasses = generateUtilityClasses('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
+	const listItemTextClasses = generateUtilityClasses$1('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
 	var listItemTextClasses$1 = listItemTextClasses;
 
 	const _excluded$c = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
@@ -19591,9 +19791,9 @@
 	var MenuList$1 = MenuList;
 
 	function getPopoverUtilityClass(slot) {
-	  return generateUtilityClass('MuiPopover', slot);
+	  return generateUtilityClass$1('MuiPopover', slot);
 	}
-	generateUtilityClasses('MuiPopover', ['root', 'paper']);
+	generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
 
 	const _excluded$b = ["onEntering"],
 	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
@@ -19660,7 +19860,7 @@
 	});
 	const Popover = /*#__PURE__*/reactExports.forwardRef(function Popover(inProps, ref) {
 	  var _slotProps$paper, _slots$root, _slots$paper;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiPopover'
 	  });
@@ -19915,9 +20115,9 @@
 	var Popover$1 = Popover;
 
 	function getMenuItemUtilityClass(slot) {
-	  return generateUtilityClass('MuiMenuItem', slot);
+	  return generateUtilityClass$1('MuiMenuItem', slot);
 	}
-	const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
+	const menuItemClasses = generateUtilityClasses$1('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 	var menuItemClasses$1 = menuItemClasses;
 
 	const _excluded$a = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
@@ -20027,7 +20227,7 @@
 	  }
 	})));
 	const MenuItem = /*#__PURE__*/reactExports.forwardRef(function MenuItem(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiMenuItem'
 	  });
@@ -20291,7 +20491,7 @@
 	}));
 	const OutlinedInput = /*#__PURE__*/reactExports.forwardRef(function OutlinedInput(inProps, ref) {
 	  var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiOutlinedInput'
 	  });
@@ -20429,9 +20629,9 @@
 	}
 
 	function getRadioUtilityClass(slot) {
-	  return generateUtilityClass('MuiRadio', slot);
+	  return generateUtilityClass$1('MuiRadio', slot);
 	}
-	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
+	const radioClasses = generateUtilityClasses$1('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 
 	const _excluded$7 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 	const useUtilityClasses$1 = ownerState => {
@@ -20491,7 +20691,7 @@
 	const defaultIcon = /*#__PURE__*/jsxRuntimeExports.jsx(RadioButtonIcon, {});
 	const Radio = /*#__PURE__*/reactExports.forwardRef(function Radio(inProps, ref) {
 	  var _defaultIcon$props$fo, _defaultCheckedIcon$p;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiRadio'
 	  });
@@ -20543,9 +20743,9 @@
 	var Radio$1 = Radio;
 
 	function getTooltipUtilityClass(slot) {
-	  return generateUtilityClass('MuiTooltip', slot);
+	  return generateUtilityClass$1('MuiTooltip', slot);
 	}
-	const tooltipClasses = generateUtilityClasses('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
+	const tooltipClasses = generateUtilityClasses$1('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
 	var tooltipClasses$1 = tooltipClasses;
 
 	const _excluded$6 = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
@@ -20720,7 +20920,7 @@
 	  }
 	}));
 	let hystersisOpen = false;
-	let hystersisTimer = null;
+	const hystersisTimer = new Timeout();
 	let cursorPosition = {
 	  x: 0,
 	  y: 0
@@ -20737,7 +20937,7 @@
 	// TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 	const Tooltip = /*#__PURE__*/reactExports.forwardRef(function Tooltip(inProps, ref) {
 	  var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiTooltip'
 	  });
@@ -20782,10 +20982,10 @@
 	  const [arrowRef, setArrowRef] = reactExports.useState(null);
 	  const ignoreNonTouchEvents = reactExports.useRef(false);
 	  const disableInteractive = disableInteractiveProp || followCursor;
-	  const closeTimer = reactExports.useRef();
-	  const enterTimer = reactExports.useRef();
-	  const leaveTimer = reactExports.useRef();
-	  const touchTimer = reactExports.useRef();
+	  const closeTimer = useTimeout();
+	  const enterTimer = useTimeout();
+	  const leaveTimer = useTimeout();
+	  const touchTimer = useTimeout();
 	  const [openState, setOpenState] = useControlled({
 	    controlled: openProp,
 	    default: false,
@@ -20795,23 +20995,16 @@
 	  let open = openState;
 	  const id = useId(idProp);
 	  const prevUserSelect = reactExports.useRef();
-	  const stopTouchInteraction = reactExports.useCallback(() => {
+	  const stopTouchInteraction = useEventCallback(() => {
 	    if (prevUserSelect.current !== undefined) {
 	      document.body.style.WebkitUserSelect = prevUserSelect.current;
 	      prevUserSelect.current = undefined;
 	    }
-	    clearTimeout(touchTimer.current);
-	  }, []);
-	  reactExports.useEffect(() => {
-	    return () => {
-	      clearTimeout(closeTimer.current);
-	      clearTimeout(enterTimer.current);
-	      clearTimeout(leaveTimer.current);
-	      stopTouchInteraction();
-	    };
-	  }, [stopTouchInteraction]);
+	    touchTimer.clear();
+	  });
+	  reactExports.useEffect(() => stopTouchInteraction, [stopTouchInteraction]);
 	  const handleOpen = event => {
-	    clearTimeout(hystersisTimer);
+	    hystersisTimer.clear();
 	    hystersisOpen = true;
 
 	    // The mouseover event will trigger for every nested element in the tooltip.
@@ -20827,18 +21020,16 @@
 	   * @param {React.SyntheticEvent | Event} event
 	   */
 	  event => {
-	    clearTimeout(hystersisTimer);
-	    hystersisTimer = setTimeout(() => {
+	    hystersisTimer.start(800 + leaveDelay, () => {
 	      hystersisOpen = false;
-	    }, 800 + leaveDelay);
+	    });
 	    setOpenState(false);
 	    if (onClose && open) {
 	      onClose(event);
 	    }
-	    clearTimeout(closeTimer.current);
-	    closeTimer.current = setTimeout(() => {
+	    closeTimer.start(theme.transitions.duration.shortest, () => {
 	      ignoreNonTouchEvents.current = false;
-	    }, theme.transitions.duration.shortest);
+	    });
 	  });
 	  const handleEnter = event => {
 	    if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -20851,22 +21042,21 @@
 	    if (childNode) {
 	      childNode.removeAttribute('title');
 	    }
-	    clearTimeout(enterTimer.current);
-	    clearTimeout(leaveTimer.current);
+	    enterTimer.clear();
+	    leaveTimer.clear();
 	    if (enterDelay || hystersisOpen && enterNextDelay) {
-	      enterTimer.current = setTimeout(() => {
+	      enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {
 	        handleOpen(event);
-	      }, hystersisOpen ? enterNextDelay : enterDelay);
+	      });
 	    } else {
 	      handleOpen(event);
 	    }
 	  };
 	  const handleLeave = event => {
-	    clearTimeout(enterTimer.current);
-	    clearTimeout(leaveTimer.current);
-	    leaveTimer.current = setTimeout(() => {
+	    enterTimer.clear();
+	    leaveTimer.start(leaveDelay, () => {
 	      handleClose(event);
-	    }, leaveDelay);
+	    });
 	  };
 	  const {
 	    isFocusVisibleRef,
@@ -20908,26 +21098,25 @@
 	  const handleMouseLeave = handleLeave;
 	  const handleTouchStart = event => {
 	    detectTouchStart(event);
-	    clearTimeout(leaveTimer.current);
-	    clearTimeout(closeTimer.current);
+	    leaveTimer.clear();
+	    closeTimer.clear();
 	    stopTouchInteraction();
 	    prevUserSelect.current = document.body.style.WebkitUserSelect;
 	    // Prevent iOS text selection on long-tap.
 	    document.body.style.WebkitUserSelect = 'none';
-	    touchTimer.current = setTimeout(() => {
+	    touchTimer.start(enterTouchDelay, () => {
 	      document.body.style.WebkitUserSelect = prevUserSelect.current;
 	      handleEnter(event);
-	    }, enterTouchDelay);
+	    });
 	  };
 	  const handleTouchEnd = event => {
 	    if (children.props.onTouchEnd) {
 	      children.props.onTouchEnd(event);
 	    }
 	    stopTouchInteraction();
-	    clearTimeout(leaveTimer.current);
-	    leaveTimer.current = setTimeout(() => {
+	    leaveTimer.start(leaveTouchDelay, () => {
 	      handleClose(event);
-	    }, leaveTouchDelay);
+	    });
 	  };
 	  reactExports.useEffect(() => {
 	    if (!open) {
@@ -21426,6 +21615,7 @@
 	var Lock = (props => SvgIcon(lock(props)));
 
 	const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
+	  viewBox: '0 0 12 16',
 	  shapes: [{
 	    type: 'path',
 	    attrs: {
@@ -23463,12 +23653,13 @@
 	    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,
@@ -23564,13 +23755,13 @@
 	    checkboxes: checkboxes,
 	    dense: dense,
 	    showGray: showGray
-	  }), showIcon && /*#__PURE__*/React.createElement(Grid$1, {
+	  }), showAnyIcon && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: rowColClasses.icon
-	  }, showLock && /*#__PURE__*/React.createElement(Lock, {
+	  }, showLockIcon && /*#__PURE__*/React.createElement(Lock, {
 	    style: iconStyles,
 	    size: "small"
-	  }), showTick && /*#__PURE__*/React.createElement(Tick, {
+	  }), showTickIcon && /*#__PURE__*/React.createElement(Tick, {
 	    style: iconStyles,
 	    size: "small"
 	  }))));
@@ -25754,10 +25945,9 @@
 	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(Paper$1)(_ref => {
 	  let {
@@ -26485,6 +26675,7 @@
 	function useDefaultSelectionActions(_ref) {
 	  let {
 	    api,
+	    layout,
 	    onConfirm = () => {},
 	    onCancel = () => {},
 	    onKeyDeactivate = () => {}
@@ -26496,14 +26687,14 @@
 	    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();
@@ -26518,7 +26709,7 @@
 	    key: 'confirm',
 	    type: 'icon-button',
 	    label: translator.get('Selection.Confirm'),
-	    enabled: () => api.canConfirm(),
+	    enabled: () => api.canConfirm(layout),
 	    action: () => {
 	      onConfirm();
 	      api.confirm();
@@ -26623,7 +26814,7 @@
 	  }), /*#__PURE__*/React.createElement(MenuList$1, {
 	    id: "moreMenuList"
 	  }, actions.map((item, ix) =>
-	  
+	  /*#__PURE__*/
 	  // eslint-disable-next-line react/no-array-index-key
 	  React.createElement(MoreItem, {
 	    key: ix,
@@ -26653,7 +26844,8 @@
 	    keyboardNavigation,
 	    focusHandler,
 	    getEnabledButton,
-	    selections
+	    selections,
+	    isRtl
 	  } = _ref;
 	  const handleActionsKeyDown = evt => {
 	    const {
@@ -26672,7 +26864,8 @@
 	          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();
@@ -26777,6 +26970,7 @@
 	      onConfirm: () => {},
 	      onCancel: () => {}
 	    },
+	    extraItems,
 	    more: more$1 = {
 	      enabled: false,
 	      actions: [],
@@ -26791,10 +26985,13 @@
 	    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
@@ -26820,8 +27017,9 @@
 	    keyboardNavigation,
 	    focusHandler,
 	    getEnabledButton,
-	    selections
-	  }), [keyboardNavigation, focusHandler, getEnabledButton, selections]);
+	    selections,
+	    isRtl
+	  }), [keyboardNavigation, focusHandler, getEnabledButton, selections, isRtl]);
 	  reactExports.useEffect(() => () => {
 	    setShowMoreItems(false);
 	  }, [popover.show, show, selections.show]);
@@ -26829,11 +27027,11 @@
 	    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);
@@ -26867,7 +27065,6 @@
 	  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.createElement(Grid$1, {
 	    ref: actionsRef,
 	    onKeyDown: handleActionsKeyDown,
@@ -26879,7 +27076,11 @@
 	    sx: {
 	      flexDirection: isRtl ? 'row-reverse' : 'row'
 	    }
-	  }, showActions && /*#__PURE__*/React.createElement(ActionsGroup, {
+	  }, (extraItems === null || extraItems === void 0 ? void 0 : extraItems.length) && /*#__PURE__*/React.createElement(ActionsGroup, {
+	    className: "actions-toolbar-extra-actions",
+	    actions: extraItems,
+	    isRtl: isRtl
+	  }), showActions && /*#__PURE__*/React.createElement(ActionsGroup, {
 	    actions: newActions
 	  }), showMore && /*#__PURE__*/React.createElement(ActionsGroup, {
 	    id: "actions-toolbar-show-more",
@@ -27081,7 +27282,7 @@
 	  };
 	  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 => {
@@ -29601,6 +29802,11 @@
 	  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 {
@@ -29629,7 +29835,8 @@
 	  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) || {};
@@ -29638,7 +29845,7 @@
 	  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,
@@ -29779,9 +29986,11 @@
 	    anchorEl: alignTo.current,
 	    anchorOrigin: anchorOrigin,
 	    transformOrigin: transformOrigin,
-	    PaperProps: {
-	      style: {
-	        minWidth: '250px'
+	    slotProps: {
+	      paper: {
+	        style: {
+	          minWidth: '250px'
+	        }
 	      }
 	    }
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
@@ -29815,6 +30024,7 @@
 	  }), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true
 	  }, /*#__PURE__*/React.createElement(ActionsToolbar, {
+	    layout: layout,
 	    more: {
 	      enabled: !isLocked,
 	      actions: listboxSelectionToolbarItems,
@@ -30144,7 +30354,7 @@
 	    variant: "contained",
 	    fullWidth: true
 	  }, clearAllStates)), field.states.map((s, ix) =>
-	  
+	  /*#__PURE__*/
 	  // eslint-disable-next-line react/no-array-index-key
 	  React.createElement(ListItem$1, {
 	    key: ix,
@@ -30322,7 +30532,7 @@
 	  }, /*#__PURE__*/React.createElement(List$1, {
 	    dense: true
 	  }, items.map((s, ix) =>
-	  
+	  /*#__PURE__*/
 	  // eslint-disable-next-line react/no-array-index-key
 	  React.createElement(ListItem$1, {
 	    key: ix,
@@ -30876,16 +31086,15 @@
 	        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;
@@ -31014,16 +31223,6 @@
 	  }
 	}
 
-	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(drillDown(props)));
-
 	function removeInnnerTabStops(container) {
 	  container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
 	    elm.setAttribute('tabIndex', -1);
@@ -31077,14 +31276,17 @@
 	      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;
@@ -31240,18 +31442,79 @@
 	  };
 	}
 
+	const StyledDiv = styled('div')(() => ({
+	  display: 'flex',
+	  width: '100%',
+	  height: '100%',
+	  alignItems: 'center',
+	  justifyContent: 'center'
+	}));
+	function ListBoxError(_ref) {
+	  let {
+	    text
+	  } = _ref;
+	  const {
+	    translator: translatorDynamic
+	  } = reactExports.useContext(InstanceContext);
+	  return /*#__PURE__*/React.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(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;
@@ -31267,15 +31530,18 @@
 	    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,
@@ -31300,97 +31566,37 @@
 	  };
 	}
 
-	const StyledDiv = styled('div')(() => ({
-	  display: 'flex',
-	  width: '100%',
-	  height: '100%',
-	  alignItems: 'center',
-	  justifyContent: 'center'
-	}));
-	function ListBoxError(_ref) {
-	  let {
-	    text
-	  } = _ref;
-	  const {
-	    translator: translatorDynamic
-	  } = reactExports.useContext(InstanceContext);
-	  return /*#__PURE__*/React.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 PREFIX$4 = 'ListBoxInline';
-	const classes$4 = {
-	  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
-	  screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly"),
-	  listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
+	const iconStyle = {
+	  fontSize: '12px'
 	};
-	const StyledGrid$3 = styled(Grid$1, {
-	  shouldForwardProp: p => !['containerPadding', 'isGridMode', 'styles'].includes(p)
-	})(_ref => {
+	const UnlockButton = styled(ButtonBase$1)(_ref => {
 	  let {
 	    theme,
-	    containerPadding,
-	    isGridMode,
-	    styles
+	    isLoading
 	  } = _ref;
-	  return _objectSpread2(_objectSpread2({}, styles.background), {}, {
-	    // sets background color and image of listbox
-	    ["& .".concat(classes$4.listBoxHeader)]: {
-	      alignSelf: 'center',
-	      display: 'flex'
-	    },
-	    ["& .".concat(classes$4.screenReaderOnly)]: {
-	      position: 'absolute',
-	      height: 0,
-	      width: 0,
-	      overflow: 'hidden'
-	    },
-	    ["& .".concat(classes$4.listboxWrapper)]: {
-	      padding: containerPadding
-	    },
-	    '&:focus': {
-	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
-	    },
-	    '&:focus ::-webkit-scrollbar-track': {
-	      boxShadow: !isGridMode ? 'inset -2px -2px 0px #3F8AB3' : undefined
+	  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
 	    },
-	    '&:focus-visible': {
-	      outline: 'none'
+	    '& i': {
+	      padding: "".concat(ICON_PADDING, "px")
 	    }
-	  });
+	  };
 	});
 	const StyledGridHeader = styled(Grid$1, {
 	  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
@@ -31406,33 +31612,304 @@
 	    alignContent: 'center'
 	  }, styles.header), {}, {
 	    '& *': {
-	      // Assign the styles color as defaul color for all elements in the header
 	      color: styles.header.color
 	    }
 	  });
 	});
-	const Title = styled(Typography$1)(_ref3 => {
+	const HeaderTitle = styled(Typography$1)(_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
 	  });
 	});
-	const isModal = _ref4 => {
+	function UnlockCoverButton(_ref4) {
+	  let {
+	    translator,
+	    toggleLock,
+	    keyboard,
+	    isLoading
+	  } = _ref4;
+	  const fontSize = '14px';
+	  const unLockText = translator.get('SelectionToolbar.ClickToUnlock');
+	  const component = /*#__PURE__*/React.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.createElement(CircularProgress$1, {
+	    size: 16,
+	    variant: "indeterminate",
+	    color: "primary"
+	  }) : /*#__PURE__*/React.createElement(Lock, {
+	    disableRipple: true,
+	    style: iconStyle
+	  }), !isLoading && /*#__PURE__*/React.createElement(Typography$1, {
+	    fontSize: fontSize
+	  }, unLockText));
+	  return component;
+	}
+
+	// ms that needs to pass before the lock button can be toggled again
+	const lockTimeFrameMs = 500;
+	let lastTime = 0;
+	function getToggleLock(_ref) {
+	  let {
+	    isLocked,
+	    setLocked,
+	    settingLockedState,
+	    model,
+	    setSettingLockedState
+	  } = _ref;
+	  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);
+	    });
+	  };
+	}
+	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] = reactExports.useState(showDetachedToolbarOnly);
+	  const [isLocked, setLocked] = reactExports.useState(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] = reactExports.useState(false);
+	  reactExports.useEffect(() => {
+	    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 = reactExports.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.createElement(SearchIcon, {
+	    title: translator.get('Listbox.Search'),
+	    size: "large",
+	    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+	      padding: "".concat(ICON_PADDING, "px")
+	    })
+	  }) : /*#__PURE__*/React.createElement(IconButton$1, {
+	    onClick: onShowSearch,
+	    tabIndex: -1,
+	    title: translator.get('Listbox.Search'),
+	    size: "large",
+	    disableRipple: true,
+	    "data-testid": "search-toggle-btn"
+	  }, /*#__PURE__*/React.createElement(SearchIcon, {
+	    style: iconStyle
+	  }));
+	  reactExports.useEffect(() => {
+	    if (!titleRef.current || !containerRect) {
+	      return;
+	    }
+	    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.createElement(ActionsToolbar, _extends$7({
+	    isRtl: isRtl,
+	    layout: layout
+	  }, toolbarProps));
+	  if (showDetachedToolbarOnly) {
+	    return actionsToolbar;
+	  }
+
+	  // Always show a lock symbol when locked and showLock is false
+	  const lockedIconComp = showLockIcon ? /*#__PURE__*/React.createElement(Lock, {
+	    size: "large",
+	    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+	      padding: "".concat(ICON_PADDING, "px")
+	    })
+	  }) : undefined;
+	  return /*#__PURE__*/React.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.createElement(UnlockCoverButton, {
+	    isLoading: settingLockedState,
+	    translator: translator,
+	    toggleLock: toggleLock,
+	    keyboard: keyboard
+	  }), showLeftIcon && /*#__PURE__*/React.createElement(Grid$1, {
+	    item: true,
+	    container: true,
+	    alignItems: "center",
+	    width: iconsWidth,
+	    className: "header-action-container"
+	  }, lockedIconComp || showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React.createElement(DrillDownIcon, {
+	    tabIndex: -1,
+	    title: translator.get('Listbox.DrillDown'),
+	    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+	      padding: "".concat(ICON_PADDING, "px")
+	    })
+	  })), /*#__PURE__*/React.createElement(Grid$1, {
+	    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.createElement(HeaderTitle, {
+	    variant: "h6",
+	    noWrap: true,
+	    ref: titleRef,
+	    title: layout.title,
+	    styles: styles
+	  }, layout.title)), /*#__PURE__*/React.createElement(Grid$1, {
+	    item: true,
+	    display: "flex"
+	  }, actionsToolbar));
+	}
+
+	const PREFIX$4 = 'ListBoxInline';
+	const classes$4 = {
+	  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
+	  screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly"),
+	  listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
+	};
+	const StyledGrid$3 = styled(Grid$1, {
+	  shouldForwardProp: p => !['containerPadding', 'isGridMode', 'styles'].includes(p)
+	})(_ref => {
+	  let {
+	    theme,
+	    containerPadding,
+	    isGridMode,
+	    styles
+	  } = _ref;
+	  return _objectSpread2(_objectSpread2({}, styles.background), {}, {
+	    // sets background color and image of listbox
+	    ["& .".concat(classes$4.listBoxHeader)]: {
+	      alignSelf: 'center',
+	      display: 'flex'
+	    },
+	    ["& .".concat(classes$4.screenReaderOnly)]: {
+	      position: 'absolute',
+	      height: 0,
+	      width: 0,
+	      overflow: 'hidden'
+	    },
+	    ["& .".concat(classes$4.listboxWrapper)]: {
+	      padding: containerPadding
+	    },
+	    '&:focus': {
+	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
+	    },
+	    '&:focus ::-webkit-scrollbar-track': {
+	      boxShadow: !isGridMode ? 'inset -2px -2px 0px #3F8AB3' : undefined
+	    },
+	    '&:focus-visible': {
+	      outline: 'none'
+	    }
+	  });
+	});
+	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,
@@ -31453,6 +31930,7 @@
 	    renderedCallback,
 	    toolbar = true,
 	    isPopover = false,
+	    showLock = false,
 	    components
 	  } = options;
 
@@ -31468,9 +31946,6 @@
 	    return [ref, setRef];
 	  };
 	  const theme = useTheme$1();
-	  const unlock = reactExports.useCallback(() => {
-	    model.unlock('/qListObjectDef');
-	  }, [model]);
 	  const {
 	    translator,
 	    keyboardNavigation,
@@ -31507,7 +31982,6 @@
 	    stop: 0
 	  });
 	  const [appSelections] = useAppSelections(app);
-	  const titleRef = reactExports.useRef(null);
 	  const [selectionState$1] = reactExports.useState(() => selectionState());
 	  const keyboard = useTempKeyboard({
 	    containerRef,
@@ -31519,7 +31993,6 @@
 	  }), [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] = reactExports.useState(false);
 	  const {
 	    handleKeyDown,
 	    handleOnMouseEnter,
@@ -31536,8 +32009,6 @@
 	    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;
 	  reactExports.useEffect(() => {
 	    document.addEventListener('keydown', globalKeyDown);
 	    return () => {
@@ -31545,6 +32016,9 @@
 	    };
 	  }, [globalKeyDown]);
 	  reactExports.useEffect(() => {
+	    if (search === true) {
+	      setShowSearch(true);
+	    }
 	    const show = () => {
 	      setShowToolbar(true);
 	    };
@@ -31555,6 +32029,7 @@
 	      }
 	    };
 	    if (isPopover) {
+	      // When isPopover, toolbar == false will be ignored.
 	      if (!selections.isActive()) {
 	        selections.begin('/qListObjectDef');
 	        selections.on('activated', show);
@@ -31562,7 +32037,7 @@
 	      }
 	      setShowToolbar(isPopover);
 	    }
-	    if (selections) {
+	    if (toolbar && selections) {
 	      if (!selections.isModal()) {
 	        selections.on('activated', show);
 	        selections.on('deactivated', hide);
@@ -31575,7 +32050,7 @@
 	        selections.removeListener('deactivated', hide);
 	      }
 	    };
-	  }, [selections, isPopover]);
+	  }, [toolbar, selections, isPopover]);
 	  reactExports.useEffect(() => {
 	    if (!searchContainer || !searchContainer.current) {
 	      return;
@@ -31592,64 +32067,31 @@
 	    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;
-	  reactExports.useEffect(() => {
-	    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).
@@ -31660,49 +32102,35 @@
 	    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.createElement(SearchIcon, {
-	    title: translator.get('Listbox.Search'),
-	    size: "large",
-	    style: {
-	      fontSize: '12px',
-	      padding: '7px'
-	    }
-	  }) : /*#__PURE__*/React.createElement(IconButton$1, {
-	    onClick: onShowSearch,
-	    tabIndex: -1,
-	    title: translator.get('Listbox.Search'),
-	    size: "large",
-	    disableRipple: true,
-	    "data-testid": "search-toggle-btn"
-	  }, /*#__PURE__*/React.createElement(SearchIcon, {
-	    style: {
-	      fontSize: '12px'
-	    }
-	  }));
-	  const lockIconComp = selectDisabled() ? /*#__PURE__*/React.createElement(Lock, {
-	    size: "large",
-	    style: {
-	      fontSize: '12px',
-	      padding: '7px'
-	    }
-	  }) : /*#__PURE__*/React.createElement(IconButton$1, {
-	    title: translator.get('SelectionToolbar.ClickToUnlock'),
-	    tabIndex: -1,
-	    onClick: unlock,
-	    size: "large"
-	  }, /*#__PURE__*/React.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.createElement(React.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$7({
-	    direction: direction
-	  }, getActionToolbarProps(true))), /*#__PURE__*/React.createElement(StyledGrid$3, {
+	  const listBoxMinHeight = showAttachedToolbar ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
+	  const listBoxHeader = /*#__PURE__*/React.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.createElement(React.Fragment, null, showDetachedToolbarOnly && listBoxHeader, /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
 	    container: true,
 	    tabIndex: keyboard.enabled ? -1 : undefined,
@@ -31723,45 +32151,7 @@
 	    },
 	    isGridMode: isGridMode,
 	    "aria-label": keyboard.active ? translator.get('Listbox.ScreenReaderInstructions') : ''
-	  }, showToolbarWithTitle && /*#__PURE__*/React.createElement(StyledGridHeader, {
-	    item: true,
-	    container: true,
-	    styles: styles,
-	    isRtl: isRtl,
-	    marginY: 1,
-	    paddingLeft: "".concat(headerPaddingLeft, "px"),
-	    paddingRight: "".concat(headerPaddingRight, "px")
-	  }, showIcons && /*#__PURE__*/React.createElement(Grid$1, {
-	    item: true,
-	    container: true,
-	    alignItems: "center",
-	    width: iconsWidth
-	  }, isLocked ? lockIconComp : showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React.createElement(DrillDownIcon, {
-	    tabIndex: -1,
-	    title: translator.get('Listbox.DrillDown'),
-	    size: "large",
-	    style: {
-	      fontSize: '12px'
-	    }
-	  })), /*#__PURE__*/React.createElement(Grid$1, {
-	    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.createElement(Title, {
-	    variant: "h6",
-	    noWrap: true,
-	    ref: titleRef,
-	    title: layout.title,
-	    styles: styles
-	  }, layout.title)), /*#__PURE__*/React.createElement(Grid$1, {
-	    item: true,
-	    display: "flex"
-	  }, /*#__PURE__*/React.createElement(ActionsToolbar, _extends$7({
-	    direction: direction
-	  }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React.createElement(Grid$1, {
+	  }, showAttachedToolbar && listBoxHeader, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    direction: "column",
@@ -31784,7 +32174,7 @@
 	    wildCardSearch: wildCardSearch,
 	    searchEnabled: searchEnabled,
 	    direction: direction,
-	    hide: showSearchIcon && onShowSearch,
+	    hide: showSearchIcon && handleShowSearch,
 	    styles: styles
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
@@ -31792,11 +32182,11 @@
 	    className: classes$4.listboxWrapper
 	  }, isInvalid ? /*#__PURE__*/React.createElement(ListBoxError, {
 	    text: errorText
-	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref6 => {
+	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref4 => {
 	    let {
 	      height,
 	      width
-	    } = _ref6;
+	    } = _ref4;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
 	      app: app,
@@ -31838,10 +32228,10 @@
 	  })))));
 	}
 	const ListBoxInlineMemoed = React.memo(ListBoxInline);
-	function IsolateUseLayoutWrapper(_ref7) {
+	function IsolateUseLayoutWrapper(_ref5) {
 	  let {
 	    options = {}
-	  } = _ref7;
+	  } = _ref5;
 	  const {
 	    model
 	  } = options;
@@ -31870,24 +32260,26 @@
 	    throw new Error("Option \"".concat(usedForbiddenOptions.join(', '), "\" is not applicable for existing objects."));
 	  }
 	  reactExports.useEffect(() => {
-	    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;
 	}
@@ -34003,7 +34395,8 @@
 	      show: showPopoverToolbar,
 	      anchorEl
 	    },
-	    focusHandler: focusHandler
+	    focusHandler: focusHandler,
+	    layout: layout
 	  });
 	  return /*#__PURE__*/React.createElement(StyledGrid$1, {
 	    ref: containerRef,
@@ -35681,11 +36074,17 @@
 	}
 
 	/**
+	 * 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.
@@ -35698,6 +36097,15 @@
 	 *     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) {
 	  {
@@ -35757,17 +36165,20 @@
 
 	/**
 	 * 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(() => ({
@@ -40366,7 +40777,7 @@
 
 	/**
 	 * @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
@@ -40785,6 +41196,7 @@
 	           * @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)