@nebula.js/stardust 4.0.2 → 4.1.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.2
+* @nebula.js/stardust v4.1.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -750,8 +750,8 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
-function _extends$5() {
-  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -762,9 +762,9 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$2(source, excluded) {
+function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -778,7 +778,7 @@ function _objectWithoutPropertiesLoose$2(source, excluded) {
 }
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$2(source, excluded);
+  var target = _objectWithoutPropertiesLoose(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -3790,21 +3790,6 @@ var m$1 = ReactDOM;
   client.hydrateRoot = m$1.hydrateRoot;
 }
 
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
-}
-
 function isPlainObject(item) {
   return item !== null && typeof item === 'object' && item.constructor === Object;
 }
@@ -3821,7 +3806,9 @@ function deepClone(source) {
 function deepmerge(target, source, options = {
   clone: true
 }) {
-  const output = options.clone ? _extends$4({}, target) : target;
+  const output = options.clone ? {
+    ...target
+  } : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
       // Avoid prototype pollution
@@ -3973,8 +3960,8 @@ function useGlobalId(idOverride) {
   return id;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseId = React['useId' + ''];
+// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseId = React['useId'.toString()];
 /**
  *
  * @example <div id={useId()} />
@@ -4211,10 +4198,15 @@ function useIsFocusVisible() {
  * @returns {object} resolved props
  */
 function resolveProps(defaultProps, props) {
-  const output = _extends$4({}, props);
+  const output = {
+    ...props
+  };
   Object.keys(defaultProps).forEach(propName => {
     if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = _extends$4({}, defaultProps[propName], output[propName]);
+      output[propName] = {
+        ...defaultProps[propName],
+        ...output[propName]
+      };
     } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
       const defaultSlotProps = defaultProps[propName] || {};
       const slotProps = props[propName];
@@ -4226,7 +4218,9 @@ function resolveProps(defaultProps, props) {
         // Reduce the iteration if the default slot props is empty
         output[propName] = slotProps;
       } else {
-        output[propName] = _extends$4({}, slotProps);
+        output[propName] = {
+          ...slotProps
+        };
         Object.keys(defaultSlotProps).forEach(slotPropName => {
           output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
         });
@@ -4306,34 +4300,6 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
 
 var THEME_ID = '$$material';
 
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$3.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
 /*
 
 Based off glamor's StyleSheet, thanks Sunil ❤️
@@ -5639,35 +5605,8 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-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(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"];
+// Sorted ASC by size. That's important.
+// It can't be configured as it's used statically for propTypes.
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5676,33 +5615,34 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends$2({}, acc, {
+    return {
+      ...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
-    } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$f);
+    unit = 'px',
+    step = 5,
+    ...other
+  } = breakpoints;
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -5734,7 +5674,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends$2({
+  return {
     keys,
     values: sortedValues,
     up,
@@ -5742,8 +5682,9 @@ function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit
-  }, other);
+    unit,
+    ...other
+  };
 }
 
 const shape = {
@@ -6688,15 +6629,14 @@ 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 = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$e);
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -6704,14 +6644,21 @@ function createTheme$1(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends$2({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: _extends$2({}, shape$1, shapeInput)
+    shape: {
+      ...shape$1,
+      ...shapeInput
+    }
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends$2({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig$1,
+    ...(other == null ? void 0 : other.unstable_sxConfig)
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -6734,7 +6681,8 @@ function useTheme$3(defaultTheme = systemDefaultTheme$1) {
   return useTheme$4(defaultTheme);
 }
 
-const _excluded$d = ["variant"];
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
 function isEmpty$2(string) {
   return string.length === 0;
 }
@@ -6746,9 +6694,9 @@ function isEmpty$2(string) {
  */
 function propsToClassKey(props) {
   const {
-      variant
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -6760,7 +6708,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$c = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+/* eslint-disable no-underscore-dangle */
 function isEmpty$1(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -6834,25 +6782,27 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx$1(_extends$2({}, props, {
-      theme: resolveTheme(_extends$2({}, props, {
+    return styleFunctionSx$1({
+      ...props,
+      theme: resolveTheme({
+        ...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
-      } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$c);
+      name: componentName,
+      slot: componentSlot,
+      skipVariantsResolver: inputSkipVariantsResolver,
+      skipSx: inputSkipSx,
+      overridesResolver,
+      ...options
+    } = inputOptions;
 
     // 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;
@@ -6868,38 +6818,43 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$2(tag, _extends$2({
+    const defaultStyledResolver = styled$2(tag, {
       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(_extends$2({}, props, {
-            theme: resolveTheme(_extends$2({}, props, {
+          return stylesArg({
+            ...props,
+            theme: resolveTheme({
+              ...props,
               defaultTheme,
               themeId
-            }))
-          }));
+            })
+          });
         } : stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }));
+          });
           const styleOverrides = getStyleOverrides(componentName, theme);
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$2({}, props, {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle({
+                ...props,
                 theme
-              })) : slotStyle;
+              }) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }
@@ -6908,10 +6863,11 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$2({}, props, {
+          const theme = resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }));
+          });
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
@@ -6930,12 +6886,14 @@ 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(_extends$2({}, props, {
-          theme: resolveTheme(_extends$2({}, props, {
+        transformedStyleArg = props => styleArg({
+          ...props,
+          theme: resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }))
-        }));
+          })
+        });
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (tag.muiName) {
@@ -7186,21 +7144,6 @@ function lighten(color, coefficient) {
   return recomposeColor(color);
 }
 
-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);
-}
-
 const ThemeContext = /*#__PURE__*/React.createContext(null);
 var ThemeContext$1 = ThemeContext;
 
@@ -7217,7 +7160,10 @@ function mergeOuterLocalTheme(outerTheme, localTheme) {
     const mergedTheme = localTheme(outerTheme);
     return mergedTheme;
   }
-  return _extends$1({}, outerTheme, localTheme);
+  return {
+    ...outerTheme,
+    ...localTheme
+  };
 }
 
 /**
@@ -7250,9 +7196,10 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? _extends$2({}, upperTheme, {
+      const result = themeId ? {
+        ...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) {
@@ -7260,9 +7207,13 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? _extends$2({}, upperTheme, {
+    return themeId ? {
+      ...upperTheme,
       [themeId]: localTheme
-    }) : _extends$2({}, upperTheme, localTheme);
+    } : {
+      ...upperTheme,
+      ...localTheme
+    };
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 
@@ -7292,21 +7243,20 @@ 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 = {}
-    } = inputTheme,
-    other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$b);
-  const theme = _extends$3({}, other, {
+    defaultProps = {},
+    mixins = {},
+    overrides = {},
+    palette = {},
+    props = {},
+    styleOverrides = {},
+    ...other
+  } = inputTheme;
+  const theme = {
+    ...other,
     components: {}
-  });
+  };
 
   // default props
   Object.keys(defaultProps).forEach(component => {
@@ -7338,38 +7288,41 @@ function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = _extends$3({
+  theme.mixins = {
     gutters: (styles = {}) => {
-      return _extends$3({
+      return {
         paddingLeft: spacing(2),
-        paddingRight: spacing(2)
-      }, styles, {
-        [breakpoints.up('sm')]: _extends$3({
+        paddingRight: spacing(2),
+        ...styles,
+        [breakpoints.up('sm')]: {
           paddingLeft: spacing(3),
-          paddingRight: spacing(3)
-        }, styles[breakpoints.up('sm')])
-      });
-    }
-  }, mixins);
+          paddingRight: spacing(3),
+          ...styles[breakpoints.up('sm')]
+        }
+      };
+    },
+    ...mixins
+  };
   const {
-      type: typeInput,
-      mode: modeInput
-    } = palette,
-    paletteRest = _objectWithoutPropertiesLoose$1(palette, _excluded2$1);
+    type: typeInput,
+    mode: modeInput,
+    ...paletteRest
+  } = palette;
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = _extends$3({
+  theme.palette = {
     // 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 _extends$3({
+  return {
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -7380,8 +7333,9 @@ function createMixins(breakpoints, mixins) {
       [breakpoints.up('sm')]: {
         minHeight: 64
       }
-    }
-  }, mixins);
+    },
+    ...mixins
+  };
 }
 
 const common = {
@@ -7516,7 +7470,6 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$a = ["mode", "contrastThreshold", "tonalOffset"];
 const light$1 = {
   // The colors used to style the text.
   text: {
@@ -7681,11 +7634,11 @@ function getDefaultWarning(mode = 'light') {
 }
 function createPalette(palette) {
   const {
-      mode = 'light',
-      contrastThreshold = 3,
-      tonalOffset = 0.2
-    } = palette,
-    other = _objectWithoutPropertiesLoose$1(palette, _excluded$a);
+    mode = 'light',
+    contrastThreshold = 3,
+    tonalOffset = 0.2,
+    ...other
+  } = palette;
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -7707,7 +7660,9 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends$3({}, color);
+    color = {
+      ...color
+    };
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -7728,9 +7683,11 @@ function createPalette(palette) {
     dark: dark$1,
     light: light$1
   };
-  const paletteOutput = deepmerge(_extends$3({
+  const paletteOutput = deepmerge({
     // A collection of common colors.
-    common: _extends$3({}, common$1),
+    common: {
+      ...common$1
+    },
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -7779,12 +7736,13 @@ 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
-  }, modes[mode]), other);
+    tonalOffset,
+    // The light and dark mode object.
+    ...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;
 }
@@ -7798,35 +7756,39 @@ const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
  * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
 function createTypography(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 {
+    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 coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$3({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
     // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight
-  }, fontFamily === defaultFontFamily ? {
-    letterSpacing: `${round(letterSpacing / size)}em`
-  } : {}, casing, allVariants);
+    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
+  });
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
     h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
@@ -7849,7 +7811,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends$3({
+  return deepmerge({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -7857,8 +7819,9 @@ function createTypography(palette, typography) {
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,
-    fontWeightBold
-  }, variants), other, {
+    fontWeightBold,
+    ...variants
+  }, other, {
     clone: false // No need to clone deep
   });
 }
@@ -7874,7 +7837,6 @@ 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 = {
@@ -7917,24 +7879,30 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = _extends$3({}, easing, inputTransitions.easing);
-  const mergedDuration = _extends$3({}, duration, inputTransitions.duration);
+  const mergedEasing = {
+    ...easing,
+    ...inputTransitions.easing
+  };
+  const mergedDuration = {
+    ...duration,
+    ...inputTransitions.duration
+  };
   const create = (props = ['all'], options = {}) => {
     const {
-        duration: durationOption = mergedDuration.standard,
-        easing: easingOption = mergedEasing.easeInOut,
-        delay = 0
-      } = options;
-      _objectWithoutPropertiesLoose$1(options, _excluded$8);
+      duration: durationOption = mergedDuration.standard,
+      easing: easingOption = mergedEasing.easeInOut,
+      delay = 0,
+      ...other
+    } = options;
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-  return _extends$3({
+  return {
     getAutoHeightDuration,
-    create
-  }, inputTransitions, {
+    create,
+    ...inputTransitions,
     easing: mergedEasing,
     duration: mergedDuration
-  });
+  };
 }
 
 // We need to centralize the zIndex definitions as they work
@@ -7951,15 +7919,17 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$7 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
-      mixins: mixinsInput = {},
-      palette: paletteInput = {},
-      transitions: transitionsInput = {},
-      typography: typographyInput = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose$1(options, _excluded$7);
+    breakpoints: breakpointsInput,
+    mixins: mixinsInput = {},
+    spacing: spacingInput,
+    palette: paletteInput = {},
+    transitions: transitionsInput = {},
+    typography: typographyInput = {},
+    shape: shapeInput,
+    ...other
+  } = options;
   if (options.vars) {
     throw new Error(formatMuiErrorMessage(18));
   }
@@ -7972,11 +7942,16 @@ function createTheme(options = {}, ...args) {
     shadows: shadows$1.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends$3({}, zIndex$1)
+    zIndex: {
+      ...zIndex$1
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig$1,
+    ...(other == null ? void 0 : other.unstable_sxConfig)
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -8014,21 +7989,18 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-const _excluded$6 = ["theme"];
-function ThemeProvider(_ref) {
-  let {
-      theme: themeInput
-    } = _ref,
-    props = _objectWithoutPropertiesLoose$1(_ref, _excluded$6);
+function ThemeProvider({
+  theme: themeInput,
+  ...props
+}) {
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$3({}, props, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
+    ...props,
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
-  }));
+  });
 }
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -8389,7 +8361,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "5bae" ;
+const NEBULA_VERSION_HASH = "8048" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8636,7 +8608,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.0.2" );
+  element.setAttribute('data-nebulajs-version', "4.1.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -9041,7 +9013,7 @@ function SvgIcon$2(_ref) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(Type, _extends$5({
+      React__default.createElement(Type, _extends$1({
         key: ix
       }, attrs))
     );
@@ -10425,7 +10397,8 @@ function Frequency(_ref) {
       alignItems: 'center'
     },
     className: rowColClasses.frequencyCount,
-    "aria-label": frequencyText
+    "aria-label": frequencyText,
+    title: frequencyText
   }, /*#__PURE__*/React__default.createElement(Typography, {
     noWrap: true,
     color: "inherit",
@@ -12737,7 +12710,7 @@ function getListBoxComponents(_ref) {
     local.current.listRef = ref;
     return /*#__PURE__*/React__default.createElement(StyledFixedSizeList
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends$5({}, commonComponentOptions, {
+    , _extends$1({}, commonComponentOptions, {
       dataTestid: "fixed-size-list",
       scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
       height: listHeight,
@@ -12814,7 +12787,7 @@ function getListBoxComponents(_ref) {
     };
     return /*#__PURE__*/React__default.createElement(StyledFixedSizeGrid
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends$5({}, commonComponentOptions, {
+    , _extends$1({}, commonComponentOptions, {
       dataTestid: "fixed-size-grid",
       scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
       height: gridHeight,
@@ -13229,7 +13202,6 @@ 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,
@@ -13285,56 +13257,58 @@ 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'
-    } = props,
-    other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
-  const ownerState = _extends$3({}, props, {
+    children,
+    className,
+    color = 'inherit',
+    component = 'svg',
+    fontSize = 'medium',
+    htmlColor,
+    inheritViewBox = false,
+    titleAccess,
+    viewBox = '0 0 24 24',
+    ...other
+  } = props;
+  const ownerState = {
+    ...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, _extends$3({
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, {
     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, _extends$3({
+    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, {
       "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));
@@ -14211,7 +14185,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$5({}, popoverProps, {
+  , _extends$1({}, popoverProps, {
     onClose: onCloseOrActionClick,
     ref: ref,
     open: show,
@@ -16400,10 +16374,10 @@ class $6e2bb92d9db3b0c8$export$9d94f4ee1d930ff extends (Component) {
                 // 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 = parseInt((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0", 10);
-                const paddingRight = parseInt((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0", 10);
-                const paddingTop = parseInt((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0", 10);
-                const paddingBottom = parseInt((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0", 10);
+                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;
@@ -17157,7 +17131,10 @@ function ListBoxInline(_ref4) {
       fontSize: '12px'
     }
   }));
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
+  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({
     direction: direction
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
@@ -17214,7 +17191,7 @@ function ListBoxInline(_ref4) {
     title: layout.title
   }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
+  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$1({
     direction: direction
   }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -19207,13 +19184,13 @@ function Progress(_ref2) {
   const s = SIZES[size];
   return /*#__PURE__*/React__default.createElement(Root, {
     className: classes$3.root
-  }, /*#__PURE__*/React__default.createElement(CircularProgress, _extends$5({
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, _extends$1({
     variant: "determinate",
     value: 100,
     className: classes$3.back,
     size: s,
     thickness: 3
-  }, props)), /*#__PURE__*/React__default.createElement(CircularProgress, _extends$5({
+  }, props)), /*#__PURE__*/React__default.createElement(CircularProgress, _extends$1({
     variant: "indeterminate",
     disableShrink: true,
     className: classes$3.front,
@@ -19263,7 +19240,7 @@ function Cancel(_ref) {
     variant: "h6",
     align: "center",
     "data-tid": "update-active"
-  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React__default.createElement(Grid, _extends$5({
+  }, translator.get('Object.Update.Active')))), /*#__PURE__*/React__default.createElement(Grid, _extends$1({
     item: true
   }, props), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
@@ -19290,7 +19267,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$5({
+  }, /*#__PURE__*/React__default.createElement(Button, _extends$1({
     variant: "contained",
     onClick: retry
   }, props), translator.get('Retry'))));
@@ -20268,6 +20245,13 @@ const Cell = forwardRef((_ref6, ref) => {
     },
     setSnOptions,
     setSnPlugins,
+    getImperativeHandle() {
+      var _state$sn;
+      if ((_state$sn = state.sn) !== null && _state$sn !== void 0 && _state$sn.component && typeof state.sn.component.getImperativeHandle === 'function') {
+        return state.sn.component.getImperativeHandle();
+      }
+      return {};
+    },
     async takeSnapshot() {
       const {
         width,
@@ -20369,7 +20353,7 @@ const Cell = forwardRef((_ref6, ref) => {
       height: '100%'
     },
     ref: contentRef
-  }, Content), /*#__PURE__*/React__default.createElement(Footer, {
+  }, Content), cellNode && layout && state.sn && /*#__PURE__*/React__default.createElement(Footer, {
     layout: layout,
     titleStyles: titleStyles
   })), state.longRunningQuery && /*#__PURE__*/React__default.createElement(LongRunningQuery, {
@@ -20499,21 +20483,34 @@ function viz() {
   let cellRef = null;
   let mountedReference = null;
   let onMount = null;
+  let onRender = null;
   const mounted = new Promise(resolve => {
     onMount = resolve;
   });
+  const rendered = new Promise(resolve => {
+    onRender = resolve;
+  });
+  const createOnInitialRender = override => () => {
+    override && override();
+    onRender();
+  };
   let initialSnOptions = {};
   let initialSnPlugins = [];
   const emitter = new EventEmitter$1();
   const setSnOptions = async opts => {
+    const override = opts.onInitialRender;
     if (mountedReference) {
       (async () => {
         await mounted;
-        cellRef.current.setSnOptions(_objectSpread2(_objectSpread2({}, initialSnOptions), opts));
+        cellRef.current.setSnOptions(_objectSpread2(_objectSpread2(_objectSpread2({}, initialSnOptions), opts), {
+          onInitialRender: createOnInitialRender(override)
+        }));
       })();
     } else {
       // Handle setting options before mount
-      initialSnOptions = _objectSpread2(_objectSpread2({}, initialSnOptions), opts);
+      initialSnOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, initialSnOptions), opts), {
+        onInitialRender: createOnInitialRender(override)
+      });
     }
   };
   const setSnPlugins = async plugins => {
@@ -20613,6 +20610,14 @@ function viz() {
     removeListener(eventName, listener) {
       emitter.removeListener(eventName, listener);
     },
+    /**
+     * Gets the specific api that a Viz exposes.
+     * @returns {Promise<object>} object that contains the internal Viz api.
+     */
+    async getImperativeHandle() {
+      await rendered;
+      return cellRef.current.getImperativeHandle();
+    },
     // ===== unexposed experimental API - use at own risk ======
     __DO_NOT_USE__: {
       mount(element) {
@@ -22622,15 +22627,11 @@ function useOptions() {
 }
 
 /**
- * TODO before making public - expose getImperativeHandle on Viz
- * Exposes an API to the external environment.
- *
  * This is an empty object by default, but enables you to provide a custom API of your visualization to
  * make it possible to control after it has been rendered.
  *
  * You can only use this hook once, calling it more than once is considered an error.
  * @entry
- * @private
  * @template T
  * @param {function():T} factory
  * @param {Array<any>=} deps
@@ -25219,7 +25220,7 @@ function create(_ref) {
     },
     getSupportedVersion: (name, propertyVersion) => {
       if (!tc[name]) {
-        return null;
+        return undefined;
       }
       return tc[name].getMatchingVersionFromProperties(propertyVersion);
     },