@nebula.js/stardust 5.0.0-alpha4 → 5.0.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v5.0.0-alpha4
+* @nebula.js/stardust v5.0.0
 * Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1009,6 +1009,26 @@
 			"zh-TW": "{0}/ {1}"
 		}
 	};
+	var Listbox_Cyclic = {
+		id: "Listbox.Cyclic",
+		locale: {
+			"de-DE": "Zyklische Dimension",
+			"en-US": "Cyclic dimension",
+			"es-ES": "Dimensión cíclica",
+			"fr-FR": "Dimension cyclique",
+			"it-IT": "Dimensione ciclica",
+			"ja-JP": "サイクリック軸",
+			"ko-KR": "순환 차원",
+			"nl-NL": "Cyclische dimensie",
+			"pl-PL": "Wymiar cykliczny",
+			"pt-BR": "Dimensão cíclica",
+			"ru-RU": "Циклическое измерение",
+			"sv-SE": "Cyklisk dimension",
+			"tr-TR": "Döngüsel boyut",
+			"zh-CN": "循环维度",
+			"zh-TW": "循環維度"
+		}
+	};
 	var Listbox_Dismiss = {
 		id: "Listbox.Dismiss",
 		locale: {
@@ -2013,6 +2033,7 @@
 		Cancel: Cancel$1,
 		CurrentSelections_All: CurrentSelections_All,
 		CurrentSelections_Of: CurrentSelections_Of,
+		Listbox_Cyclic: Listbox_Cyclic,
 		Listbox_Dismiss: Listbox_Dismiss,
 		Listbox_DrillDown: Listbox_DrillDown,
 		Listbox_ItemsOverflow: Listbox_ItemsOverflow,
@@ -3308,9 +3329,15 @@
 	      };
 	    },
 	    uiColor(c, shift) {
+	      const indexIsValid = typeof (c === null || c === void 0 ? void 0 : c.index) === 'number' && !Number.isNaN(c === null || c === void 0 ? void 0 : c.index);
+	      const colorIsValid = typeof (c === null || c === void 0 ? void 0 : c.color) === 'string';
+	      const somethingIsValid = indexIsValid || colorIsValid;
+	      if (!somethingIsValid) {
+	        return undefined;
+	      }
 	      // eslint-disable-next-line no-param-reassign
 	      shift = !!shift;
-	      if (c.index < 0 || typeof c.index === 'undefined') {
+	      if ((c === null || c === void 0 ? void 0 : c.index) < 0 || typeof (c === null || c === void 0 ? void 0 : c.index) === 'undefined') {
 	        return c.color;
 	      }
 	      if (typeof uiPalette === 'undefined') {
@@ -6827,7 +6854,7 @@
 		isPlainObject: isPlainObject
 	});
 
-	const _excluded$S = ["values", "unit", "step"];
+	const _excluded$T = ["values", "unit", "step"];
 	const sortBreakpointsValues = values => {
 	  const breakpointsAsArray = Object.keys(values).map(key => ({
 	    key,
@@ -6861,7 +6888,7 @@
 	      unit = 'px',
 	      step = 5
 	    } = breakpoints,
-	    other = _objectWithoutPropertiesLoose$2(breakpoints, _excluded$S);
+	    other = _objectWithoutPropertiesLoose$2(breakpoints, _excluded$T);
 	  const sortedValues = sortBreakpointsValues(values);
 	  const keys = Object.keys(sortedValues);
 	  function up(key) {
@@ -7981,7 +8008,7 @@
 	  return {};
 	}
 
-	const _excluded$R = ["breakpoints", "palette", "spacing", "shape"];
+	const _excluded$S = ["breakpoints", "palette", "spacing", "shape"];
 	function createTheme$2(options = {}, ...args) {
 	  const {
 	      breakpoints: breakpointsInput = {},
@@ -7989,7 +8016,7 @@
 	      spacing: spacingInput,
 	      shape: shapeInput = {}
 	    } = options,
-	    other = _objectWithoutPropertiesLoose$2(options, _excluded$R);
+	    other = _objectWithoutPropertiesLoose$2(options, _excluded$S);
 	  const breakpoints = createBreakpoints(breakpointsInput);
 	  const spacing = createSpacing(spacingInput);
 	  let muiTheme = deepmerge$1({
@@ -8047,7 +8074,7 @@
 	  });
 	}
 
-	const _excluded$Q = ["sx"];
+	const _excluded$R = ["sx"];
 	const splitProps = props => {
 	  var _props$theme$unstable, _props$theme;
 	  const result = {
@@ -8068,7 +8095,7 @@
 	  const {
 	      sx: inSx
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$2(props, _excluded$Q);
+	    other = _objectWithoutPropertiesLoose$2(props, _excluded$R);
 	  const {
 	    systemProps,
 	    otherProps
@@ -8119,7 +8146,7 @@
 
 	function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-	const _excluded$P = ["className", "component"];
+	const _excluded$Q = ["className", "component"];
 	function createBox(options = {}) {
 	  const {
 	    themeId,
@@ -8137,7 +8164,7 @@
 	        className,
 	        component = 'div'
 	      } = _extendSxProp,
-	      other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$P);
+	      other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$Q);
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$5({
 	      as: component,
 	      ref: ref,
@@ -8227,7 +8254,7 @@
 		getFunctionName: getFunctionName
 	});
 
-	const _excluded$O = ["ownerState"],
+	const _excluded$P = ["ownerState"],
 	  _excluded2$6 = ["variants"],
 	  _excluded3$2 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 	function isEmpty$3(obj) {
@@ -8271,7 +8298,7 @@
 	  let {
 	      ownerState
 	    } = _ref,
-	    props = _objectWithoutPropertiesLoose$2(_ref, _excluded$O);
+	    props = _objectWithoutPropertiesLoose$2(_ref, _excluded$P);
 	  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends$5({
 	    ownerState
 	  }, props)) : callableStyle;
@@ -8751,11 +8778,11 @@
 
 	class Timeout {
 	  constructor() {
-	    this.currentId = 0;
+	    this.currentId = null;
 	    this.clear = () => {
-	      if (this.currentId !== 0) {
+	      if (this.currentId !== null) {
 	        clearTimeout(this.currentId);
-	        this.currentId = 0;
+	        this.currentId = null;
 	      }
 	    };
 	    this.disposeEffect = () => {
@@ -8771,7 +8798,7 @@
 	  start(delay, fn) {
 	    this.clear();
 	    this.currentId = setTimeout(() => {
-	      this.currentId = 0;
+	      this.currentId = null;
 	      fn();
 	    }, delay);
 	  }
@@ -9015,6 +9042,22 @@
 	  });
 	}
 
+	const _excluded$O = ["value"];
+	const RtlContext = /*#__PURE__*/reactExports.createContext();
+	function RtlProvider(_ref) {
+	  let {
+	      value
+	    } = _ref,
+	    props = _objectWithoutPropertiesLoose$2(_ref, _excluded$O);
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(RtlContext.Provider, _extends$5({
+	    value: value != null ? value : true
+	  }, props));
+	}
+	const useRtl = () => {
+	  const value = reactExports.useContext(RtlContext);
+	  return value != null ? value : false;
+	};
+
 	const EMPTY_THEME = {};
 	function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
 	  return reactExports.useMemo(() => {
@@ -9054,11 +9097,15 @@
 	  const upperPrivateTheme = useTheme$3() || EMPTY_THEME;
 	  const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
 	  const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+	  const rtlValue = engineTheme.direction === 'rtl';
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, {
 	    theme: privateTheme,
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx(ThemeContext$2.Provider, {
 	      value: engineTheme,
-	      children: children
+	      children: /*#__PURE__*/jsxRuntimeExports.jsx(RtlProvider, {
+	        value: rtlValue,
+	        children: children
+	      })
 	    })
 	  });
 	}
@@ -12051,7 +12098,7 @@
 	function getButtonUtilityClass(slot) {
 	  return generateUtilityClass$1('MuiButton', slot);
 	}
-	const buttonClasses = generateUtilityClasses$1('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+	const buttonClasses = generateUtilityClasses$1('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 	var buttonClasses$1 = buttonClasses;
 
 	/**
@@ -12077,10 +12124,10 @@
 	    classes
 	  } = ownerState;
 	  const slots = {
-	    root: ['root', variant, `${variant}${capitalize$1(color)}`, `size${capitalize$1(size)}`, `${variant}Size${capitalize$1(size)}`, color === 'inherit' && 'colorInherit', disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
+	    root: ['root', variant, `${variant}${capitalize$1(color)}`, `size${capitalize$1(size)}`, `${variant}Size${capitalize$1(size)}`, `color${capitalize$1(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
 	    label: ['label'],
-	    startIcon: ['startIcon', `iconSize${capitalize$1(size)}`],
-	    endIcon: ['endIcon', `iconSize${capitalize$1(size)}`]
+	    startIcon: ['icon', 'startIcon', `iconSize${capitalize$1(size)}`],
+	    endIcon: ['icon', 'endIcon', `iconSize${capitalize$1(size)}`]
 	  };
 	  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
 	  return _extends$7({}, classes, composedClasses);
@@ -12670,7 +12717,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "41f6" ;
+	const NEBULA_VERSION_HASH = "e6be" ;
 	ClassNameGenerator.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -12902,7 +12949,7 @@
 	  const appRef = React$1.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "5.0.0-alpha4" );
+	  element.setAttribute('data-nebulajs-version', "5.0.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -13436,6 +13483,254 @@
 	  return props;
 	}
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	function createUseThemeProps(name) {
+	  return useThemeProps$1;
+	}
+
+	function getIconButtonUtilityClass(slot) {
+	  return generateUtilityClass$1('MuiIconButton', slot);
+	}
+	const iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+
+	const _excluded$z = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+	const useUtilityClasses$n = ownerState => {
+	  const {
+	    classes,
+	    disabled,
+	    color,
+	    edge,
+	    size
+	  } = ownerState;
+	  const slots = {
+	    root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize$1(color)}`, edge && `edge${capitalize$1(edge)}`, `size${capitalize$1(size)}`]
+	  };
+	  return composeClasses(slots, getIconButtonUtilityClass, classes);
+	};
+	const IconButtonRoot = styled(ButtonBase$1, {
+	  name: 'MuiIconButton',
+	  slot: 'Root',
+	  overridesResolver: (props, styles) => {
+	    const {
+	      ownerState
+	    } = props;
+	    return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize$1(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize$1(ownerState.edge)}`], styles[`size${capitalize$1(ownerState.size)}`]];
+	  }
+	})(({
+	  theme,
+	  ownerState
+	}) => _extends$7({
+	  textAlign: 'center',
+	  flex: '0 0 auto',
+	  fontSize: theme.typography.pxToRem(24),
+	  padding: 8,
+	  borderRadius: '50%',
+	  overflow: 'visible',
+	  // Explicitly set the default value to solve a bug on IE11.
+	  color: (theme.vars || theme).palette.action.active,
+	  transition: theme.transitions.create('background-color', {
+	    duration: theme.transitions.duration.shortest
+	  })
+	}, !ownerState.disableRipple && {
+	  '&:hover': {
+	    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(theme.palette.action.active, theme.palette.action.hoverOpacity),
+	    // Reset on touch devices, it doesn't add specificity
+	    '@media (hover: none)': {
+	      backgroundColor: 'transparent'
+	    }
+	  }
+	}, ownerState.edge === 'start' && {
+	  marginLeft: ownerState.size === 'small' ? -3 : -12
+	}, ownerState.edge === 'end' && {
+	  marginRight: ownerState.size === 'small' ? -3 : -12
+	}), ({
+	  theme,
+	  ownerState
+	}) => {
+	  var _palette;
+	  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+	  return _extends$7({}, ownerState.color === 'inherit' && {
+	    color: 'inherit'
+	  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends$7({
+	    color: palette == null ? void 0 : palette.main
+	  }, !ownerState.disableRipple && {
+	    '&:hover': _extends$7({}, palette && {
+	      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(palette.main, theme.palette.action.hoverOpacity)
+	    }, {
+	      // Reset on touch devices, it doesn't add specificity
+	      '@media (hover: none)': {
+	        backgroundColor: 'transparent'
+	      }
+	    })
+	  }), ownerState.size === 'small' && {
+	    padding: 5,
+	    fontSize: theme.typography.pxToRem(18)
+	  }, ownerState.size === 'large' && {
+	    padding: 12,
+	    fontSize: theme.typography.pxToRem(28)
+	  }, {
+	    [`&.${iconButtonClasses.disabled}`]: {
+	      backgroundColor: 'transparent',
+	      color: (theme.vars || theme).palette.action.disabled
+	    }
+	  });
+	});
+
+	/**
+	 * Refer to the [Icons](/material-ui/icons/) section of the documentation
+	 * regarding the available icon options.
+	 */
+	const IconButton = /*#__PURE__*/reactExports.forwardRef(function IconButton(inProps, ref) {
+	  const props = useThemeProps$1({
+	    props: inProps,
+	    name: 'MuiIconButton'
+	  });
+	  const {
+	      edge = false,
+	      children,
+	      className,
+	      color = 'default',
+	      disabled = false,
+	      disableFocusRipple = false,
+	      size = 'medium'
+	    } = props,
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
+	  const ownerState = _extends$7({}, props, {
+	    edge,
+	    color,
+	    disabled,
+	    disableFocusRipple,
+	    size
+	  });
+	  const classes = useUtilityClasses$n(ownerState);
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(IconButtonRoot, _extends$7({
+	    className: clsx(classes.root, className),
+	    centerRipple: true,
+	    focusRipple: !disableFocusRipple,
+	    disabled: disabled,
+	    ref: ref
+	  }, other, {
+	    ownerState: ownerState,
+	    children: children
+	  }));
+	});
+	var IconButton$1 = IconButton;
+
+	function getTypographyUtilityClass(slot) {
+	  return generateUtilityClass$1('MuiTypography', slot);
+	}
+	generateUtilityClasses$1('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
+
+	const _excluded$y = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+	const useUtilityClasses$m = ownerState => {
+	  const {
+	    align,
+	    gutterBottom,
+	    noWrap,
+	    paragraph,
+	    variant,
+	    classes
+	  } = ownerState;
+	  const slots = {
+	    root: ['root', variant, ownerState.align !== 'inherit' && `align${capitalize$1(align)}`, gutterBottom && 'gutterBottom', noWrap && 'noWrap', paragraph && 'paragraph']
+	  };
+	  return composeClasses(slots, getTypographyUtilityClass, classes);
+	};
+	const TypographyRoot = styled('span', {
+	  name: 'MuiTypography',
+	  slot: 'Root',
+	  overridesResolver: (props, styles) => {
+	    const {
+	      ownerState
+	    } = props;
+	    return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${capitalize$1(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
+	  }
+	})(({
+	  theme,
+	  ownerState
+	}) => _extends$7({
+	  margin: 0
+	}, ownerState.variant === 'inherit' && {
+	  // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
+	  font: 'inherit'
+	}, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
+	  textAlign: ownerState.align
+	}, ownerState.noWrap && {
+	  overflow: 'hidden',
+	  textOverflow: 'ellipsis',
+	  whiteSpace: 'nowrap'
+	}, ownerState.gutterBottom && {
+	  marginBottom: '0.35em'
+	}, ownerState.paragraph && {
+	  marginBottom: 16
+	}));
+	const defaultVariantMapping = {
+	  h1: 'h1',
+	  h2: 'h2',
+	  h3: 'h3',
+	  h4: 'h4',
+	  h5: 'h5',
+	  h6: 'h6',
+	  subtitle1: 'h6',
+	  subtitle2: 'h6',
+	  body1: 'p',
+	  body2: 'p',
+	  inherit: 'p'
+	};
+
+	// TODO v6: deprecate these color values in v5.x and remove the transformation in v6
+	const colorTransformations = {
+	  primary: 'primary.main',
+	  textPrimary: 'text.primary',
+	  secondary: 'secondary.main',
+	  textSecondary: 'text.secondary',
+	  error: 'error.main'
+	};
+	const transformDeprecatedColors = color => {
+	  return colorTransformations[color] || color;
+	};
+	const Typography = /*#__PURE__*/reactExports.forwardRef(function Typography(inProps, ref) {
+	  const themeProps = useThemeProps$1({
+	    props: inProps,
+	    name: 'MuiTypography'
+	  });
+	  const color = transformDeprecatedColors(themeProps.color);
+	  const props = extendSxProp(_extends$7({}, themeProps, {
+	    color
+	  }));
+	  const {
+	      align = 'inherit',
+	      className,
+	      component,
+	      gutterBottom = false,
+	      noWrap = false,
+	      paragraph = false,
+	      variant = 'body1',
+	      variantMapping = defaultVariantMapping
+	    } = props,
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$y);
+	  const ownerState = _extends$7({}, props, {
+	    align,
+	    color,
+	    className,
+	    component,
+	    gutterBottom,
+	    noWrap,
+	    paragraph,
+	    variant,
+	    variantMapping
+	  });
+	  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
+	  const classes = useUtilityClasses$m(ownerState);
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(TypographyRoot, _extends$7({
+	    as: Component,
+	    ref: ref,
+	    ownerState: ownerState,
+	    className: clsx(classes.root, className)
+	  }, other));
+	});
+	var Typography$1 = Typography;
+
 	/**
 	 *
 	 * Demos:
@@ -16018,7 +16313,7 @@
 	}
 	generateUtilityClasses(COMPONENT_NAME, ['root']);
 
-	const _excluded$z = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+	const _excluded$x = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
 	  _excluded2$3 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 	function flipPlacement(placement, direction) {
 	  if (direction === 'ltr') {
@@ -16043,7 +16338,7 @@
 	function isHTMLElement(element) {
 	  return element.nodeType !== undefined;
 	}
-	const useUtilityClasses$n = () => {
+	const useUtilityClasses$l = () => {
 	  const slots = {
 	    root: ['root']
 	  };
@@ -16068,7 +16363,7 @@
 	      // @ts-ignore internal logic
 	      // prevent from spreading to DOM, it can come from the parent component e.g. Select.
 	    } = props,
-	    other = _objectWithoutPropertiesLoose(props, _excluded$z);
+	    other = _objectWithoutPropertiesLoose(props, _excluded$x);
 	  const tooltipRef = reactExports.useRef(null);
 	  const ownRef = useForkRef(tooltipRef, forwardedRef);
 	  const popperRef = reactExports.useRef(null);
@@ -16145,7 +16440,7 @@
 	  if (TransitionProps !== null) {
 	    childProps.TransitionProps = TransitionProps;
 	  }
-	  const classes = useUtilityClasses$n();
+	  const classes = useUtilityClasses$l();
 	  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
 	  const rootProps = useSlotProps({
 	    elementType: Root,
@@ -16250,7 +16545,7 @@
 	  });
 	});
 
-	const _excluded$y = ["onChange", "maxRows", "minRows", "style", "value"];
+	const _excluded$w = ["onChange", "maxRows", "minRows", "style", "value"];
 	function getStyleValue(value) {
 	  return parseInt(value, 10) || 0;
 	}
@@ -16292,7 +16587,7 @@
 	      style,
 	      value
 	    } = props,
-	    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+	    other = _objectWithoutPropertiesLoose(props, _excluded$w);
 	  const {
 	    current: isControlled
 	  } = reactExports.useRef(value != null);
@@ -16403,7 +16698,8 @@
 	      ref: handleRef
 	      // Apply the rows prop to get a "correct" first SSR paint
 	      ,
-	      rows: minRows
+	      rows: minRows,
+	      style: style
 	    }, other)), /*#__PURE__*/jsxRuntimeExports.jsx("textarea", {
 	      "aria-hidden": true,
 	      className: props.className,
@@ -16418,249 +16714,6 @@
 	  });
 	});
 
-	function getIconButtonUtilityClass(slot) {
-	  return generateUtilityClass$1('MuiIconButton', slot);
-	}
-	const iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
-
-	const _excluded$x = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
-	const useUtilityClasses$m = ownerState => {
-	  const {
-	    classes,
-	    disabled,
-	    color,
-	    edge,
-	    size
-	  } = ownerState;
-	  const slots = {
-	    root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize$1(color)}`, edge && `edge${capitalize$1(edge)}`, `size${capitalize$1(size)}`]
-	  };
-	  return composeClasses(slots, getIconButtonUtilityClass, classes);
-	};
-	const IconButtonRoot = styled(ButtonBase$1, {
-	  name: 'MuiIconButton',
-	  slot: 'Root',
-	  overridesResolver: (props, styles) => {
-	    const {
-	      ownerState
-	    } = props;
-	    return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize$1(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize$1(ownerState.edge)}`], styles[`size${capitalize$1(ownerState.size)}`]];
-	  }
-	})(({
-	  theme,
-	  ownerState
-	}) => _extends$7({
-	  textAlign: 'center',
-	  flex: '0 0 auto',
-	  fontSize: theme.typography.pxToRem(24),
-	  padding: 8,
-	  borderRadius: '50%',
-	  overflow: 'visible',
-	  // Explicitly set the default value to solve a bug on IE11.
-	  color: (theme.vars || theme).palette.action.active,
-	  transition: theme.transitions.create('background-color', {
-	    duration: theme.transitions.duration.shortest
-	  })
-	}, !ownerState.disableRipple && {
-	  '&:hover': {
-	    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(theme.palette.action.active, theme.palette.action.hoverOpacity),
-	    // Reset on touch devices, it doesn't add specificity
-	    '@media (hover: none)': {
-	      backgroundColor: 'transparent'
-	    }
-	  }
-	}, ownerState.edge === 'start' && {
-	  marginLeft: ownerState.size === 'small' ? -3 : -12
-	}, ownerState.edge === 'end' && {
-	  marginRight: ownerState.size === 'small' ? -3 : -12
-	}), ({
-	  theme,
-	  ownerState
-	}) => {
-	  var _palette;
-	  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
-	  return _extends$7({}, ownerState.color === 'inherit' && {
-	    color: 'inherit'
-	  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends$7({
-	    color: palette == null ? void 0 : palette.main
-	  }, !ownerState.disableRipple && {
-	    '&:hover': _extends$7({}, palette && {
-	      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(palette.main, theme.palette.action.hoverOpacity)
-	    }, {
-	      // Reset on touch devices, it doesn't add specificity
-	      '@media (hover: none)': {
-	        backgroundColor: 'transparent'
-	      }
-	    })
-	  }), ownerState.size === 'small' && {
-	    padding: 5,
-	    fontSize: theme.typography.pxToRem(18)
-	  }, ownerState.size === 'large' && {
-	    padding: 12,
-	    fontSize: theme.typography.pxToRem(28)
-	  }, {
-	    [`&.${iconButtonClasses.disabled}`]: {
-	      backgroundColor: 'transparent',
-	      color: (theme.vars || theme).palette.action.disabled
-	    }
-	  });
-	});
-
-	/**
-	 * Refer to the [Icons](/material-ui/icons/) section of the documentation
-	 * regarding the available icon options.
-	 */
-	const IconButton = /*#__PURE__*/reactExports.forwardRef(function IconButton(inProps, ref) {
-	  const props = useThemeProps$1({
-	    props: inProps,
-	    name: 'MuiIconButton'
-	  });
-	  const {
-	      edge = false,
-	      children,
-	      className,
-	      color = 'default',
-	      disabled = false,
-	      disableFocusRipple = false,
-	      size = 'medium'
-	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$x);
-	  const ownerState = _extends$7({}, props, {
-	    edge,
-	    color,
-	    disabled,
-	    disableFocusRipple,
-	    size
-	  });
-	  const classes = useUtilityClasses$m(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(IconButtonRoot, _extends$7({
-	    className: clsx(classes.root, className),
-	    centerRipple: true,
-	    focusRipple: !disableFocusRipple,
-	    disabled: disabled,
-	    ref: ref
-	  }, other, {
-	    ownerState: ownerState,
-	    children: children
-	  }));
-	});
-	var IconButton$1 = IconButton;
-
-	function getTypographyUtilityClass(slot) {
-	  return generateUtilityClass$1('MuiTypography', slot);
-	}
-	generateUtilityClasses$1('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
-
-	const _excluded$w = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-	const useUtilityClasses$l = ownerState => {
-	  const {
-	    align,
-	    gutterBottom,
-	    noWrap,
-	    paragraph,
-	    variant,
-	    classes
-	  } = ownerState;
-	  const slots = {
-	    root: ['root', variant, ownerState.align !== 'inherit' && `align${capitalize$1(align)}`, gutterBottom && 'gutterBottom', noWrap && 'noWrap', paragraph && 'paragraph']
-	  };
-	  return composeClasses(slots, getTypographyUtilityClass, classes);
-	};
-	const TypographyRoot = styled('span', {
-	  name: 'MuiTypography',
-	  slot: 'Root',
-	  overridesResolver: (props, styles) => {
-	    const {
-	      ownerState
-	    } = props;
-	    return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${capitalize$1(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
-	  }
-	})(({
-	  theme,
-	  ownerState
-	}) => _extends$7({
-	  margin: 0
-	}, ownerState.variant === 'inherit' && {
-	  // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
-	  font: 'inherit'
-	}, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
-	  textAlign: ownerState.align
-	}, ownerState.noWrap && {
-	  overflow: 'hidden',
-	  textOverflow: 'ellipsis',
-	  whiteSpace: 'nowrap'
-	}, ownerState.gutterBottom && {
-	  marginBottom: '0.35em'
-	}, ownerState.paragraph && {
-	  marginBottom: 16
-	}));
-	const defaultVariantMapping = {
-	  h1: 'h1',
-	  h2: 'h2',
-	  h3: 'h3',
-	  h4: 'h4',
-	  h5: 'h5',
-	  h6: 'h6',
-	  subtitle1: 'h6',
-	  subtitle2: 'h6',
-	  body1: 'p',
-	  body2: 'p',
-	  inherit: 'p'
-	};
-
-	// TODO v6: deprecate these color values in v5.x and remove the transformation in v6
-	const colorTransformations = {
-	  primary: 'primary.main',
-	  textPrimary: 'text.primary',
-	  secondary: 'secondary.main',
-	  textSecondary: 'text.secondary',
-	  error: 'error.main'
-	};
-	const transformDeprecatedColors = color => {
-	  return colorTransformations[color] || color;
-	};
-	const Typography = /*#__PURE__*/reactExports.forwardRef(function Typography(inProps, ref) {
-	  const themeProps = useThemeProps$1({
-	    props: inProps,
-	    name: 'MuiTypography'
-	  });
-	  const color = transformDeprecatedColors(themeProps.color);
-	  const props = extendSxProp(_extends$7({}, themeProps, {
-	    color
-	  }));
-	  const {
-	      align = 'inherit',
-	      className,
-	      component,
-	      gutterBottom = false,
-	      noWrap = false,
-	      paragraph = false,
-	      variant = 'body1',
-	      variantMapping = defaultVariantMapping
-	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$w);
-	  const ownerState = _extends$7({}, props, {
-	    align,
-	    color,
-	    className,
-	    component,
-	    gutterBottom,
-	    noWrap,
-	    paragraph,
-	    variant,
-	    variantMapping
-	  });
-	  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-	  const classes = useUtilityClasses$l(ownerState);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(TypographyRoot, _extends$7({
-	    as: Component,
-	    ref: ref,
-	    ownerState: ownerState,
-	    className: clsx(classes.root, className)
-	  }, other));
-	});
-	var Typography$1 = Typography;
-
 	var useThemeWithoutDefault = {};
 
 	Object.defineProperty(useThemeWithoutDefault, "__esModule", {
@@ -17455,11 +17508,6 @@
 	});
 	var Backdrop$1 = Backdrop;
 
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	function createUseThemeProps(name) {
-	  return useThemeProps$1;
-	}
-
 	function getBadgeUtilityClass(slot) {
 	  return generateUtilityClass$1('MuiBadge', slot);
 	}
@@ -20110,13 +20158,15 @@
 	    }
 	  }, [autoFocus]);
 	  reactExports.useImperativeHandle(actions, () => ({
-	    adjustStyleForScrollbar: (containerElement, theme) => {
+	    adjustStyleForScrollbar: (containerElement, {
+	      direction
+	    }) => {
 	      // Let's ignore that piece of logic if users are already overriding the width
 	      // of the menu.
 	      const noExplicitWidth = !listRef.current.style.width;
 	      if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
 	        const scrollbarSize = `${getScrollbarSize$1(ownerDocument(containerElement))}px`;
-	        listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
+	        listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
 	        listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
 	      }
 	      return listRef.current;
@@ -21370,11 +21420,11 @@
 	  y: 0
 	};
 	function composeEventHandler(handler, eventHandler) {
-	  return event => {
+	  return (event, ...params) => {
 	    if (eventHandler) {
-	      eventHandler(event);
+	      eventHandler(event, ...params);
 	    }
-	    handler(event);
+	    handler(event, ...params);
 	  };
 	}
 
@@ -21421,7 +21471,7 @@
 	    children: childrenProp
 	  });
 	  const theme = useTheme$2();
-	  const isRtl = theme.direction === 'rtl';
+	  const isRtl = useRtl();
 	  const [childNode, setChildNode] = reactExports.useState();
 	  const [arrowRef, setArrowRef] = reactExports.useState(null);
 	  const ignoreNonTouchEvents = reactExports.useRef(false);
@@ -22790,31 +22840,52 @@
 	  } = _ref;
 	  return (isAlternative(cell) || isExcluded(cell)) && checkboxes;
 	};
-	const getValueStateClasses = _ref2 => {
+	function getSelectionStateClass(_ref2) {
+	  let {
+	    cell,
+	    showGray
+	  } = _ref2;
+	  let selectionStateClass;
+	  switch (cell.qState) {
+	    case 'XS':
+	      selectionStateClass = showGray ? rowColClasses.XS : rowColClasses.S;
+	      break;
+	    case 'S':
+	    case 'L':
+	      selectionStateClass = rowColClasses.S;
+	      break;
+	    case 'A':
+	      selectionStateClass = showGray ? rowColClasses.A : false;
+	      break;
+	    case 'X':
+	    case 'XL':
+	      selectionStateClass = showGray ? rowColClasses.X : false;
+	      break;
+	    default:
+	      selectionStateClass = false;
+	  }
+	  return selectionStateClass;
+	}
+	const getValueStateClasses = _ref3 => {
 	  let {
 	    column,
 	    histogram,
-	    checkboxes,
 	    cell,
 	    showGray
-	  } = _ref2;
+	  } = _ref3;
+	  if (!cell) {
+	    return [];
+	  }
 	  const clazzArr = [column ? rowColClasses.column : rowColClasses.row];
 	  if (!histogram) {
 	    clazzArr.push(rowColClasses.rowBorderBottom);
 	  }
-	  if (!cell) {
-	    return [];
-	  }
-	  if (!checkboxes) {
-	    if (cell.qState === 'XS') {
-	      clazzArr.push(showGray ? rowColClasses.XS : rowColClasses.S);
-	    } else if (cell.qState === 'S' || cell.qState === 'L') {
-	      clazzArr.push(rowColClasses.S);
-	    } else if (showGray && isAlternative(cell)) {
-	      clazzArr.push(rowColClasses.A);
-	    } else if (showGray && isExcluded(cell)) {
-	      clazzArr.push(rowColClasses.X);
-	    }
+	  const selectionStateClass = getSelectionStateClass({
+	    cell,
+	    showGray
+	  });
+	  if (selectionStateClass) {
+	    clazzArr.push(selectionStateClass);
 	  }
 	  return clazzArr;
 	};
@@ -22881,15 +22952,27 @@
 	  }
 	  return sizes.freqMaxWidth;
 	};
-	const getSelectedStyle = _ref3 => {
+	const getRowSelectionStyle = _ref3 => {
 	  let {
 	    theme,
+	    checkboxes,
 	    styles,
-	    selectedState
+	    selectionState
 	  } = _ref3;
+	  if (checkboxes) {
+	    if (selectionState === 'selected') {
+	      return {
+	        ["& .".concat(rowColClasses.labelText)]: {
+	          // Override labels (value and frequency count) color when selected.
+	          color: styles.selections.selected
+	        }
+	      };
+	    }
+	    return {};
+	  }
 	  const selectionStyles = styles.selections;
-	  const backgroundColor = selectionStyles[selectedState];
-	  const contrastTextColor = selectionStyles["".concat(selectedState, "Contrast")];
+	  const backgroundColor = selectionStyles[selectionState];
+	  const contrastTextColor = selectionStyles["".concat(selectionState, "Contrast")];
 	  return {
 	    background: backgroundColor,
 	    color: contrastTextColor,
@@ -22935,16 +23018,29 @@
 	  } = _ref4;
 	  const _styles$content = styles.content,
 	    contentFontStyles = _objectWithoutProperties(_styles$content, _excluded$5);
-	  const selectStyle = getSelectedStyle({
+	  const rowSelectionStyle = getRowSelectionStyle({
 	    theme,
 	    styles,
-	    selectedState: 'selected'
+	    checkboxes,
+	    selectionState: 'selected'
 	  });
-	  const excludedSelectStyle = getSelectedStyle({
+	  const rowExcludedStyle = getRowSelectionStyle({
 	    theme,
 	    styles,
-	    selectedState: 'excluded'
+	    checkboxes,
+	    selectionState: 'excluded'
 	  });
+	  const barDefaultFilledStyle = {
+	    height: '100%',
+	    transition: 'width 0.2s',
+	    border: "".concat(barBorderWidthPx, "px solid"),
+	    borderColor: '#D9D9D9',
+	    // overridden by selected color (classes.S),
+	    backgroundColor: '#FAFAFA'
+	  };
+	  const barSelectedFilledStyle = {
+	    opacity: '30%'
+	  };
 	  return {
 	    '&:focus': {
 	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
@@ -23026,26 +23122,33 @@
 	      color: contentFontStyles.color
 	    },
 	    // Selection styles (S=Selected, XS=ExcludedSelected, A=Alternative, X=Excluded).
-	    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, selectStyle), {}, {
+	    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, rowSelectionStyle), {}, {
 	      border: isGridMode ? 'none' : undefined
 	    }),
-	    ["& .".concat(rowColClasses.XS)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
+	    ["& .".concat(rowColClasses.XS)]: _objectSpread2(_objectSpread2({}, getRowSelectionStyle({
 	      theme,
 	      styles,
-	      selectedState: 'selectedExcluded'
+	      checkboxes,
+	      selectionState: 'selectedExcluded'
 	    })), {}, {
 	      border: isGridMode ? 'none' : undefined
 	    }),
-	    ["& .".concat(rowColClasses.A)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
+	    ["& .".concat(rowColClasses.A)]: _objectSpread2(_objectSpread2({}, getRowSelectionStyle({
 	      theme,
 	      styles,
-	      selectedState: 'alternative'
+	      checkboxes,
+	      selectionState: 'alternative'
 	    })), {}, {
 	      border: isGridMode ? 'none' : undefined
 	    }),
-	    ["& .".concat(rowColClasses.X)]: _objectSpread2(_objectSpread2({}, excludedSelectStyle), {}, {
+	    ["& .".concat(rowColClasses.X)]: _objectSpread2(_objectSpread2({}, rowExcludedStyle), {}, {
 	      border: isGridMode ? 'none' : undefined
 	    }),
+	    ["& .".concat(rowColClasses.X, ", & .").concat(rowColClasses.XS)]: {
+	      // Override the selected color for bar-filled, when the value is selected and excluded.
+	      border: isGridMode ? 'none' : undefined,
+	      ["& .".concat(rowColClasses.barSelected, " .bar-filled")]: _objectSpread2({}, barDefaultFilledStyle)
+	    },
 	    ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
 	      zIndex: 3,
 	      justifyContent: 'flex-end'
@@ -23081,33 +23184,23 @@
 	      width: "calc(100% - ".concat(barPadPx * 2, "px)"),
 	      display: 'flex',
 	      alignItems: 'center',
-	      '& .bar-filled': {
-	        border: "".concat(barBorderWidthPx, "px solid"),
-	        borderColor: '#D9D9D9',
-	        transition: 'width 0.2s',
-	        backgroundColor: '#FAFAFA',
-	        height: '100%'
-	      }
+	      '& .bar-filled': _objectSpread2({}, barDefaultFilledStyle)
 	    },
 	    ["& .".concat(rowColClasses.barSelected)]: {
-	      '& .bar-filled': {
-	        opacity: '30%',
-	        background: theme.palette.background.lighter
-	      }
+	      '& .bar-filled': _objectSpread2({}, barSelectedFilledStyle)
 	    },
 	    ["& .".concat(rowColClasses.barWithCheckbox)]: {
 	      left: direction === 'rtl' ? barPadPx : barWithCheckboxLeftPadPx,
 	      width: "calc(100% - ".concat(barWithCheckboxLeftPadPx + barPadPx, "px)")
 	    },
 	    ["& .".concat(rowColClasses.barSelectedWithCheckbox)]: {
-	      '& .bar-filled': {
-	        opacity: '30%',
-	        background: selectStyle.background || '#BFE5D0',
-	        borderColor: selectStyle.background || '#BFE5D0'
-	      }
+	      '& .bar-filled': _objectSpread2(_objectSpread2({}, barSelectedFilledStyle), {}, {
+	        backgroundColor: styles.selections.selected || '#BFE5D0',
+	        borderColor: styles.selections.selected
+	      })
 	    },
 	    ["& .".concat(rowColClasses.excludedTextWithCheckbox)]: {
-	      color: '#828282',
+	      color: styles.content.color,
 	      fontStyle: 'italic'
 	    }
 	  };
@@ -23582,94 +23675,6 @@
 	  return c;
 	}
 
-	/* eslint-disable import/prefer-default-export */
-	const LOC_STATES = {
-	  S: 'Object.Listbox.Selected',
-	  A: 'Object.Listbox.Alternative',
-	  O: 'Object.Listbox.Optional',
-	  XS: 'Object.Listbox.SelectedExcluded',
-	  L: 'Object.Listbox.Locked',
-	  X: 'Object.Listbox.Excluded',
-	  XL: 'Object.Listbox.ExcludedLock'
-	};
-	function getValueLabel(_ref) {
-	  let {
-	    translator: translatorDynamic,
-	    label,
-	    qState,
-	    isSelected,
-	    currentIndex,
-	    maxIndex,
-	    showSearch
-	  } = _ref;
-	  const stateTranslation = LOC_STATES[qState];
-	  const state = translatorDynamic.get(stateTranslation);
-	  const srStringArr = [];
-	  if (isSelected) {
-	    const navTranslation = showSearch ? 'Listbox.ScreenReader.SearchThenSelectionsMenu.WithAccSelMenu' : 'Listbox.ScreenReader.SelectionMenu.WithAccSelMenu';
-	    const nav = translatorDynamic.get(navTranslation);
-	    srStringArr.push(nav);
-	  }
-	  const valueString = "".concat(label, " ").concat(state);
-	  const indexString = translatorDynamic.get('CurrentSelections.Of', [currentIndex + 1, maxIndex + 1]); // E.g. 3 of 20
-	  srStringArr.unshift(valueString, indexString);
-	  const srString = srStringArr.join('. ').trim();
-	  return srString;
-	}
-
-	/**
-	 * Announces the selection state.
-	 *
-	 * @ignore
-	 * @param {Layout} object
-	 * @returns {Element} An (invisible) component.
-	 */
-	function ScreenReaderForSelections(_ref2) {
-	  var _layout$qListObject;
-	  let {
-	    layout
-	  } = _ref2;
-	  const {
-	    translator: translatorDynamic
-	  } = reactExports.useContext(InstanceContext);
-	  const {
-	    qStateCounts: s = {}
-	  } = (layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qDimensionInfo) || {};
-	  const count = s.qSelected + s.qSelectedExcluded + s.qLocked + s.qLockedExcluded;
-	  let t;
-	  switch (count) {
-	    case 0:
-	      t = 'ScreenReader.ZeroSelected';
-	      break;
-	    case 1:
-	      t = 'ScreenReader.OneSelected';
-	      break;
-	    default:
-	      t = 'ScreenReader.ManySelected';
-	      break;
-	  }
-	  const text = translatorDynamic.get(t, [count]);
-	  return /*#__PURE__*/React$1.createElement("div", {
-	    className: "screenReaderOnly",
-	    "aria-live": "assertive"
-	  }, text);
-	}
-	function getScreenReaderSearchText(listCount) {
-	  let t;
-	  switch (listCount) {
-	    case 0:
-	      t = 'Listbox.NoMatchesForYourTerms';
-	      break;
-	    case 1:
-	      t = 'ScreenReader.OneSearchResult';
-	      break;
-	    default:
-	      t = 'ScreenReader.ManySearchResults';
-	      break;
-	  }
-	  return t;
-	}
-
 	const KEYS = Object.freeze({
 	  ENTER: 13,
 	  ESCAPE: 27,
@@ -23955,6 +23960,40 @@
 	  return ALLOWED_OPTIONS.includes(valueTextAlign) ? valueTextAlign : 'left';
 	}
 
+	const LOC_STATES = {
+	  S: 'Object.Listbox.Selected',
+	  A: 'Object.Listbox.Alternative',
+	  O: 'Object.Listbox.Optional',
+	  XS: 'Object.Listbox.SelectedExcluded',
+	  L: 'Object.Listbox.Locked',
+	  X: 'Object.Listbox.Excluded',
+	  XL: 'Object.Listbox.ExcludedLock'
+	};
+	function getValueLabel(_ref) {
+	  let {
+	    translator: translatorDynamic,
+	    label,
+	    qState,
+	    isSelected,
+	    currentIndex,
+	    maxIndex,
+	    showSearch
+	  } = _ref;
+	  const stateTranslation = LOC_STATES[qState];
+	  const state = translatorDynamic.get(stateTranslation);
+	  const srStringArr = [];
+	  if (isSelected) {
+	    const navTranslation = showSearch ? 'Listbox.ScreenReader.SearchThenSelectionsMenu.WithAccSelMenu' : 'Listbox.ScreenReader.SelectionMenu.WithAccSelMenu';
+	    const nav = translatorDynamic.get(navTranslation);
+	    srStringArr.push(nav);
+	  }
+	  const valueString = "".concat(label, " ").concat(state);
+	  const indexString = translatorDynamic.get('CurrentSelections.Of', [currentIndex + 1, maxIndex + 1]); // E.g. 3 of 20
+	  srStringArr.unshift(valueString, indexString);
+	  const srString = srStringArr.join('. ').trim();
+	  return srString;
+	}
+
 	function RowColumn(_ref) {
 	  var _cell$qText, _cell$qHighlightRange;
 	  let {
@@ -24070,10 +24109,9 @@
 	  const classArr = reactExports.useMemo(() => getValueStateClasses({
 	    column,
 	    histogram,
-	    checkboxes,
 	    cell,
 	    showGray
-	  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
+	  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense]);
 	  const preventContextMenu = reactExports.useCallback(event => {
 	    event.preventDefault();
 	  }, [checkboxes]);
@@ -26561,6 +26599,82 @@
 	  };
 	};
 
+	/**
+	 * Announces the selection state.
+	 *
+	 * @ignore
+	 * @param {Layout} object
+	 * @returns {string}
+	 */
+	function getSRForSelectedState(_ref) {
+	  var _layout$qListObject;
+	  let {
+	    layout,
+	    translatorDynamic
+	  } = _ref;
+	  const {
+	    qStateCounts: s = {}
+	  } = (layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qDimensionInfo) || {};
+	  const count = s.qSelected + s.qSelectedExcluded + s.qLocked + s.qLockedExcluded;
+	  let t;
+	  switch (count) {
+	    case 0:
+	      t = 'ScreenReader.ZeroSelected';
+	      break;
+	    case 1:
+	      t = 'ScreenReader.OneSelected';
+	      break;
+	    default:
+	      t = 'ScreenReader.ManySelected';
+	      break;
+	  }
+	  const text = translatorDynamic.get(t, [count]);
+	  return text;
+	}
+	function getSearchTranslationString(listCount) {
+	  let t;
+	  switch (listCount) {
+	    case 0:
+	      t = 'Listbox.NoMatchesForYourTerms';
+	      break;
+	    case 1:
+	      t = 'ScreenReader.OneSearchResult';
+	      break;
+	    default:
+	      t = 'ScreenReader.ManySearchResults';
+	      break;
+	  }
+	  return t;
+	}
+	function getScreenReaderAssertiveText(_ref2) {
+	  let {
+	    layout,
+	    searchInputText,
+	    listCount
+	  } = _ref2;
+	  const {
+	    translator: translatorDynamic
+	  } = reactExports.useContext(InstanceContext);
+	  const finalStringArr = [];
+	  if (searchInputText !== null && searchInputText !== void 0 && searchInputText.length) {
+	    // Add search result text.
+	    const srSearchTranslationString = getSearchTranslationString(listCount);
+	    const srSearchString = translatorDynamic.get(srSearchTranslationString, [listCount]);
+	    finalStringArr.push(srSearchString);
+	  }
+
+	  // Add selection value text.
+	  const srSelectionValueText = getSRForSelectedState({
+	    layout,
+	    translatorDynamic
+	  });
+	  finalStringArr.push(srSelectionValueText);
+
+	  // Merge texts into one text string, targeting the assertive screen reader.
+	  const finalString = finalStringArr.filter(v => !!(v !== null && v !== void 0 && v.length)).join('. ');
+	  return finalString;
+	}
+
 	function deduceFrequencyMode(pages) {
 	  const hasPercentSign = pages.some(_ref => {
 	    let {
@@ -26629,7 +26743,6 @@
 	    checkboxes = checkboxOption,
 	    histogram
 	  } = layout !== null && layout !== void 0 ? layout : {};
-	  const [screenReaderText, setScreenReaderText] = reactExports.useState('');
 	  const loaderRef = reactExports.useRef(null);
 	  const local = reactExports.useRef({
 	    queue: [],
@@ -26787,14 +26900,12 @@
 	    listCount
 	  } = sizes;
 	  setStoreValue('listCount', listCount);
-	  const inputText = getStoreValue('inputText');
-	  reactExports.useEffect(() => {
-	    if (inputText) {
-	      const srText = getScreenReaderSearchText(listCount);
-	      const srFinalText = translatorDynamic.get(srText, [listCount]);
-	      setScreenReaderText(srFinalText);
-	    }
-	  }, [inputText, listCount]);
+	  const searchInputText = getStoreValue('inputText');
+	  const screenReaderText = getScreenReaderAssertiveText({
+	    layout,
+	    searchInputText,
+	    listCount
+	  });
 	  const setScrollPosition = position => {
 	    const {
 	      scrollIndex,
@@ -26903,10 +27014,7 @@
 	      itemHeight
 	    });
 	  }
-	  return /*#__PURE__*/React$1.createElement(StyledWrapper, null, /*#__PURE__*/React$1.createElement(ScreenReaderForSelections, {
-	    className: "screenReaderOnly",
-	    layout: layout
-	  }), /*#__PURE__*/React$1.createElement("div", {
+	  return /*#__PURE__*/React$1.createElement(StyledWrapper, null, /*#__PURE__*/React$1.createElement("div", {
 	    className: "screenReaderOnly",
 	    "aria-live": "assertive"
 	  }, screenReaderText), !listCount && cardinal > 0 && /*#__PURE__*/React$1.createElement(ListBoxDisclaimer, {
@@ -27568,6 +27676,9 @@
 	    transformOrigin: popoverTransformOrigin,
 	    hideBackdrop: true,
 	    style: popoverStyle,
+	    onMouseDown: e => {
+	      e.stopPropagation(); // prevent click through, closing when it should not
+	    },
 	    slotProps: {
 	      paper: {
 	        id: 'njs-action-toolbar-popover',
@@ -27592,8 +27703,10 @@
 	});
 	var SearchIcon = (props => SvgIcon(search(props)));
 
+	const MAX_SEARCH_LENGTH = 64000;
 	const TREE_PATH = '/qListObjectDef';
 	const WILDCARD = '**';
+	const limitSearchLength = val => val === null || val === void 0 ? void 0 : val.substring(0, MAX_SEARCH_LENGTH);
 	const StyledOutlinedInput = styled(OutlinedInput$1, {
 	  shouldForwardProp: p => !['styles', 'dense', 'isRtl'].includes(p)
 	})(_ref => {
@@ -27702,11 +27815,12 @@
 	    setStoreValue('inputText', value);
 	  }, [value]);
 	  const onChange = async e => {
-	    setValue(e.target.value);
-	    if (!e.target.value.length) {
+	    const searchValue = limitSearchLength(e.target.value);
+	    setValue(searchValue);
+	    if (!searchValue.length) {
 	      return abortSearch();
 	    }
-	    return model.searchListObjectFor(TREE_PATH, e.target.value);
+	    return model.searchListObjectFor(TREE_PATH, searchValue);
 	  };
 	  const handleFocus = () => {
 	    if (wildCardSearch) {
@@ -27723,11 +27837,12 @@
 	  };
 	  const performSearch = async () => {
 	    let response;
-	    const success = await model.searchListObjectFor(TREE_PATH, value);
+	    const searchValue = limitSearchLength(value);
+	    const success = await model.searchListObjectFor(TREE_PATH, searchValue);
 	    if (selectionState.selectDisabled()) {
 	      return success;
 	    }
-	    if (success && value.length && hasHits()) {
+	    if (success && searchValue.length && hasHits()) {
 	      response = model.acceptListObjectSearch(TREE_PATH, true);
 	      // eslint-disable-next-line no-param-reassign
 	      selections.selectionsMade = true;
@@ -31636,6 +31751,7 @@
 	      defaultWidth,
 	      disableHeight = false,
 	      disableWidth = false,
+	      doNotBailOutOnEmptyChildren = false,
 	      nonce,
 	      onResize,
 	      style = {},
@@ -31676,6 +31792,9 @@
 	      childParams.width = width;
 	      childParams.scaledWidth = scaledWidth;
 	    }
+	    if (doNotBailOutOnEmptyChildren) {
+	      bailoutOnChildren = false;
+	    }
 	    return reactExports.createElement(tagName, {
 	      ref: this._setRef,
 	      style: {
@@ -31957,16 +32076,6 @@
 	  return containerPadding;
 	}
 
-	const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
-	  shapes: [{
-	    type: 'path',
-	    attrs: {
-	      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
-	    }
-	  }]
-	});
-	var DrillDownIcon = (props => SvgIcon(drillDown(props)));
-
 	function showToolbarDetached(_ref) {
 	  var _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
 	  let {
@@ -32122,6 +32231,112 @@
 	  return component;
 	}
 
+	const cyclic = props => _objectSpread2(_objectSpread2({}, props), {}, {
+	  shapes: [{
+	    type: 'path',
+	    attrs: {
+	      d: 'M 6 2 h 10 V 1 H 6 Z m 5 5 h 5 V 6 h -5 Z m 5 5 h -5 v -1 h 5 Z M 5 10 h 1 v 2.663 a 3.5 3.5 0 1 0 -2.922 0.036 l -0.406 0.914 A 4.501 4.501 0 1 1 7.329 13 H 9 v 1 H 5 Z'
+	    }
+	  }]
+	});
+	var CyclicIcon = (props => SvgIcon(cyclic(props)));
+
+	const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
+	  shapes: [{
+	    type: 'path',
+	    attrs: {
+	      d: 'M7 4h9v1H7zm2 4h7v1H9zm2 4h5v1h-5zM1 4v3.526a3.5 3.5 0 0 0 3.5 3.5h2.31L5.22 9.402l.715-.7L8.7 11.527 5.935 14.35l-.714-.7 1.59-1.624H4.5a4.5 4.5 0 0 1-4.5-4.5V4z'
+	    }
+	  }]
+	});
+	var DrillDownIcon = (props => SvgIcon(drillDown(props)));
+
+	const reload = props => _objectSpread2(_objectSpread2({}, props), {}, {
+	  shapes: [{
+	    type: 'path',
+	    attrs: {
+	      d: 'M1 8a7 7 0 1 1 10 6.326V11h-1v5h5v-1h-3.124A8 8 0 1 0 8 16v-1a7 7 0 0 1-7-7Z'
+	    }
+	  }]
+	});
+	var ReloadIcon = (props => SvgIcon(reload(props)));
+
+	const dimensionTypes = {
+	  single: 'N',
+	  drillDown: 'H',
+	  cyclic: 'C'
+	};
+	const createDimensionIconData = (dimInfo, app) => {
+	  switch (dimInfo.qGrouping) {
+	    case dimensionTypes.drillDown:
+	      return {
+	        icon: DrillDownIcon,
+	        tooltip: 'Listbox.DrillDown',
+	        onClick: undefined
+	      };
+	    case dimensionTypes.cyclic:
+	      return {
+	        icon: app ? ReloadIcon : CyclicIcon,
+	        tooltip: 'Listbox.Cyclic',
+	        onClick: app ? () => {
+	          app.getDimension(dimInfo.qLibraryId).then(dimensionModel => {
+	            if (!dimensionModel.stepCycle) {
+	              // eslint-disable-next-line no-console
+	              console.log("engine api spec version doesn't have support for function stepCycle");
+	              return;
+	            }
+	            dimensionModel.stepCycle(1);
+	          }).catch(() => null);
+	        } : undefined
+	      };
+	    default:
+	      return undefined;
+	  }
+	};
+	var iconUtils = {
+	  createDimensionIconData
+	};
+
+	const StyledButton = styled(Button$1)(() => ({
+	  borderRadius: 4,
+	  width: 24,
+	  height: 24,
+	  minWidth: 22,
+	  padding: 0
+	}));
+	function DimensionIcon(_ref) {
+	  let {
+	    iconData,
+	    translator,
+	    iconStyle
+	  } = _ref;
+	  if (!iconData) return undefined;
+	  const {
+	    icon,
+	    tooltip,
+	    onClick
+	  } = iconData;
+	  const Icon = icon;
+	  const title = translator.get(tooltip);
+	  const isButton = onClick;
+	  return isButton ? /*#__PURE__*/React$1.createElement(StyledButton, {
+	    variant: "outlined",
+	    onClick: onClick,
+	    tabIndex: -1,
+	    title: title,
+	    size: "large",
+	    disableRipple: true
+	  }, /*#__PURE__*/React$1.createElement(Icon, {
+	    style: iconStyle
+	  })) : /*#__PURE__*/React$1.createElement(Icon, {
+	    title: title,
+	    size: "large",
+	    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+	      padding: "".concat(ICON_PADDING, "px")
+	    })
+	  });
+	}
+
 	// ms that needs to pass before the lock button can be toggled again
 	const lockTimeFrameMs = 500;
 	let lastTime = 0;
@@ -32156,7 +32371,7 @@
 	  };
 	}
 	function ListBoxHeader(_ref2) {
-	  var _layout$qListObject, _layout$qListObject3;
+	  var _layout$qListObject, _layout$qListObject3, _layout$qListObject4;
 	  let {
 	    layout,
 	    translator,
@@ -32164,7 +32379,6 @@
 	    isRtl,
 	    showLock,
 	    showSearchIcon,
-	    isDrillDown,
 	    constraints,
 	    onShowSearch,
 	    classes,
@@ -32178,7 +32392,8 @@
 	    isDirectQuery,
 	    selections,
 	    keyboard,
-	    autoConfirm
+	    autoConfirm,
+	    app
 	  } = _ref2;
 	  const [isToolbarDetached, setIsToolbarDetached] = reactExports.useState(showDetachedToolbarOnly);
 	  const [isLocked, setLocked] = reactExports.useState(layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked);
@@ -32188,15 +32403,16 @@
 	    setLocked(layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qLocked);
 	  }, [layout === null || layout === void 0 || (_layout$qListObject3 = layout.qListObject) === null || _layout$qListObject3 === void 0 || (_layout$qListObject3 = _layout$qListObject3.qDimensionInfo) === null || _layout$qListObject3 === void 0 ? void 0 : _layout$qListObject3.qLocked]);
 	  const titleRef = reactExports.useRef(null);
+	  const iconData = iconUtils.createDimensionIconData(layout === null || layout === void 0 || (_layout$qListObject4 = layout.qListObject) === null || _layout$qListObject4 === void 0 ? void 0 : _layout$qListObject4.qDimensionInfo, app);
 	  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 showLeftIcon = showSearchIcon || showLockIcon || iconData; // 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 iconsWidth = (showSearchIcon ? BUTTON_ICON_WIDTH : 0) + (showLockIcon ? BUTTON_ICON_WIDTH : 0) + (iconData ? BUTTON_ICON_WIDTH : 0);
 	  const toggleLock = getToggleLock({
 	    isLocked,
 	    setLocked,
@@ -32295,12 +32511,10 @@
 	    alignItems: "center",
 	    width: iconsWidth,
 	    className: "header-action-container"
-	  }, lockedIconComp || showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React$1.createElement(DrillDownIcon, {
-	    tabIndex: -1,
-	    title: translator.get('Listbox.DrillDown'),
-	    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
-	      padding: "".concat(ICON_PADDING, "px")
-	    })
+	  }, lockedIconComp || showSearchIcon && searchIconComp, /*#__PURE__*/React$1.createElement(DimensionIcon, {
+	    iconData: iconData,
+	    iconStyle: iconStyle,
+	    translator: translator
 	  })), /*#__PURE__*/React$1.createElement(Grid$1, {
 	    item: true,
 	    xs: true,
@@ -32370,7 +32584,7 @@
 	  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(_ref3) {
-	  var _layout$qListObject, _layout$qListObject2, _layout$title, _layoutOptions$dense, _containerRef$current;
+	  var _layout$qListObject, _layout$title, _layoutOptions$dense, _containerRef$current;
 	  let {
 	    options,
 	    layout
@@ -32536,7 +32750,6 @@
 	  } = layout !== null && layout !== void 0 ? layout : {};
 	  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 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;
@@ -32574,8 +32787,8 @@
 	  }
 	  const listBoxMinHeight = showAttachedToolbar ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
 	  const listBoxHeader = /*#__PURE__*/React$1.createElement(ListBoxHeader, {
+	    app: app,
 	    showSearchIcon: showSearchIcon,
-	    isDrillDown: isDrillDown,
 	    onShowSearch: handleShowSearch,
 	    isPopover: isPopover,
 	    showToolbar: showToolbar,
@@ -32759,7 +32972,7 @@
 	/**
 	 * Extends `ListObjectDef`, see Engine API: `ListObjectDef`.
 	 * @interface ListObjectDef
-	 * @extends EngineAPI.IListObjectDef
+	 * @extends qix.ListObjectDef
 	 * @property {boolean} [frequencyEnabled=false] Show frequency count. also requires qListObjectDef.qFrequencyMode to be set
 	 */
 
@@ -33598,10 +33811,10 @@
 	/**
 	 * @since 1.1.0
 	 * @interface ExportDataDef
-	 * @property {EngineAPI.INxDimension[]} dimensions
-	 * @property {EngineAPI.INxMeasure[]} measures
-	 * @property {EngineAPI.INxDimension[]} excludedDimensions
-	 * @property {EngineAPI.INxMeasure[]} excludedMeasures
+	 * @property {qix.NxDimension[]} dimensions
+	 * @property {qix.NxMeasure[]} measures
+	 * @property {qix.NxDimension[]} excludedDimensions
+	 * @property {qix.NxMeasure[]} excludedMeasures
 	 * @property {number[]} interColumnSortOrder
 	 */
 
@@ -36818,7 +37031,7 @@
 	/**
 	 * Gets the layout of the generic object associated with this visualization.
 	 * @entry
-	 * @returns {EngineAPI.IGenericObjectLayout}
+	 * @returns {qix.GenericObjectLayout}
 	 * @example
 	 * import { useLayout } from '@nebula.js/stardust';
 	 * // ...
@@ -36838,7 +37051,7 @@
 	 * The returned value from `useStaleLayout()` and `useLayout()` are identical when the object
 	 * is not in a modal state.
 	 * @entry
-	 * @returns {EngineAPI.IGenericObjectLayout}
+	 * @returns {qix.GenericObjectLayout}
 	 * @example
 	 * import { useStaleLayout } from '@nebula.js/stardust';
 	 * // ...
@@ -36859,7 +37072,7 @@
 	/**
 	 * Gets the layout of the app associated with this visualization.
 	 * @entry
-	 * @returns {EngineAPI.INxAppLayout} The app layout
+	 * @returns {qix.NxAppLayout} The app layout
 	 * @example
 	 * import { useAppLayout } from '@nebula.js/stardust';
 	 * // ...
@@ -36873,7 +37086,7 @@
 	/**
 	 * Gets the generic object API of the generic object connected to this visualization.
 	 * @entry
-	 * @returns {EngineAPI.IGenericObject|undefined}
+	 * @returns {qix.GenericObject|undefined}
 	 * @example
 	 * import { useModel } from '@nebula.js/stardust';
 	 * // ...
@@ -36892,7 +37105,7 @@
 	/**
 	 * Gets the doc API.
 	 * @entry
-	 * @returns {EngineAPI.IApp|undefined} The doc API.
+	 * @returns {qix.Doc|undefined} The doc API.
 	 * @example
 	 * import { useApp } from '@nebula.js/stardust';
 	 * // ...
@@ -36911,7 +37124,7 @@
 	/**
 	 * Gets the global API.
 	 * @entry
-	 * @returns {EngineAPI.IGlobal|undefined} The global API.
+	 * @returns {qix.Global|undefined} The global API.
 	 * @example
 	 * import { useGlobal } from '@nebula.js/stardust';
 	 *
@@ -36961,7 +37174,7 @@
 	 * import { useTheme } from '@nebula.js/stardust';
 	 *
 	 * const theme = useTheme();
-	 * console.log(theme.getContrastinColorTo('#ff0000'));
+	 * console.log(theme.getContrastingColorTo('#ff0000'));
 	 */
 	function useTheme() {
 	  return useInternalContext('theme');
@@ -37154,7 +37367,7 @@
 	 * @interface Interactions
 	 * @property {boolean=} passive=true Whether or not passive interactions are on. Allows passive interaction by users, ie: tooltips
 	 * @property {boolean=} active=true Whether or not active interactions are on. Allows active interaction by users, ie: scroll, click
-	 * @property {boolean=} select=true Whether or not select interactions are on. Alows selection actions. Implied when active is false.
+	 * @property {boolean=} select=true Whether or not select interactions are on. Allows selection actions. Implied when active is false.
 	 * @property {boolean=} edit=false Whether or not edit actions are on. Allows edit actions.
 	 */
 	/**
@@ -37282,7 +37495,7 @@
 	/**
 	 * Registers a callback that is called when a snapshot is taken.
 	 * @entry
-	 * @param {function(EngineAPI.IGenericObjectLayout): Promise<EngineAPI.IGenericObjectLayout>} snapshotCallback
+	 * @param {function(qix.GenericObjectLayout): Promise<qix.GenericObjectLayout>} snapshotCallback
 	 * @example
 	 * import { onTakeSnapshot } from '@nebula.js/stardust';
 	 * import { useState } from '@nebula.js/stardust';
@@ -37343,7 +37556,7 @@
 	 *
 	 * const renderState = useRenderState();
 	 * useState(() => {
-	 *   if(needProperteisUpdate(...)) {
+	 *   if(needPropertiesUpdate(...)) {
 	 *      useRenderState.pending();
 	 *      updateProperties(...);
 	 *   } else {
@@ -37885,7 +38098,7 @@
 
 	/**
 	 * @interface QAEDefinition
-	 * @property {EngineAPI.IGenericObjectProperties=} properties
+	 * @property {qix.GenericObjectProperties=} properties
 	 * @property {object=} data
 	 * @property {DataTarget[]} data.targets
 	 * @property {importProperties=} importProperties
@@ -37895,22 +38108,22 @@
 	/**
 	 * @interface DataTarget
 	 * @property {string} path
-	 * @property {FieldTarget<EngineAPI.INxDimension>=} dimensions
-	 * @property {FieldTarget<EngineAPI.INxMeasure>=} measures
+	 * @property {FieldTarget<qix.NxDimension>=} dimensions
+	 * @property {FieldTarget<qix.NxMeasure>=} measures
 	 */
 
 	/**
 	 * @callback fieldTargetAddedCallback
 	 * @template T
 	 * @param {T} field
-	 * @param {EngineAPI.IGenericObjectProperties} properties
+	 * @param {qix.GenericObjectProperties} properties
 	 */
 
 	/**
 	 * @callback fieldTargetRemovedCallback
 	 * @template T
 	 * @param {T} field
-	 * @param {EngineAPI.IGenericObjectProperties} properties
+	 * @param {qix.GenericObjectProperties} properties
 	 * @param {number} index
 	 */
 
@@ -38174,7 +38387,7 @@
 	    id: model.id,
 	    /**
 	     * This visualizations Enigma model, a representation of the generic object.
-	     * @type {EngineAPI.IGenericObject}
+	     * @type {qix.GenericObject}
 	     */
 	    model,
 	    /**
@@ -38295,7 +38508,6 @@
 	    },
 	    /**
 	     * Listens to custom events from inside the visualization. See useEmitter
-	     * @experimental
 	     * @param {string} eventName Event name to listen to
 	     * @param {Function} listener Callback function to invoke
 	     */
@@ -38304,7 +38516,6 @@
 	    },
 	    /**
 	     * Removes a listener
-	     * @experimental
 	     * @param {string} eventName Event name to remove from
 	     * @param {Function} listener Callback function to remove
 	     */
@@ -38319,6 +38530,16 @@
 	      await rendered;
 	      return cellRef.current.getImperativeHandle();
 	    },
+	    /**
+	     * Takes a snapshot of the Viz layout and state
+	     * @experimental
+	     * @private
+	     * @returns {Promise<object>} viz layout object with snapshot settings
+	     */
+	    async takeSnapshot() {
+	      await rendered;
+	      return cellRef.current.takeSnapshot();
+	    },
 	    // ===== unexposed experimental API - use at own risk ======
 	    __DO_NOT_USE__: {
 	      mount(element) {
@@ -38453,7 +38674,7 @@
 	}
 
 	/**
-	 * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
+	 * @typedef {string | qix.NxDimension | qix.NxMeasure | LibraryField} Field
 	 */
 
 	/**
@@ -38467,7 +38688,7 @@
 	 * @property {string=} version For creating objects: Version of visualization to render
 	 * @property {(Field[])=} fields For creating objects: Data fields to use
 	 * @property {boolean=} [extendProperties=false] For creating objects: Whether to deeply extend properties or not. If false then subtrees will be overwritten.
-	 * @property {EngineAPI.IGenericObjectProperties=} properties For creating objects: Explicit properties to set
+	 * @property {qix.GenericObjectProperties=} properties For creating objects: Explicit properties to set
 	 * @example
 	 * // A config for Creating objects:
 	 * const createConfig = {
@@ -38558,7 +38779,7 @@
 	}
 
 	/**
-	 * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
+	 * @typedef {string | qix.NxDimension | qix.NxMeasure | LibraryField} Field
 	 */
 
 	/**
@@ -38567,7 +38788,7 @@
 	 * @property {string} type
 	 * @property {string=} version
 	 * @property {(Field[])=} fields
-	 * @property {EngineAPI.IGenericObjectProperties=} properties
+	 * @property {qix.GenericObjectProperties=} properties
 	 */
 
 	async function createObject(_ref, halo, generateOnly, store) {
@@ -41288,7 +41509,10 @@
 	  themes: [],
 	  anything: {},
 	  flags: {
-	    KPI_REACTCOLORPICKER: true
+	    KPI_REACTCOLORPICKER: true,
+	    IM_1869_HIDE_DIM_MEA_LINE: true,
+	    IM_1579_HIDE_DIM_MEA: true,
+	    CLIENT_IM_3365: true
 	  },
 	  snapshot: DEFAULT_SNAPSHOT_CONFIG
 	};
@@ -41369,7 +41593,7 @@
 	   * Initiates a new `Embed` instance using the specified enigma `app`.
 	   * @entry
 	   * @function embed
-	   * @param {EngineAPI.IApp} app
+	   * @param {qix.Doc} app
 	   * @param {Configuration=} instanceConfig
 	   * @returns {Embed}
 	   * @example
@@ -41484,8 +41708,7 @@
 	      /**
 	       * Creates a visualization model
 	       * @param {CreateConfig} cfg The create configuration.
-	       * @experimental
-	       * @returns {Promise<EngineAPI.IGenericObject>} An engima model
+	       * @returns {Promise<qix.GenericObject>} An engima model
 	       * @example
 	       * // create a barchart in the app and return the model
 	       * const model = await n.create({
@@ -41499,7 +41722,6 @@
 	      /**
 	       * Generates properties for a visualization object
 	       * @param {CreateConfig} cfg The create configuration.
-	       * @experimental
 	       * @returns {Promise<object>} The objects properties
 	       * @example
 	       * // generate properties for a barchart
@@ -42119,7 +42341,7 @@
 	 */
 	const mocker = /** @lends EnigmaMocker# */{
 	  /**
-	   * Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visulization and specifies how it behaves. For example, what layout to use the data to present.
+	   * Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visualisation and specifies how it behaves. For example, what layout to use the data to present.
 	   *
 	   * The generic object is represented with a Javascript object with a number of properties. The name of the property correlates to the name in the Enigma model for `app.getObject(id)`. For example, the property `getLayout` in the generic object is used to define `app.getObject(id).getLayout()`. Any property can be added to the fixture (just make sure it exists and behaves as in the Enigma model!).
 	   *
@@ -42127,9 +42349,9 @@
 	   * @type function
 	   * @experimental
 	   * @since 3.0.0
-	   * @param {Array<object>} genericObjects Generic objects controling behaviour of visualizations.
+	   * @param {Array<object>} genericObjects Generic objects controlling behaviour of visualizations.
 	   * @param {EnigmaMockerOptions=} options Options
-	   * @returns {Promise<EngineAPI.IApp>}
+	   * @returns {Promise<qix.Doc>}
 	   * @example
 	   * const genericObject = {
 	   *   getLayout() {