@nebula.js/stardust 4.1.0 → 4.2.1

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.1.0
+* @nebula.js/stardust v4.2.1
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -750,8 +750,8 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -762,9 +762,9 @@ function _extends$1() {
     }
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$2(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -778,7 +778,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = _objectWithoutPropertiesLoose$2(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -4300,6 +4300,34 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
 
 var THEME_ID = '$$material';
 
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$2.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose$1(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
 /*
 
 Based off glamor's StyleSheet, thanks Sunil ❤️
@@ -4443,6 +4471,7 @@ var RULESET = 'rule';
 var DECLARATION = 'decl';
 var IMPORT = '@import';
 var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
 
 /**
  * @param {number}
@@ -4872,8 +4901,8 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 								parse(characters, root, reference, reference, props, rulesets, length, points, children);
 							else
 								switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
-									// d m s
-									case 100: case 109: case 115:
+									// d l m s
+									case 100: case 108: case 109: case 115:
 										parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
 										break
 									default:
@@ -4992,6 +5021,7 @@ function serialize (children, callback) {
  */
 function stringify (element, index, children, callback) {
 	switch (element.type) {
+		case LAYER: if (element.children.length) break
 		case IMPORT: case DECLARATION: return element.return = element.return || element.value
 		case COMMENT: return ''
 		case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'
@@ -5584,7 +5614,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @mui/styled-engine v5.12.3
+ * @mui/styled-engine v5.13.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5605,8 +5635,35 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-// Sorted ASC by size. That's important.
-// It can't be configured as it's used statically for propTypes.
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+const _excluded$f = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5615,34 +5672,33 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return {
-      ...acc,
+    return _extends$1({}, acc, {
       [obj.key]: obj.val
-    };
+    });
   }, {});
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
 function createBreakpoints(breakpoints) {
   const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
-    values = {
-      xs: 0,
-      // phone
-      sm: 600,
-      // tablet
-      md: 900,
-      // small laptop
-      lg: 1200,
-      // desktop
-      xl: 1536 // large screen
-    },
+      // The breakpoint **start** at this value.
+      // For instance with the first breakpoint xs: [xs, sm).
+      values = {
+        xs: 0,
+        // phone
+        sm: 600,
+        // tablet
+        md: 900,
+        // small laptop
+        lg: 1200,
+        // desktop
+        xl: 1536 // large screen
+      },
 
-    unit = 'px',
-    step = 5,
-    ...other
-  } = breakpoints;
+      unit = 'px',
+      step = 5
+    } = breakpoints,
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$f);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -5674,7 +5730,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return {
+  return _extends$1({
     keys,
     values: sortedValues,
     up,
@@ -5682,9 +5738,8 @@ function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit,
-    ...other
-  };
+    unit
+  }, other);
 }
 
 const shape = {
@@ -6629,14 +6684,15 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
+const _excluded$e = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {},
-    ...other
-  } = options;
+      breakpoints: breakpointsInput = {},
+      palette: paletteInput = {},
+      spacing: spacingInput,
+      shape: shapeInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose(options, _excluded$e);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -6644,21 +6700,14 @@ function createTheme$1(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: {
-      mode: 'light',
-      ...paletteInput
-    },
+    palette: _extends$1({
+      mode: 'light'
+    }, paletteInput),
     spacing,
-    shape: {
-      ...shape$1,
-      ...shapeInput
-    }
+    shape: _extends$1({}, shape$1, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig$1,
-    ...(other == null ? void 0 : other.unstable_sxConfig)
-  };
+  muiTheme.unstable_sxConfig = _extends$1({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -6683,6 +6732,7 @@ function useTheme$3(defaultTheme = systemDefaultTheme$1) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
+const _excluded$d = ["variant"];
 function isEmpty$2(string) {
   return string.length === 0;
 }
@@ -6694,9 +6744,9 @@ function isEmpty$2(string) {
  */
 function propsToClassKey(props) {
   const {
-    variant,
-    ...other
-  } = props;
+      variant
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -6708,7 +6758,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-/* eslint-disable no-underscore-dangle */
+const _excluded$c = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$1(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -6782,27 +6832,25 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx$1({
-      ...props,
-      theme: resolveTheme({
-        ...props,
+    return styleFunctionSx$1(_extends$1({}, props, {
+      theme: resolveTheme(_extends$1({}, props, {
         defaultTheme,
         themeId
-      })
-    });
+      }))
+    }));
   };
   systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
     internal_processStyles(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
     const {
-      name: componentName,
-      slot: componentSlot,
-      skipVariantsResolver: inputSkipVariantsResolver,
-      skipSx: inputSkipSx,
-      overridesResolver,
-      ...options
-    } = inputOptions;
+        name: componentName,
+        slot: componentSlot,
+        skipVariantsResolver: inputSkipVariantsResolver,
+        skipSx: inputSkipSx,
+        overridesResolver
+      } = inputOptions,
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$c);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6818,43 +6866,38 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$2(tag, {
+    const defaultStyledResolver = styled$2(tag, _extends$1({
       shouldForwardProp: shouldForwardPropOption,
-      label,
-      ...options
-    });
+      label
+    }, options));
     const muiStyledResolver = (styleArg, ...expressions) => {
       const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-          return stylesArg({
-            ...props,
-            theme: resolveTheme({
-              ...props,
+          return stylesArg(_extends$1({}, props, {
+            theme: resolveTheme(_extends$1({}, props, {
               defaultTheme,
               themeId
-            })
-          });
+            }))
+          }));
         } : stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme({
-            ...props,
+          const theme = resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
-          });
+          }));
           const styleOverrides = getStyleOverrides(componentName, theme);
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle({
-                ...props,
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$1({}, props, {
                 theme
-              }) : slotStyle;
+              })) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }
@@ -6863,11 +6906,10 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme({
-            ...props,
+          const theme = resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
-          });
+          }));
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
@@ -6886,14 +6928,12 @@ function createStyled(input = {}) {
       // which are basically components used as a selectors.
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
-        transformedStyleArg = props => styleArg({
-          ...props,
-          theme: resolveTheme({
-            ...props,
+        transformedStyleArg = props => styleArg(_extends$1({}, props, {
+          theme: resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
-          })
-        });
+          }))
+        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (tag.muiName) {
@@ -7196,10 +7236,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? {
-        ...upperTheme,
+      const result = themeId ? _extends$1({}, upperTheme, {
         [themeId]: mergedTheme
-      } : mergedTheme;
+      }) : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
       // see the test case "use provided theme from a callback" in ThemeProvider.test.js
       if (isPrivate) {
@@ -7207,13 +7246,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? {
-      ...upperTheme,
+    return themeId ? _extends$1({}, upperTheme, {
       [themeId]: localTheme
-    } : {
-      ...upperTheme,
-      ...localTheme
-    };
+    }) : _extends$1({}, upperTheme, localTheme);
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 
@@ -7243,20 +7278,21 @@ function ThemeProvider$1(props) {
   });
 }
 
+const _excluded$b = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  _excluded2$1 = ["type", "mode"];
 function adaptV4Theme(inputTheme) {
   const {
-    defaultProps = {},
-    mixins = {},
-    overrides = {},
-    palette = {},
-    props = {},
-    styleOverrides = {},
-    ...other
-  } = inputTheme;
-  const theme = {
-    ...other,
+      defaultProps = {},
+      mixins = {},
+      overrides = {},
+      palette = {},
+      props = {},
+      styleOverrides = {}
+    } = inputTheme,
+    other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$b);
+  const theme = _extends$2({}, other, {
     components: {}
-  };
+  });
 
   // default props
   Object.keys(defaultProps).forEach(component => {
@@ -7288,41 +7324,38 @@ function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = {
+  theme.mixins = _extends$2({
     gutters: (styles = {}) => {
-      return {
+      return _extends$2({
         paddingLeft: spacing(2),
-        paddingRight: spacing(2),
-        ...styles,
-        [breakpoints.up('sm')]: {
+        paddingRight: spacing(2)
+      }, styles, {
+        [breakpoints.up('sm')]: _extends$2({
           paddingLeft: spacing(3),
-          paddingRight: spacing(3),
-          ...styles[breakpoints.up('sm')]
-        }
-      };
-    },
-    ...mixins
-  };
+          paddingRight: spacing(3)
+        }, styles[breakpoints.up('sm')])
+      });
+    }
+  }, mixins);
   const {
-    type: typeInput,
-    mode: modeInput,
-    ...paletteRest
-  } = palette;
+      type: typeInput,
+      mode: modeInput
+    } = palette,
+    paletteRest = _objectWithoutPropertiesLoose$1(palette, _excluded2$1);
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = {
+  theme.palette = _extends$2({
     // theme.palette.text.hint
     text: {
       hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
     },
     mode: finalMode,
-    type: finalMode,
-    ...paletteRest
-  };
+    type: finalMode
+  }, paletteRest);
   return theme;
 }
 
 function createMixins(breakpoints, mixins) {
-  return {
+  return _extends$2({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -7333,9 +7366,8 @@ function createMixins(breakpoints, mixins) {
       [breakpoints.up('sm')]: {
         minHeight: 64
       }
-    },
-    ...mixins
-  };
+    }
+  }, mixins);
 }
 
 const common = {
@@ -7470,6 +7502,7 @@ const green = {
 };
 var green$1 = green;
 
+const _excluded$a = ["mode", "contrastThreshold", "tonalOffset"];
 const light$1 = {
   // The colors used to style the text.
   text: {
@@ -7634,11 +7667,11 @@ function getDefaultWarning(mode = 'light') {
 }
 function createPalette(palette) {
   const {
-    mode = 'light',
-    contrastThreshold = 3,
-    tonalOffset = 0.2,
-    ...other
-  } = palette;
+      mode = 'light',
+      contrastThreshold = 3,
+      tonalOffset = 0.2
+    } = palette,
+    other = _objectWithoutPropertiesLoose$1(palette, _excluded$a);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -7660,9 +7693,7 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = {
-      ...color
-    };
+    color = _extends$2({}, color);
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -7683,11 +7714,9 @@ function createPalette(palette) {
     dark: dark$1,
     light: light$1
   };
-  const paletteOutput = deepmerge({
+  const paletteOutput = deepmerge(_extends$2({
     // A collection of common colors.
-    common: {
-      ...common$1
-    },
+    common: _extends$2({}, common$1),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -7736,13 +7765,12 @@ function createPalette(palette) {
     // Used by the functions below to shift a color's luminance by approximately
     // two indexes within its tonal palette.
     // E.g., shift from Red 500 to Red 300 or Red 700.
-    tonalOffset,
-    // The light and dark mode object.
-    ...modes[mode]
-  }, other);
+    tonalOffset
+  }, modes[mode]), other);
   return paletteOutput;
 }
 
+const _excluded$9 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -7756,39 +7784,35 @@ const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
  * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
 function createTypography(palette, typography) {
-  const {
-    fontFamily = defaultFontFamily,
-    // The default font size of the Material Specification.
-    fontSize = 14,
-    // px
-    fontWeightLight = 300,
-    fontWeightRegular = 400,
-    fontWeightMedium = 500,
-    fontWeightBold = 700,
-    // Tell MUI what's the font-size on the html element.
-    // 16px is the default font-size used by browsers.
-    htmlFontSize = 16,
-    // Apply the CSS properties to all the variants.
-    allVariants,
-    pxToRem: pxToRem2,
-    ...other
-  } = typeof typography === 'function' ? typography(palette) : typography;
+  const _ref = typeof typography === 'function' ? typography(palette) : typography,
+    {
+      fontFamily = defaultFontFamily,
+      // The default font size of the Material Specification.
+      fontSize = 14,
+      // px
+      fontWeightLight = 300,
+      fontWeightRegular = 400,
+      fontWeightMedium = 500,
+      fontWeightBold = 700,
+      // Tell MUI what's the font-size on the html element.
+      // 16px is the default font-size used by browsers.
+      htmlFontSize = 16,
+      // Apply the CSS properties to all the variants.
+      allVariants,
+      pxToRem: pxToRem2
+    } = _ref,
+    other = _objectWithoutPropertiesLoose$1(_ref, _excluded$9);
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$2({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
     // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight,
-    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
-    // across font-families can cause issues with the kerning.
-    ...(fontFamily === defaultFontFamily ? {
-      letterSpacing: `${round(letterSpacing / size)}em`
-    } : {}),
-    ...casing,
-    ...allVariants
-  });
+    lineHeight
+  }, fontFamily === defaultFontFamily ? {
+    letterSpacing: `${round(letterSpacing / size)}em`
+  } : {}, casing, allVariants);
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
     h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
@@ -7811,7 +7835,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge({
+  return deepmerge(_extends$2({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -7819,9 +7843,8 @@ function createTypography(palette, typography) {
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,
-    fontWeightBold,
-    ...variants
-  }, other, {
+    fontWeightBold
+  }, variants), other, {
     clone: false // No need to clone deep
   });
 }
@@ -7837,6 +7860,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
+const _excluded$8 = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -7879,30 +7903,24 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = {
-    ...easing,
-    ...inputTransitions.easing
-  };
-  const mergedDuration = {
-    ...duration,
-    ...inputTransitions.duration
-  };
+  const mergedEasing = _extends$2({}, easing, inputTransitions.easing);
+  const mergedDuration = _extends$2({}, duration, inputTransitions.duration);
   const create = (props = ['all'], options = {}) => {
     const {
-      duration: durationOption = mergedDuration.standard,
-      easing: easingOption = mergedEasing.easeInOut,
-      delay = 0,
-      ...other
-    } = options;
+        duration: durationOption = mergedDuration.standard,
+        easing: easingOption = mergedEasing.easeInOut,
+        delay = 0
+      } = options;
+      _objectWithoutPropertiesLoose$1(options, _excluded$8);
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-  return {
+  return _extends$2({
     getAutoHeightDuration,
-    create,
-    ...inputTransitions,
+    create
+  }, inputTransitions, {
     easing: mergedEasing,
     duration: mergedDuration
-  };
+  });
 }
 
 // We need to centralize the zIndex definitions as they work
@@ -7919,17 +7937,15 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
+const _excluded$7 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput,
-    mixins: mixinsInput = {},
-    spacing: spacingInput,
-    palette: paletteInput = {},
-    transitions: transitionsInput = {},
-    typography: typographyInput = {},
-    shape: shapeInput,
-    ...other
-  } = options;
+      mixins: mixinsInput = {},
+      palette: paletteInput = {},
+      transitions: transitionsInput = {},
+      typography: typographyInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose$1(options, _excluded$7);
   if (options.vars) {
     throw new Error(formatMuiErrorMessage(18));
   }
@@ -7942,16 +7958,11 @@ function createTheme(options = {}, ...args) {
     shadows: shadows$1.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: {
-      ...zIndex$1
-    }
+    zIndex: _extends$2({}, zIndex$1)
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig$1,
-    ...(other == null ? void 0 : other.unstable_sxConfig)
-  };
+  muiTheme.unstable_sxConfig = _extends$2({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -7989,16 +8000,17 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-function ThemeProvider({
-  theme: themeInput,
-  ...props
-}) {
+const _excluded$6 = ["theme"];
+function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = _objectWithoutPropertiesLoose$1(_ref, _excluded$6);
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
-    ...props,
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$2({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
-  });
+  }));
 }
 
 function _extends() {
@@ -8361,7 +8373,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "8048" ;
+const NEBULA_VERSION_HASH = "65bf" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8608,7 +8620,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.1.0" );
+  element.setAttribute('data-nebulajs-version', "4.2.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -9013,7 +9025,7 @@ function SvgIcon$2(_ref) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(Type, _extends$1({
+      React__default.createElement(Type, _extends$3({
         key: ix
       }, attrs))
     );
@@ -9794,13 +9806,13 @@ const getValueStateClasses = _ref2 => {
 };
 
 const CELL_PADDING_LEFT = 9;
+const HEADER_PADDING_RIGHT = 4;
 const ICON_WIDTH = 12;
 const ICON_PADDING = 7;
 const BUTTON_ICON_WIDTH = ICON_WIDTH + (ICON_PADDING + 1) * 2; // 1 is border width
 const REMOVE_TICK_LIMIT = 80; // an item width equal to or less than this, will hide the select tick
 const SCROLL_BAR_WIDTH = 10; // TODO: ignore this - instead set the styling only show on hover...
 const ITEM_MAX_WIDTH = 150;
-const FREQUENCY_WIDTH = 40;
 const ITEM_MIN_WIDTH = 56;
 const CHECKBOX_WIDTH = 20;
 const frequencyTextNone = '-';
@@ -9822,10 +9834,39 @@ const getBarWidth = _ref => {
 };
 const getFrequencyText = qFrequency => qFrequency || frequencyTextNone;
 
-const getSelectedStyle = _ref => {
+const getFreqFlexBasis = _ref => {
   let {
-    theme
+    sizes,
+    frequencyMode,
+    isGridMode,
+    freqHitsValue
   } = _ref;
+  if (frequencyMode === 'P') {
+    return "".concat(sizes.freqMinWidth, "px");
+  }
+  const flexBasis = isGridMode && !freqHitsValue ? 'max-content' : '25%';
+  return flexBasis;
+};
+const getMaxFreqWidth = _ref2 => {
+  let {
+    sizes,
+    frequencyMode,
+    isGridMode
+  } = _ref2;
+  if (isGridMode) {
+    // This makes the neighbouring value stretch farther than when using a fixed freuency width.
+    return 'max-content';
+  }
+  if (frequencyMode === 'P') {
+    return sizes.freqMinWidth; // because it will never grow beyond "100.0%"
+  }
+
+  return sizes.freqMaxWidth;
+};
+const getSelectedStyle = _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return {
     background: theme.palette.selected.main,
     color: theme.palette.selected.mainContrastText,
@@ -9847,18 +9888,20 @@ const ellipsis = {
 const iconWidth = 24; // tick and lock icon width in px
 
 const RowColRoot = styled$1('div', {
-  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth', 'direction'].includes(prop)
-})(_ref2 => {
+  shouldForwardProp: prop => !['checkboxes', 'isGridMode', 'isGridCol', 'dense', 'direction', 'sizes', 'frequencyMode', 'freqHitsValue'].includes(prop)
+})(_ref4 => {
   var _theme$listBox$conten, _theme$listBox, _theme$listBox$conten2, _theme$listBox$conten3, _theme$listBox2, _theme$listBox2$conte, _theme$listBox3, _theme$listBox3$conte, _theme$listBox4, _theme$listBox4$conte;
   let {
     theme,
-    flexBasisProp,
+    checkboxes,
     isGridMode,
     isGridCol,
     dense,
-    frequencyWidth,
-    direction
-  } = _ref2;
+    direction,
+    sizes,
+    frequencyMode,
+    freqHitsValue
+  } = _ref4;
   return {
     '&:focus': {
       boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
@@ -9891,15 +9934,16 @@ const RowColRoot = styled$1('div', {
     ["& .".concat(rowColClasses.cell)]: {
       display: 'flex',
       alignItems: 'center',
-      minWidth: 0,
       flexGrow: 1,
+      minWidth: checkboxes ? '52px' : '26px',
+      // these numbers are just enough to show one letter and ellipsis: A…
+      flexBasis: checkboxes ? 'auto' : 'max-content',
       // Note that this padding is overridden when using checkboxes.
       paddingLeft: "".concat(CELL_PADDING_LEFT, "px"),
       paddingRight: 0
     },
     // The leaf node, containing the label text.
     ["& .".concat(rowColClasses.labelText)]: _objectSpread2(_objectSpread2({
-      flexBasis: flexBasisProp,
       lineHeight: '16px',
       userSelect: 'none',
       paddingRight: '1px'
@@ -9967,9 +10011,22 @@ const RowColRoot = styled$1('div', {
     ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
       justifyContent: 'flex-end'
     }, ellipsis), {}, {
-      flex: "0 1 ".concat(frequencyWidth, "px"),
+      flex: "0 0 ".concat(getFreqFlexBasis({
+        sizes,
+        frequencyMode,
+        isGridMode,
+        freqHitsValue
+      })),
+      minWidth: !isGridMode && frequencyMode !== 'P' && freqHitsValue ? sizes.freqMinWidth : 'max-content',
+      maxWidth: getMaxFreqWidth({
+        sizes,
+        frequencyMode,
+        isGridMode
+      }),
       textAlign: direction === 'rtl' ? 'left' : 'right',
-      paddingLeft: '2px'
+      // In RTL, we already get the 8px from the value element's padding and for
+      // percent mode we have already adapted the width (fixed width) to the max number.
+      paddingLeft: direction !== 'rtl' ? '8px' : 0
     }),
     ["&.".concat(rowColClasses.barContainer)]: {
       height: '100%',
@@ -10815,6 +10872,32 @@ function getRowsKeyboardNavigation(_ref) {
   return handleKeyDown;
 }
 
+function getValueTextAlign(_ref) {
+  let {
+    direction,
+    cell,
+    textAlign
+  } = _ref;
+  const isNumeric = !['NaN', undefined].includes(cell === null || cell === void 0 ? void 0 : cell.qNum);
+  let valueTextAlign;
+  const isAutoTextAlign = !textAlign || textAlign.auto;
+  const dirToTextAlignMap = {
+    rtl: 'right',
+    ltr: 'left'
+  };
+  if (isAutoTextAlign) {
+    if (!isNumeric) {
+      valueTextAlign = dirToTextAlignMap[direction];
+    } else {
+      valueTextAlign = direction === 'rtl' ? 'left' : 'right';
+    }
+  } else {
+    valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
+  }
+  const ALLOWED_OPTIONS = ['left', 'center', 'right'];
+  return ALLOWED_OPTIONS.includes(valueTextAlign) ? valueTextAlign : 'left';
+}
+
 function RowColumn(_ref) {
   var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
   let {
@@ -10850,10 +10933,10 @@ function RowColumn(_ref) {
     columnCount = 1,
     rowCount = 1,
     dataOffset,
+    deducedFrequencyMode,
     focusListItems,
     listCount,
-    itemPadding,
-    frequencyWidth,
+    sizes,
     translator,
     showSearch,
     isModal
@@ -10863,6 +10946,9 @@ function RowColumn(_ref) {
     dataLayout = 'singleColumn',
     layoutOrder
   } = layoutOptions;
+  const {
+    itemPadding
+  } = sizes;
   let cellIndex;
   let styles;
   const count = {
@@ -10930,26 +11016,15 @@ function RowColumn(_ref) {
   const preventContextMenu = useCallback(event => {
     event.preventDefault();
   }, [checkboxes]);
+  const valueTextAlign = useMemo$1(() => cell && getValueTextAlign({
+    direction,
+    cell,
+    textAlign
+  }), [direction, cell, textAlign]);
   if (!cell) {
     return null; // prevent rendering empty rows
   }
 
-  const isNumeric = !['NaN', undefined].includes(cell === null || cell === void 0 ? void 0 : cell.qNum);
-  let valueTextAlign;
-  const isAutoTextAlign = !textAlign || textAlign.auto;
-  const dirToTextAlignMap = {
-    rtl: 'right',
-    ltr: 'left'
-  };
-  if (isAutoTextAlign) {
-    if (!isNumeric) {
-      valueTextAlign = dirToTextAlignMap[direction];
-    } else {
-      valueTextAlign = direction === 'rtl' ? 'left' : 'right';
-    }
-  } else {
-    valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
-  }
   const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
   const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
   // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
@@ -10964,17 +11039,16 @@ function RowColumn(_ref) {
     display: 'flex',
     fontSize: '8px'
   };
+  const isRtl = direction === 'rtl';
   const cellStyle = {
     display: 'flex',
     alignItems: 'center',
-    minWidth: 0,
     flexGrow: 1,
-    paddingLeft: direction === 'rtl' ? 8 : checkboxes ? 0 : undefined,
-    paddingRight: checkboxes ? 0 : direction === 'rtl' ? 8 : 0,
+    paddingLeft: isRtl ? 8 : checkboxes ? 0 : undefined,
+    paddingRight: checkboxes ? 0 : isRtl ? 8 : 0,
     justifyContent: valueTextAlign
   };
   const isFirstElement = index === 0;
-  const flexBasisVal = checkboxes ? 'auto' : 'max-content';
   const showLock = isSelected && isLocked;
   const showTick = !checkboxes && isSelected && !isLocked;
   const showIcon = !checkboxes && sizePermitsTickOrLock;
@@ -10987,15 +11061,18 @@ function RowColumn(_ref) {
     maxIndex: count.max,
     showSearch
   });
+  const freqHitsValue = !isRtl && valueTextAlign === 'right' || isRtl && valueTextAlign === 'left';
   return /*#__PURE__*/React__default.createElement(RowColRoot$1, {
     className: rowColClasses.barContainer,
-    flexBasisProp: flexBasisVal,
+    checkboxes: checkboxes,
     style: styles,
     isGridCol: isGridCol,
     isGridMode: dataLayout === 'grid',
     dense: dense,
-    frequencyWidth: frequencyWidth,
     direction: direction,
+    sizes: sizes,
+    frequencyMode: deducedFrequencyMode,
+    freqHitsValue: freqHitsValue,
     "data-testid": "listbox.item"
   }, /*#__PURE__*/React__default.createElement(ItemGrid, {
     role: "row",
@@ -12619,7 +12696,7 @@ function getListBoxComponents(_ref) {
     pages,
     selectDisabled,
     interactionEvents,
-    frequencyMode,
+    deducedFrequencyMode,
     histogram,
     isSingleSelect,
     select,
@@ -12649,12 +12726,10 @@ function getListBoxComponents(_ref) {
   } = layout || {};
   const {
     columnWidth,
-    itemPadding,
     listHeight,
     itemHeight,
     rowCount,
-    columnCount,
-    frequencyWidth
+    columnCount
   } = sizes || {};
   const itemWidth = layoutOptions.dataLayout === 'grid' ? columnWidth : width;
   const showTick = itemWidth > REMOVE_TICK_LIMIT;
@@ -12675,12 +12750,11 @@ function getListBoxComponents(_ref) {
   }, isLocked || selectDisabled() ? {} : interactionEvents), {}, {
     checkboxes,
     layoutOptions,
-    frequencyMode,
+    deducedFrequencyMode,
     freqIsAllowed,
     isSingleSelect,
     textAlign,
-    itemPadding,
-    frequencyWidth,
+    sizes,
     actions: {
       select,
       confirm: () => selections === null || selections === void 0 ? void 0 : selections.confirm.call(selections),
@@ -12710,7 +12784,7 @@ function getListBoxComponents(_ref) {
     local.current.listRef = ref;
     return /*#__PURE__*/React__default.createElement(StyledFixedSizeList
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends$1({}, commonComponentOptions, {
+    , _extends$3({}, commonComponentOptions, {
       dataTestid: "fixed-size-list",
       scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
       height: listHeight,
@@ -12787,7 +12861,7 @@ function getListBoxComponents(_ref) {
     };
     return /*#__PURE__*/React__default.createElement(StyledFixedSizeGrid
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends$1({}, commonComponentOptions, {
+    , _extends$3({}, commonComponentOptions, {
       dataTestid: "fixed-size-grid",
       scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
       height: gridHeight,
@@ -12865,16 +12939,46 @@ function calculateRowMode(_ref) {
   };
 }
 
-function getListSizes(_ref) {
+const getContext = () => {
+  const fragment = document.createDocumentFragment();
+  const canvas = document.createElement('canvas');
+  fragment.appendChild(canvas);
+  return canvas.getContext('2d');
+};
+const getTextWidth = (currentText, font) => {
+  const context = getContext();
+  context.font = font;
+  if (Array.isArray(currentText)) {
+    return Math.max(...currentText.map(t => context.measureText(t).width));
+  }
+  const metrics = context.measureText(currentText);
+  return Math.ceil(metrics.width || 0);
+};
+const useTextWidth = options => {
+  const textOptions = useMemo$1(() => 'text' in options ? options : {}, [options]);
+  return useMemo$1(() => getTextWidth(textOptions.text, textOptions.font || '12px Source Sans Pro'), [textOptions.text, textOptions.font]);
+};
+
+function getMeasureText(layoutOrNumber) {
+  if (!layoutOrNumber) {
+    return '';
+  }
+  const maxGlyphCount = typeof layoutOrNumber === 'number' ? layoutOrNumber : layoutOrNumber.qListObject.qDimensionInfo.qApprMaxGlyphCount;
+  const measureString = Array(maxGlyphCount).fill('M').join('');
+  return measureString;
+}
+
+function useListSizes(_ref) {
+  var _theme$listBox;
   let {
     layout,
     width,
     height,
     listCount,
     count,
-    textWidth,
     freqIsAllowed,
-    checkboxes
+    checkboxes,
+    theme
   } = _ref;
   const {
     layoutOptions = {}
@@ -12886,7 +12990,24 @@ function getListSizes(_ref) {
     dense,
     dataLayout
   } = layoutOptions;
-  const frequencyAddWidth = freqIsAllowed ? FREQUENCY_WIDTH : 0;
+  const {
+    fontSize = '12px',
+    fontFamily = 'Source sans pro'
+  } = ((_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.content) || {};
+  const font = "".concat(fontSize, " ").concat(fontFamily); // font format as supported by HTML canvas
+  const textWidth = useTextWidth({
+    text: getMeasureText(layout),
+    font
+  });
+  const freqMinWidth = useTextWidth({
+    text: getMeasureText(5),
+    font
+  });
+  const freqMaxWidth = useTextWidth({
+    text: getMeasureText(8),
+    font
+  });
+  const frequencyAddWidth = freqIsAllowed ? freqMinWidth : 0;
   const checkboxAddWidth = checkboxes ? CHECKBOX_WIDTH : 0;
   const tickIconWidth = CHECKBOX_WIDTH;
   let dynamicItemMinWidth = ITEM_MIN_WIDTH + frequencyAddWidth + checkboxAddWidth;
@@ -12967,6 +13088,7 @@ function getListSizes(_ref) {
     overflowStyling,
     itemHeight,
     listHeight,
+    listWidth: width,
     scrollBarWidth: SCROLL_BAR_WIDTH,
     count,
     listCount: limitedListCount,
@@ -12975,42 +13097,12 @@ function getListSizes(_ref) {
       column: maxColumnCount
     },
     itemPadding,
-    frequencyWidth: FREQUENCY_WIDTH
+    textWidth,
+    freqMinWidth,
+    freqMaxWidth
   };
 }
 
-const getContext = () => {
-  const fragment = document.createDocumentFragment();
-  const canvas = document.createElement('canvas');
-  fragment.appendChild(canvas);
-  return canvas.getContext('2d');
-};
-const getTextWidth = (currentText, font) => {
-  const context = getContext();
-  context.font = font;
-  if (Array.isArray(currentText)) {
-    return Math.max(...currentText.map(t => context.measureText(t).width));
-  }
-  const metrics = context.measureText(currentText);
-  return metrics.width;
-};
-const useTextWidth = options => {
-  const textOptions = useMemo$1(() => 'text' in options ? options : {}, [options]);
-  return useMemo$1(() => getTextWidth(textOptions.text, textOptions.font || '14px Source Sans Pro'), [textOptions.text, textOptions.font]);
-};
-
-function getMeasureText(layout) {
-  if (!layout) {
-    return '';
-  }
-  const maxGlyphCount = layout.qListObject.qDimensionInfo.qApprMaxGlyphCount;
-  let measureString = '';
-  for (let i = 0; i < maxGlyphCount; i++) {
-    measureString += 'M';
-  }
-  return measureString;
-}
-
 function getHorizontalMinBatchSize(_ref) {
   let {
     width,
@@ -13202,6 +13294,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
+const _excluded$5 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -13257,58 +13350,56 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     name: 'MuiSvgIcon'
   });
   const {
-    children,
-    className,
-    color = 'inherit',
-    component = 'svg',
-    fontSize = 'medium',
-    htmlColor,
-    inheritViewBox = false,
-    titleAccess,
-    viewBox = '0 0 24 24',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      children,
+      className,
+      color = 'inherit',
+      component = 'svg',
+      fontSize = 'medium',
+      htmlColor,
+      inheritViewBox = false,
+      titleAccess,
+      viewBox = '0 0 24 24'
+    } = props,
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
+  const ownerState = _extends$2({}, props, {
     color,
     component,
     fontSize,
     instanceFontSize: inProps.fontSize,
     inheritViewBox,
     viewBox
-  };
+  });
   const more = {};
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$2({
     as: component,
     className: clsx(classes.root, className),
     focusable: "false",
     color: htmlColor,
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
-    ref: ref,
-    ...more,
-    ...other,
+    ref: ref
+  }, more, other, {
     ownerState: ownerState,
     children: [children, titleAccess ? /*#__PURE__*/jsxRuntimeExports.jsx("title", {
       children: titleAccess
     }) : null]
-  });
+  }));
 });
 SvgIcon.muiName = 'SvgIcon';
 var SvgIcon$1 = SvgIcon;
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, {
+    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, _extends$2({
       "data-testid": `${displayName}Icon`,
-      ref: ref,
-      ...props,
+      ref: ref
+    }, props, {
       children: path
-    });
+    }));
   }
   Component.muiName = SvgIcon$1.muiName;
   return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
@@ -13491,7 +13582,7 @@ function getFrequencyAllowed(_ref) {
   const {
     frequencyEnabled = false
   } = (layout === null || layout === void 0 ? void 0 : layout.qListObject) || {};
-  const hasValidFreqOption = !['none', undefined].includes(frequencyMode);
+  const hasValidFreqOption = !['N', undefined].includes(frequencyMode);
   return !!(widthPermitsFreq && (hasValidFreqOption || frequencyEnabled));
 }
 
@@ -13538,6 +13629,21 @@ const useFrequencyMax = (app, layout) => {
   };
 };
 
+function deduceFrequencyMode(pages) {
+  const hasPercentSign = pages.some(_ref => {
+    let {
+      qMatrix
+    } = _ref;
+    return qMatrix.some(_ref2 => {
+      var _item$qFrequency;
+      let [item] = _ref2;
+      return !!((_item$qFrequency = item.qFrequency) !== null && _item$qFrequency !== void 0 && _item$qFrequency.match('%'));
+    });
+  });
+  const OTHER = '-'; // treat all other as '-' (change later if we need to identify other modes)
+  return hasPercentSign ? 'P' : OTHER;
+}
+
 const _excluded$4 = ["isLoadingData"];
 const DEFAULT_MIN_BATCH_SIZE = 100;
 const StyledWrapper = styled$4('div')(() => ({
@@ -13554,6 +13660,7 @@ function ListBox(_ref) {
     model,
     app,
     constraints,
+    theme,
     layout,
     selections,
     selectionState,
@@ -13709,10 +13816,6 @@ function ListBox(_ref) {
   useEffect$1(() => {
     fetchData();
   }, [layout, local.current.dataOffset]);
-  const textWidth = useTextWidth({
-    text: getMeasureText(layout),
-    font: '14px Source sans pro'
-  });
   let minimumBatchSize = DEFAULT_MIN_BATCH_SIZE;
   const isVertical = layoutOptions.dataLayout !== 'grid';
   const count = layout === null || layout === void 0 ? void 0 : (_layout$qListObject$q = layout.qListObject.qSize) === null || _layout$qListObject$q === void 0 ? void 0 : _layout$qListObject$q.qcy;
@@ -13729,15 +13832,16 @@ function ListBox(_ref) {
     layout,
     frequencyMode
   });
-  const sizes = getListSizes({
+  const deducedFrequencyMode = deduceFrequencyMode(pages);
+  const sizes = useListSizes({
     layout,
     width,
     height,
     listCount: unlimitedListCount,
     count,
-    textWidth,
     freqIsAllowed,
-    checkboxes
+    checkboxes,
+    theme
   });
   if (sizes.columnWidth) {
     // In grid mode, where we have a dynamic item width, get a second opinion on showing/hiding frequency.
@@ -13814,7 +13918,7 @@ function ListBox(_ref) {
     height,
     width,
     checkboxes,
-    frequencyMode,
+    deducedFrequencyMode,
     histogram,
     keyboard,
     showGray,
@@ -14185,7 +14289,7 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   const autoFocusIndex = actions.findIndex(action => !action.disabled);
   return showActions && /*#__PURE__*/React__default.createElement(StyledPopover$1
   // eslint-disable-next-line react/jsx-props-no-spreading
-  , _extends$1({}, popoverProps, {
+  , _extends$3({}, popoverProps, {
     onClose: onCloseOrActionClick,
     ref: ref,
     open: show,
@@ -14303,9 +14407,7 @@ function getActionsKeyDownHandler(_ref) {
 const PREFIX$7 = 'ActionsToolbar';
 const classes$7 = {
   item: "".concat(PREFIX$7, "-item"),
-  itemSpacing: "".concat(PREFIX$7, "-itemSpacing"),
-  firstItemSpacing: "".concat(PREFIX$7, "-firstItemSpacing"),
-  lastItemSpacing: "".concat(PREFIX$7, "-lastItemSpacing")
+  itemSpacing: "".concat(PREFIX$7, "-itemSpacing")
 };
 const StyledPopover = styled$1(Popover)(_ref => {
   let {
@@ -14313,13 +14415,7 @@ const StyledPopover = styled$1(Popover)(_ref => {
   } = _ref;
   return {
     ["& .".concat(classes$7.itemSpacing)]: {
-      padding: theme.spacing(0, 0.5)
-    },
-    ["& .".concat(classes$7.firstItemSpacing)]: {
-      padding: theme.spacing(0, 0.5, 0, 0)
-    },
-    ["& .".concat(classes$7.lastItemSpacing)]: {
-      padding: theme.spacing(0, 0, 0, 0.5)
+      padding: theme.spacing(0, 0.25)
     }
   };
 });
@@ -14338,8 +14434,6 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
     className,
     ariaExpanded = false,
     actions = [],
-    first = false,
-    last = false,
     addAnchor = false,
     isRtl = false
   } = _ref2;
@@ -14350,31 +14444,17 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
     flexDirection: isRtl ? 'row-reverse' : 'row',
     wrap: "nowrap",
     className: className
-  }, actions.map((e, ix) => {
-    let cls = [];
-    const isFirstItem = first && ix === 0;
-    const isLastItem = last && actions.length - 1 === ix;
-    if (isFirstItem && !isLastItem) {
-      cls = [classes$7.firstItemSpacing, classes$7.item];
-    }
-    if (isLastItem && !isFirstItem) {
-      cls = [...cls, classes$7.lastItemSpacing, classes$7.item];
-    }
-    if (!isFirstItem && !isLastItem && cls.length === 0) {
-      cls = [classes$7.itemSpacing, classes$7.item];
-    }
-    return /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      key: e.key,
-      className: cls.join(' ').trim()
-    }, /*#__PURE__*/React__default.createElement(Item, {
-      ariaExpanded: ariaExpanded,
-      key: e.key,
-      item: e,
-      ref: ix === 0 ? ref : null,
-      addAnchor: addAnchor
-    }));
-  })) : null;
+  }, actions.map((e, ix) => /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    key: e.key,
+    className: "".concat(classes$7.itemSpacing, " ").concat(classes$7.item)
+  }, /*#__PURE__*/React__default.createElement(Item, {
+    ariaExpanded: ariaExpanded,
+    key: e.key,
+    item: e,
+    ref: ix === 0 ? ref : null,
+    addAnchor: addAnchor
+  })))) : null;
 });
 const popoverStyle = {
   pointerEvents: 'none'
@@ -14418,7 +14498,7 @@ function ActionsToolbar(_ref3) {
   } = useContext(InstanceContext);
   const [showMoreItems, setShowMoreItems] = useState$1(false);
   const popoverAnchorOrigin = {
-    vertical: 7,
+    vertical: 12,
     horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
   };
   const actionsRef = useRef();
@@ -14494,17 +14574,13 @@ function ActionsToolbar(_ref3) {
       flexDirection: isRtl ? 'row-reverse' : 'row'
     }
   }, showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
-    actions: newActions,
-    first: true,
-    last: !showMore && !selections.show
+    actions: newActions
   }), showMore && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     id: "actions-toolbar-show-more",
     "data-testid": "actions-toolbar-show-more",
     ref: moreRef,
     ariaExpanded: showMoreItems,
     actions: [moreItem],
-    first: !showActions,
-    last: !selections.show,
     addAnchor: true
   }), showDivider && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -14515,8 +14591,6 @@ function ActionsToolbar(_ref3) {
   })), selections.show && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     className: "actions-toolbar-default-actions",
     actions: defaultSelectionActions,
-    first: !showActions && !showMore,
-    last: true,
     isRtl: isRtl
   }), showMoreItems && /*#__PURE__*/React__default.createElement(More$1, {
     show: showMoreItems,
@@ -14542,7 +14616,7 @@ function ActionsToolbar(_ref3) {
       className: ActionToolbarElement.className,
       style: {
         pointerEvents: 'auto',
-        padding: theme.spacing(0.8)
+        padding: theme.spacing(0.5, 0.25)
       }
     }
   }, Actions) : show && Actions;
@@ -16131,18 +16205,6 @@ function mount(_ref2) {
   }), element, uid());
 }
 
-var $parcel$global =
-typeof globalThis !== 'undefined'
-  ? globalThis
-  : typeof self !== 'undefined'
-  ? self
-  : typeof window !== 'undefined'
-  ? window
-  : typeof global !== 'undefined'
-  ? global
-  : {};
-
-var $3e40d2fd7fdb47d2$exports = {};
 /**
  * Detect Element Resize.
  * https://github.com/sdecima/javascript-detect-element-resize
@@ -16153,335 +16215,370 @@ var $3e40d2fd7fdb47d2$exports = {};
  * 2) Defer initialization code via a top-level function wrapper (to support SSR).
  * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
  * 4) Add nonce for style element.
- **/ // Check `document` and `window` in case of server-side rendering
-let $3e40d2fd7fdb47d2$var$windowObject;
-if (typeof window !== "undefined") $3e40d2fd7fdb47d2$var$windowObject = window;
-else if (typeof self !== "undefined") // eslint-disable-next-line no-restricted-globals
-$3e40d2fd7fdb47d2$var$windowObject = self;
-else $3e40d2fd7fdb47d2$var$windowObject = $parcel$global;
-let $3e40d2fd7fdb47d2$var$cancelFrame = null;
-let $3e40d2fd7fdb47d2$var$requestFrame = null;
-const $3e40d2fd7fdb47d2$var$TIMEOUT_DURATION = 20;
-const $3e40d2fd7fdb47d2$var$clearTimeoutFn = $3e40d2fd7fdb47d2$var$windowObject.clearTimeout;
-const $3e40d2fd7fdb47d2$var$setTimeoutFn = $3e40d2fd7fdb47d2$var$windowObject.setTimeout;
-const $3e40d2fd7fdb47d2$var$cancelAnimationFrameFn = $3e40d2fd7fdb47d2$var$windowObject.cancelAnimationFrame || $3e40d2fd7fdb47d2$var$windowObject.mozCancelAnimationFrame || $3e40d2fd7fdb47d2$var$windowObject.webkitCancelAnimationFrame;
-const $3e40d2fd7fdb47d2$var$requestAnimationFrameFn = $3e40d2fd7fdb47d2$var$windowObject.requestAnimationFrame || $3e40d2fd7fdb47d2$var$windowObject.mozRequestAnimationFrame || $3e40d2fd7fdb47d2$var$windowObject.webkitRequestAnimationFrame;
-if ($3e40d2fd7fdb47d2$var$cancelAnimationFrameFn == null || $3e40d2fd7fdb47d2$var$requestAnimationFrameFn == null) {
-    // For environments that don't support animation frame,
-    // fallback to a setTimeout based approach.
-    $3e40d2fd7fdb47d2$var$cancelFrame = $3e40d2fd7fdb47d2$var$clearTimeoutFn;
-    $3e40d2fd7fdb47d2$var$requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
-        return $3e40d2fd7fdb47d2$var$setTimeoutFn(callback, $3e40d2fd7fdb47d2$var$TIMEOUT_DURATION);
-    };
+ * 5) Use 'export' statement over 'module.exports' assignment
+ **/
+
+// Check `document` and `window` in case of server-side rendering
+let windowObject;
+if (typeof window !== "undefined") {
+  windowObject = window;
+
+  // eslint-disable-next-line no-restricted-globals
+} else if (typeof self !== "undefined") {
+  // eslint-disable-next-line no-restricted-globals
+  windowObject = self;
 } else {
-    // Counter intuitively, environments that support animation frames can be trickier.
-    // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
-    // In this case, we should fallback to a setTimeout() implementation.
-    $3e40d2fd7fdb47d2$var$cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
-        $3e40d2fd7fdb47d2$var$cancelAnimationFrameFn(animationFrameID);
-        $3e40d2fd7fdb47d2$var$clearTimeoutFn(timeoutID);
-    };
-    $3e40d2fd7fdb47d2$var$requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
-        const animationFrameID = $3e40d2fd7fdb47d2$var$requestAnimationFrameFn(function animationFrameCallback() {
-            $3e40d2fd7fdb47d2$var$clearTimeoutFn(timeoutID);
-            callback();
-        });
-        const timeoutID = $3e40d2fd7fdb47d2$var$setTimeoutFn(function timeoutCallback() {
-            $3e40d2fd7fdb47d2$var$cancelAnimationFrameFn(animationFrameID);
-            callback();
-        }, $3e40d2fd7fdb47d2$var$TIMEOUT_DURATION);
-        return [
-            animationFrameID,
-            timeoutID
-        ];
-    };
+  windowObject = global;
+}
+let cancelFrame = null;
+let requestFrame = null;
+const TIMEOUT_DURATION = 20;
+const clearTimeoutFn = windowObject.clearTimeout;
+const setTimeoutFn = windowObject.setTimeout;
+const cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
+const requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
+if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
+  // For environments that don't support animation frame,
+  // fallback to a setTimeout based approach.
+  cancelFrame = clearTimeoutFn;
+  requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
+    return setTimeoutFn(callback, TIMEOUT_DURATION);
+  };
+} else {
+  // Counter intuitively, environments that support animation frames can be trickier.
+  // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
+  // In this case, we should fallback to a setTimeout() implementation.
+  cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
+    cancelAnimationFrameFn(animationFrameID);
+    clearTimeoutFn(timeoutID);
+  };
+  requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
+    const animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
+      clearTimeoutFn(timeoutID);
+      callback();
+    });
+    const timeoutID = setTimeoutFn(function timeoutCallback() {
+      cancelAnimationFrameFn(animationFrameID);
+      callback();
+    }, TIMEOUT_DURATION);
+    return [animationFrameID, timeoutID];
+  };
 }
-function $3e40d2fd7fdb47d2$var$createDetectElementResize(nonce) {
-    let animationKeyframes;
-    let animationName;
-    let animationStartEvent;
-    let animationStyle;
-    let checkTriggers;
-    let resetTriggers;
-    let scrollListener;
-    const attachEvent = typeof document !== "undefined" && document.attachEvent;
-    if (!attachEvent) {
-        resetTriggers = function(element) {
-            const triggers = element.__resizeTriggers__, expand = triggers.firstElementChild, contract = triggers.lastElementChild, expandChild = expand.firstElementChild;
-            contract.scrollLeft = contract.scrollWidth;
-            contract.scrollTop = contract.scrollHeight;
-            expandChild.style.width = expand.offsetWidth + 1 + "px";
-            expandChild.style.height = expand.offsetHeight + 1 + "px";
-            expand.scrollLeft = expand.scrollWidth;
-            expand.scrollTop = expand.scrollHeight;
-        };
-        checkTriggers = function(element) {
-            return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-        };
-        scrollListener = function(e) {
-            // Don't measure (which forces) reflow for scrolls that happen inside of children!
-            if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) return;
-            const element = this;
-            resetTriggers(this);
-            if (this.__resizeRAF__) $3e40d2fd7fdb47d2$var$cancelFrame(this.__resizeRAF__);
-            this.__resizeRAF__ = $3e40d2fd7fdb47d2$var$requestFrame(function animationFrame() {
-                if (checkTriggers(element)) {
-                    element.__resizeLast__.width = element.offsetWidth;
-                    element.__resizeLast__.height = element.offsetHeight;
-                    element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
-                        fn.call(element, e);
-                    });
-                }
-            });
-        };
-        /* Detect CSS Animations support to detect element display/re-attach */ let animation = false;
-        let keyframeprefix = "";
-        animationStartEvent = "animationstart";
-        const domPrefixes = "Webkit Moz O ms".split(" ");
-        let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
-        let pfx = "";
-        {
-            const elm = document.createElement("fakeelement");
-            if (elm.style.animationName !== undefined) animation = true;
-            if (animation === false) {
-                for(let i = 0; i < domPrefixes.length; i++)if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
-                    pfx = domPrefixes[i];
-                    keyframeprefix = "-" + pfx.toLowerCase() + "-";
-                    animationStartEvent = startEvents[i];
-                    animation = true;
-                    break;
-                }
-            }
-        }
-        animationName = "resizeanim";
-        animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
-        animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
-    }
-    const createStyles = function(doc) {
-        if (!doc.getElementById("detectElementResize")) {
-            //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-            const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = doc.head || doc.getElementsByTagName("head")[0], style = doc.createElement("style");
-            style.id = "detectElementResize";
-            style.type = "text/css";
-            if (nonce != null) style.setAttribute("nonce", nonce);
-            if (style.styleSheet) style.styleSheet.cssText = css;
-            else style.appendChild(doc.createTextNode(css));
-            head.appendChild(style);
-        }
+function createDetectElementResize(nonce) {
+  let animationKeyframes;
+  let animationName;
+  let animationStartEvent;
+  let animationStyle;
+  let checkTriggers;
+  let resetTriggers;
+  let scrollListener;
+  const attachEvent = typeof document !== "undefined" && document.attachEvent;
+  if (!attachEvent) {
+    resetTriggers = function (element) {
+      const triggers = element.__resizeTriggers__,
+        expand = triggers.firstElementChild,
+        contract = triggers.lastElementChild,
+        expandChild = expand.firstElementChild;
+      contract.scrollLeft = contract.scrollWidth;
+      contract.scrollTop = contract.scrollHeight;
+      expandChild.style.width = expand.offsetWidth + 1 + "px";
+      expandChild.style.height = expand.offsetHeight + 1 + "px";
+      expand.scrollLeft = expand.scrollWidth;
+      expand.scrollTop = expand.scrollHeight;
     };
-    const addResizeListener = function(element, fn) {
-        if (attachEvent) element.attachEvent("onresize", fn);
-        else {
-            if (!element.__resizeTriggers__) {
-                const doc = element.ownerDocument;
-                const elementStyle = $3e40d2fd7fdb47d2$var$windowObject.getComputedStyle(element);
-                if (elementStyle && elementStyle.position === "static") element.style.position = "relative";
-                createStyles(doc);
-                element.__resizeLast__ = {};
-                element.__resizeListeners__ = [];
-                (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
-                const expandTrigger = doc.createElement("div");
-                expandTrigger.className = "expand-trigger";
-                expandTrigger.appendChild(doc.createElement("div"));
-                const contractTrigger = doc.createElement("div");
-                contractTrigger.className = "contract-trigger";
-                element.__resizeTriggers__.appendChild(expandTrigger);
-                element.__resizeTriggers__.appendChild(contractTrigger);
-                element.appendChild(element.__resizeTriggers__);
-                resetTriggers(element);
-                element.addEventListener("scroll", scrollListener, true);
-                /* Listen for a css animation to detect element display/re-attach */ if (animationStartEvent) {
-                    element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-                        if (e.animationName === animationName) resetTriggers(element);
-                    };
-                    element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
-                }
-            }
-            element.__resizeListeners__.push(fn);
-        }
+    checkTriggers = function (element) {
+      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
     };
-    const removeResizeListener = function(element, fn) {
-        if (attachEvent) element.detachEvent("onresize", fn);
-        else {
-            element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-            if (!element.__resizeListeners__.length) {
-                element.removeEventListener("scroll", scrollListener, true);
-                if (element.__resizeTriggers__.__animationListener__) {
-                    element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
-                    element.__resizeTriggers__.__animationListener__ = null;
-                }
-                try {
-                    element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-                } catch (e) {
-                // Preact compat; see developit/preact-compat/issues/228
-                }
-            }
+    scrollListener = function (e) {
+      // Don't measure (which forces) reflow for scrolls that happen inside of children!
+      if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) {
+        return;
+      }
+      const element = this;
+      resetTriggers(this);
+      if (this.__resizeRAF__) {
+        cancelFrame(this.__resizeRAF__);
+      }
+      this.__resizeRAF__ = requestFrame(function animationFrame() {
+        if (checkTriggers(element)) {
+          element.__resizeLast__.width = element.offsetWidth;
+          element.__resizeLast__.height = element.offsetHeight;
+          element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
+            fn.call(element, e);
+          });
         }
+      });
     };
-    return {
-        addResizeListener: addResizeListener,
-        removeResizeListener: removeResizeListener
-    };
-}
-$3e40d2fd7fdb47d2$exports = {
-    createDetectElementResize: $3e40d2fd7fdb47d2$var$createDetectElementResize
-};
 
-
-function $6e2bb92d9db3b0c8$var$_defineProperty(obj, key, value) {
-    key = $6e2bb92d9db3b0c8$var$_toPropertyKey(key);
-    if (key in obj) Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-    });
-    else obj[key] = value;
-    return obj;
-}
-function $6e2bb92d9db3b0c8$var$_toPropertyKey(arg) {
-    var key = $6e2bb92d9db3b0c8$var$_toPrimitive(arg, "string");
-    return typeof key === "symbol" ? key : String(key);
-}
-function $6e2bb92d9db3b0c8$var$_toPrimitive(input, hint) {
-    if (typeof input !== "object" || input === null) return input;
-    var prim = input[Symbol.toPrimitive];
-    if (prim !== undefined) {
-        var res = prim.call(input, hint || "default");
-        if (typeof res !== "object") return res;
-        throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return (hint === "string" ? String : Number)(input);
-}
-class $6e2bb92d9db3b0c8$export$9d94f4ee1d930ff extends (Component) {
-    constructor(...args){
-        super(...args);
-        $6e2bb92d9db3b0c8$var$_defineProperty(this, "state", {
-            height: this.props.defaultHeight || 0,
-            scaledHeight: this.props.defaultHeight || 0,
-            scaledWidth: this.props.defaultWidth || 0,
-            width: this.props.defaultWidth || 0
-        });
-        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_autoSizer", null);
-        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_detectElementResize", null);
-        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_parentNode", null);
-        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_resizeObserver", null);
-        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_onResize", ()=>{
-            const { disableHeight: disableHeight , disableWidth: disableWidth , onResize: onResize  } = this.props;
-            if (this._parentNode) {
-                var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
-                // Guard against AutoSizer component being removed from the DOM immediately after being added.
-                // This can result in invalid style values which can result in NaN values if we don't handle them.
-                // See issue #150 for more context.
-                const style = window.getComputedStyle(this._parentNode) || {};
-                const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
-                const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
-                const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
-                const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
-                const rect = this._parentNode.getBoundingClientRect();
-                const scaledHeight = rect.height - paddingTop - paddingBottom;
-                const scaledWidth = rect.width - paddingLeft - paddingRight;
-                const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
-                const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
-                if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
-                    this.setState({
-                        height: height,
-                        width: width,
-                        scaledHeight: scaledHeight,
-                        scaledWidth: scaledWidth
-                    });
-                    if (typeof onResize === "function") onResize({
-                        height: height,
-                        scaledHeight: scaledHeight,
-                        scaledWidth: scaledWidth,
-                        width: width
-                    });
-                }
-            }
-        });
-        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_setRef", (autoSizer)=>{
-            this._autoSizer = autoSizer;
-        });
-    }
-    componentDidMount() {
-        const { nonce: nonce  } = this.props;
-        if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
-            // Delay access of parentNode until mount.
-            // This handles edge-cases where the component has already been unmounted before its ref has been set,
-            // As well as libraries like react-lite which have a slightly different lifecycle.
-            this._parentNode = this._autoSizer.parentNode;
-            // Defer requiring resize handler in order to support server-side rendering.
-            // See issue #41
-            if (this._parentNode != null) {
-                if (typeof ResizeObserver !== "undefined") {
-                    this._resizeObserver = new ResizeObserver(()=>{
-                        // Guard against "ResizeObserver loop limit exceeded" error;
-                        // could be triggered if the state update causes the ResizeObserver handler to run long.
-                        // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
-                        setTimeout(this._onResize, 0);
-                    });
-                    this._resizeObserver.observe(this._parentNode);
-                } else {
-                    this._detectElementResize = (0, $3e40d2fd7fdb47d2$exports.createDetectElementResize)(nonce);
-                    this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
-                }
-                this._onResize();
-            }
+    /* Detect CSS Animations support to detect element display/re-attach */
+    let animation = false;
+    let keyframeprefix = "";
+    animationStartEvent = "animationstart";
+    const domPrefixes = "Webkit Moz O ms".split(" ");
+    let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
+    let pfx = "";
+    {
+      const elm = document.createElement("fakeelement");
+      if (elm.style.animationName !== undefined) {
+        animation = true;
+      }
+      if (animation === false) {
+        for (let i = 0; i < domPrefixes.length; i++) {
+          if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
+            pfx = domPrefixes[i];
+            keyframeprefix = "-" + pfx.toLowerCase() + "-";
+            animationStartEvent = startEvents[i];
+            animation = true;
+            break;
+          }
         }
+      }
     }
-    componentWillUnmount() {
-        if (this._parentNode) {
-            if (this._detectElementResize) this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
-            if (this._resizeObserver) {
-                this._resizeObserver.observe(this._parentNode);
-                this._resizeObserver.disconnect();
+    animationName = "resizeanim";
+    animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
+    animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
+  }
+  const createStyles = function (doc) {
+    if (!doc.getElementById("detectElementResize")) {
+      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+      const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = doc.head || doc.getElementsByTagName("head")[0],
+        style = doc.createElement("style");
+      style.id = "detectElementResize";
+      style.type = "text/css";
+      if (nonce != null) {
+        style.setAttribute("nonce", nonce);
+      }
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(doc.createTextNode(css));
+      }
+      head.appendChild(style);
+    }
+  };
+  const addResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.attachEvent("onresize", fn);
+    } else {
+      if (!element.__resizeTriggers__) {
+        const doc = element.ownerDocument;
+        const elementStyle = windowObject.getComputedStyle(element);
+        if (elementStyle && elementStyle.position === "static") {
+          element.style.position = "relative";
+        }
+        createStyles(doc);
+        element.__resizeLast__ = {};
+        element.__resizeListeners__ = [];
+        (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
+        const expandTrigger = doc.createElement("div");
+        expandTrigger.className = "expand-trigger";
+        expandTrigger.appendChild(doc.createElement("div"));
+        const contractTrigger = doc.createElement("div");
+        contractTrigger.className = "contract-trigger";
+        element.__resizeTriggers__.appendChild(expandTrigger);
+        element.__resizeTriggers__.appendChild(contractTrigger);
+        element.appendChild(element.__resizeTriggers__);
+        resetTriggers(element);
+        element.addEventListener("scroll", scrollListener, true);
+
+        /* Listen for a css animation to detect element display/re-attach */
+        if (animationStartEvent) {
+          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
+            if (e.animationName === animationName) {
+              resetTriggers(element);
             }
+          };
+          element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
         }
+      }
+      element.__resizeListeners__.push(fn);
     }
-    render() {
-        const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight , disableWidth: disableWidth , nonce: nonce , onResize: onResize , style: style , tagName: tagName = "div" , ...rest } = this.props;
-        const { height: height , scaledHeight: scaledHeight , scaledWidth: scaledWidth , width: width  } = this.state;
-        // Outer div should not force width/height since that may prevent containers from shrinking.
-        // Inner component should overflow and use calculated width/height.
-        // See issue #68 for more information.
-        const outerStyle = {
-            overflow: "visible"
-        };
-        const childParams = {};
-        // Avoid rendering children before the initial measurements have been collected.
-        // At best this would just be wasting cycles.
-        let bailoutOnChildren = false;
-        if (!disableHeight) {
-            if (height === 0) bailoutOnChildren = true;
-            outerStyle.height = 0;
-            childParams.height = height;
-            childParams.scaledHeight = scaledHeight;
+  };
+  const removeResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.detachEvent("onresize", fn);
+    } else {
+      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+      if (!element.__resizeListeners__.length) {
+        element.removeEventListener("scroll", scrollListener, true);
+        if (element.__resizeTriggers__.__animationListener__) {
+          element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
+          element.__resizeTriggers__.__animationListener__ = null;
         }
-        if (!disableWidth) {
-            if (width === 0) bailoutOnChildren = true;
-            outerStyle.width = 0;
-            childParams.width = width;
-            childParams.scaledWidth = scaledWidth;
+        try {
+          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+        } catch (e) {
+          // Preact compat; see developit/preact-compat/issues/228
         }
-        return (createElement)(tagName, {
-            ref: this._setRef,
-            style: {
-                ...outerStyle,
-                ...style
-            },
-            ...rest
-        }, !bailoutOnChildren && children(childParams));
+      }
     }
+  };
+  return {
+    addResizeListener,
+    removeResizeListener
+  };
 }
-$6e2bb92d9db3b0c8$var$_defineProperty($6e2bb92d9db3b0c8$export$9d94f4ee1d930ff, "defaultProps", {
-    onResize: ()=>{},
-    disableHeight: false,
-    disableWidth: false,
-    style: {}
-});
 
+class AutoSizer extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      height: this.props.defaultHeight || 0,
+      scaledHeight: this.props.defaultHeight || 0,
+      scaledWidth: this.props.defaultWidth || 0,
+      width: this.props.defaultWidth || 0
+    };
+    this._autoSizer = null;
+    this._detectElementResize = null;
+    this._parentNode = null;
+    this._resizeObserver = null;
+    this._timeoutId = null;
+    this._onResize = () => {
+      this._timeoutId = null;
+      const {
+        disableHeight,
+        disableWidth,
+        onResize
+      } = this.props;
+      if (this._parentNode) {
+        var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
+        // Guard against AutoSizer component being removed from the DOM immediately after being added.
+        // This can result in invalid style values which can result in NaN values if we don't handle them.
+        // See issue #150 for more context.
+
+        const style = window.getComputedStyle(this._parentNode) || {};
+        const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
+        const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
+        const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
+        const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
+        const rect = this._parentNode.getBoundingClientRect();
+        const scaledHeight = rect.height - paddingTop - paddingBottom;
+        const scaledWidth = rect.width - paddingLeft - paddingRight;
+        const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
+        const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
+        if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
+          this.setState({
+            height,
+            width,
+            scaledHeight,
+            scaledWidth
+          });
+          if (typeof onResize === "function") {
+            onResize({
+              height,
+              scaledHeight,
+              scaledWidth,
+              width
+            });
+          }
+        }
+      }
+    };
+    this._setRef = autoSizer => {
+      this._autoSizer = autoSizer;
+    };
+  }
+  componentDidMount() {
+    const {
+      nonce
+    } = this.props;
+    if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = this._autoSizer.parentNode;
+
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      if (this._parentNode != null) {
+        if (typeof ResizeObserver !== "undefined") {
+          this._resizeObserver = new ResizeObserver(() => {
+            // Guard against "ResizeObserver loop limit exceeded" error;
+            // could be triggered if the state update causes the ResizeObserver handler to run long.
+            // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
+            this._timeoutId = setTimeout(this._onResize, 0);
+          });
+          this._resizeObserver.observe(this._parentNode);
+        } else {
+          this._detectElementResize = createDetectElementResize(nonce);
+          this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+        }
+        this._onResize();
+      }
+    }
+  }
+  componentWillUnmount() {
+    if (this._parentNode) {
+      if (this._detectElementResize) {
+        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
+      }
+      if (this._timeoutId !== null) {
+        clearTimeout(this._timeoutId);
+      }
+      if (this._resizeObserver) {
+        this._resizeObserver.observe(this._parentNode);
+        this._resizeObserver.disconnect();
+      }
+    }
+  }
+  render() {
+    const {
+      children,
+      defaultHeight,
+      defaultWidth,
+      disableHeight = false,
+      disableWidth = false,
+      nonce,
+      onResize,
+      style = {},
+      tagName = "div",
+      ...rest
+    } = this.props;
+    const {
+      height,
+      scaledHeight,
+      scaledWidth,
+      width
+    } = this.state;
 
-var $149c1bd638913645$export$2e2bcd8739ae039 = ($6e2bb92d9db3b0c8$export$9d94f4ee1d930ff);
+    // Outer div should not force width/height since that may prevent containers from shrinking.
+    // Inner component should overflow and use calculated width/height.
+    // See issue #68 for more information.
+    const outerStyle = {
+      overflow: "visible"
+    };
+    const childParams = {};
+
+    // Avoid rendering children before the initial measurements have been collected.
+    // At best this would just be wasting cycles.
+    let bailoutOnChildren = false;
+    if (!disableHeight) {
+      if (height === 0) {
+        bailoutOnChildren = true;
+      }
+      outerStyle.height = 0;
+      childParams.height = height;
+      childParams.scaledHeight = scaledHeight;
+    }
+    if (!disableWidth) {
+      if (width === 0) {
+        bailoutOnChildren = true;
+      }
+      outerStyle.width = 0;
+      childParams.width = width;
+      childParams.scaledWidth = scaledWidth;
+    }
+    return createElement(tagName, {
+      ref: this._setRef,
+      style: {
+        ...outerStyle,
+        ...style
+      },
+      ...rest
+    }, !bailoutOnChildren && children(childParams));
+  }
+}
 
 const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -16735,11 +16832,14 @@ function showToolbarDetached(_ref) {
   let {
     containerRect,
     titleRef,
-    iconsWidth
+    iconsWidth,
+    headerPaddingLeft,
+    headerPaddingRight
   } = _ref;
   const containerWidth = containerRect.width;
-  const padding = 16;
-  const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding;
+  const preventTruncation = 2;
+  const padding = headerPaddingLeft + headerPaddingRight;
+  const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding + preventTruncation;
   const actionToolbarWidth = 128;
   const notSufficientSpace = containerWidth < contentWidth + actionToolbarWidth;
   const isTruncated = (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth) > (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current3 = titleRef.current) === null || _titleRef$current3 === void 0 ? void 0 : _titleRef$current3.offsetWidth);
@@ -17033,7 +17133,9 @@ function ListBoxInline(_ref4) {
   const isDrillDown = (layout === null || layout === void 0 ? void 0 : (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 ? void 0 : (_layout$qListObject2$ = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2$ === void 0 ? void 0 : _layout$qListObject2$.qGrouping) === 'H';
   const showIcons = showSearchOrLockIcon || isDrillDown;
   const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
-
+  const isRtl = direction === 'rtl';
+  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
+  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
   useEffect$1(() => {
     if (!titleRef.current || !containerRect) {
       return;
@@ -17041,14 +17143,15 @@ function ListBoxInline(_ref4) {
     const isDetached = showToolbarDetached({
       containerRect,
       titleRef,
-      iconsWidth
+      iconsWidth,
+      headerPaddingLeft,
+      headerPaddingRight
     });
     setIsToolbarDetached(isDetached);
   }, [titleRef.current, containerRect]);
   if (!model || !layout || !translator) {
     return null;
   }
-  const isRtl = direction === 'rtl';
   const listboxSelectionToolbarItems = createListboxSelectionToolbar({
     layout,
     model,
@@ -17086,8 +17189,6 @@ function ListBoxInline(_ref4) {
     keyboard
   });
   const shouldAutoFocus = searchVisible && search === 'toggle';
-  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
-  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : 0;
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
   const isGridMode = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
@@ -17134,7 +17235,7 @@ function ListBoxInline(_ref4) {
   if (isInvalid) {
     renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$1({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$3({
     direction: direction
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
@@ -17191,7 +17292,7 @@ function ListBoxInline(_ref4) {
     title: layout.title
   }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$1({
+  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$3({
     direction: direction
   }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -17229,7 +17330,7 @@ function ListBoxInline(_ref4) {
     className: classes$4.screenReaderOnly
   }, translator.get('Listbox.ScreenReaderInstructions')), isInvalid ? /*#__PURE__*/React__default.createElement(ListBoxError, {
     text: errorText
-  }) : /*#__PURE__*/React__default.createElement($149c1bd638913645$export$2e2bcd8739ae039, null, _ref5 => {
+  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref5 => {
     let {
       height,
       width
@@ -17237,6 +17338,7 @@ function ListBoxInline(_ref4) {
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
+      theme: theme,
       constraints: constraints,
       layout: layout,
       selections: selections,
@@ -17512,6 +17614,14 @@ function useOnTheFlyModel(_ref) {
   const [model, setModel] = useState$1();
   const [fallbackTitle, setFallbackTitle] = useState$1();
   const title = (_options$title = options.title) !== null && _options$title !== void 0 ? _options$title : fallbackTitle;
+  let {
+    histogram = false,
+    frequencyMode = 'N'
+  } = options;
+  if (fieldDef && fieldDef.failedToFetchFieldDef) {
+    histogram = false;
+    frequencyMode = 'N';
+  }
   useEffect$1(() => {
     async function fetchMasterItem() {
       try {
@@ -17534,7 +17644,7 @@ function useOnTheFlyModel(_ref) {
         throw new Error("Disabling frequency count and histogram: ".concat(e && e.message));
       }
     }
-    const isFrequencyMaxNeeded = options.histogram || options.frequencyMode !== 'N';
+    const isFrequencyMaxNeeded = histogram || frequencyMode !== 'N';
     const shouldFetchMasterItem = fieldIdentifier.qLibraryId && isFrequencyMaxNeeded;
     if (shouldFetchMasterItem) {
       fetchMasterItem();
@@ -17549,31 +17659,6 @@ function useOnTheFlyModel(_ref) {
     listLayout,
     properties = {}
   } = options;
-  let {
-    frequencyMode,
-    histogram = false
-  } = options;
-  if (fieldDef && fieldDef.failedToFetchFieldDef) {
-    histogram = false;
-    frequencyMode = 'N';
-  }
-  switch (true) {
-    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
-      frequencyMode = 'N';
-      break;
-    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
-      frequencyMode = 'V';
-      break;
-    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
-      frequencyMode = 'P';
-      break;
-    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
-      frequencyMode = 'R';
-      break;
-    default:
-      frequencyMode = 'N';
-      break;
-  }
   const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode;
   const layoutOptions = {
     dense
@@ -17651,6 +17736,28 @@ function identify(_ref) {
   };
 }
 
+function getFrequencyModeLetter(frequencyMode) {
+  let freqLetter;
+  switch (true) {
+    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
+      freqLetter = 'N';
+      break;
+    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
+      freqLetter = 'V';
+      break;
+    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
+      freqLetter = 'P';
+      break;
+    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
+      freqLetter = 'R';
+      break;
+    default:
+      freqLetter = 'N';
+      break;
+  }
+  return freqLetter;
+}
+
 const _excluded$3 = ["__DO_NOT_USE__"];
 
 /**
@@ -17713,6 +17820,12 @@ function ListBoxWrapper(_ref) {
     qId,
     options
   });
+  if (!isExistingObject) {
+    Object.assign(options, {
+      frequencyMode: getFrequencyModeLetter(options.frequencyMode) // stick to letter option hereafter
+    });
+  }
+
   const [changeCount, setChangeCount] = useState$1(0);
   useEffect$1(() => {
     if (changeCount) {
@@ -19184,13 +19297,13 @@ function Progress(_ref2) {
   const s = SIZES[size];
   return /*#__PURE__*/React__default.createElement(Root, {
     className: classes$3.root
-  }, /*#__PURE__*/React__default.createElement(CircularProgress, _extends$1({
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, _extends$3({
     variant: "determinate",
     value: 100,
     className: classes$3.back,
     size: s,
     thickness: 3
-  }, props)), /*#__PURE__*/React__default.createElement(CircularProgress, _extends$1({
+  }, props)), /*#__PURE__*/React__default.createElement(CircularProgress, _extends$3({
     variant: "indeterminate",
     disableShrink: true,
     className: classes$3.front,
@@ -19240,7 +19353,7 @@ function Cancel(_ref) {
     variant: "h6",
     align: "center",
     "data-tid": "update-active"
-  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React__default.createElement(Grid, _extends$1({
+  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React__default.createElement(Grid, _extends$3({
     item: true
   }, props), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
@@ -19267,7 +19380,7 @@ function Retry(_ref2) {
     "data-tid": "update-cancelled"
   }, translator.get('Object.Update.Cancelled'))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(Button, _extends$1({
+  }, /*#__PURE__*/React__default.createElement(Button, _extends$3({
     variant: "contained",
     onClick: retry
   }, props), translator.get('Retry'))));
@@ -25537,12 +25650,11 @@ function nuked() {
        * @returns {Promise<object>} The objects properties
        * @example
        * // generate properties for a barchart
-       * const properties = await n.create({
+       * const properties = await n.generateProperties({
        *     type: 'barchart',
        *     fields: ['Product', { qLibraryId: 'u378hn', type: 'measure' }],
        *     properties: { showTitle: true }
        *   },
-       *   true
        * );
        */
       generateProperties: async cfg => createObject(cfg, halo, true),