@nebula.js/stardust 4.9.0 → 4.10.0

package/core/esm/dev.js

@@ -1,6 +1,6 @@
 /*
-* @nebula.js/stardust v4.9.0
-* Copyright (c) 2023 QlikTech International AB
+* @nebula.js/stardust v4.10.0
+* Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
 
@@ -8,8 +8,8 @@ import * as React from 'react';
 import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, useContext, createElement, Component } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$4, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
-import styled$3 from '@emotion/styled';
+import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$3, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, ButtonBase, CircularProgress, Icon } from '@mui/material';
+import styled$2 from '@emotion/styled';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -282,8 +282,9 @@ var runtime = {exports: {}};
             throw arg;
           }
 
-          // Be forgiving, per 25.3.3.3.3 of the spec:
-          // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
+          // Be forgiving, per GeneratorResume behavior specified since ES2015:
+          // ES2015 spec, step 3: https://262.ecma-international.org/6.0/#sec-generatorresume
+          // Latest spec, step 2: https://tc39.es/ecma262/#sec-generatorresume
           return doneResult();
         }
         context.method = method;
@@ -343,7 +344,7 @@ var runtime = {exports: {}};
       var method = delegate.iterator[methodName];
       if (method === undefined$1) {
         // A .throw or .return when the delegate iterator has no .throw
-        // method, or a missing .next mehtod, always terminate the
+        // method, or a missing .next method, always terminate the
         // yield* loop.
         context.delegate = null;
 
@@ -482,7 +483,7 @@ var runtime = {exports: {}};
       };
     };
     function values(iterable) {
-      if (iterable || iterable === "") {
+      if (iterable != null) {
         var iteratorMethod = iterable[iteratorSymbol];
         if (iteratorMethod) {
           return iteratorMethod.call(iterable);
@@ -729,6 +730,20 @@ function _objectSpread2(e) {
   }
   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);
   if (key in obj) {
@@ -784,20 +799,6 @@ function _objectWithoutProperties(source, excluded) {
   }
   return target;
 }
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 const format = function () {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -2819,7 +2820,7 @@ var extend$1 = function extend() {
 
 var extend$2 = /*@__PURE__*/getDefaultExportFromCjs(extend$1);
 
-var fontSize = "13px";
+var fontSize = "12px";
 var fontFamily = "'Source Sans Pro', 'Arial', 'sans-serif'";
 var backgroundColor$1 = "transparent";
 var dataColors = {
@@ -3062,10 +3063,27 @@ var _variables = {
 };
 var type = "dark";
 var color$1 = "@B98";
+var object$1 = {
+	listBox: {
+		backgroundColor: "@B20",
+		title: {
+			main: {
+				color: "@B98",
+				fontSize: "14px",
+				fontWeight: "bold"
+			}
+		},
+		content: {
+			color: "#@B98",
+			fontSize: "12px"
+		}
+	}
+};
 var darkRawJSON = {
 	_variables: _variables,
 	type: type,
-	color: color$1
+	color: color$1,
+	object: object$1
 };
 
 var object = {
@@ -3095,7 +3113,7 @@ function setTheme(t, resolve) {
   if (t._inherit === false || t._inherit === 'false') {
     baseInherit = {};
   }
-  const root = extend$2(true, {}, baseRawJSON, colorRawJSON, baseInherit);
+  const root = extend$2(true, {}, baseRawJSON, baseInherit, colorRawJSON);
   // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
   const rawThemeJSON = extend$2(true, {}, root, {
     scales: null,
@@ -3184,15 +3202,14 @@ function theme$1(resolvedTheme) {
     },
     dataColors() {
       /** @interface Theme~DataColorSpecials */
-      return (/** @lends Theme~DataColorSpecials */{
-          /** @type {string} */
-          primary: resolvedTheme.dataColors.primaryColor,
-          /** @type {string} */
-          nil: resolvedTheme.dataColors.nullColor,
-          /** @type {string} */
-          others: resolvedTheme.dataColors.othersColor
-        }
-      );
+      return /** @lends Theme~DataColorSpecials */{
+        /** @type {string} */
+        primary: resolvedTheme.dataColors.primaryColor,
+        /** @type {string} */
+        nil: resolvedTheme.dataColors.nullColor,
+        /** @type {string} */
+        others: resolvedTheme.dataColors.othersColor
+      };
     },
     uiColor(c, shift) {
       // eslint-disable-next-line no-param-reassign
@@ -3518,7 +3535,6 @@ function resolveVariables(objTree, variables) {
     }
   });
 }
-
 styleResolver.resolveRawTheme = raw => {
   // TODO - validate format
   const c = extend$2(true, {}, raw);
@@ -3825,65 +3841,14 @@ var m$1 = ReactDOM;
   client.hydrateRoot = m$1.hydrateRoot;
 }
 
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
-}
-
-function isPlainObject(item) {
-  return item !== null && typeof item === 'object' && item.constructor === Object;
-}
-function deepClone(source) {
-  if (!isPlainObject(source)) {
-    return source;
-  }
-  const output = {};
-  Object.keys(source).forEach(key => {
-    output[key] = deepClone(source[key]);
-  });
-  return output;
-}
-function deepmerge(target, source, options = {
-  clone: true
-}) {
-  const output = options.clone ? _extends$4({}, target) : target;
-  if (isPlainObject(target) && isPlainObject(source)) {
-    Object.keys(source).forEach(key => {
-      // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
-        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
-        output[key] = deepmerge(target[key], source[key], options);
-      } else if (options.clone) {
-        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
-      } else {
-        output[key] = source[key];
-      }
-    });
-  }
-  return output;
-}
-
 /**
  * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/utils/macros/MuiError.macro` instead.
+ * Use `MuiError` from `@mui-internal/babel-macros/MuiError.macro` instead.
  * @param {number} code
  */
 function formatMuiErrorMessage(code) {
   // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe iff we're concatenating primitives
+  // loose mode is safe if we're concatenating primitives
   // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
   /* eslint-disable prefer-template */
   let url = 'https://mui.com/production-error/?code=' + code;
@@ -3896,902 +3861,444 @@ function formatMuiErrorMessage(code) {
   /* eslint-enable prefer-template */
 }
 
-// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
-//
-// A strict capitalization should uppercase the first letter of each word in the sentence.
-// We only handle the first word.
-function capitalize(string) {
-  if (typeof string !== 'string') {
-    throw new Error(formatMuiErrorMessage(7));
-  }
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
+var THEME_ID = '$$material';
 
-/**
- * Safe chained function.
- *
- * Will only create a new function if needed,
- * otherwise will pass back existing functions or null.
- */
-function createChainedFunction(...funcs) {
-  return funcs.reduce((acc, func) => {
-    if (func == null) {
-      return acc;
+function _extends$4() {
+  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    return function chainedFunction(...args) {
-      acc.apply(this, args);
-      func.apply(this, args);
-    };
-  }, () => {});
-}
-
-// Corresponds to 10 frames at 60 Hz.
-// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
-function debounce(func, wait = 166) {
-  let timeout;
-  function debounced(...args) {
-    const later = () => {
-      // @ts-ignore
-      func.apply(this, args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  }
-  debounced.clear = () => {
-    clearTimeout(timeout);
+    return target;
   };
-  return debounced;
+  return _extends$4.apply(this, arguments);
 }
 
-function deprecatedPropType(validator, reason) {
-  {
-    return () => null;
+function _objectWithoutPropertiesLoose$1(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
+  return target;
 }
 
-function isMuiElement(element, muiNames) {
-  var _muiName, _element$type;
-  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
-  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
-  // eslint-disable-next-line no-underscore-dangle
-  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
-}
+/*
 
-function ownerDocument(node) {
-  return node && node.ownerDocument || document;
-}
+Based off glamor's StyleSheet, thanks Sunil ❤️
 
-function ownerWindow(node) {
-  const doc = ownerDocument(node);
-  return doc.defaultView || window;
-}
+high performance StyleSheet for css-in-js systems
 
-function requirePropFactory(componentNameInError, Component) {
-  {
-    return () => null;
-  }
-}
+- uses multiple style tags behind the scenes for millions of rules
+- uses `insertRule` for appending in production for *much* faster performance
 
-/**
- * TODO v5: consider making it private
- *
- * passes {value} to {ref}
- *
- * WARNING: Be sure to only call this inside a callback that is passed as a ref.
- * Otherwise, make sure to cleanup the previous {ref} if it changes. See
- * https://github.com/mui/material-ui/issues/13539
- *
- * Useful if you want to expose the ref of an inner component to the public API
- * while still using it inside the component.
- * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
- */
-function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}
+// usage
 
-/**
- * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
- * This is useful for effects that are only needed for client-side rendering but not for SSR.
- *
- * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
- * and confirm it doesn't apply to your use-case.
- */
-const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-var useEnhancedEffect$1 = useEnhancedEffect;
+import { StyleSheet } from '@emotion/sheet'
 
-let globalId = 0;
-function useGlobalId(idOverride) {
-  const [defaultId, setDefaultId] = React.useState(idOverride);
-  const id = idOverride || defaultId;
-  React.useEffect(() => {
-    if (defaultId == null) {
-      // Fallback to this default id when possible.
-      // Use the incrementing value for client-side rendering only.
-      // We can't use it server-side.
-      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
-      globalId += 1;
-      setDefaultId(`mui-${globalId}`);
-    }
-  }, [defaultId]);
-  return id;
-}
+let styleSheet = new StyleSheet({ key: '', container: document.head })
 
-// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseId = React['useId'.toString()];
-/**
- *
- * @example <div id={useId()} />
- * @param idOverride
- * @returns {string}
- */
-function useId(idOverride) {
-  if (maybeReactUseId !== undefined) {
-    const reactId = maybeReactUseId();
-    return idOverride != null ? idOverride : reactId;
-  }
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
-  return useGlobalId(idOverride);
-}
+styleSheet.insert('#box { border: 1px solid red; }')
+- appends a css rule into the stylesheet
 
-function unsupportedProp(props, propName, componentName, location, propFullName) {
-  {
-    return null;
+styleSheet.flush()
+- empties the stylesheet of all its contents
+
+*/
+// $FlowFixMe
+function sheetForTag(tag) {
+  if (tag.sheet) {
+    // $FlowFixMe
+    return tag.sheet;
+  } // this weirdness brought to you by firefox
+
+  /* istanbul ignore next */
+
+
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    if (document.styleSheets[i].ownerNode === tag) {
+      // $FlowFixMe
+      return document.styleSheets[i];
+    }
   }
 }
 
-function useControlled({
-  controlled,
-  default: defaultProp,
-  name,
-  state = 'value'
-}) {
-  // isControlled is ignored in the hook dependency lists as it should never change.
-  const {
-    current: isControlled
-  } = React.useRef(controlled !== undefined);
-  const [valueState, setValue] = React.useState(defaultProp);
-  const value = isControlled ? controlled : valueState;
-  const setValueIfUncontrolled = React.useCallback(newValue => {
-    if (!isControlled) {
-      setValue(newValue);
-    }
-  }, []);
-  return [value, setValueIfUncontrolled];
+function createStyleElement(options) {
+  var tag = document.createElement('style');
+  tag.setAttribute('data-emotion', options.key);
+
+  if (options.nonce !== undefined) {
+    tag.setAttribute('nonce', options.nonce);
+  }
+
+  tag.appendChild(document.createTextNode(''));
+  tag.setAttribute('data-s', '');
+  return tag;
 }
 
+var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
+  function StyleSheet(options) {
+    var _this = this;
+
+    this._insertTag = function (tag) {
+      var before;
+
+      if (_this.tags.length === 0) {
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
+      } else {
+        before = _this.tags[_this.tags.length - 1].nextSibling;
+      }
+
+      _this.container.insertBefore(tag, before);
+
+      _this.tags.push(tag);
+    };
+
+    this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
+    this.tags = [];
+    this.ctr = 0;
+    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+    this.key = options.key;
+    this.container = options.container;
+    this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
+    this.before = null;
+  }
+
+  var _proto = StyleSheet.prototype;
+
+  _proto.hydrate = function hydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
+  _proto.insert = function insert(rule) {
+    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+    // it's 1 in dev because we insert source maps that map a single rule to a location
+    // and you can only have one source map per style tag
+    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+      this._insertTag(createStyleElement(this));
+    }
+
+    var tag = this.tags[this.tags.length - 1];
+
+    if (this.isSpeedy) {
+      var sheet = sheetForTag(tag);
+
+      try {
+        // this is the ultrafast version, works across browsers
+        // the big drawback is that the css won't be editable in devtools
+        sheet.insertRule(rule, sheet.cssRules.length);
+      } catch (e) {
+      }
+    } else {
+      tag.appendChild(document.createTextNode(rule));
+    }
+
+    this.ctr++;
+  };
+
+  _proto.flush = function flush() {
+    // $FlowFixMe
+    this.tags.forEach(function (tag) {
+      return tag.parentNode && tag.parentNode.removeChild(tag);
+    });
+    this.tags = [];
+    this.ctr = 0;
+  };
+
+  return StyleSheet;
+}();
+
+var MS = '-ms-';
+var MOZ = '-moz-';
+var WEBKIT = '-webkit-';
+
+var COMMENT = 'comm';
+var RULESET = 'rule';
+var DECLARATION = 'decl';
+var IMPORT = '@import';
+var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
+
 /**
- * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
- * See RFC in https://github.com/reactjs/rfcs/pull/220
+ * @param {number}
+ * @return {number}
  */
+var abs = Math.abs;
 
-function useEventCallback(fn) {
-  const ref = React.useRef(fn);
-  useEnhancedEffect$1(() => {
-    ref.current = fn;
-  });
-  return React.useRef((...args) =>
-  // @ts-expect-error hide `this`
-  // tslint:disable-next-line:ban-comma-operator
-  (0, ref.current)(...args)).current;
+/**
+ * @param {number}
+ * @return {string}
+ */
+var from = String.fromCharCode;
+
+/**
+ * @param {object}
+ * @return {object}
+ */
+var assign = Object.assign;
+
+/**
+ * @param {string} value
+ * @param {number} length
+ * @return {number}
+ */
+function hash (value, length) {
+	return charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0
 }
 
-function useForkRef(...refs) {
-  /**
-   * This will create a new function if the refs passed to this hook change and are all defined.
-   * This means react will call the old forkRef with `null` and the new forkRef
-   * with the ref. Cleanup naturally emerges from this behavior.
-   */
-  return React.useMemo(() => {
-    if (refs.every(ref => ref == null)) {
-      return null;
-    }
-    return instance => {
-      refs.forEach(ref => {
-        setRef(ref, instance);
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
+/**
+ * @param {string} value
+ * @return {string}
+ */
+function trim$1 (value) {
+	return value.trim()
 }
 
-let hadKeyboardEvent = true;
-let hadFocusVisibleRecently = false;
-let hadFocusVisibleRecentlyTimeout;
-const inputTypesWhitelist = {
-  text: true,
-  search: true,
-  url: true,
-  tel: true,
-  email: true,
-  password: true,
-  number: true,
-  date: true,
-  month: true,
-  week: true,
-  time: true,
-  datetime: true,
-  'datetime-local': true
-};
+/**
+ * @param {string} value
+ * @param {RegExp} pattern
+ * @return {string?}
+ */
+function match (value, pattern) {
+	return (value = pattern.exec(value)) ? value[0] : value
+}
 
 /**
- * Computes whether the given element should automatically trigger the
- * `focus-visible` class being added, i.e. whether it should always match
- * `:focus-visible` when focused.
- * @param {Element} node
- * @returns {boolean}
+ * @param {string} value
+ * @param {(string|RegExp)} pattern
+ * @param {string} replacement
+ * @return {string}
  */
-function focusTriggersKeyboardModality(node) {
-  const {
-    type,
-    tagName
-  } = node;
-  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
-    return true;
-  }
-  if (tagName === 'TEXTAREA' && !node.readOnly) {
-    return true;
-  }
-  if (node.isContentEditable) {
-    return true;
-  }
-  return false;
+function replace (value, pattern, replacement) {
+	return value.replace(pattern, replacement)
 }
 
 /**
- * Keep track of our keyboard modality state with `hadKeyboardEvent`.
- * If the most recent user interaction was via the keyboard;
- * and the key press did not include a meta, alt/option, or control key;
- * then the modality is keyboard. Otherwise, the modality is not keyboard.
- * @param {KeyboardEvent} event
+ * @param {string} value
+ * @param {string} search
+ * @return {number}
  */
-function handleKeyDown(event) {
-  if (event.metaKey || event.altKey || event.ctrlKey) {
-    return;
-  }
-  hadKeyboardEvent = true;
+function indexof (value, search) {
+	return value.indexOf(search)
 }
 
 /**
- * If at any point a user clicks with a pointing device, ensure that we change
- * the modality away from keyboard.
- * This avoids the situation where a user presses a key on an already focused
- * element, and then clicks on a different element, focusing it with a
- * pointing device, while we still think we're in keyboard modality.
+ * @param {string} value
+ * @param {number} index
+ * @return {number}
  */
-function handlePointerDown() {
-  hadKeyboardEvent = false;
+function charat (value, index) {
+	return value.charCodeAt(index) | 0
 }
-function handleVisibilityChange() {
-  if (this.visibilityState === 'hidden') {
-    // If the tab becomes active again, the browser will handle calling focus
-    // on the element (Safari actually calls it twice).
-    // If this tab change caused a blur on an element with focus-visible,
-    // re-apply the class when the user switches back to the tab.
-    if (hadFocusVisibleRecently) {
-      hadKeyboardEvent = true;
-    }
-  }
+
+/**
+ * @param {string} value
+ * @param {number} begin
+ * @param {number} end
+ * @return {string}
+ */
+function substr (value, begin, end) {
+	return value.slice(begin, end)
 }
-function prepare(doc) {
-  doc.addEventListener('keydown', handleKeyDown, true);
-  doc.addEventListener('mousedown', handlePointerDown, true);
-  doc.addEventListener('pointerdown', handlePointerDown, true);
-  doc.addEventListener('touchstart', handlePointerDown, true);
-  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+
+/**
+ * @param {string} value
+ * @return {number}
+ */
+function strlen (value) {
+	return value.length
 }
-function isFocusVisible(event) {
-  const {
-    target
-  } = event;
-  try {
-    return target.matches(':focus-visible');
-  } catch (error) {
-    // Browsers not implementing :focus-visible will throw a SyntaxError.
-    // We use our own heuristic for those browsers.
-    // Rethrow might be better if it's not the expected error but do we really
-    // want to crash if focus-visible malfunctioned?
-  }
 
-  // No need for validFocusTarget check. The user does that by attaching it to
-  // focusable events only.
-  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
+/**
+ * @param {any[]} value
+ * @return {number}
+ */
+function sizeof (value) {
+	return value.length
 }
-function useIsFocusVisible() {
-  const ref = React.useCallback(node => {
-    if (node != null) {
-      prepare(node.ownerDocument);
-    }
-  }, []);
-  const isFocusVisibleRef = React.useRef(false);
 
-  /**
-   * Should be called if a blur event is fired
-   */
-  function handleBlurVisible() {
-    // checking against potential state variable does not suffice if we focus and blur synchronously.
-    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
-    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
-    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
-    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
-    if (isFocusVisibleRef.current) {
-      // To detect a tab/window switch, we look for a blur event followed
-      // rapidly by a visibility change.
-      // If we don't see a visibility change within 100ms, it's probably a
-      // regular focus change.
-      hadFocusVisibleRecently = true;
-      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
-        hadFocusVisibleRecently = false;
-      }, 100);
-      isFocusVisibleRef.current = false;
-      return true;
-    }
-    return false;
-  }
+/**
+ * @param {any} value
+ * @param {any[]} array
+ * @return {any}
+ */
+function append (value, array) {
+	return array.push(value), value
+}
 
-  /**
-   * Should be called if a blur event is fired
-   */
-  function handleFocusVisible(event) {
-    if (isFocusVisible(event)) {
-      isFocusVisibleRef.current = true;
-      return true;
-    }
-    return false;
-  }
-  return {
-    isFocusVisibleRef,
-    onFocus: handleFocusVisible,
-    onBlur: handleBlurVisible,
-    ref
-  };
+/**
+ * @param {string[]} array
+ * @param {function} callback
+ * @return {string}
+ */
+function combine (array, callback) {
+	return array.map(callback).join('')
 }
 
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = '';
+
 /**
- * Add keys, values of `defaultProps` that does not exist in `props`
- * @param {object} defaultProps
+ * @param {string} value
+ * @param {object | null} root
+ * @param {object | null} parent
+ * @param {string} type
+ * @param {string[] | string} props
+ * @param {object[] | string} children
+ * @param {number} length
+ */
+function node (value, root, parent, type, props, children, length) {
+	return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
+}
+
+/**
+ * @param {object} root
  * @param {object} props
- * @returns {object} resolved props
+ * @return {object}
  */
-function resolveProps(defaultProps, props) {
-  const output = _extends$4({}, props);
-  Object.keys(defaultProps).forEach(propName => {
-    if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = _extends$4({}, defaultProps[propName], output[propName]);
-    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
-      const defaultSlotProps = defaultProps[propName] || {};
-      const slotProps = props[propName];
-      output[propName] = {};
-      if (!slotProps || !Object.keys(slotProps)) {
-        // Reduce the iteration if the slot props is empty
-        output[propName] = defaultSlotProps;
-      } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
-        // Reduce the iteration if the default slot props is empty
-        output[propName] = slotProps;
-      } else {
-        output[propName] = _extends$4({}, slotProps);
-        Object.keys(defaultSlotProps).forEach(slotPropName => {
-          output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
-        });
-      }
-    } else if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  });
-  return output;
+function copy (root, props) {
+	return assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
 }
 
-function composeClasses(slots, getUtilityClass, classes = undefined) {
-  const output = {};
-  Object.keys(slots).forEach(
-  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-  slot => {
-    output[slot] = slots[slot].reduce((acc, key) => {
-      if (key) {
-        const utilityClass = getUtilityClass(key);
-        if (utilityClass !== '') {
-          acc.push(utilityClass);
-        }
-        if (classes && classes[key]) {
-          acc.push(classes[key]);
-        }
-      }
-      return acc;
-    }, []).join(' ');
-  });
-  return output;
+/**
+ * @return {number}
+ */
+function char () {
+	return character
 }
 
-const defaultGenerator = componentName => componentName;
-const createClassNameGenerator = () => {
-  let generate = defaultGenerator;
-  return {
-    configure(generator) {
-      generate = generator;
-    },
-    generate(componentName) {
-      return generate(componentName);
-    },
-    reset() {
-      generate = defaultGenerator;
-    }
-  };
-};
-const ClassNameGenerator = createClassNameGenerator();
-var ClassNameGenerator$1 = ClassNameGenerator;
+/**
+ * @return {number}
+ */
+function prev () {
+	character = position > 0 ? charat(characters, --position) : 0;
 
-// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
-// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
-const globalStateClassesMapping = {
-  active: 'active',
-  checked: 'checked',
-  completed: 'completed',
-  disabled: 'disabled',
-  error: 'error',
-  expanded: 'expanded',
-  focused: 'focused',
-  focusVisible: 'focusVisible',
-  open: 'open',
-  readOnly: 'readOnly',
-  required: 'required',
-  selected: 'selected'
-};
-function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
-  const globalStateClass = globalStateClassesMapping[slot];
-  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
+	if (column--, character === 10)
+		column = 1, line--;
+
+	return character
 }
 
-function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
-  const result = {};
-  slots.forEach(slot => {
-    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-  });
-  return result;
+/**
+ * @return {number}
+ */
+function next () {
+	character = position < length ? charat(characters, position++) : 0;
+
+	if (column++, character === 10)
+		column = 1, line++;
+
+	return character
 }
 
-var THEME_ID = '$$material';
-
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$3.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-/*
-
-Based off glamor's StyleSheet, thanks Sunil ❤️
-
-high performance StyleSheet for css-in-js systems
-
-- uses multiple style tags behind the scenes for millions of rules
-- uses `insertRule` for appending in production for *much* faster performance
-
-// usage
-
-import { StyleSheet } from '@emotion/sheet'
-
-let styleSheet = new StyleSheet({ key: '', container: document.head })
-
-styleSheet.insert('#box { border: 1px solid red; }')
-- appends a css rule into the stylesheet
-
-styleSheet.flush()
-- empties the stylesheet of all its contents
-
-*/
-// $FlowFixMe
-function sheetForTag(tag) {
-  if (tag.sheet) {
-    // $FlowFixMe
-    return tag.sheet;
-  } // this weirdness brought to you by firefox
-
-  /* istanbul ignore next */
-
-
-  for (var i = 0; i < document.styleSheets.length; i++) {
-    if (document.styleSheets[i].ownerNode === tag) {
-      // $FlowFixMe
-      return document.styleSheets[i];
-    }
-  }
-}
-
-function createStyleElement(options) {
-  var tag = document.createElement('style');
-  tag.setAttribute('data-emotion', options.key);
-
-  if (options.nonce !== undefined) {
-    tag.setAttribute('nonce', options.nonce);
-  }
-
-  tag.appendChild(document.createTextNode(''));
-  tag.setAttribute('data-s', '');
-  return tag;
-}
-
-var StyleSheet = /*#__PURE__*/function () {
-  // Using Node instead of HTMLElement since container may be a ShadowRoot
-  function StyleSheet(options) {
-    var _this = this;
-
-    this._insertTag = function (tag) {
-      var before;
-
-      if (_this.tags.length === 0) {
-        if (_this.insertionPoint) {
-          before = _this.insertionPoint.nextSibling;
-        } else if (_this.prepend) {
-          before = _this.container.firstChild;
-        } else {
-          before = _this.before;
-        }
-      } else {
-        before = _this.tags[_this.tags.length - 1].nextSibling;
-      }
-
-      _this.container.insertBefore(tag, before);
-
-      _this.tags.push(tag);
-    };
-
-    this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
-    this.tags = [];
-    this.ctr = 0;
-    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
-
-    this.key = options.key;
-    this.container = options.container;
-    this.prepend = options.prepend;
-    this.insertionPoint = options.insertionPoint;
-    this.before = null;
-  }
-
-  var _proto = StyleSheet.prototype;
-
-  _proto.hydrate = function hydrate(nodes) {
-    nodes.forEach(this._insertTag);
-  };
-
-  _proto.insert = function insert(rule) {
-    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
-    // it's 1 in dev because we insert source maps that map a single rule to a location
-    // and you can only have one source map per style tag
-    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      this._insertTag(createStyleElement(this));
-    }
-
-    var tag = this.tags[this.tags.length - 1];
-
-    if (this.isSpeedy) {
-      var sheet = sheetForTag(tag);
-
-      try {
-        // this is the ultrafast version, works across browsers
-        // the big drawback is that the css won't be editable in devtools
-        sheet.insertRule(rule, sheet.cssRules.length);
-      } catch (e) {
-      }
-    } else {
-      tag.appendChild(document.createTextNode(rule));
-    }
-
-    this.ctr++;
-  };
-
-  _proto.flush = function flush() {
-    // $FlowFixMe
-    this.tags.forEach(function (tag) {
-      return tag.parentNode && tag.parentNode.removeChild(tag);
-    });
-    this.tags = [];
-    this.ctr = 0;
-  };
-
-  return StyleSheet;
-}();
-
-var MS = '-ms-';
-var MOZ = '-moz-';
-var WEBKIT = '-webkit-';
-
-var COMMENT = 'comm';
-var RULESET = 'rule';
-var DECLARATION = 'decl';
-var IMPORT = '@import';
-var KEYFRAMES = '@keyframes';
-var LAYER = '@layer';
+/**
+ * @return {number}
+ */
+function peek () {
+	return charat(characters, position)
+}
 
 /**
- * @param {number}
  * @return {number}
  */
-var abs = Math.abs;
+function caret () {
+	return position
+}
 
 /**
- * @param {number}
+ * @param {number} begin
+ * @param {number} end
  * @return {string}
  */
-var from = String.fromCharCode;
-
-/**
- * @param {object}
- * @return {object}
- */
-var assign = Object.assign;
+function slice (begin, end) {
+	return substr(characters, begin, end)
+}
 
 /**
- * @param {string} value
- * @param {number} length
+ * @param {number} type
  * @return {number}
  */
-function hash (value, length) {
-	return charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0
+function token (type) {
+	switch (type) {
+		// \0 \t \n \r \s whitespace token
+		case 0: case 9: case 10: case 13: case 32:
+			return 5
+		// ! + , / > @ ~ isolate token
+		case 33: case 43: case 44: case 47: case 62: case 64: case 126:
+		// ; { } breakpoint token
+		case 59: case 123: case 125:
+			return 4
+		// : accompanied token
+		case 58:
+			return 3
+		// " ' ( [ opening delimit token
+		case 34: case 39: case 40: case 91:
+			return 2
+		// ) ] closing delimit token
+		case 41: case 93:
+			return 1
+	}
+
+	return 0
 }
 
 /**
  * @param {string} value
- * @return {string}
+ * @return {any[]}
  */
-function trim$1 (value) {
-	return value.trim()
+function alloc (value) {
+	return line = column = 1, length = strlen(characters = value), position = 0, []
 }
 
 /**
- * @param {string} value
- * @param {RegExp} pattern
- * @return {string?}
+ * @param {any} value
+ * @return {any}
  */
-function match (value, pattern) {
-	return (value = pattern.exec(value)) ? value[0] : value
+function dealloc (value) {
+	return characters = '', value
 }
 
 /**
- * @param {string} value
- * @param {(string|RegExp)} pattern
- * @param {string} replacement
+ * @param {number} type
  * @return {string}
  */
-function replace (value, pattern, replacement) {
-	return value.replace(pattern, replacement)
+function delimit (type) {
+	return trim$1(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
 }
 
 /**
- * @param {string} value
- * @param {string} search
- * @return {number}
+ * @param {number} type
+ * @return {string}
  */
-function indexof (value, search) {
-	return value.indexOf(search)
-}
-
-/**
- * @param {string} value
- * @param {number} index
- * @return {number}
- */
-function charat (value, index) {
-	return value.charCodeAt(index) | 0
-}
-
-/**
- * @param {string} value
- * @param {number} begin
- * @param {number} end
- * @return {string}
- */
-function substr (value, begin, end) {
-	return value.slice(begin, end)
-}
-
-/**
- * @param {string} value
- * @return {number}
- */
-function strlen (value) {
-	return value.length
-}
-
-/**
- * @param {any[]} value
- * @return {number}
- */
-function sizeof (value) {
-	return value.length
-}
-
-/**
- * @param {any} value
- * @param {any[]} array
- * @return {any}
- */
-function append (value, array) {
-	return array.push(value), value
-}
-
-/**
- * @param {string[]} array
- * @param {function} callback
- * @return {string}
- */
-function combine (array, callback) {
-	return array.map(callback).join('')
-}
-
-var line = 1;
-var column = 1;
-var length = 0;
-var position = 0;
-var character = 0;
-var characters = '';
-
-/**
- * @param {string} value
- * @param {object | null} root
- * @param {object | null} parent
- * @param {string} type
- * @param {string[] | string} props
- * @param {object[] | string} children
- * @param {number} length
- */
-function node (value, root, parent, type, props, children, length) {
-	return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
-}
-
-/**
- * @param {object} root
- * @param {object} props
- * @return {object}
- */
-function copy (root, props) {
-	return assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
-}
-
-/**
- * @return {number}
- */
-function char () {
-	return character
-}
-
-/**
- * @return {number}
- */
-function prev () {
-	character = position > 0 ? charat(characters, --position) : 0;
-
-	if (column--, character === 10)
-		column = 1, line--;
-
-	return character
-}
-
-/**
- * @return {number}
- */
-function next () {
-	character = position < length ? charat(characters, position++) : 0;
-
-	if (column++, character === 10)
-		column = 1, line++;
-
-	return character
-}
-
-/**
- * @return {number}
- */
-function peek () {
-	return charat(characters, position)
-}
-
-/**
- * @return {number}
- */
-function caret () {
-	return position
-}
-
-/**
- * @param {number} begin
- * @param {number} end
- * @return {string}
- */
-function slice (begin, end) {
-	return substr(characters, begin, end)
-}
-
-/**
- * @param {number} type
- * @return {number}
- */
-function token (type) {
-	switch (type) {
-		// \0 \t \n \r \s whitespace token
-		case 0: case 9: case 10: case 13: case 32:
-			return 5
-		// ! + , / > @ ~ isolate token
-		case 33: case 43: case 44: case 47: case 62: case 64: case 126:
-		// ; { } breakpoint token
-		case 59: case 123: case 125:
-			return 4
-		// : accompanied token
-		case 58:
-			return 3
-		// " ' ( [ opening delimit token
-		case 34: case 39: case 40: case 91:
-			return 2
-		// ) ] closing delimit token
-		case 41: case 93:
-			return 1
-	}
-
-	return 0
-}
-
-/**
- * @param {string} value
- * @return {any[]}
- */
-function alloc (value) {
-	return line = column = 1, length = strlen(characters = value), position = 0, []
-}
-
-/**
- * @param {any} value
- * @return {any}
- */
-function dealloc (value) {
-	return characters = '', value
-}
-
-/**
- * @param {number} type
- * @return {string}
- */
-function delimit (type) {
-	return trim$1(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
-}
-
-/**
- * @param {number} type
- * @return {string}
- */
-function whitespace (type) {
-	while (character = peek())
-		if (character < 33)
-			next();
-		else
-			break
-
-	return token(type) > 2 || token(character) > 3 ? '' : ' '
+function whitespace (type) {
+	while (character = peek())
+		if (character < 33)
+			next();
+		else
+			break
+
+	return token(type) > 2 || token(character) > 3 ? '' : ' '
 }
 
 /**
@@ -5642,80 +5149,593 @@ var reactJsxRuntime_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var f=React__default,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
-function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+var f=React__default,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+
+{
+  jsxRuntime.exports = reactJsxRuntime_production_min;
+}
+
+var jsxRuntimeExports = jsxRuntime.exports;
+
+let cache$1;
+if (typeof document === 'object') {
+  cache$1 = createCache({
+    key: 'css',
+    prepend: true
+  });
+}
+function StyledEngineProvider(props) {
+  const {
+    injectFirst,
+    children
+  } = props;
+  return injectFirst && cache$1 ? /*#__PURE__*/jsxRuntimeExports.jsx(CacheProvider, {
+    value: cache$1,
+    children: children
+  }) : children;
+}
+
+/**
+ * @mui/styled-engine v5.15.4
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function styled$1(tag, options) {
+  const stylesFactory = styled$2(tag, options);
+  return stylesFactory;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const internal_processStyles = (tag, processor) => {
+  // Emotion attaches all the styles as `__emotion_styles`.
+  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
+  if (Array.isArray(tag.__emotion_styles)) {
+    tag.__emotion_styles = processor(tag.__emotion_styles);
+  }
+};
+
+function _extends$3() {
+  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$3.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$2.apply(this, arguments);
+}
+
+// https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
+function isPlainObject(item) {
+  if (typeof item !== 'object' || item === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(item);
+  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
+}
+function deepClone(source) {
+  if (!isPlainObject(source)) {
+    return source;
+  }
+  const output = {};
+  Object.keys(source).forEach(key => {
+    output[key] = deepClone(source[key]);
+  });
+  return output;
+}
+function deepmerge(target, source, options = {
+  clone: true
+}) {
+  const output = options.clone ? _extends$2({}, target) : target;
+  if (isPlainObject(target) && isPlainObject(source)) {
+    Object.keys(source).forEach(key => {
+      // Avoid prototype pollution
+      if (key === '__proto__') {
+        return;
+      }
+      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
+        output[key] = deepmerge(target[key], source[key], options);
+      } else if (options.clone) {
+        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
+      } else {
+        output[key] = source[key];
+      }
+    });
+  }
+  return output;
+}
+
+// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
+//
+// A strict capitalization should uppercase the first letter of each word in the sentence.
+// We only handle the first word.
+function capitalize(string) {
+  if (typeof string !== 'string') {
+    throw new Error(formatMuiErrorMessage(7));
+  }
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+/**
+ * Safe chained function.
+ *
+ * Will only create a new function if needed,
+ * otherwise will pass back existing functions or null.
+ */
+function createChainedFunction(...funcs) {
+  return funcs.reduce((acc, func) => {
+    if (func == null) {
+      return acc;
+    }
+    return function chainedFunction(...args) {
+      acc.apply(this, args);
+      func.apply(this, args);
+    };
+  }, () => {});
+}
+
+// Corresponds to 10 frames at 60 Hz.
+// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
+function debounce(func, wait = 166) {
+  let timeout;
+  function debounced(...args) {
+    const later = () => {
+      // @ts-ignore
+      func.apply(this, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  }
+  debounced.clear = () => {
+    clearTimeout(timeout);
+  };
+  return debounced;
+}
+
+function deprecatedPropType(validator, reason) {
+  {
+    return () => null;
+  }
+}
+
+function isMuiElement(element, muiNames) {
+  var _muiName, _element$type;
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+  // eslint-disable-next-line no-underscore-dangle
+  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
+}
+
+function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}
+
+function ownerWindow(node) {
+  const doc = ownerDocument(node);
+  return doc.defaultView || window;
+}
+
+function requirePropFactory(componentNameInError, Component) {
+  {
+    return () => null;
+  }
+}
+
+/**
+ * TODO v5: consider making it private
+ *
+ * passes {value} to {ref}
+ *
+ * WARNING: Be sure to only call this inside a callback that is passed as a ref.
+ * Otherwise, make sure to cleanup the previous {ref} if it changes. See
+ * https://github.com/mui/material-ui/issues/13539
+ *
+ * Useful if you want to expose the ref of an inner component to the public API
+ * while still using it inside the component.
+ * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
+ */
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useEnhancedEffect$1 = useEnhancedEffect;
+
+let globalId = 0;
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.useEffect(() => {
+    if (defaultId == null) {
+      // Fallback to this default id when possible.
+      // Use the incrementing value for client-side rendering only.
+      // We can't use it server-side.
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
+
+// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseId = React['useId'.toString()];
+/**
+ *
+ * @example <div id={useId()} />
+ * @param idOverride
+ * @returns {string}
+ */
+function useId(idOverride) {
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
+    return idOverride != null ? idOverride : reactId;
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+  return useGlobalId(idOverride);
+}
+
+function unsupportedProp(props, propName, componentName, location, propFullName) {
+  {
+    return null;
+  }
+}
+
+function useControlled({
+  controlled,
+  default: defaultProp,
+  name,
+  state = 'value'
+}) {
+  // isControlled is ignored in the hook dependency lists as it should never change.
+  const {
+    current: isControlled
+  } = React.useRef(controlled !== undefined);
+  const [valueState, setValue] = React.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  const setValueIfUncontrolled = React.useCallback(newValue => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}
+
+/**
+ * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * See RFC in https://github.com/reactjs/rfcs/pull/220
+ */
+
+function useEventCallback(fn) {
+  const ref = React.useRef(fn);
+  useEnhancedEffect$1(() => {
+    ref.current = fn;
+  });
+  return React.useRef((...args) =>
+  // @ts-expect-error hide `this`
+  (0, ref.current)(...args)).current;
+}
+
+function useForkRef(...refs) {
+  /**
+   * This will create a new function if the refs passed to this hook change and are all defined.
+   * This means react will call the old forkRef with `null` and the new forkRef
+   * with the ref. Cleanup naturally emerges from this behavior.
+   */
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
+    return instance => {
+      refs.forEach(ref => {
+        setRef(ref, instance);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}
+
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+let hadFocusVisibleRecentlyTimeout;
+const inputTypesWhitelist = {
+  text: true,
+  search: true,
+  url: true,
+  tel: true,
+  email: true,
+  password: true,
+  number: true,
+  date: true,
+  month: true,
+  week: true,
+  time: true,
+  datetime: true,
+  'datetime-local': true
+};
+
+/**
+ * Computes whether the given element should automatically trigger the
+ * `focus-visible` class being added, i.e. whether it should always match
+ * `:focus-visible` when focused.
+ * @param {Element} node
+ * @returns {boolean}
+ */
+function focusTriggersKeyboardModality(node) {
+  const {
+    type,
+    tagName
+  } = node;
+  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
+    return true;
+  }
+  if (tagName === 'TEXTAREA' && !node.readOnly) {
+    return true;
+  }
+  if (node.isContentEditable) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Keep track of our keyboard modality state with `hadKeyboardEvent`.
+ * If the most recent user interaction was via the keyboard;
+ * and the key press did not include a meta, alt/option, or control key;
+ * then the modality is keyboard. Otherwise, the modality is not keyboard.
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  hadKeyboardEvent = true;
+}
+
+/**
+ * If at any point a user clicks with a pointing device, ensure that we change
+ * the modality away from keyboard.
+ * This avoids the situation where a user presses a key on an already focused
+ * element, and then clicks on a different element, focusing it with a
+ * pointing device, while we still think we're in keyboard modality.
+ */
+function handlePointerDown() {
+  hadKeyboardEvent = false;
+}
+function handleVisibilityChange() {
+  if (this.visibilityState === 'hidden') {
+    // If the tab becomes active again, the browser will handle calling focus
+    // on the element (Safari actually calls it twice).
+    // If this tab change caused a blur on an element with focus-visible,
+    // re-apply the class when the user switches back to the tab.
+    if (hadFocusVisibleRecently) {
+      hadKeyboardEvent = true;
+    }
+  }
+}
+function prepare(doc) {
+  doc.addEventListener('keydown', handleKeyDown, true);
+  doc.addEventListener('mousedown', handlePointerDown, true);
+  doc.addEventListener('pointerdown', handlePointerDown, true);
+  doc.addEventListener('touchstart', handlePointerDown, true);
+  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function isFocusVisible(event) {
+  const {
+    target
+  } = event;
+  try {
+    return target.matches(':focus-visible');
+  } catch (error) {
+    // Browsers not implementing :focus-visible will throw a SyntaxError.
+    // We use our own heuristic for those browsers.
+    // Rethrow might be better if it's not the expected error but do we really
+    // want to crash if focus-visible malfunctioned?
+  }
 
-{
-  jsxRuntime.exports = reactJsxRuntime_production_min;
+  // No need for validFocusTarget check. The user does that by attaching it to
+  // focusable events only.
+  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
 }
+function useIsFocusVisible() {
+  const ref = React.useCallback(node => {
+    if (node != null) {
+      prepare(node.ownerDocument);
+    }
+  }, []);
+  const isFocusVisibleRef = React.useRef(false);
 
-var jsxRuntimeExports = jsxRuntime.exports;
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleBlurVisible() {
+    // checking against potential state variable does not suffice if we focus and blur synchronously.
+    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
+    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
+    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
+    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
+    if (isFocusVisibleRef.current) {
+      // To detect a tab/window switch, we look for a blur event followed
+      // rapidly by a visibility change.
+      // If we don't see a visibility change within 100ms, it's probably a
+      // regular focus change.
+      hadFocusVisibleRecently = true;
+      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
+        hadFocusVisibleRecently = false;
+      }, 100);
+      isFocusVisibleRef.current = false;
+      return true;
+    }
+    return false;
+  }
 
-let cache$1;
-if (typeof document === 'object') {
-  cache$1 = createCache({
-    key: 'css',
-    prepend: true
-  });
-}
-function StyledEngineProvider(props) {
-  const {
-    injectFirst,
-    children
-  } = props;
-  return injectFirst && cache$1 ? /*#__PURE__*/jsxRuntimeExports.jsx(CacheProvider, {
-    value: cache$1,
-    children: children
-  }) : children;
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleFocusVisible(event) {
+    if (isFocusVisible(event)) {
+      isFocusVisibleRef.current = true;
+      return true;
+    }
+    return false;
+  }
+  return {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref
+  };
 }
 
 /**
- * @mui/styled-engine v5.14.18
- *
- * @license MIT
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
+ * Add keys, values of `defaultProps` that does not exist in `props`
+ * @param {object} defaultProps
+ * @param {object} props
+ * @returns {object} resolved props
  */
-function styled$2(tag, options) {
-  const stylesFactory = styled$3(tag, options);
-  return stylesFactory;
+function resolveProps(defaultProps, props) {
+  const output = _extends$2({}, props);
+  Object.keys(defaultProps).forEach(propName => {
+    if (propName.toString().match(/^(components|slots)$/)) {
+      output[propName] = _extends$2({}, defaultProps[propName], output[propName]);
+    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
+      const defaultSlotProps = defaultProps[propName] || {};
+      const slotProps = props[propName];
+      output[propName] = {};
+      if (!slotProps || !Object.keys(slotProps)) {
+        // Reduce the iteration if the slot props is empty
+        output[propName] = defaultSlotProps;
+      } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
+        // Reduce the iteration if the default slot props is empty
+        output[propName] = slotProps;
+      } else {
+        output[propName] = _extends$2({}, slotProps);
+        Object.keys(defaultSlotProps).forEach(slotPropName => {
+          output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
+        });
+      }
+    } else if (output[propName] === undefined) {
+      output[propName] = defaultProps[propName];
+    }
+  });
+  return output;
 }
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const internal_processStyles = (tag, processor) => {
-  // Emotion attaches all the styles as `__emotion_styles`.
-  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
-  if (Array.isArray(tag.__emotion_styles)) {
-    tag.__emotion_styles = processor(tag.__emotion_styles);
-  }
-};
-
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+function composeClasses(slots, getUtilityClass, classes = undefined) {
+  const output = {};
+  Object.keys(slots).forEach(
+  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
+  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
+  slot => {
+    output[slot] = slots[slot].reduce((acc, key) => {
+      if (key) {
+        const utilityClass = getUtilityClass(key);
+        if (utilityClass !== '') {
+          acc.push(utilityClass);
+        }
+        if (classes && classes[key]) {
+          acc.push(classes[key]);
         }
       }
+      return acc;
+    }, []).join(' ');
+  });
+  return output;
+}
+
+const defaultGenerator = componentName => componentName;
+const createClassNameGenerator = () => {
+  let generate = defaultGenerator;
+  return {
+    configure(generator) {
+      generate = generator;
+    },
+    generate(componentName) {
+      return generate(componentName);
+    },
+    reset() {
+      generate = defaultGenerator;
     }
-    return target;
   };
-  return _extends$2.apply(this, arguments);
+};
+const ClassNameGenerator = createClassNameGenerator();
+
+// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
+// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
+
+const globalStateClassesMapping = {
+  active: 'active',
+  checked: 'checked',
+  completed: 'completed',
+  disabled: 'disabled',
+  error: 'error',
+  expanded: 'expanded',
+  focused: 'focused',
+  focusVisible: 'focusVisible',
+  open: 'open',
+  readOnly: 'readOnly',
+  required: 'required',
+  selected: 'selected'
+};
+function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
+  const globalStateClass = globalStateClassesMapping[slot];
+  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
+function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
+  const result = {};
+  slots.forEach(slot => {
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+  });
+  return result;
 }
 
 const _excluded$g = ["values", "unit", "step"];
@@ -5727,7 +5747,7 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends$2({}, acc, {
+    return _extends$3({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
@@ -5749,7 +5769,6 @@ function createBreakpoints(breakpoints) {
         // desktop
         xl: 1536 // large screen
       },
-
       unit = 'px',
       step = 5
     } = breakpoints,
@@ -5785,7 +5804,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends$2({
+  return _extends$3({
     keys,
     values: sortedValues,
     up,
@@ -5824,7 +5843,6 @@ const values = {
   // desktop
   xl: 1536 // large screen
 };
-
 const defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
@@ -6071,8 +6089,6 @@ padding.filterProps = paddingKeys;
 
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.
-/* tslint:disable:unified-signatures */
-/* tslint:enable:unified-signatures */
 
 function createSpacing(spacingInput = 8) {
   // Already transformed.
@@ -6126,51 +6142,25 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = style$1({
-  prop: 'border',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderTop = style$1({
-  prop: 'borderTop',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderRight = style$1({
-  prop: 'borderRight',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderBottom = style$1({
-  prop: 'borderBottom',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderLeft = style$1({
-  prop: 'borderLeft',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderColor = style$1({
-  prop: 'borderColor',
-  themeKey: 'palette'
-});
-const borderTopColor = style$1({
-  prop: 'borderTopColor',
-  themeKey: 'palette'
-});
-const borderRightColor = style$1({
-  prop: 'borderRightColor',
-  themeKey: 'palette'
-});
-const borderBottomColor = style$1({
-  prop: 'borderBottomColor',
-  themeKey: 'palette'
-});
-const borderLeftColor = style$1({
-  prop: 'borderLeftColor',
-  themeKey: 'palette'
-});
+function createBorderStyle(prop, transform) {
+  return style$1({
+    prop,
+    themeKey: 'borders',
+    transform
+  });
+}
+const border = createBorderStyle('border', borderTransform);
+const borderTop = createBorderStyle('borderTop', borderTransform);
+const borderRight = createBorderStyle('borderRight', borderTransform);
+const borderBottom = createBorderStyle('borderBottom', borderTransform);
+const borderLeft = createBorderStyle('borderLeft', borderTransform);
+const borderColor = createBorderStyle('borderColor');
+const borderTopColor = createBorderStyle('borderTopColor');
+const borderRightColor = createBorderStyle('borderRightColor');
+const borderBottomColor = createBorderStyle('borderBottomColor');
+const borderLeftColor = createBorderStyle('borderLeftColor');
+const outline = createBorderStyle('outline', borderTransform);
+const outlineColor = createBorderStyle('outlineColor');
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
@@ -6186,7 +6176,7 @@ const borderRadius$1 = props => {
 };
 borderRadius$1.propTypes = {};
 borderRadius$1.filterProps = ['borderRadius'];
-compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$1);
+compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$1, outline, outlineColor);
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
@@ -6384,6 +6374,13 @@ const defaultSxConfig = {
   borderLeftColor: {
     themeKey: 'palette'
   },
+  outline: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  outlineColor: {
+    themeKey: 'palette'
+  },
   borderRadius: {
     themeKey: 'shape.borderRadius',
     style: borderRadius$1
@@ -6693,7 +6690,6 @@ function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-
     const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig$1;
 
     /*
@@ -6749,7 +6745,6 @@ function unstable_createStyleFunctionSx() {
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var styleFunctionSx$1 = styleFunctionSx;
 
 const _excluded$f = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
@@ -6767,16 +6762,16 @@ function createTheme$1(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends$2({
+    palette: _extends$3({
       mode: 'light'
     }, paletteInput),
     spacing,
-    shape: _extends$2({}, shape$1, shapeInput)
+    shape: _extends$3({}, shape$1, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends$2({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx$1({
+    return styleFunctionSx({
       sx: props,
       theme: this
     });
@@ -6797,7 +6792,7 @@ function useTheme$3(defaultTheme = systemDefaultTheme$1) {
   return useTheme$4(defaultTheme);
 }
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const _excluded$e = ["variant"];
 function isEmpty$2(string) {
@@ -6845,10 +6840,17 @@ const getStyleOverrides = (name, theme) => {
   return null;
 };
 const transformVariants = variants => {
+  let numOfCallbacks = 0;
   const variantsStyles = {};
   if (variants) {
     variants.forEach(definition => {
-      const key = propsToClassKey(definition.props);
+      let key = '';
+      if (typeof definition.props === 'function') {
+        key = `callback${numOfCallbacks}`;
+        numOfCallbacks += 1;
+      } else {
+        key = propsToClassKey(definition.props);
+      }
       variantsStyles[key] = definition.style;
     });
   }
@@ -6866,16 +6868,29 @@ const variantsResolver = (props, styles, variants) => {
     ownerState = {}
   } = props;
   const variantsStyles = [];
+  let numOfCallbacks = 0;
   if (variants) {
     variants.forEach(variant => {
       let isMatch = true;
-      Object.keys(variant.props).forEach(key => {
-        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-          isMatch = false;
-        }
-      });
+      if (typeof variant.props === 'function') {
+        const propsToCheck = _extends$3({}, props, ownerState);
+        isMatch = variant.props(propsToCheck);
+      } else {
+        Object.keys(variant.props).forEach(key => {
+          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
+            isMatch = false;
+          }
+        });
+      }
       if (isMatch) {
-        variantsStyles.push(styles[propsToClassKey(variant.props)]);
+        if (typeof variant.props === 'function') {
+          variantsStyles.push(styles[`callback${numOfCallbacks}`]);
+        } else {
+          variantsStyles.push(styles[propsToClassKey(variant.props)]);
+        }
+      }
+      if (typeof variant.props === 'function') {
+        numOfCallbacks += 1;
       }
     });
   }
@@ -6917,8 +6932,8 @@ const muiStyledFunctionResolver = ({
   defaultTheme,
   themeId
 }) => {
-  const resolvedStyles = styledArg(_extends$2({}, props, {
-    theme: resolveTheme(_extends$2({}, props, {
+  const resolvedStyles = styledArg(_extends$3({}, props, {
+    theme: resolveTheme(_extends$3({}, props, {
       defaultTheme,
       themeId
     }))
@@ -6942,8 +6957,8 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx$1(_extends$2({}, props, {
-      theme: resolveTheme(_extends$2({}, props, {
+    return styleFunctionSx(_extends$3({}, props, {
+      theme: resolveTheme(_extends$3({}, props, {
         defaultTheme,
         themeId
       }))
@@ -6984,7 +6999,7 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$2(tag, _extends$2({
+    const defaultStyledResolver = styled$1(tag, _extends$3({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
@@ -7050,7 +7065,7 @@ function createStyled(input = {}) {
       }
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme(_extends$3({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7058,7 +7073,7 @@ function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$2({}, props, {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$3({}, props, {
                 theme
               })) : slotStyle;
             });
@@ -7069,7 +7084,7 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme(_extends$3({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7271,7 +7286,6 @@ function getLuminance(color) {
     if (color.type !== 'color') {
       val /= 255; // normalized
     }
-
     return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
   });
 
@@ -7399,7 +7413,7 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? _extends$2({}, upperTheme, {
+      const result = themeId ? _extends$3({}, upperTheme, {
         [themeId]: mergedTheme
       }) : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
@@ -7409,9 +7423,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? _extends$2({}, upperTheme, {
+    return themeId ? _extends$3({}, upperTheme, {
       [themeId]: localTheme
-    }) : _extends$2({}, upperTheme, localTheme);
+    }) : _extends$3({}, upperTheme, localTheme);
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 
@@ -7453,7 +7467,7 @@ function adaptV4Theme(inputTheme) {
       styleOverrides = {}
     } = inputTheme,
     other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$c);
-  const theme = _extends$3({}, other, {
+  const theme = _extends$4({}, other, {
     components: {}
   });
 
@@ -7487,13 +7501,13 @@ function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = _extends$3({
+  theme.mixins = _extends$4({
     gutters: (styles = {}) => {
-      return _extends$3({
+      return _extends$4({
         paddingLeft: spacing(2),
         paddingRight: spacing(2)
       }, styles, {
-        [breakpoints.up('sm')]: _extends$3({
+        [breakpoints.up('sm')]: _extends$4({
           paddingLeft: spacing(3),
           paddingRight: spacing(3)
         }, styles[breakpoints.up('sm')])
@@ -7506,7 +7520,7 @@ function adaptV4Theme(inputTheme) {
     } = palette,
     paletteRest = _objectWithoutPropertiesLoose$1(palette, _excluded2$1);
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = _extends$3({
+  theme.palette = _extends$4({
     // theme.palette.text.hint
     text: {
       hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
@@ -7518,7 +7532,7 @@ function adaptV4Theme(inputTheme) {
 }
 
 function createMixins(breakpoints, mixins) {
-  return _extends$3({
+  return _extends$4({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -7856,7 +7870,7 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends$3({}, color);
+    color = _extends$4({}, color);
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -7877,9 +7891,9 @@ function createPalette(palette) {
     dark: dark$1,
     light: light$1
   };
-  const paletteOutput = deepmerge(_extends$3({
+  const paletteOutput = deepmerge(_extends$4({
     // A collection of common colors.
-    common: _extends$3({}, common$1),
+    common: _extends$4({}, common$1),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -7967,7 +7981,7 @@ function createTypography(palette, typography) {
     other = _objectWithoutPropertiesLoose$1(_ref, _excluded$a);
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$3({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$4({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
@@ -7999,7 +8013,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends$3({
+  return deepmerge(_extends$4({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -8022,7 +8036,6 @@ function createShadow(...px) {
 
 // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
-var shadows$1 = shadows;
 
 const _excluded$9 = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
@@ -8067,8 +8080,8 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = _extends$3({}, easing, inputTransitions.easing);
-  const mergedDuration = _extends$3({}, duration, inputTransitions.duration);
+  const mergedEasing = _extends$4({}, easing, inputTransitions.easing);
+  const mergedDuration = _extends$4({}, duration, inputTransitions.duration);
   const create = (props = ['all'], options = {}) => {
     const {
         duration: durationOption = mergedDuration.standard,
@@ -8078,7 +8091,7 @@ function createTransitions(inputTransitions) {
       _objectWithoutPropertiesLoose$1(options, _excluded$9);
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-  return _extends$3({
+  return _extends$4({
     getAutoHeightDuration,
     create
   }, inputTransitions, {
@@ -8119,16 +8132,16 @@ function createTheme(options = {}, ...args) {
     mixins: createMixins(systemTheme.breakpoints, mixinsInput),
     palette,
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
-    shadows: shadows$1.slice(),
+    shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends$3({}, zIndex$1)
+    zIndex: _extends$4({}, zIndex$1)
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends$4({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx$1({
+    return styleFunctionSx({
       sx: props,
       theme: this
     });
@@ -8162,7 +8175,6 @@ const styled = createStyled({
   defaultTheme: defaultTheme$1,
   rootShouldForwardProp
 });
-var styled$1 = styled;
 
 const _excluded$7 = ["theme"];
 function ThemeProvider(_ref) {
@@ -8171,7 +8183,7 @@ function ThemeProvider(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose$1(_ref, _excluded$7);
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$3({}, props, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$4({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
   }));
@@ -8268,6 +8280,7 @@ const colors = {
   grey90: '#E6E6E6',
   grey85: '#D9D9D9',
   grey55: '#8C8C8C',
+  grey45: '#737373',
   grey30: '#4D4D4D',
   grey25: '#404040',
   grey20: '#333333',
@@ -8322,7 +8335,9 @@ const light = {
     custom: {
       focusBorder: colors.blue,
       focusOutline: 'rgba(70, 157, 205, 0.3)',
-      inputBackground: 'rgba(255, 255, 255, 1)'
+      inputBackground: 'rgba(255, 255, 255, 1)',
+      disabledBackground: colors.grey45,
+      disabledContrastText: colors.grey100
     },
     selected: {
       main: colors.green,
@@ -8390,7 +8405,9 @@ const dark = {
     custom: {
       focusBorder: colors.blue,
       focusOutline: 'rgba(70, 157, 205, 0.3)',
-      inputBackground: 'rgba(0, 0, 0, 0.2)'
+      inputBackground: 'rgba(0, 0, 0, 0.2)',
+      disabledBackground: colors.grey45,
+      disabledContrastText: colors.grey100
     },
     selected: {
       main: colors.green,
@@ -8551,8 +8568,8 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "8934" ;
-ClassNameGenerator$1.configure(componentName => {
+const NEBULA_VERSION_HASH = "c1b9" ;
+ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
 
@@ -8667,7 +8684,6 @@ function createAppSelections(_ref) {
         }
       }
     };
-
     await beginSelections();
   };
   const appModal = {
@@ -8812,7 +8828,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.9.0" );
+  element.setAttribute('data-nebulajs-version', "4.10.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -8898,7 +8914,6 @@ const modelStoreMiddleware = _ref => {
     modelChangedStore.set(model.id, {});
     modelChangedStore.dispatch(true); // Force new state to trigger hooks
   };
-
   const unsubscribe = () => {
     model.removeListener('changed', onChanged);
     rpcResultStore.clear(model.id);
@@ -9183,7 +9198,7 @@ function getFontSize(size) {
   }
   return '16px';
 }
-function SvgIcon$2(_ref) {
+function SvgIcon$1(_ref) {
   let {
     size,
     style = {},
@@ -9233,7 +9248,7 @@ const remove = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Remove = (props => SvgIcon$2(remove(props)));
+var Remove = (props => SvgIcon$1(remove(props)));
 
 const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -9243,9 +9258,10 @@ const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Lock = (props => SvgIcon$2(lock(props)));
+var Lock = (props => SvgIcon$1(lock(props)));
 
 const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  viewBox: '0 0 12 16',
   shapes: [{
     type: 'path',
     attrs: {
@@ -9253,7 +9269,7 @@ const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Unlock = (props => SvgIcon$2(unlock(props)));
+var Unlock = (props => SvgIcon$1(unlock(props)));
 
 function isRangeVisible(_ref) {
   var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
@@ -9894,7 +9910,7 @@ const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Tick = (props => SvgIcon$2(tick(props)));
+var Tick = (props => SvgIcon$1(tick(props)));
 
 /**
  * @ignore
@@ -10058,7 +10074,6 @@ const getMaxFreqWidth = _ref2 => {
   if (frequencyMode === 'P') {
     return sizes.freqMinWidth; // because it will never grow beyond "100.0%"
   }
-
   return sizes.freqMaxWidth;
 };
 const getSelectedStyle = _ref3 => {
@@ -10098,7 +10113,7 @@ const ellipsis = {
 };
 const iconWidth = 24; // tick and lock icon width in px
 
-const RowColRoot = styled$1('div', {
+const RowColRoot = styled('div', {
   shouldForwardProp: prop => !['checkboxes', 'isGridMode', 'isGridCol', 'dense', 'direction', 'sizes', 'frequencyMode', 'freqHitsValue', 'layout', 'styles'].includes(prop)
 })(_ref4 => {
   let {
@@ -10306,7 +10321,7 @@ const classes$b = {
   checkbox: "".concat(PREFIX$b, "-checkbox"),
   dense: "".concat(PREFIX$b, "-dense")
 };
-const StyledCheckbox = styled$1(Checkbox, {
+const StyledCheckbox = styled(Checkbox, {
   shouldForwardProp: p => p !== 'styles'
 })(_ref => {
   let {
@@ -10403,7 +10418,7 @@ const classes$a = {
   denseRadioButton: "".concat(PREFIX$a, "-denseRadioButton"),
   radioButton: "".concat(PREFIX$a, "-radioButton")
 };
-const StyledRadio = styled$1(Radio)(_ref => {
+const StyledRadio = styled(Radio)(_ref => {
   let {
     theme,
     checked
@@ -10720,7 +10735,7 @@ function getGridItemSizes(_ref) {
   }
 }
 
-const ItemGrid = styled$1(Grid, {
+const ItemGrid = styled(Grid, {
   shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight', 'direction', 'fillHeight'].includes(prop)
 })(_ref => {
   let {
@@ -11065,7 +11080,6 @@ function getRowsKeyboardNavigation(_ref) {
         } else {
           return; // propagate to other Esc handler
         }
-
         break;
       case KEYS.HOME:
         focusListItems.setFirst(true);
@@ -11099,7 +11113,6 @@ function getRowsKeyboardNavigation(_ref) {
         return;
       // don't stop propagation since we want to outsource keydown to other handlers.
     }
-
     if (elementToFocus) {
       elementToFocus.focus();
     }
@@ -11265,7 +11278,6 @@ function RowColumn(_ref) {
   if (!cell) {
     return null; // prevent rendering empty rows
   }
-
   const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
   const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
   // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
@@ -11287,12 +11299,13 @@ function RowColumn(_ref) {
     flexGrow: 1,
     paddingLeft: isRtl ? 8 : checkboxes ? 0 : undefined,
     paddingRight: checkboxes ? 0 : isRtl ? 8 : 0,
-    justifyContent: valueTextAlign
+    justifyContent: valueTextAlign,
+    textAlign: valueTextAlign
   };
   const isFirstElement = index === 0;
-  const showLock = isSelected && isLocked;
-  const showTick = !checkboxes && isSelected && !isLocked;
-  const showIcon = !checkboxes && sizePermitsTickOrLock;
+  const showLockIcon = isSelected && isLocked;
+  const showTickIcon = !checkboxes && isSelected && !isLocked;
+  const showAnyIcon = !checkboxes && sizePermitsTickOrLock;
   const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
   const ariaLabel = getValueLabel({
     translator,
@@ -11388,13 +11401,13 @@ function RowColumn(_ref) {
     checkboxes: checkboxes,
     dense: dense,
     showGray: showGray
-  }), showIcon && /*#__PURE__*/React__default.createElement(Grid, {
+  }), showAnyIcon && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: rowColClasses.icon
-  }, showLock && /*#__PURE__*/React__default.createElement(Lock, {
+  }, showLockIcon && /*#__PURE__*/React__default.createElement(Lock, {
     style: iconStyles,
     size: "small"
-  }), showTick && /*#__PURE__*/React__default.createElement(Tick, {
+  }), showTickIcon && /*#__PURE__*/React__default.createElement(Tick, {
     style: iconStyles,
     size: "small"
   }))));
@@ -12864,7 +12877,7 @@ function getStyledComponents() {
       backgroundColor: scrollBarThumbHover
     }
   });
-  const StyledFixedSizeList = styled$3(FixedSizeList, {
+  const StyledFixedSizeList = styled$2(FixedSizeList, {
     shouldForwardProp: prop => prop !== 'scrollDisabled'
   })(_ref => {
     let {
@@ -12874,7 +12887,7 @@ function getStyledComponents() {
       ["&.".concat(classes$9.styledScrollbars)]: getScrollbarStyling(scrollDisabled)
     };
   });
-  const StyledFixedSizeGrid = styled$3(FixedSizeGrid, {
+  const StyledFixedSizeGrid = styled$2(FixedSizeGrid, {
     shouldForwardProp: prop => prop !== 'scrollDisabled'
   })(_ref2 => {
     let {
@@ -13491,7 +13504,7 @@ function useDataStore(model) {
   };
 }
 
-const StyledText = styled$1(Typography, {
+const StyledText = styled(Typography, {
   shouldForwardProp: p => !['width', 'dense'].includes(p)
 })(_ref => {
   let {
@@ -13564,7 +13577,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSvgIconUtilityClass, classes);
 };
-const SvgIconRoot = styled$1('svg', {
+const SvgIconRoot = styled('svg', {
   name: 'MuiSvgIcon',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -13622,7 +13635,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
   const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
-  const ownerState = _extends$3({}, props, {
+  const ownerState = _extends$4({}, props, {
     color,
     component,
     fontSize,
@@ -13636,7 +13649,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     more.viewBox = viewBox;
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$3({
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$4({
     as: component,
     className: clsx(classes.root, className),
     focusable: "false",
@@ -13652,18 +13665,17 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   }));
 });
 SvgIcon.muiName = 'SvgIcon';
-var SvgIcon$1 = SvgIcon;
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, _extends$3({
+    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon, _extends$4({
       "data-testid": `${displayName}Icon`,
       ref: ref
     }, props, {
       children: path
     }));
   }
-  Component.muiName = SvgIcon$1.muiName;
+  Component.muiName = SvgIcon.muiName;
   return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
 }
 
@@ -13671,7 +13683,7 @@ function createSvgIcon(path, displayName) {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const unstable_ClassNameGenerator = {
   configure: generator => {
-    ClassNameGenerator$1.configure(generator);
+    ClassNameGenerator.configure(generator);
   }
 };
 
@@ -13728,12 +13740,11 @@ Object.defineProperty(Close, "__esModule", {
 var default_1 = Close.default = void 0;
 var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
 var _jsxRuntime = jsxRuntimeExports;
-var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+default_1 = Close.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), 'Close');
-default_1 = Close.default = _default;
 
-const RootContainer = styled$1(Paper)(_ref => {
+const RootContainer = styled(Paper)(_ref => {
   let {
     theme,
     left
@@ -13747,11 +13758,11 @@ const RootContainer = styled$1(Paper)(_ref => {
     left
   };
 });
-const LeftItem = styled$1('div')(() => ({
+const LeftItem = styled('div')(() => ({
   paddingLeft: '6px',
   flexGrow: 1
 }));
-const RightItem = styled$1('div')(_ref2 => {
+const RightItem = styled('div')(_ref2 => {
   let {
     dense
   } = _ref2;
@@ -13760,7 +13771,7 @@ const RightItem = styled$1('div')(_ref2 => {
     alignItems: "".concat(dense ? 'center' : 'flex-start')
   };
 });
-const SmallCloseIcon = styled$1(default_1)(() => ({
+const SmallCloseIcon = styled(default_1)(() => ({
   fontSize: '14px'
 }));
 function ListBoxFooter(_ref3) {
@@ -13909,7 +13920,7 @@ function deduceFrequencyMode(pages) {
 
 const _excluded$4 = ["isLoadingData"];
 const DEFAULT_MIN_BATCH_SIZE = 100;
-const StyledWrapper = styled$4('div')(() => ({
+const StyledWrapper = styled$3('div')(() => ({
   ["& .screenReaderOnly"]: {
     position: 'absolute',
     height: 0,
@@ -14158,7 +14169,6 @@ function ListBox(_ref) {
     if (s.scrollPosition === 'overflowEnd') {
       return; // Do keyScroll.reset() in fetchData() to avoid scrolling to top.
     }
-
     keyScroll.reset();
   }, [keyScroll.state.up, keyScroll.state.down, keyScroll.state.scrollPosition]);
   const {
@@ -14426,7 +14436,7 @@ const Item = React__default.forwardRef((_ref, ref) => {
     "aria-expanded": ariaExpanded,
     "aria-controls": "moreMenuList",
     "data-testid": btnId
-  }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
+  }, hasSvgIconShape && SvgIcon$1(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
       bottom: -spacing,
@@ -14455,11 +14465,12 @@ const clearSelections = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var ClearSelections = (props => SvgIcon$2(clearSelections(props)));
+var ClearSelections = (props => SvgIcon$1(clearSelections(props)));
 
 function useDefaultSelectionActions(_ref) {
   let {
     api,
+    layout,
     onConfirm = () => {},
     onCancel = () => {},
     onKeyDeactivate = () => {}
@@ -14471,14 +14482,14 @@ function useDefaultSelectionActions(_ref) {
     key: 'clear',
     type: 'icon-button',
     label: translator.get('Selection.Clear'),
-    enabled: () => api.canClear(),
+    enabled: () => api.canClear(layout),
     action: () => api.clear(),
     getSvgIconShape: clearSelections
   }, {
     key: 'cancel',
     type: 'icon-button',
     label: translator.get('Selection.Cancel'),
-    enabled: () => api.canCancel(),
+    enabled: () => api.canCancel(layout),
     action: () => {
       onCancel();
       api.cancel();
@@ -14493,7 +14504,7 @@ function useDefaultSelectionActions(_ref) {
     key: 'confirm',
     type: 'icon-button',
     label: translator.get('Selection.Confirm'),
-    enabled: () => api.canConfirm(),
+    enabled: () => api.canConfirm(layout),
     action: () => {
       onConfirm();
       api.confirm();
@@ -14514,7 +14525,7 @@ const ActionsToolbarMoreElement = {
 const classes$8 = {
   icon: "".concat(PREFIX$8, "-icon")
 };
-const StyledPopover$1 = styled$1(Popover)(_ref => {
+const StyledPopover$1 = styled(Popover)(_ref => {
   let {
     theme
   } = _ref;
@@ -14549,7 +14560,7 @@ function MoreItem(_ref2) {
     tabindex: "0"
   }, hasSvgIconShape && /*#__PURE__*/React__default.createElement(ListItemIcon, {
     className: classes$8.icon
-  }, SvgIcon$2(item.getSvgIconShape())), /*#__PURE__*/React__default.createElement(Typography, {
+  }, SvgIcon$1(item.getSvgIconShape())), /*#__PURE__*/React__default.createElement(Typography, {
     noWrap: true
   }, item.label)) : null;
 }
@@ -14598,7 +14609,7 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   }), /*#__PURE__*/React__default.createElement(MenuList, {
     id: "moreMenuList"
   }, actions.map((item, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(MoreItem, {
     key: ix,
@@ -14628,7 +14639,8 @@ function getActionsKeyDownHandler(_ref) {
     keyboardNavigation,
     focusHandler,
     getEnabledButton,
-    selections
+    selections,
+    isRtl
   } = _ref;
   const handleActionsKeyDown = evt => {
     const {
@@ -14647,7 +14659,8 @@ function getActionsKeyDownHandler(_ref) {
           const isActionButton = target.classList.contains('njs-cell-action');
           if (isActionButton) {
             const index = getActionButtonIndex(target);
-            const pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+            let pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+            pressedLeft = isRtl ? !pressedLeft : pressedLeft; // invert direction when using RTL
             focusButton(pressedLeft ? index - 1 : index + 1);
           }
           evt.stopPropagation();
@@ -14686,7 +14699,7 @@ const classes$7 = {
   item: "".concat(PREFIX$7, "-item"),
   itemSpacing: "".concat(PREFIX$7, "-itemSpacing")
 };
-const StyledPopover = styled$1(Popover)(_ref => {
+const StyledPopover = styled(Popover)(_ref => {
   let {
     theme
   } = _ref;
@@ -14752,6 +14765,7 @@ function ActionsToolbar(_ref3) {
       onConfirm: () => {},
       onCancel: () => {}
     },
+    extraItems,
     more: more$1 = {
       enabled: false,
       actions: [],
@@ -14766,10 +14780,13 @@ function ActionsToolbar(_ref3) {
     focusHandler = null,
     actionsRefMock = null,
     // for testing
-    direction = 'ltr',
-    autoConfirm = false
+    isRtl,
+    autoConfirm = false,
+    layout
   } = _ref3;
-  const defaultSelectionActions = useDefaultSelectionActions(selections);
+  const defaultSelectionActions = useDefaultSelectionActions(_objectSpread2(_objectSpread2({}, selections), {}, {
+    layout
+  }));
   const {
     translator,
     keyboardNavigation
@@ -14795,8 +14812,9 @@ function ActionsToolbar(_ref3) {
     keyboardNavigation,
     focusHandler,
     getEnabledButton,
-    selections
-  }), [keyboardNavigation, focusHandler, getEnabledButton, selections]);
+    selections,
+    isRtl
+  }), [keyboardNavigation, focusHandler, getEnabledButton, selections, isRtl]);
   useEffect$1(() => () => {
     setShowMoreItems(false);
   }, [popover.show, show, selections.show]);
@@ -14804,11 +14822,11 @@ function ActionsToolbar(_ref3) {
     if (!focusHandler) return;
     const focusFirst = () => {
       const enabledButton = getEnabledButton(false);
-      enabledButton && enabledButton.focus();
+      enabledButton === null || enabledButton === void 0 || enabledButton.focus();
     };
     const focusLast = () => {
       const enabledButton = getEnabledButton(true);
-      enabledButton && enabledButton.focus();
+      enabledButton === null || enabledButton === void 0 || enabledButton.focus();
     };
     focusHandler.on('focus_toolbar_first', focusFirst);
     focusHandler.on('focus_toolbar_last', focusLast);
@@ -14842,7 +14860,6 @@ function ActionsToolbar(_ref3) {
   const showActions = newActions.length > 0;
   const showMore = moreActions.length > 0;
   const showDivider = showActions && selections.show || showMore && selections.show;
-  const isRtl = direction === 'rtl';
   const Actions = /*#__PURE__*/React__default.createElement(Grid, {
     ref: actionsRef,
     onKeyDown: handleActionsKeyDown,
@@ -14854,7 +14871,11 @@ function ActionsToolbar(_ref3) {
     sx: {
       flexDirection: isRtl ? 'row-reverse' : 'row'
     }
-  }, showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+  }, (extraItems === null || extraItems === void 0 ? void 0 : extraItems.length) && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+    className: "actions-toolbar-extra-actions",
+    actions: extraItems,
+    isRtl: isRtl
+  }), showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     actions: newActions
   }), showMore && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     id: "actions-toolbar-show-more",
@@ -14913,11 +14934,11 @@ const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var SearchIcon = (props => SvgIcon$2(search(props)));
+var SearchIcon = (props => SvgIcon$1(search(props)));
 
 const TREE_PATH = '/qListObjectDef';
 const WILDCARD = '**';
-const StyledOutlinedInput = styled$1(OutlinedInput, {
+const StyledOutlinedInput = styled(OutlinedInput, {
   shouldForwardProp: p => !['styles', 'dense', 'isRtl'].includes(p)
 })(_ref => {
   let {
@@ -14943,6 +14964,7 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
     fontSize: 14,
     borderRadius: 0,
     backgroundColor: styles.search.backgroundColor,
+    backdropFilter: styles.background.backgroundImage ? styles.search.backdropFilter : undefined,
     paddingLeft: "".concat(CELL_PADDING_LEFT, "px"),
     flexDirection: isRtl ? 'row-reverse' : 'row',
     '& fieldset': {
@@ -14950,6 +14972,9 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
       borderWidth: '1px 0 1px 0',
       borderRadius: 0
     },
+    '&.Mui-focused fieldset': {
+      borderColor: "".concat(styles.search.highlightBorderColor, " !important")
+    },
     '& .MuiInputBase-root': _objectSpread2({}, styles.search),
     '& *': {
       color: styles.search.color
@@ -14957,9 +14982,6 @@ const StyledOutlinedInput = styled$1(OutlinedInput, {
     '& input': {
       color: styles.search.color,
       textAlign: isRtl ? 'right' : 'left'
-    },
-    '&.Mui-focused fieldset.OutlinedInput-notchedOutline': {
-      borderColor: "".concat(styles.search.highlightBorderColor, " !important")
     }
   }, denseProps);
 });
@@ -15055,7 +15077,7 @@ function ListBoxSearch(_ref2) {
   };
   function focusRow(container) {
     const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
-    row.setAttribute('tabIndex', 0);
+    row === null || row === void 0 || row.setAttribute('tabIndex', 0);
     row === null || row === void 0 || row.focus();
   }
   const onKeyDown = async e => {
@@ -16727,7 +16749,6 @@ class Color {
       this._lumi = 0.299 * this._r + 0.587 * this._g + 0.114 * this._b; // option 2
       // this._lumi = Math.sqrt( 0.241 * this._r * this._r + 0.691 * this._g * this._g + 0.068 * this._b * this._b ); // option 3
     }
-
     return this._lumi;
   }
 
@@ -17286,7 +17307,7 @@ function resolveBgImage(bgComp, app) {
 function resolveBgColor(comp, theme, objectType) {
   const bgColor = comp === null || comp === void 0 ? void 0 : comp.bgColor;
   if (bgColor && theme) {
-    if (bgColor.useExpression) {
+    if (bgColor.useExpression || bgColor.useColorExpression) {
       return theme.validateColor(bgColor.colorExpression);
     }
   }
@@ -17381,24 +17402,25 @@ function getOverridesAsObject() {
   return overrides;
 }
 function getSelectionColors(_ref) {
-  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _selectionColors$sele, _theme$palette2, _selectionColors$alte, _theme$palette3, _selectionColors$excl, _theme$palette4, _selectionColors$sele2, _theme$palette5, _selectionColors$poss, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
+  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _theme$palette2, _theme$palette3, _theme$palette4, _theme$palette5, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
   let {
+    getColorPickerColor,
     theme,
     getListboxStyle,
     overrides,
     checkboxes
   } = _ref;
-  const componentContentTextColor = (_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.fontColor) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.color;
-  const desiredTextColor = componentContentTextColor || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
+  const componentContentTextColor = (_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.fontColor;
+  const desiredTextColor = getColorPickerColor(componentContentTextColor) || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
   const useContrastTextColor = !checkboxes && ((_overrides$theme$cont = (_overrides$theme2 = overrides.theme) === null || _overrides$theme2 === void 0 || (_overrides$theme2 = _overrides$theme2.content) === null || _overrides$theme2 === void 0 ? void 0 : _overrides$theme2.useContrastColor) !== null && _overrides$theme$cont !== void 0 ? _overrides$theme$cont : true);
 
   // Background colors
   const selectionColors = ((_overrides$selections = overrides.selections) === null || _overrides$selections === void 0 ? void 0 : _overrides$selections.colors) || {};
-  const selected = ((_selectionColors$sele = selectionColors.selected) === null || _selectionColors$sele === void 0 ? void 0 : _selectionColors$sele.color) || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected.main) || '#009845';
-  const alternative = ((_selectionColors$alte = selectionColors.alternative) === null || _selectionColors$alte === void 0 ? void 0 : _selectionColors$alte.color) || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected.alternative) || '#E4E4E4';
-  const excluded = ((_selectionColors$excl = selectionColors.excluded) === null || _selectionColors$excl === void 0 ? void 0 : _selectionColors$excl.color) || ((_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.selected.excluded) || '#A9A9A9';
-  const selectedExcluded = ((_selectionColors$sele2 = selectionColors.selectedExcluded) === null || _selectionColors$sele2 === void 0 ? void 0 : _selectionColors$sele2.color) || ((_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.selected.selectedExcluded) || '#A9A9A9';
-  const possible = ((_selectionColors$poss = selectionColors.possible) === null || _selectionColors$poss === void 0 ? void 0 : _selectionColors$poss.color) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
+  const selected = getColorPickerColor(selectionColors.selected) || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected.main) || '#009845';
+  const alternative = getColorPickerColor(selectionColors.alternative) || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected.alternative) || '#E4E4E4';
+  const excluded = getColorPickerColor(selectionColors.excluded) || ((_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.selected.excluded) || '#A9A9A9';
+  const selectedExcluded = getColorPickerColor(selectionColors.selectedExcluded) || ((_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.selected.selectedExcluded) || '#A9A9A9';
+  const possible = getColorPickerColor(selectionColors.possible) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
 
   // Font colors
   let selectedContrast = desiredTextColor || ((_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.selected.selectedContrastText);
@@ -17442,8 +17464,7 @@ function getBackgroundColor(_ref2) {
       bgColor
     }, themeApi, 'listBox');
   } else {
-    var _themeApi$getColorPic;
-    color = (_themeApi$getColorPic = themeApi.getColorPickerColor(bgColor, true)) === null || _themeApi$getColorPic === void 0 ? void 0 : _themeApi$getColorPic.color;
+    color = themeApi.getColorPickerColor(bgColor === null || bgColor === void 0 ? void 0 : bgColor.color, false);
   }
   return color;
 }
@@ -17452,6 +17473,11 @@ function getSearchColor(getListboxStyle) {
   const color = getContrastingColor('#fff', desiredTextColor);
   return color;
 }
+function getSearchBGColor(bgCol, getListboxStyle) {
+  const searchBgColorObj = new Color(getListboxStyle('', 'backgroundColor'));
+  searchBgColorObj.setAlpha(0.7);
+  return searchBgColorObj.isInvalid() ? bgCol : searchBgColorObj.toRGBA();
+}
 function getStyles(_ref3) {
   var _themeOverrides$heade, _themeOverrides$backg, _themeOverrides$heade2, _themeOverrides$conte, _themeOverrides$heade3, _themeOverrides$heade4, _themeOverrides$conte2, _themeOverrides$conte3;
   let {
@@ -17463,14 +17489,16 @@ function getStyles(_ref3) {
   } = _ref3;
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
+  const getColorPickerColor = c => (c === null || c === void 0 ? void 0 : c.index) > 0 || c !== null && c !== void 0 && c.color ? themeApi.getColorPickerColor(c, false) : undefined;
   const selections = getSelectionColors({
+    getColorPickerColor,
     theme,
     getListboxStyle,
     overrides,
     checkboxes
   });
   const themeOverrides = overrides.theme || {};
-  const headerColor = ((_themeOverrides$heade = themeOverrides.header) === null || _themeOverrides$heade === void 0 || (_themeOverrides$heade = _themeOverrides$heade.fontColor) === null || _themeOverrides$heade === void 0 ? void 0 : _themeOverrides$heade.color) || getListboxStyle('title.main', 'color');
+  const headerColor = getColorPickerColor((_themeOverrides$heade = themeOverrides.header) === null || _themeOverrides$heade === void 0 ? void 0 : _themeOverrides$heade.fontColor) || getListboxStyle('title.main', 'color');
   const bgComponentColor = getBackgroundColor({
     themeApi,
     themeOverrides
@@ -17478,7 +17506,8 @@ function getStyles(_ref3) {
   const bgImage = (_themeOverrides$backg = themeOverrides.background) !== null && _themeOverrides$backg !== void 0 && _themeOverrides$backg.image ? resolveBgImage({
     bgImage: themeOverrides.background.image
   }, app) : undefined;
-  const searchBgColor = 'rgba(255, 255, 255, 0.7)';
+  const bgColor = bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default;
+  const searchBgColor = getSearchBGColor(bgColor, getListboxStyle);
   const searchColor = getSearchColor(getListboxStyle);
   const headerFontStyle = ((_themeOverrides$heade2 = themeOverrides.header) === null || _themeOverrides$heade2 === void 0 ? void 0 : _themeOverrides$heade2.fontStyle) || {};
   const contentFontStyle = ((_themeOverrides$conte = themeOverrides.content) === null || _themeOverrides$conte === void 0 ? void 0 : _themeOverrides$conte.fontStyle) || {};
@@ -17487,7 +17516,7 @@ function getStyles(_ref3) {
   const getWithFallback = (value, trueValue, falseValue) => value === true && trueValue || value === false && falseValue || undefined;
   return {
     background: {
-      backgroundColor: bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
+      backgroundColor: bgColor,
       backgroundImage: bgImage !== null && bgImage !== void 0 && bgImage.url && !(bgImage !== null && bgImage !== void 0 && bgImage.url.startsWith('url(')) ? "url('".concat(bgImage.url, "')") : undefined,
       backgroundRepeat: 'no-repeat',
       backgroundSize: bgImage === null || bgImage === void 0 ? void 0 : bgImage.size,
@@ -17513,8 +17542,9 @@ function getStyles(_ref3) {
     search: {
       color: searchColor,
       borderColor: theme.palette.divider,
-      highlightBorderColor: theme.palette.primary.main,
-      backgroundColor: searchBgColor
+      highlightBorderColor: theme.palette.custom.focusBorder,
+      backgroundColor: searchBgColor,
+      backdropFilter: 'blur(8px)'
     },
     selections
   };
@@ -17627,9 +17657,11 @@ function ListBoxPopover(_ref) {
     anchorEl: alignTo.current,
     anchorOrigin: anchorOrigin,
     transformOrigin: transformOrigin,
-    PaperProps: {
-      style: {
-        minWidth: '250px'
+    slotProps: {
+      paper: {
+        style: {
+          minWidth: '250px'
+        }
       }
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -17663,6 +17695,7 @@ function ListBoxPopover(_ref) {
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(ActionsToolbar, {
+    layout: layout,
     more: {
       enabled: !isLocked,
       actions: listboxSelectionToolbarItems,
@@ -17780,7 +17813,6 @@ function OneField(_ref) {
   segments.forEach((s, i) => {
     s.offset = i ? segments[i - 1].offset + segments[i - 1].ratio : 0; // eslint-disable-line
   });
-
   let Header = null;
   let Icon = null;
   let SegmentsIndicator = null;
@@ -17887,13 +17919,13 @@ const downArrow = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var DownArrow = (props => SvgIcon$2(downArrow(props)));
+var DownArrow = (props => SvgIcon$1(downArrow(props)));
 
 const PREFIX$6 = 'MultiState';
 const classes$6 = {
   item: "".concat(PREFIX$6, "-item")
 };
-const StyledGrid$5 = styled$1(Grid)(_ref => {
+const StyledGrid$5 = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -17993,7 +18025,7 @@ function MultiState(_ref2) {
     variant: "contained",
     fullWidth: true
   }, clearAllStates)), field.states.map((s, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(ListItem, {
     key: ix,
@@ -18058,7 +18090,7 @@ const classes$5 = {
   item: "".concat(PREFIX$5, "-item"),
   badge: "".concat(PREFIX$5, "-badge")
 };
-const StyledGrid$4 = styled$1(Grid)(_ref => {
+const StyledGrid$4 = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -18171,7 +18203,7 @@ function More(_ref2) {
   }, /*#__PURE__*/React__default.createElement(List, {
     dense: true
   }, items.map((s, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(ListItem, {
     key: ix,
@@ -18327,7 +18359,7 @@ const selectionsBack = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var SelectionsBack = (props => SvgIcon$2(selectionsBack(props)));
+var SelectionsBack = (props => SvgIcon$1(selectionsBack(props)));
 
 const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -18337,7 +18369,7 @@ const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {},
     }
   }]
 });
-var SelectionsForward = (props => SvgIcon$2(selectionsForward(props)));
+var SelectionsForward = (props => SvgIcon$1(selectionsForward(props)));
 
 const patchAlternateState = (currentSelectionsModel, currentSelectionsLayout, appLayout) => {
   const states = [...(appLayout.qStateNames || [])].map(s => ({
@@ -18861,16 +18893,6 @@ class AutoSizer extends Component {
   }
 }
 
-const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
-    }
-  }]
-});
-var DrillDownIcon = (props => SvgIcon$2(drillDown(props)));
-
 function removeInnnerTabStops(container) {
   container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
     elm.setAttribute('tabIndex', -1);
@@ -18924,14 +18946,17 @@ function useTempKeyboard(_ref) {
       const lastSelectedRow = c === null || c === void 0 ? void 0 : c.querySelector('.value.last-focused');
       const firstRowElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value');
       const confirmButton = c === null || c === void 0 ? void 0 : c.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-      const elementToFocus = searchField || lastSelectedRow || firstRowElement || confirmButton;
+      const unlockCoverButton = c === null || c === void 0 ? void 0 : c.querySelector('#listbox-unlock-button');
+      const elementToFocus = searchField || lastSelectedRow || firstRowElement || unlockCoverButton || confirmButton;
       elementToFocus === null || elementToFocus === void 0 || elementToFocus.setAttribute('tabIndex', 0);
       elementToFocus === null || elementToFocus === void 0 || elementToFocus.focus();
     },
     focusSelection() {
+      const unlockCoverButton = document.querySelector('#listbox-unlock-button');
       const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-      confirmButton === null || confirmButton === void 0 || confirmButton.setAttribute('tabIndex', 0);
-      confirmButton === null || confirmButton === void 0 || confirmButton.focus();
+      const btnToFocus = unlockCoverButton || confirmButton;
+      btnToFocus === null || btnToFocus === void 0 || btnToFocus.setAttribute('tabIndex', 0);
+      btnToFocus === null || btnToFocus === void 0 || btnToFocus.focus();
     }
   };
   return keyboard;
@@ -19011,7 +19036,6 @@ function getListboxContainerKeyboardNavigation(_ref) {
         if (!event.target.classList.contains('listbox-container')) {
           break; // don't mess with keydown handlers within the listbox (e.g. row seletion)
         }
-
         keyboard.focus();
         prevent();
         break;
@@ -19088,18 +19112,79 @@ function getListboxContainerKeyboardNavigation(_ref) {
   };
 }
 
+const StyledDiv = styled('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center'
+}));
+function ListBoxError(_ref) {
+  let {
+    text
+  } = _ref;
+  const {
+    translator: translatorDynamic
+  } = useContext(InstanceContext);
+  return /*#__PURE__*/React__default.createElement(StyledDiv, null, translatorDynamic.get(text));
+}
+
+function isDirectQueryEnabled(_ref) {
+  let {
+    appLayout
+  } = _ref;
+  const isDQ = !!(appLayout !== null && appLayout !== void 0 && appLayout.qIsDirectQueryMode);
+  return isDQ;
+}
+
+function getContainerPadding(_ref) {
+  let {
+    isGridMode,
+    dense,
+    height,
+    layoutOrder
+  } = _ref;
+  let containerPadding;
+  if (isGridMode) {
+    const itemHeight = getItemHeight({
+      isGridMode,
+      dense
+    });
+    let paddingY;
+    if (itemHeight > height) {
+      paddingY = '0px';
+    } else {
+      paddingY = '2px';
+    }
+    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
+  } else {
+    containerPadding = undefined;
+  }
+  return containerPadding;
+}
+
+const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
+    }
+  }]
+});
+var DrillDownIcon = (props => SvgIcon$1(drillDown(props)));
+
 function showToolbarDetached(_ref) {
   var _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
   let {
     containerRect,
     titleRef,
     iconsWidth,
-    headerPaddingLeft,
-    headerPaddingRight
+    paddingLeft,
+    paddingRight
   } = _ref;
   const containerWidth = containerRect.width;
   const preventTruncation = 2;
-  const padding = headerPaddingLeft + headerPaddingRight;
+  const padding = paddingLeft + paddingRight;
   const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 || (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding + preventTruncation;
   const actionToolbarWidth = 128;
   const notSufficientSpace = containerWidth < contentWidth + actionToolbarWidth;
@@ -19115,15 +19200,18 @@ function getListboxActionProps(_ref) {
     containerRef,
     isLocked,
     listboxSelectionToolbarItems,
+    extraItems,
     selections,
     keyboard
   } = _ref;
   return {
+    isDetached,
     show: showToolbar && !isDetached,
     popover: {
       show: showToolbar && isDetached,
       anchorEl: containerRef.current
     },
+    extraItems,
     more: {
       enabled: !isLocked,
       actions: listboxSelectionToolbarItems,
@@ -19148,56 +19236,293 @@ function getListboxActionProps(_ref) {
   };
 }
 
-const StyledDiv = styled$1('div')(() => ({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  alignItems: 'center',
-  justifyContent: 'center'
-}));
-function ListBoxError(_ref) {
+const iconStyle = {
+  fontSize: '12px'
+};
+const UnlockButton = styled(ButtonBase)(_ref => {
   let {
-    text
+    theme,
+    isLoading
   } = _ref;
-  const {
-    translator: translatorDynamic
-  } = useContext(InstanceContext);
-  return /*#__PURE__*/React__default.createElement(StyledDiv, null, translatorDynamic.get(text));
-}
-
-function isDirectQueryEnabled(_ref) {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: 48,
+    zIndex: 2,
+    // so it goes on top of action buttons
+    background: theme.palette.custom.disabledBackground,
+    opacity: 1,
+    color: theme.palette.custom.disabledContrastText,
+    width: '100%',
+    display: 'flex',
+    justifyContent: isLoading ? 'center' : 'flex-start',
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius: 0,
+    '& *, & p': {
+      color: theme.palette.custom.disabledContrastText
+    },
+    '& i': {
+      padding: "".concat(ICON_PADDING, "px")
+    }
+  };
+});
+const StyledGridHeader = styled(Grid, {
+  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
+})(_ref2 => {
   let {
-    appLayout
-  } = _ref;
-  const isDQ = !!(appLayout !== null && appLayout !== void 0 && appLayout.qIsDirectQueryMode);
-  return isDQ;
+    styles,
+    isRtl
+  } = _ref2;
+  return _objectSpread2(_objectSpread2({
+    flexDirection: isRtl ? 'row-reverse' : 'row',
+    wrap: 'nowrap',
+    minHeight: 32,
+    alignContent: 'center'
+  }, styles.header), {}, {
+    '& *': {
+      color: styles.header.color
+    }
+  });
+});
+const HeaderTitle = styled(Typography)(_ref3 => {
+  let {
+    styles
+  } = _ref3;
+  return _objectSpread2(_objectSpread2({}, styles.header), {}, {
+    display: 'block',
+    // needed for text-overflow to work
+    alignItems: 'center',
+    paddingRight: '1px' // make place for italic font style
+  });
+});
+function UnlockCoverButton(_ref4) {
+  let {
+    translator,
+    toggleLock,
+    keyboard,
+    isLoading
+  } = _ref4;
+  const fontSize = '14px';
+  const unLockText = translator.get('SelectionToolbar.ClickToUnlock');
+  const component = /*#__PURE__*/React__default.createElement(UnlockButton, {
+    title: unLockText,
+    tabIndex: keyboard.enabled ? 0 : -1,
+    onClick: toggleLock,
+    "data-testid": "listbox-unlock-button",
+    id: "listbox-unlock-button",
+    isLoading: isLoading
+  }, isLoading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: 16,
+    variant: "indeterminate",
+    color: "primary"
+  }) : /*#__PURE__*/React__default.createElement(Lock, {
+    disableRipple: true,
+    style: iconStyle
+  }), !isLoading && /*#__PURE__*/React__default.createElement(Typography, {
+    fontSize: fontSize
+  }, unLockText));
+  return component;
 }
 
-function getContainerPadding(_ref) {
+// ms that needs to pass before the lock button can be toggled again
+const lockTimeFrameMs = 500;
+let lastTime = 0;
+function getToggleLock(_ref) {
   let {
-    isGridMode,
-    dense,
-    height,
-    layoutOrder
+    isLocked,
+    setLocked,
+    settingLockedState,
+    model,
+    setSettingLockedState
   } = _ref;
-  let containerPadding;
-  if (isGridMode) {
-    const itemHeight = getItemHeight({
-      isGridMode,
-      dense
+  return () => {
+    const now = new Date();
+    const curTime = now - lastTime;
+    if (curTime < lockTimeFrameMs) {
+      return Promise.resolve();
+    }
+    if (settingLockedState) {
+      return () => {};
+    }
+    setSettingLockedState(true);
+    lastTime = now;
+    const func = isLocked ? model.unlock : model.lock;
+    setLocked(!isLocked);
+    return func.call(model, '/qListObjectDef').catch(() => {
+      setLocked(isLocked); // revert to the layout value
+    }).finally(() => {
+      setTimeout(() => {
+        setSettingLockedState(false);
+      }, 0);
     });
-    let paddingY;
-    if (itemHeight > height) {
-      paddingY = '0px';
-    } else {
-      paddingY = '2px';
+  };
+}
+function ListBoxHeader(_ref2) {
+  var _layout$qListObject, _layout$qListObject3;
+  let {
+    layout,
+    translator,
+    styles,
+    isRtl,
+    showLock,
+    selectDisabled,
+    showSearchIcon,
+    isDrillDown,
+    constraints,
+    onShowSearch,
+    classes,
+    containerRect,
+    isPopover,
+    showToolbar,
+    showDetachedToolbarOnly,
+    containerRef,
+    model,
+    selectionState,
+    isDirectQuery,
+    selections,
+    keyboard,
+    autoConfirm
+  } = _ref2;
+  const [isToolbarDetached, setIsToolbarDetached] = useState$1(showDetachedToolbarOnly);
+  const [isLocked, setLocked] = useState$1(layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked);
+  const [settingLockedState, setSettingLockedState] = useState$1(false);
+  useEffect$1(() => {
+    var _layout$qListObject2;
+    setLocked(layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qLocked);
+  }, [layout === null || layout === void 0 || (_layout$qListObject3 = layout.qListObject) === null || _layout$qListObject3 === void 0 || (_layout$qListObject3 = _layout$qListObject3.qDimensionInfo) === null || _layout$qListObject3 === void 0 ? void 0 : _layout$qListObject3.qLocked]);
+  const titleRef = useRef(null);
+  const showUnlock = showLock && isLocked;
+  const showLockIcon = !showLock && isLocked; // shows instead of the cover button when field/dim is locked.
+  const showLeftIcon = showSearchIcon || showLockIcon || isDrillDown; // the left-most icon outside of the actions/selections toolbar.
+
+  const paddingLeft = CELL_PADDING_LEFT - (showLeftIcon ? ICON_PADDING : 0);
+  const paddingRight = isRtl ? CELL_PADDING_LEFT - (showLeftIcon ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
+
+  // Calculate explicit width for icons container. Search and lock cannot exist combined.
+  const iconsWidth = (showSearchIcon ? BUTTON_ICON_WIDTH : 0) + (showLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? BUTTON_ICON_WIDTH : 0);
+  const toggleLock = getToggleLock({
+    isLocked,
+    setLocked,
+    settingLockedState,
+    setSettingLockedState,
+    model
+  });
+  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
+    layout,
+    model,
+    translator,
+    selectionState,
+    isDirectQuery
+  });
+  const extraItems = isLocked || !showLock ? undefined : [{
+    key: 'lock',
+    type: undefined,
+    label: translator.get('SelectionToolbar.ClickToLock'),
+    getSvgIconShape: unlock,
+    enabled: () => !settingLockedState && !selectDisabled() && hasSelections(layout),
+    action: toggleLock
+  }];
+  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  }) : /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onShowSearch,
+    tabIndex: -1,
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    disableRipple: true,
+    "data-testid": "search-toggle-btn"
+  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
+    style: iconStyle
+  }));
+  useEffect$1(() => {
+    if (!titleRef.current || !containerRect) {
+      return;
     }
-    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
-  } else {
-    containerPadding = undefined; // to prevent overriding any default padding
+    const mustShowDetached = showToolbarDetached({
+      containerRect,
+      titleRef,
+      iconsWidth,
+      paddingLeft,
+      paddingRight
+    });
+    const isDetached = showDetachedToolbarOnly || mustShowDetached;
+    setIsToolbarDetached(isDetached);
+  }, [iconsWidth, paddingLeft, paddingRight, titleRef.current, showDetachedToolbarOnly, Object.entries(containerRect || {}).sort().join(',')]);
+  const toolbarProps = getListboxActionProps({
+    isDetached: isPopover ? false : isToolbarDetached,
+    showToolbar,
+    containerRef,
+    isLocked,
+    extraItems,
+    listboxSelectionToolbarItems,
+    selections,
+    keyboard,
+    autoConfirm
+  });
+  const actionsToolbar = /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
+    isRtl: isRtl,
+    layout: layout
+  }, toolbarProps));
+  if (showDetachedToolbarOnly) {
+    return actionsToolbar;
   }
 
-  return containerPadding;
+  // Always show a lock symbol when locked and showLock is false
+  const lockedIconComp = showLockIcon ? /*#__PURE__*/React__default.createElement(Lock, {
+    size: "large",
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  }) : undefined;
+  return /*#__PURE__*/React__default.createElement(StyledGridHeader, {
+    item: true,
+    container: true,
+    styles: styles,
+    isRtl: isRtl,
+    marginY: 1,
+    paddingLeft: "".concat(paddingLeft, "px"),
+    paddingRight: "".concat(paddingRight, "px"),
+    className: "header-container"
+  }, showUnlock && /*#__PURE__*/React__default.createElement(UnlockCoverButton, {
+    isLoading: settingLockedState,
+    translator: translator,
+    toggleLock: toggleLock,
+    keyboard: keyboard
+  }), showLeftIcon && /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    container: true,
+    alignItems: "center",
+    width: iconsWidth,
+    className: "header-action-container"
+  }, lockedIconComp || showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
+    tabIndex: -1,
+    title: translator.get('Listbox.DrillDown'),
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: true,
+    minWidth: 0 // needed to text-overflow see: https://css-tricks.com/flexbox-truncated-text/
+    ,
+    justifyContent: isRtl ? 'flex-end' : 'flex-start',
+    className: classes.listBoxHeader
+  }, /*#__PURE__*/React__default.createElement(HeaderTitle, {
+    variant: "h6",
+    noWrap: true,
+    ref: titleRef,
+    title: layout.title,
+    styles: styles
+  }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    display: "flex"
+  }, actionsToolbar));
 }
 
 const PREFIX$4 = 'ListBoxInline';
@@ -19206,7 +19531,7 @@ const classes$4 = {
   screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly"),
   listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 };
-const StyledGrid$3 = styled$1(Grid, {
+const StyledGrid$3 = styled(Grid, {
   shouldForwardProp: p => !['containerPadding', 'isGridMode', 'styles'].includes(p)
 })(_ref => {
   let {
@@ -19241,48 +19566,20 @@ const StyledGrid$3 = styled$1(Grid, {
     }
   });
 });
-const StyledGridHeader = styled$1(Grid, {
-  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
-})(_ref2 => {
-  let {
-    styles,
-    isRtl
-  } = _ref2;
-  return _objectSpread2(_objectSpread2({
-    flexDirection: isRtl ? 'row-reverse' : 'row',
-    wrap: 'nowrap',
-    minHeight: 32,
-    alignContent: 'center'
-  }, styles.header), {}, {
-    '& *': {
-      // Assign the styles color as defaul color for all elements in the header
-      color: styles.header.color
-    }
-  });
-});
-const Title = styled$1(Typography)(_ref3 => {
-  let {
-    styles
-  } = _ref3;
-  return _objectSpread2(_objectSpread2({}, styles.header), {}, {
-    paddingRight: '1px' // make place for italic font style
-  });
-});
-
-const isModal = _ref4 => {
+const isModal = _ref2 => {
   var _app$isInModalSelecti, _app$isInModalSelecti2;
   let {
     app,
     appSelections
-  } = _ref4;
+  } = _ref2;
   return (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
 };
-function ListBoxInline(_ref5) {
-  var _layout$qListObject, _layout$qListObject2, _layoutOptions$dense, _containerRef$current;
+function ListBoxInline(_ref3) {
+  var _layout$qListObject, _layout$qListObject2, _layout$title, _layoutOptions$dense, _containerRef$current;
   let {
     options,
     layout
-  } = _ref5;
+  } = _ref3;
   const {
     app,
     direction,
@@ -19303,6 +19600,7 @@ function ListBoxInline(_ref5) {
     renderedCallback,
     toolbar = true,
     isPopover = false,
+    showLock = false,
     components
   } = options;
 
@@ -19318,9 +19616,6 @@ function ListBoxInline(_ref5) {
     return [ref, setRef];
   };
   const theme = useTheme$1();
-  const unlock = useCallback(() => {
-    model.unlock('/qListObjectDef');
-  }, [model]);
   const {
     translator,
     keyboardNavigation,
@@ -19357,7 +19652,6 @@ function ListBoxInline(_ref5) {
     stop: 0
   });
   const [appSelections] = useAppSelections(app);
-  const titleRef = useRef(null);
   const [selectionState$1] = useState$1(() => selectionState());
   const keyboard = useTempKeyboard({
     containerRef,
@@ -19369,7 +19663,6 @@ function ListBoxInline(_ref5) {
   }), [app, appSelections]);
   const isInvalid = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qError;
   const errorText = isInvalid && constraints.active ? 'Visualization.Invalid.Dimension' : 'Visualization.Incomplete';
-  const [isToolbarDetached, setIsToolbarDetached] = useState$1(false);
   const {
     handleKeyDown,
     handleOnMouseEnter,
@@ -19386,8 +19679,6 @@ function ListBoxInline(_ref5) {
     constraints,
     isModal: isModalMode
   }), [keyboard, hovering, updateKeyScroll, containerRef, currentScrollIndex, app, appSelections, constraints, isModalMode]);
-  const showDetachedToolbarOnly = toolbar && ((layout === null || layout === void 0 ? void 0 : layout.title) === '' || (layout === null || layout === void 0 ? void 0 : layout.showTitle) === false) && !isPopover;
-  const showToolbarWithTitle = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '' && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false || isPopover;
   useEffect$1(() => {
     document.addEventListener('keydown', globalKeyDown);
     return () => {
@@ -19395,6 +19686,9 @@ function ListBoxInline(_ref5) {
     };
   }, [globalKeyDown]);
   useEffect$1(() => {
+    if (search === true) {
+      setShowSearch(true);
+    }
     const show = () => {
       setShowToolbar(true);
     };
@@ -19405,6 +19699,7 @@ function ListBoxInline(_ref5) {
       }
     };
     if (isPopover) {
+      // When isPopover, toolbar == false will be ignored.
       if (!selections.isActive()) {
         selections.begin('/qListObjectDef');
         selections.on('activated', show);
@@ -19412,7 +19707,7 @@ function ListBoxInline(_ref5) {
       }
       setShowToolbar(isPopover);
     }
-    if (selections) {
+    if (toolbar && selections) {
       if (!selections.isModal()) {
         selections.on('activated', show);
         selections.on('deactivated', hide);
@@ -19425,7 +19720,7 @@ function ListBoxInline(_ref5) {
         selections.removeListener('deactivated', hide);
       }
     };
-  }, [selections, isPopover]);
+  }, [toolbar, selections, isPopover]);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -19442,64 +19737,31 @@ function ListBoxInline(_ref5) {
     autoConfirm = false,
     layoutOptions = {}
   } = layout !== null && layout !== void 0 ? layout : {};
-  const showSearchIcon = searchEnabled !== false && search === 'toggle';
-  const isLocked = (layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked) === true;
-  const showSearchOrLockIcon = isLocked || showSearchIcon;
+  const isLocked = layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked;
+  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !isLocked;
   const isDrillDown = (layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qGrouping) === 'H';
-  const showIcons = showSearchOrLockIcon || isDrillDown;
-  const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
+  const canShowTitle = (layout === null || layout === void 0 || (_layout$title = layout.title) === null || _layout$title === void 0 ? void 0 : _layout$title.length) && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false;
+  const showDetachedToolbarOnly = toolbar && !canShowTitle && !isPopover;
+  const showAttachedToolbar = toolbar && canShowTitle || isPopover;
   const isRtl = direction === 'rtl';
-  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
-  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
-  useEffect$1(() => {
-    if (!titleRef.current || !containerRect) {
-      return;
-    }
-    const isDetached = showToolbarDetached({
-      containerRect,
-      titleRef,
-      iconsWidth,
-      headerPaddingLeft,
-      headerPaddingRight
-    });
-    setIsToolbarDetached(isDetached);
-  }, [titleRef.current, containerRect]);
   if (!model || !layout || !translator) {
     return null;
   }
-  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
-    layout,
-    model,
-    translator,
-    selectionState: selectionState$1,
-    isDirectQuery
-  });
   const showSearchToggle = search === 'toggle' && showSearch;
-  const searchVisible = (search === true || showSearchToggle) && !selectDisabled() && searchEnabled !== false;
+  const searchVisible = search === true || showSearchToggle && !selectDisabled() && searchEnabled !== false;
   const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
-  const onShowSearch = () => {
+  const handleShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
   };
   const onCtrlF = () => {
     if (search === 'toggle') {
-      onShowSearch();
+      handleShowSearch();
     } else {
       const input = searchContainer.current.querySelector('input');
       input === null || input === void 0 || input.focus();
     }
   };
-  const getActionToolbarProps = isDetached => _objectSpread2(_objectSpread2({}, getListboxActionProps({
-    isDetached: isPopover ? false : isDetached,
-    showToolbar,
-    containerRef,
-    isLocked,
-    listboxSelectionToolbarItems,
-    selections,
-    keyboard
-  })), {}, {
-    autoConfirm
-  });
   const shouldAutoFocus = searchVisible && search === 'toggle';
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
@@ -19510,49 +19772,35 @@ function ListBoxInline(_ref5) {
     height: (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight,
     layoutOrder: layoutOptions.layoutOrder
   });
-  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
-    title: translator.get('Listbox.Search'),
-    size: "large",
-    style: {
-      fontSize: '12px',
-      padding: '7px'
-    }
-  }) : /*#__PURE__*/React__default.createElement(IconButton, {
-    onClick: onShowSearch,
-    tabIndex: -1,
-    title: translator.get('Listbox.Search'),
-    size: "large",
-    disableRipple: true,
-    "data-testid": "search-toggle-btn"
-  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
-    style: {
-      fontSize: '12px'
-    }
-  }));
-  const lockIconComp = selectDisabled() ? /*#__PURE__*/React__default.createElement(Lock, {
-    size: "large",
-    style: {
-      fontSize: '12px',
-      padding: '7px'
-    }
-  }) : /*#__PURE__*/React__default.createElement(IconButton, {
-    title: translator.get('SelectionToolbar.ClickToUnlock'),
-    tabIndex: -1,
-    onClick: unlock,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Lock, {
-    disableRipple: true,
-    style: {
-      fontSize: '12px'
-    }
-  }));
   if (isInvalid) {
     renderedCallback === null || renderedCallback === void 0 || renderedCallback();
   }
-  const listBoxMinHeight = showToolbarWithTitle ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
-    direction: direction
-  }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
+  const listBoxMinHeight = showAttachedToolbar ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
+  const listBoxHeader = /*#__PURE__*/React__default.createElement(ListBoxHeader, {
+    selectDisabled: selectDisabled,
+    showSearchIcon: showSearchIcon,
+    isDrillDown: isDrillDown,
+    onShowSearch: handleShowSearch,
+    isPopover: isPopover,
+    showToolbar: showToolbar,
+    isDirectQuery: isDirectQuery,
+    autoConfirm: autoConfirm,
+    showDetachedToolbarOnly: showDetachedToolbarOnly,
+    layout: layout,
+    translator: translator,
+    styles: styles,
+    isRtl: isRtl,
+    showLock: showLock,
+    constraints: constraints,
+    classes: classes$4,
+    containerRect: containerRect,
+    containerRef: containerRef,
+    model: model,
+    selectionState: selectionState$1,
+    selections: selections,
+    keyboard: keyboard
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && listBoxHeader, /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
     tabIndex: keyboard.enabled ? -1 : undefined,
@@ -19573,45 +19821,7 @@ function ListBoxInline(_ref5) {
     },
     isGridMode: isGridMode,
     "aria-label": keyboard.active ? translator.get('Listbox.ScreenReaderInstructions') : ''
-  }, showToolbarWithTitle && /*#__PURE__*/React__default.createElement(StyledGridHeader, {
-    item: true,
-    container: true,
-    styles: styles,
-    isRtl: isRtl,
-    marginY: 1,
-    paddingLeft: "".concat(headerPaddingLeft, "px"),
-    paddingRight: "".concat(headerPaddingRight, "px")
-  }, showIcons && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    alignItems: "center",
-    width: iconsWidth
-  }, isLocked ? lockIconComp : showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
-    tabIndex: -1,
-    title: translator.get('Listbox.DrillDown'),
-    size: "large",
-    style: {
-      fontSize: '12px'
-    }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true,
-    minWidth: 0 // needed to text-overflow see: https://css-tricks.com/flexbox-truncated-text/
-    ,
-    justifyContent: isRtl ? 'flex-end' : 'flex-start',
-    className: classes$4.listBoxHeader
-  }, /*#__PURE__*/React__default.createElement(Title, {
-    variant: "h6",
-    noWrap: true,
-    ref: titleRef,
-    title: layout.title,
-    styles: styles
-  }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    display: "flex"
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
-    direction: direction
-  }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, showAttachedToolbar && listBoxHeader, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
@@ -19634,7 +19844,7 @@ function ListBoxInline(_ref5) {
     wildCardSearch: wildCardSearch,
     searchEnabled: searchEnabled,
     direction: direction,
-    hide: showSearchIcon && onShowSearch,
+    hide: showSearchIcon && handleShowSearch,
     styles: styles
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -19642,11 +19852,11 @@ function ListBoxInline(_ref5) {
     className: classes$4.listboxWrapper
   }, isInvalid ? /*#__PURE__*/React__default.createElement(ListBoxError, {
     text: errorText
-  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref6 => {
+  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref4 => {
     let {
       height,
       width
-    } = _ref6;
+    } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
@@ -19688,10 +19898,10 @@ function ListBoxInline(_ref5) {
   })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
-function IsolateUseLayoutWrapper(_ref7) {
+function IsolateUseLayoutWrapper(_ref5) {
   let {
     options = {}
-  } = _ref7;
+  } = _ref5;
   const {
     model
   } = options;
@@ -19720,24 +19930,26 @@ function useExistingModel(_ref) {
     throw new Error("Option \"".concat(usedForbiddenOptions.join(', '), "\" is not applicable for existing objects."));
   }
   useEffect$1(() => {
-    async function fetchObject() {
-      const modelFromStore = modelStore.get(qId);
-      if (modelFromStore) {
-        setModel(modelFromStore);
-      } else {
-        const m = await app.getObject(qId);
-        modelStore.set(m.id, m);
-        m.once('closed', () => {
-          modelStore.clear(m.id);
-        });
-        setModel(m);
+    function storeModel(m) {
+      if (modelStore.get(m.id)) {
+        return;
       }
+      // Nebula gets the model from this store in some of its
+      // core functions, so it must always be stored here.
+      modelStore.set(m.id, m);
+      m.once('closed', () => {
+        modelStore.clear(m.id);
+      });
     }
-    if (sessionModel) {
-      setModel(sessionModel);
-    } else {
-      fetchObject();
+    async function fetchObject(modelId) {
+      const m = modelStore.get(modelId) || (await app.getObject(modelId));
+      return m;
     }
+    const p = Promise.resolve(sessionModel || fetchObject(qId));
+    p.then(m => {
+      storeModel(m);
+      setModel(m);
+    });
   }, []);
   return model;
 }
@@ -20143,7 +20355,6 @@ function ListBoxWrapper(_ref) {
       frequencyMode: getFrequencyModeLetter(options.frequencyMode) // stick to letter option hereafter
     });
   }
-
   const [changeCount, setChangeCount] = useState$1(0);
   useEffect$1(() => {
     if (changeCount) {
@@ -20545,7 +20756,6 @@ async function populateData(_ref, halo) {
     {
       console.warn('Attempting to add fields to an object without a specified data target'); // eslint-disable-line no-console
     }
-
     return;
   }
   const {
@@ -20644,7 +20854,6 @@ const getValue = (data, reference, defaultValue) => {
     if (step === '') {
       continue; // eslint-disable-line no-continue
     }
-
     if (dataContainer[step] === undefined || dataContainer[step] === null) {
       return defaultValue;
     }
@@ -20814,7 +21023,6 @@ function copyPropertyOrSetDefault(propertyName, source, target, defaultValue) {
 function getOthersLabel() {
   return 'Others'; // TODO: translator.get('properties.dimensionLimits.others')
 }
-
 function createDefaultDimension(dimensionDef, dimensionProperties) {
   const def = extend$2(true, {}, dimensionProperties, dimensionDef);
   if (!utils.getValue(def, 'qOtherTotalSpec.qOtherCounted')) {
@@ -21340,7 +21548,6 @@ const getDefaultExportPropertiesFn = path => {
   }
   return undefined; // TODO: add listbox and other
 };
-
 const getExportPropertiesFnc = qae => {
   if (qae.exportProperties) {
     return qae.exportProperties;
@@ -21355,7 +21562,6 @@ const getDefaultImportPropertiesFnc = path => {
   }
   return undefined; // TODO: add listbox and other
 };
-
 const getImportPropertiesFnc = qae => {
   if (qae.importProperties) {
     return qae.importProperties;
@@ -21455,7 +21661,7 @@ const warning = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var WarningTriangle = (props => SvgIcon$2(warning(props)));
+var WarningTriangle = (props => SvgIcon$1(warning(props)));
 
 /* eslint-disable react/no-array-index-key */
 function DescriptionRow(_ref) {
@@ -21594,7 +21800,7 @@ const classes$3 = {
   front: "".concat(PREFIX$3, "-front"),
   back: "".concat(PREFIX$3, "-back")
 };
-const Root = styled$1('div')(_ref => {
+const Root = styled('div')(_ref => {
   let {
     theme
   } = _ref;
@@ -21649,7 +21855,7 @@ const PREFIX$2 = 'LongRunningQuery';
 const classes$2 = {
   stripes: "".concat(PREFIX$2, "-stripes")
 };
-const StyledGrid$2 = styled$1(Grid)(() => ({
+const StyledGrid$2 = styled(Grid)(() => ({
   ["& .".concat(classes$2.stripes)]: {
     '&::before': {
       position: 'absolute',
@@ -21775,7 +21981,7 @@ const classes$1 = {
   containerStyle: "".concat(PREFIX$1, "-containerStyle"),
   containerTitleStyle: "".concat(PREFIX$1, "-containerTitleStyle")
 };
-const StyledGrid$1 = styled$1(Grid)(_ref => {
+const StyledGrid$1 = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -21859,7 +22065,8 @@ function Header(_ref2) {
       show: showPopoverToolbar,
       anchorEl
     },
-    focusHandler: focusHandler
+    focusHandler: focusHandler,
+    layout: layout
   });
   return /*#__PURE__*/React__default.createElement(StyledGrid$1, {
     ref: containerRef,
@@ -21894,7 +22101,7 @@ const PREFIX = 'Footer';
 const classes = {
   itemStyle: "".concat(PREFIX, "-itemStyle")
 };
-const StyledGrid = styled$1(Grid)(_ref => {
+const StyledGrid = styled(Grid)(_ref => {
   let {
     theme
   } = _ref;
@@ -23393,7 +23600,6 @@ function flushMacro(hooks) {
   hooks.macro = null;
   maybeEndChain(hooks); // eslint-disable-line no-use-before-define
 }
-
 function maybeEndChain(hooks) {
   if (hooks.pendingPromises.length || hooks.micro || hooks.macro) {
     return;
@@ -23538,11 +23744,17 @@ function useState(initial) {
 }
 
 /**
+ * Callback function that should return a function that in turns gets
+ * called before the hook runs again or when the component is destroyed.
+ * For example to remove any listeners added in the callback itself.
  * @typedef {function():(void | function():void)} EffectCallback
  */
 
 /**
  * Triggers a callback function when a dependent value changes.
+ *
+ * Omitting the dependency array will have the hook run on each update
+ * and an empty dependency array runs only once.
  * @entry
  * @param {EffectCallback} effect - The callback.
  * @param {Array<any>=} deps - The dependencies that should trigger the callback.
@@ -23555,6 +23767,15 @@ function useState(initial) {
  *     console.log('unmounted');
  *   };
  * }, []);
+ *
+ * useEffect(() => {
+ *   const clickHandler = () => { console.log('click') };
+ *   const button = element.querySelector('.button');
+ *   button.addEventListener('click', clickHandler);
+ *   return () => {
+ *     button.removeEventListener('click', clickHandler);
+ *   };
+ * }, []);
  */
 function useEffect(cb, deps) {
   {
@@ -23614,17 +23835,20 @@ function useMemo(fn, deps) {
 
 /**
  * Runs a callback function when a dependent changes.
+ *
+ * Useful for async operations that otherwise cause no side effects.
+ * Do not add for example listeners withing the callback as there is no teardown function.
  * @entry
  * @template P
  * @param {function():Promise<P>} factory - The factory function that calls the promise.
  * @param {Array<any>=} deps - The dependencies.
- * @returns {Array<P,Error>} The resolved value.
+ * @returns {Array<P,Error>} The resolved value or rejected error
  * @example
  * import { usePromise } from '@nebula.js/stardust';
  * import { useModel } from '@nebula.js/stardust';
  * // ...
  * const model = useModel();
- * const [resolved, rejected] = usePromise(() => model.getLayout(), []);
+ * const [resolved, rejected] = usePromise(() => model.getLayout(), [model]);
  */
 function usePromise(p, deps) {
   const [obj, setObj] = useState(() => ({
@@ -24930,7 +25154,6 @@ const resolveValue = (data, reference, defaultValue) => {
     if (steps[i] === '') {
       continue; // eslint-disable-line no-continue
     }
-
     if (typeof dataContainer[steps[i]] === 'undefined') {
       return defaultValue;
     }
@@ -25406,7 +25629,6 @@ function viz() {
     // resize() {},
     // show() {},
   };
-
   return api;
 }
 
@@ -25512,7 +25734,6 @@ async function createSessionObject(_ref, halo) {
     };
     // console.error(e); // eslint-disable-line
   }
-
   const model = await halo.app.createSessionObject(mergedProps);
   if (children.length > 0) {
     await model.setFullPropertyTree({
@@ -25591,7 +25812,6 @@ async function createObject(_ref, halo, generateOnly) {
     }
     // console.error(e); // eslint-disable-line
   }
-
   if (!generateOnly) {
     const model = await halo.app.createObject(mergedProps);
     if (children.length > 0) {
@@ -26003,15 +26223,14 @@ function flagsFn () {
    * @interface Flags
    */
 
-  return (/** @lends Flags */{
-      /**
-       * Checks whether the specified flag is enabled.
-       * @param {string} flag - The value flag to check.
-       * @returns {boolean} True if the specified flag is enabled, false otherwise.
-       */
-      isEnabled: f => flags[f] === true
-    }
-  );
+  return /** @lends Flags */{
+    /**
+     * Checks whether the specified flag is enabled.
+     * @param {string} flag - The value flag to check.
+     * @returns {boolean} True if the specified flag is enabled, false otherwise.
+     */
+    isEnabled: f => flags[f] === true
+  };
 }
 
 var iterator;
@@ -26458,6 +26677,7 @@ try {
 
 // A linked list to keep track of recently-used-ness
 const Yallist = yallist;
+
 const MAX = Symbol('max');
 const LENGTH = Symbol('length');
 const LENGTH_CALCULATOR = Symbol('lengthCalculator');
@@ -26468,6 +26688,7 @@ const NO_DISPOSE_ON_SET = Symbol('noDisposeOnSet');
 const LRU_LIST = Symbol('lruList');
 const CACHE = Symbol('cache');
 const UPDATE_AGE_ON_GET = Symbol('updateAgeOnGet');
+
 const naiveLength = () => 1;
 
 // lruList is a yallist where the head is the youngest
@@ -26479,18 +26700,23 @@ const naiveLength = () => 1;
 // cache is a Map (or PseudoMap) that matches the keys to
 // the Yallist.Node object.
 class LRUCache {
-  constructor(options) {
-    if (typeof options === 'number') options = {
-      max: options
-    };
-    if (!options) options = {};
-    if (options.max && (typeof options.max !== 'number' || options.max < 0)) throw new TypeError('max must be a non-negative number');
+  constructor (options) {
+    if (typeof options === 'number')
+      options = { max: options };
+
+    if (!options)
+      options = {};
+
+    if (options.max && (typeof options.max !== 'number' || options.max < 0))
+      throw new TypeError('max must be a non-negative number')
     // Kind of weird to have a default max of Infinity, but oh well.
     this[MAX] = options.max || Infinity;
+
     const lc = options.length || naiveLength;
-    this[LENGTH_CALCULATOR] = typeof lc !== 'function' ? naiveLength : lc;
+    this[LENGTH_CALCULATOR] = (typeof lc !== 'function') ? naiveLength : lc;
     this[ALLOW_STALE] = options.stale || false;
-    if (options.maxAge && typeof options.maxAge !== 'number') throw new TypeError('maxAge must be a number');
+    if (options.maxAge && typeof options.maxAge !== 'number')
+      throw new TypeError('maxAge must be a number')
     this[MAX_AGE] = options.maxAge || 0;
     this[DISPOSE] = options.dispose;
     this[NO_DISPOSE_ON_SET] = options.noDisposeOnSet || false;
@@ -26499,32 +26725,40 @@ class LRUCache {
   }
 
   // resize the cache when the max changes.
-  set max(mL) {
-    if (typeof mL !== 'number' || mL < 0) throw new TypeError('max must be a non-negative number');
+  set max (mL) {
+    if (typeof mL !== 'number' || mL < 0)
+      throw new TypeError('max must be a non-negative number')
+
     this[MAX] = mL || Infinity;
     trim(this);
   }
-  get max() {
-    return this[MAX];
+  get max () {
+    return this[MAX]
   }
-  set allowStale(allowStale) {
+
+  set allowStale (allowStale) {
     this[ALLOW_STALE] = !!allowStale;
   }
-  get allowStale() {
-    return this[ALLOW_STALE];
+  get allowStale () {
+    return this[ALLOW_STALE]
   }
-  set maxAge(mA) {
-    if (typeof mA !== 'number') throw new TypeError('maxAge must be a non-negative number');
+
+  set maxAge (mA) {
+    if (typeof mA !== 'number')
+      throw new TypeError('maxAge must be a non-negative number')
+
     this[MAX_AGE] = mA;
     trim(this);
   }
-  get maxAge() {
-    return this[MAX_AGE];
+  get maxAge () {
+    return this[MAX_AGE]
   }
 
   // resize the cache when the lengthCalculator changes.
-  set lengthCalculator(lC) {
-    if (typeof lC !== 'function') lC = naiveLength;
+  set lengthCalculator (lC) {
+    if (typeof lC !== 'function')
+      lC = naiveLength;
+
     if (lC !== this[LENGTH_CALCULATOR]) {
       this[LENGTH_CALCULATOR] = lC;
       this[LENGTH] = 0;
@@ -26535,16 +26769,12 @@ class LRUCache {
     }
     trim(this);
   }
-  get lengthCalculator() {
-    return this[LENGTH_CALCULATOR];
-  }
-  get length() {
-    return this[LENGTH];
-  }
-  get itemCount() {
-    return this[LRU_LIST].length;
-  }
-  rforEach(fn, thisp) {
+  get lengthCalculator () { return this[LENGTH_CALCULATOR] }
+
+  get length () { return this[LENGTH] }
+  get itemCount () { return this[LRU_LIST].length }
+
+  rforEach (fn, thisp) {
     thisp = thisp || this;
     for (let walker = this[LRU_LIST].tail; walker !== null;) {
       const prev = walker.prev;
@@ -26552,7 +26782,8 @@ class LRUCache {
       walker = prev;
     }
   }
-  forEach(fn, thisp) {
+
+  forEach (fn, thisp) {
     thisp = thisp || this;
     for (let walker = this[LRU_LIST].head; walker !== null;) {
       const next = walker.next;
@@ -26560,49 +26791,65 @@ class LRUCache {
       walker = next;
     }
   }
-  keys() {
-    return this[LRU_LIST].toArray().map(k => k.key);
+
+  keys () {
+    return this[LRU_LIST].toArray().map(k => k.key)
   }
-  values() {
-    return this[LRU_LIST].toArray().map(k => k.value);
+
+  values () {
+    return this[LRU_LIST].toArray().map(k => k.value)
   }
-  reset() {
-    if (this[DISPOSE] && this[LRU_LIST] && this[LRU_LIST].length) {
+
+  reset () {
+    if (this[DISPOSE] &&
+        this[LRU_LIST] &&
+        this[LRU_LIST].length) {
       this[LRU_LIST].forEach(hit => this[DISPOSE](hit.key, hit.value));
     }
+
     this[CACHE] = new Map(); // hash of items by key
     this[LRU_LIST] = new Yallist(); // list of items in order of use recency
     this[LENGTH] = 0; // length of items in the list
   }
 
-  dump() {
-    return this[LRU_LIST].map(hit => isStale(this, hit) ? false : {
-      k: hit.key,
-      v: hit.value,
-      e: hit.now + (hit.maxAge || 0)
-    }).toArray().filter(h => h);
+  dump () {
+    return this[LRU_LIST].map(hit =>
+      isStale(this, hit) ? false : {
+        k: hit.key,
+        v: hit.value,
+        e: hit.now + (hit.maxAge || 0)
+      }).toArray().filter(h => h)
   }
-  dumpLru() {
-    return this[LRU_LIST];
+
+  dumpLru () {
+    return this[LRU_LIST]
   }
-  set(key, value, maxAge) {
+
+  set (key, value, maxAge) {
     maxAge = maxAge || this[MAX_AGE];
-    if (maxAge && typeof maxAge !== 'number') throw new TypeError('maxAge must be a number');
+
+    if (maxAge && typeof maxAge !== 'number')
+      throw new TypeError('maxAge must be a number')
+
     const now = maxAge ? Date.now() : 0;
     const len = this[LENGTH_CALCULATOR](value, key);
+
     if (this[CACHE].has(key)) {
       if (len > this[MAX]) {
         del(this, this[CACHE].get(key));
-        return false;
+        return false
       }
+
       const node = this[CACHE].get(key);
       const item = node.value;
 
       // dispose of the old one before overwriting
       // split out into 2 ifs for better coverage tracking
       if (this[DISPOSE]) {
-        if (!this[NO_DISPOSE_ON_SET]) this[DISPOSE](key, item.value);
+        if (!this[NO_DISPOSE_ON_SET])
+          this[DISPOSE](key, item.value);
       }
+
       item.now = now;
       item.maxAge = maxAge;
       item.value = value;
@@ -26610,44 +26857,57 @@ class LRUCache {
       item.length = len;
       this.get(key);
       trim(this);
-      return true;
+      return true
     }
+
     const hit = new Entry(key, value, len, now, maxAge);
 
     // oversized objects fall out of cache automatically.
     if (hit.length > this[MAX]) {
-      if (this[DISPOSE]) this[DISPOSE](key, value);
-      return false;
+      if (this[DISPOSE])
+        this[DISPOSE](key, value);
+
+      return false
     }
+
     this[LENGTH] += hit.length;
     this[LRU_LIST].unshift(hit);
     this[CACHE].set(key, this[LRU_LIST].head);
     trim(this);
-    return true;
+    return true
   }
-  has(key) {
-    if (!this[CACHE].has(key)) return false;
+
+  has (key) {
+    if (!this[CACHE].has(key)) return false
     const hit = this[CACHE].get(key).value;
-    return !isStale(this, hit);
+    return !isStale(this, hit)
   }
-  get(key) {
-    return get(this, key, true);
+
+  get (key) {
+    return get(this, key, true)
   }
-  peek(key) {
-    return get(this, key, false);
+
+  peek (key) {
+    return get(this, key, false)
   }
-  pop() {
+
+  pop () {
     const node = this[LRU_LIST].tail;
-    if (!node) return null;
+    if (!node)
+      return null
+
     del(this, node);
-    return node.value;
+    return node.value
   }
-  del(key) {
+
+  del (key) {
     del(this, this[CACHE].get(key));
   }
-  load(arr) {
+
+  load (arr) {
     // reset the cache
     this.reset();
+
     const now = Date.now();
     // A previous serialized cache has the most recent items first
     for (let l = arr.length - 1; l >= 0; l--) {
@@ -26655,7 +26915,8 @@ class LRUCache {
       const expiresAt = hit.e || 0;
       if (expiresAt === 0)
         // the item was created without expiration in a non aged cache
-        this.set(hit.k, hit.v);else {
+        this.set(hit.k, hit.v);
+      else {
         const maxAge = expiresAt - now;
         // dont add already expired items
         if (maxAge > 0) {
@@ -26664,34 +26925,44 @@ class LRUCache {
       }
     }
   }
-  prune() {
+
+  prune () {
     this[CACHE].forEach((value, key) => get(this, key, false));
   }
 }
+
 const get = (self, key, doUse) => {
   const node = self[CACHE].get(key);
   if (node) {
     const hit = node.value;
     if (isStale(self, hit)) {
       del(self, node);
-      if (!self[ALLOW_STALE]) return undefined;
+      if (!self[ALLOW_STALE])
+        return undefined
     } else {
       if (doUse) {
-        if (self[UPDATE_AGE_ON_GET]) node.value.now = Date.now();
+        if (self[UPDATE_AGE_ON_GET])
+          node.value.now = Date.now();
         self[LRU_LIST].unshiftNode(node);
       }
     }
-    return hit.value;
+    return hit.value
   }
 };
+
 const isStale = (self, hit) => {
-  if (!hit || !hit.maxAge && !self[MAX_AGE]) return false;
+  if (!hit || (!hit.maxAge && !self[MAX_AGE]))
+    return false
+
   const diff = Date.now() - hit.now;
-  return hit.maxAge ? diff > hit.maxAge : self[MAX_AGE] && diff > self[MAX_AGE];
+  return hit.maxAge ? diff > hit.maxAge
+    : self[MAX_AGE] && (diff > self[MAX_AGE])
 };
+
 const trim = self => {
   if (self[LENGTH] > self[MAX]) {
-    for (let walker = self[LRU_LIST].tail; self[LENGTH] > self[MAX] && walker !== null;) {
+    for (let walker = self[LRU_LIST].tail;
+      self[LENGTH] > self[MAX] && walker !== null;) {
       // We know that we're about to delete this one, and also
       // what the next least recently used key will be, so just
       // go ahead and set it now.
@@ -26701,17 +26972,21 @@ const trim = self => {
     }
   }
 };
+
 const del = (self, node) => {
   if (node) {
     const hit = node.value;
-    if (self[DISPOSE]) self[DISPOSE](hit.key, hit.value);
+    if (self[DISPOSE])
+      self[DISPOSE](hit.key, hit.value);
+
     self[LENGTH] -= hit.length;
     self[CACHE].delete(hit.key);
     self[LRU_LIST].removeNode(node);
   }
 };
+
 class Entry {
-  constructor(key, value, length, now, maxAge) {
+  constructor (key, value, length, now, maxAge) {
     this.key = key;
     this.value = value;
     this.length = length;
@@ -26719,14 +26994,18 @@ class Entry {
     this.maxAge = maxAge || 0;
   }
 }
+
 const forEachStep = (self, fn, node, thisp) => {
   let hit = node.value;
   if (isStale(self, hit)) {
     del(self, node);
-    if (!self[ALLOW_STALE]) hit = undefined;
+    if (!self[ALLOW_STALE])
+      hit = undefined;
   }
-  if (hit) fn.call(thisp, hit.value, hit.key, self);
+  if (hit)
+    fn.call(thisp, hit.value, hit.key, self);
 };
+
 var lruCache = LRUCache;
 
 // parse out just the options we care about
@@ -27933,7 +28212,6 @@ async function load(name, version, _ref, loader) {
       {
         console.warn(e); // eslint-disable-line no-console
       }
-
       throw new Error("Failed to load visualization: '".concat(sKey, "'"));
     });
   }
@@ -28066,7 +28344,6 @@ function create(_ref) {
         {
           console.warn("Visualization ".concat(name, " is not registered. Adding it now.")); // eslint-disable-line no-console
         }
-
         this.register({
           name,
           version
@@ -28077,7 +28354,6 @@ function create(_ref) {
         {
           console.warn("Version ".concat(version, " of ").concat(name, " is not registered. Falling back to version ").concat(versionToUse)); // eslint-disable-line no-console
         }
-
         version = versionToUse;
       }
       return tc[name].get(version) || p.get(typeInfo);
@@ -28155,7 +28431,7 @@ const DEFAULT_SNAPSHOT_CONFIG = /** @lends SnapshotConfiguration */{
 
 /**
  * @interface Configuration
- * @property {LoadType=} load Fallback load function for missing types
+ * @property {Function(LoadType):Promise<Visualization>=} load Fallback load function for missing types
  * @property {Context=} context Settings for the rendering instance
  * @property {Array<TypeInfo>=} types Visualization types to register
  * @property {Array<ThemeInfo>=} themes Themes to register
@@ -28313,7 +28589,6 @@ function nuked() {
       translator: locale.translator,
       nebbie: null // actual value is set further down
     };
-
     const halo = {
       app,
       root,
@@ -28475,7 +28750,6 @@ function nuked() {
                 {
                   console.error('Already mounted'); // eslint-disable-line no-console
                 }
-
                 return;
               }
               selectionsComponentReference = mount({
@@ -28577,6 +28851,7 @@ function nuked() {
            * @param {FrequencyMode=} [options.frequencyMode=none] Show frequency none|value|percent|relative
            * @param {boolean=} [options.histogram=false] Show histogram bar (not applicable for existing objects)
            * @param {SearchMode=} [options.search=true] Show the search bar permanently, using the toggle button or when in selection: false|true|toggle
+           * @param {boolean=} [options.showLock=false] Show the button for toggling locked state.
            * @param {boolean=} [options.toolbar=true] Show the toolbar
            * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields (not applicable for existing objects)
            * @param {boolean=} [options.dense=false] Reduces padding and text size (not applicable for existing objects)
@@ -28739,6 +29014,8 @@ function SessionMock() {
   };
 }
 
+/* eslint-disable no-underscore-dangle */
+
 // To cover test
 // eslint-disable-next-line no-undef
 const crt = globalThis.crypto || {
@@ -28750,7 +29027,7 @@ const crt = globalThis.crypto || {
 function uuidv4() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crt.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
 }
-function CreateSessionObjectMock() {
+function CreateSessionObjectMock(session) {
   return props => {
     const properties = extend$2({}, props);
     properties.qInfo = properties.qInfo || {};
@@ -28761,15 +29038,17 @@ function CreateSessionObjectMock() {
       delete properties._mock;
       layout = extend$2({}, properties, mockedInclusions);
     }
-    return Promise.resolve(_objectSpread2({
+    return Promise.resolve({
       on: () => {},
       once: () => {},
       getLayout: () => Promise.resolve(layout),
       getProperties: () => Promise.resolve(properties),
       getEffectiveProperties: () => Promise.resolve(properties),
       removeListener: () => {},
-      id: properties.qInfo.qId
-    }, properties));
+      id: properties.qInfo.qId,
+      properties,
+      session
+    });
   };
 }
 
@@ -28990,7 +29269,7 @@ function GetAppLayoutMock() {
 function fromGenericObjects(genericObjects) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const session = new SessionMock();
-  const createSessionObject = new CreateSessionObjectMock();
+  const createSessionObject = new CreateSessionObjectMock(session);
   const getObject = new GetObjectMock(genericObjects, options);
   const getAppLayout = new GetAppLayoutMock();
   const app = {