@nebula.js/stardust 4.12.0 → 4.14.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.12.0
+* @nebula.js/stardust v4.14.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,
@@ -2907,6 +2928,23 @@
 		errorColor: "#ff4444",
 		nullColor: "#d2d2d2"
 	};
+	var object$2 = {
+		title: {
+			main: {
+				color: "@B50",
+				fontSize: "15px"
+			},
+			subTitle: {
+				color: "@B50",
+				fontSize: "12px"
+			},
+			footer: {
+				color: "@B50",
+				fontSize: "12px",
+				backgroundColor: "transparent"
+			}
+		}
+	};
 	var scales = [
 		{
 			name: "Sequential Gradient",
@@ -3093,6 +3131,7 @@
 		fontFamily: fontFamily,
 		backgroundColor: backgroundColor$1,
 		dataColors: dataColors,
+		object: object$2,
 		scales: scales,
 		palettes: palettes
 	};
@@ -3290,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') {
@@ -6809,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,
@@ -6843,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) {
@@ -7963,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 = {},
@@ -7971,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({
@@ -8029,7 +8074,7 @@
 	  });
 	}
 
-	const _excluded$Q = ["sx"];
+	const _excluded$R = ["sx"];
 	const splitProps = props => {
 	  var _props$theme$unstable, _props$theme;
 	  const result = {
@@ -8050,7 +8095,7 @@
 	  const {
 	      sx: inSx
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$2(props, _excluded$Q);
+	    other = _objectWithoutPropertiesLoose$2(props, _excluded$R);
 	  const {
 	    systemProps,
 	    otherProps
@@ -8101,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,
@@ -8119,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,
@@ -8209,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) {
@@ -8253,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;
@@ -8733,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 = () => {
@@ -8753,7 +8798,7 @@
 	  start(delay, fn) {
 	    this.clear();
 	    this.currentId = setTimeout(() => {
-	      this.currentId = 0;
+	      this.currentId = null;
 	      fn();
 	    }, delay);
 	  }
@@ -8997,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(() => {
@@ -9036,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
+	      })
 	    })
 	  });
 	}
@@ -12033,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;
 
 	/**
@@ -12059,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);
@@ -12652,7 +12717,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "03a3" ;
+	const NEBULA_VERSION_HASH = "3232" ;
 	ClassNameGenerator.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -12912,7 +12977,7 @@
 	  const appRef = React$1.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.12.0" );
+	  element.setAttribute('data-nebulajs-version', "4.14.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -13447,6 +13512,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:
@@ -16029,7 +16342,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') {
@@ -16054,7 +16367,7 @@
 	function isHTMLElement(element) {
 	  return element.nodeType !== undefined;
 	}
-	const useUtilityClasses$n = () => {
+	const useUtilityClasses$l = () => {
 	  const slots = {
 	    root: ['root']
 	  };
@@ -16079,7 +16392,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);
@@ -16156,7 +16469,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,
@@ -16261,7 +16574,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;
 	}
@@ -16303,7 +16616,7 @@
 	      style,
 	      value
 	    } = props,
-	    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+	    other = _objectWithoutPropertiesLoose(props, _excluded$w);
 	  const {
 	    current: isControlled
 	  } = reactExports.useRef(value != null);
@@ -16414,7 +16727,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,
@@ -16429,249 +16743,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", {
@@ -17466,11 +17537,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);
 	}
@@ -20121,13 +20187,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;
@@ -21381,11 +21449,11 @@
 	  y: 0
 	};
 	function composeEventHandler(handler, eventHandler) {
-	  return event => {
+	  return (event, ...params) => {
 	    if (eventHandler) {
-	      eventHandler(event);
+	      eventHandler(event, ...params);
 	    }
-	    handler(event);
+	    handler(event, ...params);
 	  };
 	}
 
@@ -21432,7 +21500,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);
@@ -22821,31 +22889,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;
 	};
@@ -22912,15 +23001,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,
@@ -22966,16 +23067,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")
@@ -23057,26 +23171,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'
@@ -23112,33 +23233,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'
 	    }
 	  };
@@ -24101,10 +24212,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]);
@@ -27599,6 +27709,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',
@@ -27623,8 +27736,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 => {
@@ -27733,11 +27848,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) {
@@ -27754,11 +27870,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;
@@ -30035,6 +30152,7 @@
 	  const fontStyle = unfurlFontStyle(textProps.fontStyle, target);
 	  return {
 	    fontFamily: textProps.fontFamily || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontFamily'),
+	    fontSize: textProps.fontSize || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontSize'),
 	    color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color, true) : theme.getStyle("object.".concat(objectType), target, 'color'),
 	    fontWeight: fontStyle.includes('bold') ? 'bold' : 'normal',
 	    fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',
@@ -31540,6 +31658,7 @@
 	      defaultWidth,
 	      disableHeight = false,
 	      disableWidth = false,
+	      doNotBailOutOnEmptyChildren = false,
 	      nonce,
 	      onResize,
 	      style = {},
@@ -31580,6 +31699,9 @@
 	      childParams.width = width;
 	      childParams.scaledWidth = scaledWidth;
 	    }
+	    if (doNotBailOutOnEmptyChildren) {
+	      bailoutOnChildren = false;
+	    }
 	    return reactExports.createElement(tagName, {
 	      ref: this._setRef,
 	      style: {
@@ -31861,16 +31983,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 {
@@ -32026,6 +32138,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;
@@ -32060,7 +32278,7 @@
 	  };
 	}
 	function ListBoxHeader(_ref2) {
-	  var _layout$qListObject, _layout$qListObject3;
+	  var _layout$qListObject, _layout$qListObject3, _layout$qListObject4;
 	  let {
 	    layout,
 	    translator,
@@ -32068,7 +32286,6 @@
 	    isRtl,
 	    showLock,
 	    showSearchIcon,
-	    isDrillDown,
 	    constraints,
 	    onShowSearch,
 	    classes,
@@ -32082,7 +32299,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);
@@ -32092,15 +32310,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,
@@ -32199,12 +32418,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,
@@ -32274,7 +32491,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
@@ -32440,7 +32657,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;
@@ -32478,8 +32694,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,
@@ -41176,7 +41392,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
 	};