@nebula.js/stardust 4.4.0 → 4.5.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.4.0
+* @nebula.js/stardust v4.5.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -722,26 +722,26 @@
 	  }
 	})(runtime);
 
-	function ownKeys(object, enumerableOnly) {
-	  var keys = Object.keys(object);
+	function ownKeys(e, r) {
+	  var t = Object.keys(e);
 	  if (Object.getOwnPropertySymbols) {
-	    var symbols = Object.getOwnPropertySymbols(object);
-	    enumerableOnly && (symbols = symbols.filter(function (sym) {
-	      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-	    })), keys.push.apply(keys, symbols);
-	  }
-	  return keys;
-	}
-	function _objectSpread2(target) {
-	  for (var i = 1; i < arguments.length; i++) {
-	    var source = null != arguments[i] ? arguments[i] : {};
-	    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-	      _defineProperty(target, key, source[key]);
-	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-	      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+	    var o = Object.getOwnPropertySymbols(e);
+	    r && (o = o.filter(function (r) {
+	      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+	    })), t.push.apply(t, o);
+	  }
+	  return t;
+	}
+	function _objectSpread2(e) {
+	  for (var r = 1; r < arguments.length; r++) {
+	    var t = null != arguments[r] ? arguments[r] : {};
+	    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+	      _defineProperty(e, r, t[r]);
+	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+	      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
 	    });
 	  }
-	  return target;
+	  return e;
 	}
 	function _defineProperty(obj, key, value) {
 	  key = _toPropertyKey(key);
@@ -4417,7 +4417,11 @@
 	}
 
 	function isMuiElement(element, muiNames) {
-	  return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+	  var _muiName, _element$type;
+	  return /*#__PURE__*/reactExports.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+	  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+	  // eslint-disable-next-line no-underscore-dangle
+	  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
 	}
 
 	function ownerDocument(node) {
@@ -4456,6 +4460,13 @@
 	  }
 	}
 
+	/**
+	 * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+	 * This is useful for effects that are only needed for client-side rendering but not for SSR.
+	 *
+	 * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+	 * and confirm it doesn't apply to your use-case.
+	 */
 	const useEnhancedEffect = typeof window !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect;
 	var useEnhancedEffect$1 = useEnhancedEffect;
 
@@ -4520,7 +4531,8 @@
 	}
 
 	/**
-	 * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+	 * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+	 * See RFC in https://github.com/reactjs/rfcs/pull/220
 	 */
 
 	function useEventCallback(fn) {
@@ -4797,16 +4809,19 @@
 	const ClassNameGenerator = createClassNameGenerator();
 	var ClassNameGenerator$1 = ClassNameGenerator;
 
+	// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
+	// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
 	const globalStateClassesMapping = {
 	  active: 'active',
 	  checked: 'checked',
 	  completed: 'completed',
 	  disabled: 'disabled',
-	  readOnly: 'readOnly',
 	  error: 'error',
 	  expanded: 'expanded',
 	  focused: 'focused',
 	  focusVisible: 'focusVisible',
+	  open: 'open',
+	  readOnly: 'readOnly',
 	  required: 'required',
 	  selected: 'selected'
 	};
@@ -6937,13 +6952,12 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.13.2
+	 * @mui/styled-engine v5.14.11
 	 *
 	 * @license MIT
 	 * This source code is licensed under the MIT license found in the
 	 * LICENSE file in the root directory of this source tree.
 	 */
-	/* eslint-disable no-underscore-dangle */
 	function styled$3(tag, options) {
 	  const stylesFactory = newStyled(tag, options);
 	  return stylesFactory;
@@ -6986,7 +7000,7 @@
 	  return target;
 	}
 
-	const _excluded$S = ["values", "unit", "step"];
+	const _excluded$R = ["values", "unit", "step"];
 	const sortBreakpointsValues = values => {
 	  const breakpointsAsArray = Object.keys(values).map(key => ({
 	    key,
@@ -7021,7 +7035,7 @@
 	      unit = 'px',
 	      step = 5
 	    } = breakpoints,
-	    other = _objectWithoutPropertiesLoose$2(breakpoints, _excluded$S);
+	    other = _objectWithoutPropertiesLoose$2(breakpoints, _excluded$R);
 	  const sortedValues = sortBreakpointsValues(values);
 	  const keys = Object.keys(sortedValues);
 	  function up(key) {
@@ -7618,10 +7632,20 @@
 	const maxWidth = props => {
 	  if (props.maxWidth !== undefined && props.maxWidth !== null) {
 	    const styleFromPropValue = propValue => {
-	      var _props$theme;
+	      var _props$theme, _props$theme2;
 	      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$1[propValue];
+	      if (!breakpoint) {
+	        return {
+	          maxWidth: sizingTransform(propValue)
+	        };
+	      }
+	      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+	        return {
+	          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
+	        };
+	      }
 	      return {
-	        maxWidth: breakpoint || sizingTransform(propValue)
+	        maxWidth: breakpoint
 	      };
 	    };
 	    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -8064,7 +8088,7 @@
 	styleFunctionSx.filterProps = ['sx'];
 	var styleFunctionSx$1 = styleFunctionSx;
 
-	const _excluded$R = ["breakpoints", "palette", "spacing", "shape"];
+	const _excluded$Q = ["breakpoints", "palette", "spacing", "shape"];
 	function createTheme$1(options = {}, ...args) {
 	  const {
 	      breakpoints: breakpointsInput = {},
@@ -8072,7 +8096,7 @@
 	      spacing: spacingInput,
 	      shape: shapeInput = {}
 	    } = options,
-	    other = _objectWithoutPropertiesLoose$2(options, _excluded$R);
+	    other = _objectWithoutPropertiesLoose$2(options, _excluded$Q);
 	  const breakpoints = createBreakpoints(breakpointsInput);
 	  const spacing = createSpacing(spacingInput);
 	  let muiTheme = deepmerge({
@@ -8122,7 +8146,7 @@
 	  });
 	}
 
-	const _excluded$Q = ["sx"];
+	const _excluded$P = ["sx"];
 	const splitProps = props => {
 	  var _props$theme$unstable, _props$theme;
 	  const result = {
@@ -8143,7 +8167,7 @@
 	  const {
 	      sx: inSx
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$2(props, _excluded$Q);
+	    other = _objectWithoutPropertiesLoose$2(props, _excluded$P);
 	  const {
 	    systemProps,
 	    otherProps
@@ -8169,7 +8193,7 @@
 
 	function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))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$P = ["className", "component"];
+	const _excluded$O = ["className", "component"];
 	function createBox(options = {}) {
 	  const {
 	    themeId,
@@ -8187,7 +8211,7 @@
 	        className,
 	        component = 'div'
 	      } = _extendSxProp,
-	      other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$P);
+	      other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$O);
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$3({
 	      as: component,
 	      ref: ref,
@@ -8198,7 +8222,7 @@
 	  return Box;
 	}
 
-	const _excluded$O = ["variant"];
+	const _excluded$N = ["variant"];
 	function isEmpty$3(string) {
 	  return string.length === 0;
 	}
@@ -8212,7 +8236,7 @@
 	  const {
 	      variant
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$2(props, _excluded$O);
+	    other = _objectWithoutPropertiesLoose$2(props, _excluded$N);
 	  let classKey = variant || '';
 	  Object.keys(other).sort().forEach(key => {
 	    if (key === 'color') {
@@ -8224,7 +8248,7 @@
 	  return classKey;
 	}
 
-	const _excluded$N = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+	const _excluded$M = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 	function isEmpty$2(obj) {
 	  return Object.keys(obj).length === 0;
 	}
@@ -8330,7 +8354,7 @@
 	        // For more details: https://github.com/mui/material-ui/pull/37908
 	        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
 	      } = inputOptions,
-	      options = _objectWithoutPropertiesLoose$2(inputOptions, _excluded$N);
+	      options = _objectWithoutPropertiesLoose$2(inputOptions, _excluded$M);
 
 	    // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
 	    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -8800,7 +8824,7 @@
 	  });
 	}
 
-	const _excluded$M = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+	const _excluded$L = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 	const defaultTheme$3 = createTheme$1();
 	// widening Theme to any so that the consumer can own the theme structure.
 	const defaultCreateStyledComponent = systemStyled('div', {
@@ -8933,7 +8957,7 @@
 	        className,
 	        useFlexGap = false
 	      } = props,
-	      other = _objectWithoutPropertiesLoose$2(props, _excluded$M);
+	      other = _objectWithoutPropertiesLoose$2(props, _excluded$L);
 	    const ownerState = {
 	      direction,
 	      spacing,
@@ -8952,7 +8976,7 @@
 	  return Stack;
 	}
 
-	const _excluded$L = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+	const _excluded$K = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
 	  _excluded2$4 = ["type", "mode"];
 	function adaptV4Theme(inputTheme) {
 	  const {
@@ -8963,7 +8987,7 @@
 	      props = {},
 	      styleOverrides = {}
 	    } = inputTheme,
-	    other = _objectWithoutPropertiesLoose$3(inputTheme, _excluded$L);
+	    other = _objectWithoutPropertiesLoose$3(inputTheme, _excluded$K);
 	  const theme = _extends$5({}, other, {
 	    components: {}
 	  });
@@ -9176,7 +9200,7 @@
 	};
 	var green$1 = green;
 
-	const _excluded$K = ["mode", "contrastThreshold", "tonalOffset"];
+	const _excluded$J = ["mode", "contrastThreshold", "tonalOffset"];
 	const light$1 = {
 	  // The colors used to style the text.
 	  text: {
@@ -9345,7 +9369,7 @@
 	      contrastThreshold = 3,
 	      tonalOffset = 0.2
 	    } = palette,
-	    other = _objectWithoutPropertiesLoose$3(palette, _excluded$K);
+	    other = _objectWithoutPropertiesLoose$3(palette, _excluded$J);
 	  const primary = palette.primary || getDefaultPrimary(mode);
 	  const secondary = palette.secondary || getDefaultSecondary(mode);
 	  const error = palette.error || getDefaultError(mode);
@@ -9444,7 +9468,7 @@
 	  return paletteOutput;
 	}
 
-	const _excluded$J = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+	const _excluded$I = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 	function round$2(value) {
 	  return Math.round(value * 1e5) / 1e5;
 	}
@@ -9475,7 +9499,7 @@
 	      allVariants,
 	      pxToRem: pxToRem2
 	    } = _ref,
-	    other = _objectWithoutPropertiesLoose$3(_ref, _excluded$J);
+	    other = _objectWithoutPropertiesLoose$3(_ref, _excluded$I);
 	  const coef = fontSize / 14;
 	  const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
 	  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$5({
@@ -9535,7 +9559,7 @@
 	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$I = ["duration", "easing", "delay"];
+	const _excluded$H = ["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 = {
@@ -9586,7 +9610,7 @@
 	        easing: easingOption = mergedEasing.easeInOut,
 	        delay = 0
 	      } = options;
-	      _objectWithoutPropertiesLoose$3(options, _excluded$I);
+	      _objectWithoutPropertiesLoose$3(options, _excluded$H);
 	    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$5({
@@ -9612,7 +9636,7 @@
 	};
 	var zIndex$1 = zIndex;
 
-	const _excluded$H = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+	const _excluded$G = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 	function createTheme(options = {}, ...args) {
 	  const {
 	      mixins: mixinsInput = {},
@@ -9620,7 +9644,7 @@
 	      transitions: transitionsInput = {},
 	      typography: typographyInput = {}
 	    } = options,
-	    other = _objectWithoutPropertiesLoose$3(options, _excluded$H);
+	    other = _objectWithoutPropertiesLoose$3(options, _excluded$G);
 	  if (options.vars) {
 	    throw new Error(formatMuiErrorMessage(18));
 	  }
@@ -9675,12 +9699,12 @@
 	});
 	var styled$1 = styled;
 
-	const _excluded$G = ["theme"];
+	const _excluded$F = ["theme"];
 	function ThemeProvider(_ref) {
 	  let {
 	      theme: themeInput
 	    } = _ref,
-	    props = _objectWithoutPropertiesLoose$3(_ref, _excluded$G);
+	    props = _objectWithoutPropertiesLoose$3(_ref, _excluded$F);
 	  const scopedTheme = themeInput[THEME_ID];
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$5({}, props, {
 	    themeId: scopedTheme ? THEME_ID : undefined,
@@ -10505,7 +10529,7 @@
 	const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 	var touchRippleClasses$1 = touchRippleClasses;
 
-	const _excluded$F = ["center", "classes", "className"];
+	const _excluded$E = ["center", "classes", "className"];
 	let _$1 = t => t,
 	  _t$1,
 	  _t2$1,
@@ -10634,7 +10658,7 @@
 	      classes = {},
 	      className
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$F);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$E);
 	  const [ripples, setRipples] = reactExports.useState([]);
 	  const nextKey = reactExports.useRef(0);
 	  const rippleCallback = reactExports.useRef(null);
@@ -10821,7 +10845,7 @@
 	const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 	var buttonBaseClasses$1 = buttonBaseClasses;
 
-	const _excluded$E = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+	const _excluded$D = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 	const useUtilityClasses$r = ownerState => {
 	  const {
 	    disabled,
@@ -10923,7 +10947,7 @@
 	      touchRippleRef,
 	      type
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$E);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$D);
 	  const buttonRef = reactExports.useRef(null);
 	  const rippleRef = reactExports.useRef(null);
 	  const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -11127,7 +11151,13 @@
 	const ButtonGroupContext = /*#__PURE__*/reactExports.createContext({});
 	var ButtonGroupContext$1 = ButtonGroupContext;
 
-	const _excluded$D = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+	/**
+	 * @ignore - internal component.
+	 */
+	const ButtonGroupButtonContext = /*#__PURE__*/reactExports.createContext(undefined);
+	var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
+
+	const _excluded$C = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 	const useUtilityClasses$q = ownerState => {
 	  const {
 	    color,
@@ -11332,6 +11362,7 @@
 	const Button = /*#__PURE__*/reactExports.forwardRef(function Button(inProps, ref) {
 	  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
 	  const contextProps = reactExports.useContext(ButtonGroupContext$1);
+	  const buttonGroupButtonContextPositionClassName = reactExports.useContext(ButtonGroupButtonContext$1);
 	  const resolvedProps = resolveProps(contextProps, inProps);
 	  const props = useThemeProps({
 	    props: resolvedProps,
@@ -11353,7 +11384,7 @@
 	      type,
 	      variant = 'text'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$D);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$C);
 	  const ownerState = _extends$5({}, props, {
 	    color,
 	    component,
@@ -11376,9 +11407,10 @@
 	    ownerState: ownerState,
 	    children: endIconProp
 	  });
+	  const positionClassName = buttonGroupButtonContextPositionClassName || '';
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, _extends$5({
 	    ownerState: ownerState,
-	    className: clsx(contextProps.className, classes.root, className),
+	    className: clsx(contextProps.className, classes.root, className, positionClassName),
 	    component: component,
 	    disabled: disabled,
 	    focusRipple: !disableFocusRipple,
@@ -11710,7 +11742,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "9b4b" ;
+	const NEBULA_VERSION_HASH = "7c03" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -11971,7 +12003,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.4.0" );
+	  element.setAttribute('data-nebulajs-version', "4.5.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -12044,7 +12076,7 @@
 	}
 	generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-	const _excluded$C = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+	const _excluded$B = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 	const useUtilityClasses$p = ownerState => {
 	  const {
 	    color,
@@ -12112,7 +12144,7 @@
 	      titleAccess,
 	      viewBox = '0 0 24 24'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$C);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$B);
 	  const hasSvgAsChild = /*#__PURE__*/reactExports.isValidElement(children) && children.type === 'svg';
 	  const ownerState = _extends$5({}, props, {
 	    color,
@@ -12209,7 +12241,7 @@
 	}
 	generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-	const _excluded$B = ["className", "component", "elevation", "square", "variant"];
+	const _excluded$A = ["className", "component", "elevation", "square", "variant"];
 	const useUtilityClasses$o = ownerState => {
 	  const {
 	    square,
@@ -12264,7 +12296,7 @@
 	      square = false,
 	      variant = 'elevation'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$B);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$A);
 	  const ownerState = _extends$5({}, props, {
 	    component,
 	    elevation,
@@ -12287,7 +12319,7 @@
 	const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 	var iconButtonClasses$1 = iconButtonClasses;
 
-	const _excluded$A = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+	const _excluded$z = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 	const useUtilityClasses$n = ownerState => {
 	  const {
 	    classes,
@@ -12388,7 +12420,7 @@
 	      disableFocusRipple = false,
 	      size = 'medium'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$A);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
 	  const ownerState = _extends$5({}, props, {
 	    edge,
 	    color,
@@ -12415,7 +12447,7 @@
 	}
 	generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-	const _excluded$z = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+	const _excluded$y = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 	const useUtilityClasses$m = ownerState => {
 	  const {
 	    align,
@@ -12502,7 +12534,7 @@
 	      variant = 'body1',
 	      variantMapping = defaultVariantMapping
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$y);
 	  const ownerState = _extends$5({}, props, {
 	    align,
 	    color,
@@ -12719,7 +12751,7 @@
 	  };
 	}
 
-	const _excluded$y = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
+	const _excluded$x = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
 	/**
 	 * @ignore - do not document.
 	 * Builds the props to be passed into the slot of an unstyled component.
@@ -12736,7 +12768,7 @@
 	      ownerState,
 	      skipResolvingSlotProps = false
 	    } = parameters,
-	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$y);
+	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$x);
 	  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
 	  const {
 	    props: mergedProps,
@@ -12932,51 +12964,6 @@
 	      return;
 	    }
 	    const doc = ownerDocument(rootRef.current);
-	    const contain = nativeEvent => {
-	      const {
-	        current: rootElement
-	      } = rootRef;
-
-	      // Cleanup functions are executed lazily in React 17.
-	      // Contain can be called between the component being unmounted and its cleanup function being run.
-	      if (rootElement === null) {
-	        return;
-	      }
-	      if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
-	        ignoreNextEnforceFocus.current = false;
-	        return;
-	      }
-	      if (!rootElement.contains(doc.activeElement)) {
-	        // if the focus event is not coming from inside the children's react tree, reset the refs
-	        if (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target || doc.activeElement !== reactFocusEventTarget.current) {
-	          reactFocusEventTarget.current = null;
-	        } else if (reactFocusEventTarget.current !== null) {
-	          return;
-	        }
-	        if (!activated.current) {
-	          return;
-	        }
-	        let tabbable = [];
-	        if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
-	          tabbable = getTabbable(rootRef.current);
-	        }
-	        if (tabbable.length > 0) {
-	          var _lastKeydown$current, _lastKeydown$current2;
-	          const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
-	          const focusNext = tabbable[0];
-	          const focusPrevious = tabbable[tabbable.length - 1];
-	          if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
-	            if (isShiftTab) {
-	              focusPrevious.focus();
-	            } else {
-	              focusNext.focus();
-	            }
-	          }
-	        } else {
-	          rootElement.focus();
-	        }
-	      }
-	    };
 	    const loopFocus = nativeEvent => {
 	      lastKeydown.current = nativeEvent;
 	      if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
@@ -12994,6 +12981,62 @@
 	        }
 	      }
 	    };
+	    const contain = () => {
+	      const rootElement = rootRef.current;
+
+	      // Cleanup functions are executed lazily in React 17.
+	      // Contain can be called between the component being unmounted and its cleanup function being run.
+	      if (rootElement === null) {
+	        return;
+	      }
+	      if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
+	        ignoreNextEnforceFocus.current = false;
+	        return;
+	      }
+
+	      // The focus is already inside
+	      if (rootElement.contains(doc.activeElement)) {
+	        return;
+	      }
+
+	      // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
+	      if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
+	        return;
+	      }
+
+	      // if the focus event is not coming from inside the children's react tree, reset the refs
+	      if (doc.activeElement !== reactFocusEventTarget.current) {
+	        reactFocusEventTarget.current = null;
+	      } else if (reactFocusEventTarget.current !== null) {
+	        return;
+	      }
+	      if (!activated.current) {
+	        return;
+	      }
+	      let tabbable = [];
+	      if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+	        tabbable = getTabbable(rootRef.current);
+	      }
+
+	      // one of the sentinel nodes was focused, so move the focus
+	      // to the first/last tabbable element inside the focus trap
+	      if (tabbable.length > 0) {
+	        var _lastKeydown$current, _lastKeydown$current2;
+	        const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
+	        const focusNext = tabbable[0];
+	        const focusPrevious = tabbable[tabbable.length - 1];
+	        if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
+	          if (isShiftTab) {
+	            focusPrevious.focus();
+	          } else {
+	            focusNext.focus();
+	          }
+	        }
+	        // no tabbable elements in the trap focus or the focus was outside of the focus trap
+	      } else {
+	        rootElement.focus();
+	      }
+	    };
 	    doc.addEventListener('focusin', contain);
 	    doc.addEventListener('keydown', loopFocus, true);
 
@@ -13005,7 +13048,7 @@
 	    // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
 	    const interval = setInterval(() => {
 	      if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
-	        contain(null);
+	        contain();
 	      }
 	    }, 50);
 	    return () => {
@@ -14900,7 +14943,7 @@
 	}
 	generateUtilityClasses('MuiPopper', ['root']);
 
-	const _excluded$x = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+	const _excluded$w = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
 	  _excluded2$3 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 	function flipPlacement(placement, direction) {
 	  if (direction === 'ltr') {
@@ -14950,7 +14993,7 @@
 	      // @ts-ignore internal logic
 	      // prevent from spreading to DOM, it can come from the parent component e.g. Select.
 	    } = props,
-	    other = _objectWithoutPropertiesLoose(props, _excluded$x);
+	    other = _objectWithoutPropertiesLoose(props, _excluded$w);
 	  const tooltipRef = reactExports.useRef(null);
 	  const ownRef = useForkRef(tooltipRef, forwardedRef);
 	  const popperRef = reactExports.useRef(null);
@@ -15210,7 +15253,7 @@
 	    if (container.parentNode instanceof DocumentFragment) {
 	      scrollContainer = ownerDocument(container).body;
 	    } else {
-	      // Improve Gatsby support
+	      // Support html overflow-y: auto for scroll stability between pages
 	      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
 	      const parent = container.parentElement;
 	      const containerWindow = ownerWindow(container);
@@ -15345,23 +15388,6 @@
 	  }
 	}
 
-	function getModalUtilityClass(slot) {
-	  return generateUtilityClass('MuiModal', slot);
-	}
-	generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
-
-	const _excluded$w = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
-	const useUtilityClasses$k = ownerState => {
-	  const {
-	    open,
-	    exited
-	  } = ownerState;
-	  const slots = {
-	    root: ['root', !open && exited && 'hidden'],
-	    backdrop: ['backdrop']
-	  };
-	  return composeClasses(slots, useClassNamesOverride(getModalUtilityClass));
-	};
 	function getContainer(container) {
 	  return typeof container === 'function' ? container() : container;
 	}
@@ -15372,68 +15398,47 @@
 	// A modal manager used to track and manage the state of open Modals.
 	// Modals don't open on the server so this won't conflict with concurrent requests.
 	const defaultManager = new ModalManager();
-
 	/**
-	 * Modal is a lower-level construct that is leveraged by the following components:
-	 *
-	 * *   [Dialog](https://mui.com/material-ui/api/dialog/)
-	 * *   [Drawer](https://mui.com/material-ui/api/drawer/)
-	 * *   [Menu](https://mui.com/material-ui/api/menu/)
-	 * *   [Popover](https://mui.com/material-ui/api/popover/)
-	 *
-	 * If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
-	 * rather than directly using Modal.
-	 *
-	 * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
 	 *
 	 * Demos:
 	 *
-	 * - [Modal](https://mui.com/base-ui/react-modal/)
+	 * - [Modal](https://mui.com/base-ui/react-modal/#hook)
 	 *
 	 * API:
 	 *
-	 * - [Modal API](https://mui.com/base-ui/react-modal/components-api/#modal)
+	 * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
 	 */
-	const Modal$2 = /*#__PURE__*/reactExports.forwardRef(function Modal(props, forwardedRef) {
-	  var _props$ariaHidden, _slots$root;
+	function useModal(parameters) {
 	  const {
-	      children,
-	      closeAfterTransition = false,
-	      container,
-	      disableAutoFocus = false,
-	      disableEnforceFocus = false,
-	      disableEscapeKeyDown = false,
-	      disablePortal = false,
-	      disableRestoreFocus = false,
-	      disableScrollLock = false,
-	      hideBackdrop = false,
-	      keepMounted = false,
-	      // private
-	      manager: managerProp = defaultManager,
-	      onBackdropClick,
-	      onClose,
-	      onKeyDown,
-	      open,
-	      onTransitionEnter,
-	      onTransitionExited,
-	      slotProps = {},
-	      slots = {}
-	    } = props,
-	    other = _objectWithoutPropertiesLoose(props, _excluded$w);
-	  // TODO: `modal`` must change its type in this file to match the type of methods
-	  // provided by `ModalManager`
-	  const manager = managerProp;
-	  const [exited, setExited] = reactExports.useState(!open);
+	    container,
+	    disableEscapeKeyDown = false,
+	    disableScrollLock = false,
+	    // @ts-ignore internal logic - Base UI supports the manager as a prop too
+	    manager = defaultManager,
+	    closeAfterTransition = false,
+	    onTransitionEnter,
+	    onTransitionExited,
+	    children,
+	    onClose,
+	    open,
+	    rootRef
+	  } = parameters;
+
+	  // @ts-ignore internal logic
 	  const modal = reactExports.useRef({});
 	  const mountNodeRef = reactExports.useRef(null);
 	  const modalRef = reactExports.useRef(null);
-	  const handleRef = useForkRef(modalRef, forwardedRef);
+	  const handleRef = useForkRef(modalRef, rootRef);
+	  const [exited, setExited] = reactExports.useState(!open);
 	  const hasTransition = getHasTransition(children);
-	  const ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
+	  let ariaHiddenProp = true;
+	  if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
+	    ariaHiddenProp = false;
+	  }
 	  const getDoc = () => ownerDocument(mountNodeRef.current);
 	  const getModal = () => {
 	    modal.current.modalRef = modalRef.current;
-	    modal.current.mountNode = mountNodeRef.current;
+	    modal.current.mount = mountNodeRef.current;
 	    return modal.current;
 	  };
 	  const handleMounted = () => {
@@ -15458,18 +15463,18 @@
 	  const isTopModal = reactExports.useCallback(() => manager.isTopModal(getModal()), [manager]);
 	  const handlePortalRef = useEventCallback(node => {
 	    mountNodeRef.current = node;
-	    if (!node || !modalRef.current) {
+	    if (!node) {
 	      return;
 	    }
 	    if (open && isTopModal()) {
 	      handleMounted();
-	    } else {
+	    } else if (modalRef.current) {
 	      ariaHidden(modalRef.current, ariaHiddenProp);
 	    }
 	  });
 	  const handleClose = reactExports.useCallback(() => {
 	    manager.remove(getModal(), ariaHiddenProp);
-	  }, [manager, ariaHiddenProp]);
+	  }, [ariaHiddenProp, manager]);
 	  reactExports.useEffect(() => {
 	    return () => {
 	      handleClose();
@@ -15482,49 +15487,9 @@
 	      handleClose();
 	    }
 	  }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
-	  const ownerState = _extends({}, props, {
-	    closeAfterTransition,
-	    disableAutoFocus,
-	    disableEnforceFocus,
-	    disableEscapeKeyDown,
-	    disablePortal,
-	    disableRestoreFocus,
-	    disableScrollLock,
-	    exited,
-	    hideBackdrop,
-	    keepMounted
-	  });
-	  const classes = useUtilityClasses$k(ownerState);
-	  const handleEnter = () => {
-	    setExited(false);
-	    if (onTransitionEnter) {
-	      onTransitionEnter();
-	    }
-	  };
-	  const handleExited = () => {
-	    setExited(true);
-	    if (onTransitionExited) {
-	      onTransitionExited();
-	    }
-	    if (closeAfterTransition) {
-	      handleClose();
-	    }
-	  };
-	  const handleBackdropClick = event => {
-	    if (event.target !== event.currentTarget) {
-	      return;
-	    }
-	    if (onBackdropClick) {
-	      onBackdropClick(event);
-	    }
-	    if (onClose) {
-	      onClose(event, 'backdropClick');
-	    }
-	  };
-	  const handleKeyDown = event => {
-	    if (onKeyDown) {
-	      onKeyDown(event);
-	    }
+	  const createHandleKeyDown = otherHandlers => event => {
+	    var _otherHandlers$onKeyD;
+	    (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
 
 	    // The handler doesn't take event.defaultPrevented into account:
 	    //
@@ -15543,62 +15508,71 @@
 	      }
 	    }
 	  };
-	  const childProps = {};
-	  if (children.props.tabIndex === undefined) {
-	    childProps.tabIndex = '-1';
-	  }
+	  const createHandleBackdropClick = otherHandlers => event => {
+	    var _otherHandlers$onClic;
+	    (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
+	    if (event.target !== event.currentTarget) {
+	      return;
+	    }
+	    if (onClose) {
+	      onClose(event, 'backdropClick');
+	    }
+	  };
+	  const getRootProps = (otherHandlers = {}) => {
+	    const propsEventHandlers = extractEventHandlers(parameters);
 
-	  // It's a Transition like component
-	  if (hasTransition) {
-	    childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
-	    childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
-	  }
-	  const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
-	  const rootProps = useSlotProps({
-	    elementType: Root,
-	    externalSlotProps: slotProps.root,
-	    externalForwardedProps: other,
-	    additionalProps: {
-	      ref: handleRef,
-	      role: 'presentation',
-	      onKeyDown: handleKeyDown
-	    },
-	    className: classes.root,
-	    ownerState
-	  });
-	  const BackdropComponent = slots.backdrop;
-	  const backdropProps = useSlotProps({
-	    elementType: BackdropComponent,
-	    externalSlotProps: slotProps.backdrop,
-	    additionalProps: {
-	      'aria-hidden': true,
-	      onClick: handleBackdropClick,
+	    // The custom event handlers shouldn't be spread on the root element
+	    delete propsEventHandlers.onTransitionEnter;
+	    delete propsEventHandlers.onTransitionExited;
+	    const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
+	    return _extends({
+	      role: 'presentation'
+	    }, externalEventHandlers, {
+	      onKeyDown: createHandleKeyDown(externalEventHandlers),
+	      ref: handleRef
+	    });
+	  };
+	  const getBackdropProps = (otherHandlers = {}) => {
+	    const externalEventHandlers = otherHandlers;
+	    return _extends({
+	      'aria-hidden': true
+	    }, externalEventHandlers, {
+	      onClick: createHandleBackdropClick(externalEventHandlers),
 	      open
-	    },
-	    className: classes.backdrop,
-	    ownerState
-	  });
-	  if (!keepMounted && !open && (!hasTransition || exited)) {
-	    return null;
-	  }
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(Portal
-	  // @ts-expect-error TODO: include ref to Base UI Portal props
-	  , {
-	    ref: handlePortalRef,
-	    container: container,
-	    disablePortal: disablePortal,
-	    children: /*#__PURE__*/jsxRuntimeExports.jsxs(Root, _extends({}, rootProps, {
-	      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntimeExports.jsx(BackdropComponent, _extends({}, backdropProps)) : null, /*#__PURE__*/jsxRuntimeExports.jsx(FocusTrap, {
-	        disableEnforceFocus: disableEnforceFocus,
-	        disableAutoFocus: disableAutoFocus,
-	        disableRestoreFocus: disableRestoreFocus,
-	        isEnabled: isTopModal,
-	        open: open,
-	        children: /*#__PURE__*/reactExports.cloneElement(children, childProps)
-	      })]
-	    }))
-	  });
-	});
+	    });
+	  };
+	  const getTransitionProps = () => {
+	    const handleEnter = () => {
+	      setExited(false);
+	      if (onTransitionEnter) {
+	        onTransitionEnter();
+	      }
+	    };
+	    const handleExited = () => {
+	      setExited(true);
+	      if (onTransitionExited) {
+	        onTransitionExited();
+	      }
+	      if (closeAfterTransition) {
+	        handleClose();
+	      }
+	    };
+	    return {
+	      onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
+	      onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
+	    };
+	  };
+	  return {
+	    getRootProps,
+	    getBackdropProps,
+	    getTransitionProps,
+	    rootRef: handleRef,
+	    portalRef: handlePortalRef,
+	    isTopModal,
+	    exited,
+	    hasTransition
+	  };
+	}
 
 	const _excluded$v = ["onChange", "maxRows", "minRows", "style", "value"];
 	function getStyleValue(value) {
@@ -15723,53 +15697,51 @@
 	    if (isEmpty$1(newState)) {
 	      return;
 	    }
-	    setState(prevState => {
-	      return updateState(prevState, newState);
-	    });
+	    setState(prevState => updateState(prevState, newState));
 	  }, [getUpdatedState]);
-	  const syncHeightWithFlushSync = () => {
-	    const newState = getUpdatedState();
-	    if (isEmpty$1(newState)) {
-	      return;
-	    }
+	  useEnhancedEffect$1(() => {
+	    const syncHeightWithFlushSync = () => {
+	      const newState = getUpdatedState();
+	      if (isEmpty$1(newState)) {
+	        return;
+	      }
 
-	    // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-	    // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-	    // Related issue - https://github.com/facebook/react/issues/24331
-	    reactDomExports.flushSync(() => {
-	      setState(prevState => {
-	        return updateState(prevState, newState);
+	      // In React 18, state updates in a ResizeObserver's callback are happening after
+	      // the paint, this leads to an infinite rendering.
+	      //
+	      // Using flushSync ensures that the states is updated before the next pain.
+	      // Related issue - https://github.com/facebook/react/issues/24331
+	      reactDomExports.flushSync(() => {
+	        setState(prevState => updateState(prevState, newState));
 	      });
-	    });
-	  };
-	  reactExports.useEffect(() => {
-	    const handleResize = debounce$1(() => {
+	    };
+	    const handleResize = () => {
 	      renders.current = 0;
-
-	      // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
-	      // ResizeObserver's handler that runs because of the change in the layout is trying to
-	      // access a dom node that is no longer there (as the fallback component is being shown instead).
-	      // See https://github.com/mui/material-ui/issues/32640
-	      if (inputRef.current) {
-	        syncHeightWithFlushSync();
-	      }
-	    });
-	    let resizeObserver;
+	      syncHeightWithFlushSync();
+	    };
+	    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
+	    // in test.
+	    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
+	    // Also see https://github.com/mui/mui-x/issues/8733
+	    let rAF;
+	    const debounceHandleResize = debounce$1(handleResize);
 	    const input = inputRef.current;
 	    const containerWindow = ownerWindow(input);
-	    containerWindow.addEventListener('resize', handleResize);
+	    containerWindow.addEventListener('resize', debounceHandleResize);
+	    let resizeObserver;
 	    if (typeof ResizeObserver !== 'undefined') {
 	      resizeObserver = new ResizeObserver(handleResize);
 	      resizeObserver.observe(input);
 	    }
 	    return () => {
-	      handleResize.clear();
-	      containerWindow.removeEventListener('resize', handleResize);
+	      debounceHandleResize.clear();
+	      cancelAnimationFrame(rAF);
+	      containerWindow.removeEventListener('resize', debounceHandleResize);
 	      if (resizeObserver) {
 	        resizeObserver.disconnect();
 	      }
 	    };
-	  });
+	  }, [getUpdatedState]);
 	  useEnhancedEffect$1(() => {
 	    syncHeight();
 	  });
@@ -15956,7 +15928,7 @@
 	  } = props;
 	  return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 	};
-	const useUtilityClasses$j = ownerState => {
+	const useUtilityClasses$k = ownerState => {
 	  const {
 	    classes,
 	    color,
@@ -15974,7 +15946,7 @@
 	    type
 	  } = ownerState;
 	  const slots = {
-	    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
+	    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size && size !== 'medium' && `size${capitalize(size)}`, multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
 	    input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
 	  };
 	  return composeClasses(slots, getInputBaseUtilityClass, classes);
@@ -16282,7 +16254,7 @@
 	    if (inputRef.current && event.currentTarget === event.target) {
 	      inputRef.current.focus();
 	    }
-	    if (onClick && !fcs.disabled) {
+	    if (onClick) {
 	      onClick(event);
 	    }
 	  };
@@ -16329,7 +16301,7 @@
 	    startAdornment,
 	    type
 	  });
-	  const classes = useUtilityClasses$j(ownerState);
+	  const classes = useUtilityClasses$k(ownerState);
 	  const Root = slots.root || components.Root || InputBaseRoot;
 	  const rootProps = slotProps.root || componentsProps.root || {};
 	  const Input = slots.input || components.Input || InputBaseComponent;
@@ -16511,7 +16483,7 @@
 	generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
 	const _excluded$r = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
-	const useUtilityClasses$i = ownerState => {
+	const useUtilityClasses$j = ownerState => {
 	  const {
 	    classes,
 	    invisible
@@ -16570,7 +16542,7 @@
 	    component,
 	    invisible
 	  });
-	  const classes = useUtilityClasses$i(ownerState);
+	  const classes = useUtilityClasses$j(ownerState);
 	  const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
 	    in: open,
@@ -16601,7 +16573,7 @@
 	const _excluded$q = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 	const RADIUS_STANDARD = 10;
 	const RADIUS_DOT = 4;
-	const useUtilityClasses$h = ownerState => {
+	const useUtilityClasses$i = ownerState => {
 	  const {
 	    color,
 	    anchorOrigin,
@@ -16804,7 +16776,7 @@
 	    overlap,
 	    variant
 	  });
-	  const classes = useUtilityClasses$h(ownerState);
+	  const classes = useUtilityClasses$i(ownerState);
 
 	  // support both `slots` and `components` for backward compatibility
 	  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
@@ -16851,7 +16823,7 @@
 	generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
 	const _excluded$p = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
-	const useUtilityClasses$g = ownerState => {
+	const useUtilityClasses$h = ownerState => {
 	  const {
 	    classes,
 	    checked,
@@ -16963,7 +16935,7 @@
 	    disableFocusRipple,
 	    edge
 	  });
-	  const classes = useUtilityClasses$g(ownerState);
+	  const classes = useUtilityClasses$h(ownerState);
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(SwitchBaseRoot, _extends$5({
 	    component: "span",
 	    className: clsx(classes.root, className),
@@ -17018,7 +16990,7 @@
 	var checkboxClasses$1 = checkboxClasses;
 
 	const _excluded$o = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
-	const useUtilityClasses$f = ownerState => {
+	const useUtilityClasses$g = ownerState => {
 	  const {
 	    classes,
 	    indeterminate,
@@ -17089,7 +17061,7 @@
 	    indeterminate,
 	    size
 	  });
-	  const classes = useUtilityClasses$f(ownerState);
+	  const classes = useUtilityClasses$g(ownerState);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(CheckboxRoot, _extends$5({
 	    type: "checkbox",
 	    inputProps: _extends$5({
@@ -17147,7 +17119,7 @@
     stroke-dashoffset: -125px;
   }
 `));
-	const useUtilityClasses$e = ownerState => {
+	const useUtilityClasses$f = ownerState => {
 	  const {
 	    classes,
 	    variant,
@@ -17249,7 +17221,7 @@
 	    value,
 	    variant
 	  });
-	  const classes = useUtilityClasses$e(ownerState);
+	  const classes = useUtilityClasses$f(ownerState);
 	  const circleStyle = {};
 	  const rootStyle = {};
 	  const rootProps = {};
@@ -17289,7 +17261,24 @@
 	});
 	var CircularProgress$1 = CircularProgress;
 
-	const _excluded$m = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+	function getModalUtilityClass(slot) {
+	  return generateUtilityClass('MuiModal', slot);
+	}
+	generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+
+	const _excluded$m = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
+	const useUtilityClasses$e = ownerState => {
+	  const {
+	    open,
+	    exited,
+	    classes
+	  } = ownerState;
+	  const slots = {
+	    root: ['root', !open && exited && 'hidden'],
+	    backdrop: ['backdrop']
+	  };
+	  return composeClasses(slots, getModalUtilityClass, classes);
+	};
 	const ModalRoot = styled$1('div', {
 	  name: 'MuiModal',
 	  slot: 'Root',
@@ -17344,7 +17333,6 @@
 	  const {
 	      BackdropComponent = ModalBackdrop,
 	      BackdropProps,
-	      classes,
 	      className,
 	      closeAfterTransition = false,
 	      children,
@@ -17361,17 +17349,13 @@
 	      hideBackdrop = false,
 	      keepMounted = false,
 	      onBackdropClick,
-	      onClose,
 	      open,
 	      slotProps,
-	      slots,
+	      slots
 	      // eslint-disable-next-line react/prop-types
-	      theme
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$m);
-	  const [exited, setExited] = reactExports.useState(true);
-	  const commonProps = {
-	    container,
+	  const propsWithDefaults = _extends$5({}, props, {
 	    closeAfterTransition,
 	    disableAutoFocus,
 	    disableEnforceFocus,
@@ -17380,40 +17364,90 @@
 	    disableRestoreFocus,
 	    disableScrollLock,
 	    hideBackdrop,
-	    keepMounted,
-	    onBackdropClick,
-	    onClose,
-	    open
-	  };
-	  const ownerState = _extends$5({}, props, commonProps, {
+	    keepMounted
+	  });
+	  const {
+	    getRootProps,
+	    getBackdropProps,
+	    getTransitionProps,
+	    portalRef,
+	    isTopModal,
+	    exited,
+	    hasTransition
+	  } = useModal(_extends$5({}, propsWithDefaults, {
+	    rootRef: ref
+	  }));
+	  const ownerState = _extends$5({}, propsWithDefaults, {
 	    exited
 	  });
+	  const classes = useUtilityClasses$e(ownerState);
+	  const childProps = {};
+	  if (children.props.tabIndex === undefined) {
+	    childProps.tabIndex = '-1';
+	  }
+
+	  // It's a Transition like component
+	  if (hasTransition) {
+	    const {
+	      onEnter,
+	      onExited
+	    } = getTransitionProps();
+	    childProps.onEnter = onEnter;
+	    childProps.onExited = onExited;
+	  }
 	  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
 	  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
 	  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
 	  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(Modal$2, _extends$5({
-	    slots: {
-	      root: RootSlot,
-	      backdrop: BackdropSlot
+	  const rootProps = useSlotProps({
+	    elementType: RootSlot,
+	    externalSlotProps: rootSlotProps,
+	    externalForwardedProps: other,
+	    getSlotProps: getRootProps,
+	    additionalProps: {
+	      ref,
+	      as: component
 	    },
-	    slotProps: {
-	      root: () => _extends$5({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
-	        as: component,
-	        theme
-	      }, {
-	        className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
-	      }),
-	      backdrop: () => _extends$5({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-	        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
-	      })
+	    ownerState,
+	    className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+	  });
+	  const backdropProps = useSlotProps({
+	    elementType: BackdropSlot,
+	    externalSlotProps: backdropSlotProps,
+	    additionalProps: BackdropProps,
+	    getSlotProps: otherHandlers => {
+	      return getBackdropProps(_extends$5({}, otherHandlers, {
+	        onClick: e => {
+	          if (onBackdropClick) {
+	            onBackdropClick(e);
+	          }
+	          if (otherHandlers != null && otherHandlers.onClick) {
+	            otherHandlers.onClick(e);
+	          }
+	        }
+	      }));
 	    },
-	    onTransitionEnter: () => setExited(false),
-	    onTransitionExited: () => setExited(true),
-	    ref: ref
-	  }, other, commonProps, {
-	    children: children
-	  }));
+	    className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+	    ownerState
+	  });
+	  if (!keepMounted && !open && (!hasTransition || exited)) {
+	    return null;
+	  }
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(Portal, {
+	    ref: portalRef,
+	    container: container,
+	    disablePortal: disablePortal,
+	    children: /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, _extends$5({}, rootProps, {
+	      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntimeExports.jsx(BackdropSlot, _extends$5({}, backdropProps)) : null, /*#__PURE__*/jsxRuntimeExports.jsx(FocusTrap, {
+	        disableEnforceFocus: disableEnforceFocus,
+	        disableAutoFocus: disableAutoFocus,
+	        disableRestoreFocus: disableRestoreFocus,
+	        isEnabled: isTopModal,
+	        open: open,
+	        children: /*#__PURE__*/reactExports.cloneElement(children, childProps)
+	      })]
+	    }))
+	  });
 	});
 	var Modal$1 = Modal;
 
@@ -19248,7 +19282,7 @@
 	generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
 	const _excluded$a = ["onEntering"],
-	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
 	  _excluded3 = ["slotProps"];
 	function getOffsetTop(rect, vertical) {
 	  let offset = 0;
@@ -19342,7 +19376,8 @@
 	      transitionDuration: transitionDurationProp = 'auto',
 	      TransitionProps: {
 	        onEntering
-	      } = {}
+	      } = {},
+	      disableScrollLock = false
 	    } = props,
 	    TransitionProps = _objectWithoutPropertiesLoose$3(props.TransitionProps, _excluded$a),
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded2$1);
@@ -19419,18 +19454,18 @@
 	    const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
 	    // Check if the vertical axis needs shifting
-	    if (top < marginThreshold) {
+	    if (marginThreshold !== null && top < marginThreshold) {
 	      const diff = top - marginThreshold;
 	      top -= diff;
 	      elemTransformOrigin.vertical += diff;
-	    } else if (bottom > heightThreshold) {
+	    } else if (marginThreshold !== null && bottom > heightThreshold) {
 	      const diff = bottom - heightThreshold;
 	      top -= diff;
 	      elemTransformOrigin.vertical += diff;
 	    }
 
 	    // Check if the horizontal axis needs shifting
-	    if (left < marginThreshold) {
+	    if (marginThreshold !== null && left < marginThreshold) {
 	      const diff = left - marginThreshold;
 	      left -= diff;
 	      elemTransformOrigin.horizontal += diff;
@@ -19461,6 +19496,12 @@
 	    element.style.transformOrigin = positioning.transformOrigin;
 	    setIsPositioned(true);
 	  }, [getPositioningStyle]);
+	  reactExports.useEffect(() => {
+	    if (disableScrollLock) {
+	      window.addEventListener('scroll', setPositioningStyles);
+	    }
+	    return () => window.removeEventListener('scroll', setPositioningStyles);
+	  }, [anchorEl, disableScrollLock, setPositioningStyles]);
 	  const handleEntering = (element, isAppearing) => {
 	    if (onEntering) {
 	      onEntering(element, isAppearing);
@@ -19541,7 +19582,8 @@
 	    } = _useSlotProps,
 	    rootProps = _objectWithoutPropertiesLoose$3(_useSlotProps, _excluded3);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(RootSlot, _extends$5({}, rootProps, !isHostComponent(RootSlot) && {
-	    slotProps: rootSlotPropsProp
+	    slotProps: rootSlotPropsProp,
+	    disableScrollLock
 	  }, {
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$5({
 	      appear: true,
@@ -20069,17 +20111,18 @@
 	function getRadioUtilityClass(slot) {
 	  return generateUtilityClass('MuiRadio', slot);
 	}
-	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary']);
+	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 	var radioClasses$1 = radioClasses;
 
 	const _excluded$6 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 	const useUtilityClasses$1 = ownerState => {
 	  const {
 	    classes,
-	    color
+	    color,
+	    size
 	  } = ownerState;
 	  const slots = {
-	    root: ['root', `color${capitalize(color)}`]
+	    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
 	  };
 	  return _extends$5({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
 	};
@@ -21855,6 +21898,9 @@
 	const barPadPx = 4;
 	const barBorderWidthPx = 1;
 	const barWithCheckboxLeftPadPx = 29;
+	const GRID_ROW_HEIGHT = 32;
+	const LIST_ROW_HEIGHT = 29;
+	const DENSE_ROW_HEIGHT = 20; // same for both list and grid in dense mode
 
 	const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
 	const getBarWidth = _ref => {
@@ -22696,13 +22742,13 @@
 	const getElementIndex = currentTarget => +currentTarget.getAttribute('data-n');
 	const focusSearch = container => {
 	  const searchField = container === null || container === void 0 ? void 0 : container.querySelector('.search input');
-	  searchField === null || searchField === void 0 ? void 0 : searchField.focus();
+	  searchField === null || searchField === void 0 || searchField.focus();
 	  return searchField;
 	};
 	const focusRow = container => {
 	  const row = container === null || container === void 0 ? void 0 : container.querySelector('.value.last-focused, .value.selector, .value');
-	  row === null || row === void 0 ? void 0 : row.setAttribute('tabIndex', 0);
-	  row === null || row === void 0 ? void 0 : row.focus();
+	  row === null || row === void 0 || row.setAttribute('tabIndex', 0);
+	  row === null || row === void 0 || row.focus();
 	  return row;
 	};
 
@@ -22884,18 +22930,18 @@
 	      case KEYS.HOME:
 	        focusListItems.setFirst(true);
 	        if (ctrlKey) {
-	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowStart');
+	          setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('overflowStart');
 	          break;
 	        }
-	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('start');
+	        setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('start');
 	        break;
 	      case KEYS.END:
 	        focusListItems.setLast(true);
 	        if (ctrlKey) {
-	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowEnd');
+	          setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('overflowEnd');
 	          break;
 	        }
-	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
+	        setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('end');
 	        break;
 	      case KEYS.A:
 	        if (ctrlKey || metaKey) {
@@ -25076,9 +25122,8 @@
 	  let rowCount;
 	  const isGridMode = dataLayout === 'grid';
 	  const itemPadding = 4;
-	  const denseItemHeight = 20;
-	  const normalItemHeight = isGridMode ? 32 : 29;
-	  let itemHeight = dense ? denseItemHeight : normalItemHeight;
+	  const normalItemHeight = isGridMode ? GRID_ROW_HEIGHT : LIST_ROW_HEIGHT;
+	  let itemHeight = dense ? DENSE_ROW_HEIGHT : normalItemHeight;
 	  if (isGridMode) {
 	    // Emulate a margin between items using padding, since the list library
 	    // needs an explicit row height and cannot handle margins.
@@ -25656,7 +25701,7 @@
 	  const cardinal = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qCardinal;
 	  if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages.length && !awaitingFrequencyMax || cardinal === 0) {
 	    // All necessary data fetching done - signal rendering done!
-	    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+	    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
 	  }
 	  const isItemLoaded = reactExports.useCallback(index => {
 	    if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -26409,7 +26454,7 @@
 	    actionsRefMock = null,
 	    // for testing
 	    direction = 'ltr',
-	    autoConfirm
+	    autoConfirm = false
 	  } = _ref3;
 	  const defaultSelectionActions = useDefaultSelectionActions(selections);
 	  const {
@@ -26456,14 +26501,7 @@
 	    focusHandler.on('focus_toolbar_last', focusLast);
 	  }, []);
 	  if (autoConfirm) {
-	    const canConfirm = selections.show;
-	    if (canConfirm) {
-	      const confirm = defaultSelectionActions.find(o => o.key === 'confirm') || {
-	        action: () => {}
-	      };
-	      confirm.action();
-	    }
-	    return null;
+	    return undefined;
 	  }
 	  let moreEnabled = more$1.enabled;
 	  let moreActions = more$1.actions;
@@ -26540,13 +26578,15 @@
 	    transformOrigin: popoverTransformOrigin,
 	    hideBackdrop: true,
 	    style: popoverStyle,
-	    PaperProps: {
-	      id: 'njs-action-toolbar-popover',
-	      'data-testid': 'njs-action-toolbar-popover',
-	      className: ActionToolbarElement.className,
-	      style: {
-	        pointerEvents: 'auto',
-	        padding: theme.spacing(0.5, 0.25)
+	    slotProps: {
+	      paper: {
+	        id: 'njs-action-toolbar-popover',
+	        'data-testid': 'njs-action-toolbar-popover',
+	        className: ActionToolbarElement.className,
+	        style: {
+	          pointerEvents: 'auto',
+	          padding: theme.spacing(0.5, 0.25)
+	        }
 	      }
 	    }
 	  }, Actions) : show && Actions;
@@ -26677,7 +26717,7 @@
 	  function focusRow(container) {
 	    const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
 	    row.setAttribute('tabIndex', 0);
-	    row === null || row === void 0 ? void 0 : row.focus();
+	    row === null || row === void 0 || row.focus();
 	  }
 	  const onKeyDown = async e => {
 	    const {
@@ -26703,7 +26743,7 @@
 	            focusRow(container);
 
 	            // Clean up.
-	            container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+	            container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
 	              elm.classList.remove('last-focused');
 	            });
 	          }
@@ -27012,12 +27052,12 @@
 	    activateClickOut() {
 	      var _options$onSelectionA;
 	      document.addEventListener('mousedown', handler);
-	      options === null || options === void 0 || (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 ? void 0 : _options$onSelectionA.call(options);
+	      options === null || options === void 0 || (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 || _options$onSelectionA.call(options);
 	    },
 	    deactivateClickOut() {
 	      var _options$onSelectionD;
 	      document.removeEventListener('mousedown', handler);
-	      options === null || options === void 0 || (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 ? void 0 : _options$onSelectionD.call(options);
+	      options === null || options === void 0 || (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 || _options$onSelectionD.call(options);
 	    }
 	  };
 	};
@@ -27142,7 +27182,7 @@
 	      if (selected && !additive) {
 	        state.itemStates[elementNumber] = false;
 	      } else if (!selected) {
-	        selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.push(elementNumber);
+	        selectedValues === null || selectedValues === void 0 || selectedValues.push(elementNumber);
 	        state.itemStates[elementNumber] = true;
 	      }
 	    },
@@ -27282,7 +27322,7 @@
 	  });
 	  const onCtrlF = () => {
 	    const input = searchContainerRef.current.querySelector('input');
-	    input === null || input === void 0 ? void 0 : input.focus();
+	    input === null || input === void 0 || input.focus();
 	  };
 	  const hasSelections$1 = hasSelections(layout);
 	  return /*#__PURE__*/React.createElement(Popover$1, {
@@ -28535,12 +28575,12 @@
 	var DrillDownIcon = (props => SvgIcon(drillDown(props)));
 
 	function removeInnnerTabStops(container) {
-	  container === null || container === void 0 ? void 0 : container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
+	  container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
 	    elm.setAttribute('tabIndex', -1);
 	  });
 	}
 	function removeLastFocused(container) {
-	  container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+	  container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
 	    elm.classList.remove('last-focused');
 	  });
 	}
@@ -28588,13 +28628,13 @@
 	      const firstRowElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value');
 	      const confirmButton = c === null || c === void 0 ? void 0 : c.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
 	      const elementToFocus = searchField || lastSelectedRow || firstRowElement || confirmButton;
-	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.setAttribute('tabIndex', 0);
-	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+	      elementToFocus === null || elementToFocus === void 0 || elementToFocus.setAttribute('tabIndex', 0);
+	      elementToFocus === null || elementToFocus === void 0 || elementToFocus.focus();
 	    },
 	    focusSelection() {
 	      const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-	      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.setAttribute('tabIndex', 0);
-	      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.focus();
+	      confirmButton === null || confirmButton === void 0 || confirmButton.setAttribute('tabIndex', 0);
+	      confirmButton === null || confirmButton === void 0 || confirmButton.focus();
 	    }
 	  };
 	  return keyboard;
@@ -28636,7 +28676,7 @@
 	      keyboard.blur();
 	      const c = currentTarget.closest('.listbox-container');
 	      c.setAttribute('tabIndex', -1);
-	      c === null || c === void 0 ? void 0 : c.focus();
+	      c === null || c === void 0 || c.focus();
 	    }
 	  };
 	  const handleKeyDown = event => {
@@ -28799,11 +28839,9 @@
 	    isLocked,
 	    listboxSelectionToolbarItems,
 	    selections,
-	    keyboard,
-	    autoConfirm
+	    keyboard
 	  } = _ref;
 	  return {
-	    autoConfirm,
 	    show: showToolbar && !isDetached,
 	    popover: {
 	      show: showToolbar && isDetached,
@@ -28824,10 +28862,10 @@
 	      show: showToolbar,
 	      api: selections,
 	      onConfirm: () => {
-	        keyboard === null || keyboard === void 0 ? void 0 : keyboard.focus();
+	        keyboard === null || keyboard === void 0 || keyboard.focus();
 	      },
 	      onCancel: () => {
-	        keyboard === null || keyboard === void 0 ? void 0 : keyboard.focus();
+	        keyboard === null || keyboard === void 0 || keyboard.focus();
 	      }
 	    }
 	  };
@@ -29109,10 +29147,6 @@
 	  const showSearchToggle = search === 'toggle' && showSearch;
 	  const searchVisible = (search === true || showSearchToggle) && !selectDisabled() && searchEnabled !== false;
 	  const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
-	  const searchHeight = dense ? 27 : 40;
-	  const extraheight = dense ? 39 : 49;
-	  const searchAddHeight = searchVisible ? searchHeight : 0;
-	  const minHeight = showToolbarWithTitle ? 49 + searchAddHeight + extraheight : 0;
 	  const headerHeight = 32;
 	  const onShowSearch = () => {
 	    const newValue = !showSearch;
@@ -29123,17 +29157,18 @@
 	      onShowSearch();
 	    } else {
 	      const input = searchContainer.current.querySelector('input');
-	      input === null || input === void 0 ? void 0 : input.focus();
+	      input === null || input === void 0 || input.focus();
 	    }
 	  };
-	  const getActionToolbarProps = isDetached => getListboxActionProps({
+	  const getActionToolbarProps = isDetached => _objectSpread2(_objectSpread2({}, getListboxActionProps({
 	    isDetached: isPopover ? false : isDetached,
 	    showToolbar,
 	    containerRef,
 	    isLocked,
 	    listboxSelectionToolbarItems,
 	    selections,
-	    keyboard,
+	    keyboard
+	  })), {}, {
 	    autoConfirm
 	  });
 	  const shouldAutoFocus = searchVisible && search === 'toggle';
@@ -29181,7 +29216,7 @@
 	    }
 	  }));
 	  if (isInvalid) {
-	    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+	    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
 	  }
 	  return /*#__PURE__*/React.createElement(React.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$7({
 	    direction: direction
@@ -29194,7 +29229,6 @@
 	    containerPadding: containerPadding,
 	    style: {
 	      height: '100%',
-	      minHeight: "".concat(minHeight, "px"),
 	      flexFlow: 'column nowrap'
 	    },
 	    onKeyDown: handleKeyDown,
@@ -29249,7 +29283,7 @@
 	    direction: "column",
 	    style: {
 	      height: '100%',
-	      minHeight: '50px'
+	      minHeight: DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH
 	    },
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
@@ -29464,7 +29498,7 @@
 	   */
 	  wildCardSearch: false,
 	  /**
-	   * Automatically confirm selections without showing the selections toolbar.
+	   * Automatically confirm selections when clicking outside a listbox, without showing the selections toolbar.
 	   * @type {boolean=}
 	   * @default
 	   */
@@ -31000,17 +31034,26 @@
 	    halo,
 	    model,
 	    cellRef,
-	    newType
+	    newType,
+	    properties
 	  } = _ref2;
-	  const propertyTree = await model.getFullPropertyTree();
+	  const propertyTree = properties ? {
+	    qProperty: properties
+	  } : await model.getFullPropertyTree();
 	  const sourceQae = cellRef.current.getQae();
 	  const exportProperties = getExportPropertiesFnc(sourceQae);
+	  if (!exportProperties) {
+	    throw new Error('Source chart does not support conversion');
+	  }
 	  const targetSnType = await getType$1({
 	    halo,
 	    name: newType
 	  });
 	  const targetQae = targetSnType.qae;
 	  const importProperties = getImportPropertiesFnc(targetQae);
+	  if (!importProperties) {
+	    throw new Error('Target chart does not support conversion');
+	  }
 	  const exportFormat = exportProperties({
 	    propertyTree,
 	    hypercubePath: helpers.getHypercubePath(sourceQae)
@@ -32082,7 +32125,8 @@
 	    selections,
 	    nebbie,
 	    focusHandler,
-	    emitter
+	    emitter,
+	    onMount
 	  } = _ref5;
 	  try {
 	    const snType = await getType({
@@ -32098,7 +32142,14 @@
 	      focusHandler,
 	      emitter
 	    });
-	    return sn;
+	    if (sn) {
+	      dispatch({
+	        type: 'LOADED',
+	        sn,
+	        visualization
+	      });
+	      onMount();
+	    }
 	  } catch (err) {
 	    if (!version) {
 	      dispatch({
@@ -32115,8 +32166,8 @@
 	        }
 	      });
 	    }
+	    onMount();
 	  }
-	  return undefined;
 	};
 	const Cell = reactExports.forwardRef((_ref6, ref) => {
 	  let {
@@ -32222,7 +32273,12 @@
 	    }
 	  };
 	  reactExports.useEffect(() => {
-	    if (initialError || !appLayout || !layout) {
+	    if (initialError) {
+	      // To resolve the Viz promise for missing types
+	      onMount();
+	      return undefined;
+	    }
+	    if (!appLayout || !layout) {
 	      return undefined;
 	    }
 	    const validate = async sn => {
@@ -32247,7 +32303,7 @@
 	      dispatch({
 	        type: 'LOADING'
 	      });
-	      const sn = await loadType({
+	      await loadType({
 	        dispatch,
 	        types,
 	        visualization,
@@ -32257,17 +32313,9 @@
 	        selections,
 	        nebbie,
 	        focusHandler: focusHandler.current,
-	        emitter
+	        emitter,
+	        onMount
 	      });
-	      if (sn) {
-	        dispatch({
-	          type: 'LOADED',
-	          sn,
-	          visualization
-	        });
-	        onMount();
-	      }
-	      return undefined;
 	    };
 
 	    // Validate if it's still the same type
@@ -32535,865 +32583,87 @@
 	  });
 	}
 
-	const noopi$1 = () => {};
-	function viz() {
-	  let {
-	    model,
-	    halo,
-	    initialError,
-	    onDestroy = async () => {}
-	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-	  let unmountCell = noopi$1;
-	  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(_objectSpread2({}, initialSnOptions), opts), {
-	          onInitialRender: createOnInitialRender(override)
-	        }));
-	      })();
-	    } else {
-	      // Handle setting options before mount
-	      initialSnOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, initialSnOptions), opts), {
-	        onInitialRender: createOnInitialRender(override)
-	      });
-	    }
-	  };
-	  const setSnPlugins = async plugins => {
-	    validatePlugins(plugins);
-	    if (mountedReference) {
-	      (async () => {
-	        await mounted;
-	        cellRef.current.setSnPlugins(plugins);
-	      })();
-	    } else {
-	      // Handle setting plugins before mount
-	      initialSnPlugins = plugins;
-	    }
-	  };
-
-	  /**
-	   * @class
-	   * @alias Viz
-	   * @classdesc A controller to further modify a visualization after it has been rendered.
-	   * @example
-	   * const viz = await embed(app).render({
-	   *   element,
-	   *   type: 'barchart'
-	   * });
-	   * viz.destroy();
-	   */
-	  const api = /** @lends Viz# */{
-	    /**
-	     * The id of this visualization's generic object.
-	     * @type {string}
-	     */
-	    id: model.id,
-	    /**
-	     * This visualizations Enigma model, a representation of the generic object.
-	     * @type {EngineAPI.IGenericObject}
-	     */
-	    model,
-	    /**
-	     * Destroys the visualization and removes it from the the DOM.
-	     * @example
-	     * const viz = await embed(app).render({
-	     *   element,
-	     *   id: 'abc'
-	     * });
-	     * viz.destroy();
-	     */
-	    async destroy() {
-	      await onDestroy();
-	      unmountCell();
-	      unmountCell = noopi$1;
-	    },
-	    /**
-	     * Converts the visualization to a different registered type
-	     * @since 1.1.0
-	     * @param {string} newType - Which registered type to convert to.
-	     * @param {boolean=} forceUpdate - Whether to run setProperties or not, defaults to true.
-	     * @returns {Promise<object>} Promise object that resolves to the full property tree of the converted visualization.
-	     * @example
-	     * const viz = await embed(app).render({
-	     *   element,
-	     *   id: 'abc'
-	     * });
-	     * viz.convertTo('barChart');
-	     */
-	    async convertTo(newType) {
-	      let forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-	      const propertyTree = await convertTo({
-	        halo,
-	        model,
-	        cellRef,
-	        newType
-	      });
-	      if (forceUpdate) {
-	        if (model.__snInterceptor) {
-	          await model.__snInterceptor.setProperties.call(model, propertyTree.qProperty);
-	        } else {
-	          await model.setProperties(propertyTree.qProperty);
-	        }
-	      }
-	      return propertyTree;
-	    },
-	    /**
-	     * Listens to custom events from inside the visualization. See useEmitter
-	     * @experimental
-	     * @param {string} eventName Event name to listen to
-	     * @param {Function} listener Callback function to invoke
-	     */
-	    addListener(eventName, listener) {
-	      emitter.addListener(eventName, listener);
-	    },
-	    /**
-	     * Removes a listener
-	     * @experimental
-	     * @param {string} eventName Event name to remove from
-	     * @param {Function} listener Callback function to remove
-	     */
-	    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) {
-	        if (mountedReference) {
-	          throw new Error('Already mounted');
-	        }
-	        mountedReference = element;
-	        [unmountCell, cellRef] = glue$1({
-	          halo,
-	          element,
-	          model,
-	          initialSnOptions,
-	          initialSnPlugins,
-	          initialError,
-	          onMount,
-	          emitter
-	        });
-	        return mounted;
-	      },
-	      async applyProperties(props) {
-	        const current = await model.getEffectiveProperties();
-	        const patches = getPatches('/', props, current);
-	        if (patches.length) {
-	          return model.applyPatches(patches, true);
-	        }
-	        return undefined;
-	      },
-	      options(opts) {
-	        setSnOptions(opts);
-	      },
-	      plugins(plugins) {
-	        setSnPlugins(plugins);
-	      },
-	      exportImage() {
-	        return cellRef.current.exportImage();
-	      },
-	      takeSnapshot() {
-	        return cellRef.current.takeSnapshot();
-	      },
-	      getModel() {
-	        return model;
-	      }
-	    }
+	const canSetProperties = layout => {
+	  var _layout$qMeta;
+	  return !!(layout && !layout.qHasSoftPatches && !layout.qExtendsId && (((_layout$qMeta = layout.qMeta) === null || _layout$qMeta === void 0 ? void 0 : _layout$qMeta.privileges) || []).indexOf('update') > -1);
+	};
 
-	    // old QVisualization API
-	    // close() {},
-	    // exportData() {},
-	    // exportImg() {},
-	    // exportPdf() {},
-	    // setOptions() {}, // applied soft patch
-	    // resize() {},
-	    // show() {},
-	    // toggleDataView() {},
-	  };
+	/* eslint-disable no-underscore-dangle */
+	const setProperties = (model, newProperties) => {
+	  if (model.__snInterceptor) {
+	    return model.__snInterceptor.setProperties.call(model, newProperties);
+	  }
+	  return model.setProperties(newProperties);
+	};
 
-	  return api;
+	/* eslint no-param-reassign: 0, no-restricted-globals: 0 */
+	const extend = extend$2.bind(null, true);
+	const JSONPatch = {};
+	const {
+	  isArray
+	} = Array;
+	function isObject(v) {
+	  return v != null && !Array.isArray(v) && typeof v === 'object';
+	}
+	function isUndef(v) {
+	  return typeof v === 'undefined';
+	}
+	function isFunction(v) {
+	  return typeof v === 'function';
 	}
 
-	/* eslint no-underscore-dangle:0 */
-	async function init(model, optional, halo, initialError) {
-	  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
-	  const api = viz({
-	    model,
-	    halo,
-	    initialError,
-	    onDestroy
-	  });
-	  if (optional.options) {
-	    api.__DO_NOT_USE__.options(optional.options);
-	  }
-	  if (optional.plugins) {
-	    api.__DO_NOT_USE__.plugins(optional.plugins);
-	  }
-	  if (optional.element) {
-	    await api.__DO_NOT_USE__.mount(optional.element);
+	/**
+	 * Generate an exact duplicate (with no references) of a specific value.
+	 *
+	 * @private
+	 * @param {Object} The value to duplicate
+	 * @returns {Object} a unique, duplicated value
+	 */
+	function generateValue(val) {
+	  if (val) {
+	    return extend({}, {
+	      val
+	    }).val;
 	  }
-	  return api;
+	  return val;
 	}
 
 	/**
-	 * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
+	 * An additional type checker used to determine if the property is of internal
+	 * use or not a type that can be translated into JSON (like functions).
+	 *
+	 * @private
+	 * @param {Object} obj The object which has the property to check
+	 * @param {String} The property name to check
+	 * @returns {Boolean} Whether the property is deemed special or not
 	 */
+	function isSpecialProperty(obj, key) {
+	  return isFunction(obj[key]) || key.substring(0, 2) === '$$' || key.substring(0, 1) === '_';
+	}
 
 	/**
-	 * @interface RenderConfig
-	 * @description Configuration for rendering a visualisation, either creating or fetching an existing object.
-	 * @property {HTMLElement} element Target html element to render in to
-	 * @property {object=} options Options passed into the visualisation
-	 * @property {Plugin[]} [plugins] plugins passed into the visualisation
-	 * @property {string=} id For existing objects: Engine identifier of object to render
-	 * @property {string=} type For creating objects: Type of visualisation to render
-	 * @property {string=} version For creating objects: Version of visualization to render
-	 * @property {(Field[])=} fields For creating objects: Data fields to use
-	 * @property {boolean=} [extendProperties=false] For creating objects: Whether to deeply extend properties or not. If false then subtrees will be overwritten.
-	 * @property {EngineAPI.IGenericObjectProperties=} properties For creating objects: Explicit properties to set
-	 * @example
-	 * // A config for Creating objects:
-	 * const createConfig = {
-	 *   type: 'bar',
-	 *   element: document.querySelector('.bar'),
-	 *   extendProperties: true,
-	 *   fields: ['[Country names]', '=Sum(Sales)'],
-	 *   properties: {
-	 *     legend: {
-	 *       show: false,
-	 *     },
-	 *   }
-	 * };
-	 * nebbie.render(createConfig);
-	 * // A config for rendering an existing object:
-	 * const createConfig = {
-	 *   id: 'jG5LP',
-	 *   element: document.querySelector('.line'),
-	 * };
-	 * nebbie.render(createConfig);
+	 * Finds the parent object from a JSON-Pointer ("/foo/bar/baz" = "bar" is "baz" parent),
+	 * also creates the object structure needed.
+	 *
+	 * @private
+	 * @param {Object} data The root object to traverse through
+	 * @param {String} The JSON-Pointer string to use when traversing
+	 * @returns {Object} The parent object
 	 */
-	async function createSessionObject(_ref, halo) {
-	  let {
-	    type,
-	    version,
-	    fields,
-	    properties,
-	    options,
-	    plugins,
-	    element,
-	    extendProperties
-	  } = _ref;
-	  let mergedProps = {};
-	  const children = [];
-	  let error;
-	  try {
-	    const t = halo.types.get({
-	      name: type,
-	      version
-	    });
-	    mergedProps = await t.initialProperties(properties, extendProperties);
-	    const sn = await t.supernova();
-	    if (fields) {
-	      await populateData({
-	        sn,
-	        properties: mergedProps,
-	        fields,
-	        children
-	      }, halo);
-	    }
-	    if (properties && sn && sn.qae.properties.onChange) {
-	      sn.qae.properties.onChange.call({}, mergedProps);
+	function getParent(data, str) {
+	  const seperator = '/';
+	  const parts = str.substring(1).split(seperator).slice(0, -1);
+	  let numPart;
+	  parts.forEach((part, i) => {
+	    if (i === parts.length) {
+	      return;
 	    }
-	  } catch (e) {
-	    error = e;
-	    // minimal dummy object properties to allow it to be created
-	    // and rendered with the error
-	    mergedProps = {
-	      qInfo: {
-	        qType: type
-	      },
-	      visualization: type
-	    };
-	    // console.error(e); // eslint-disable-line
-	  }
-
-	  const model = await halo.app.createSessionObject(mergedProps);
-	  if (children.length > 0) {
-	    await model.setFullPropertyTree({
-	      qProperty: mergedProps,
-	      qChildren: children
-	    });
-	  }
-	  modelStore.set(model.id, model);
-	  const unsubscribe = subscribe(model);
-	  const onDestroy = async () => {
-	    await halo.app.destroySessionObject(model.id);
-	    unsubscribe();
-	  };
-	  return init(model, {
-	    options,
-	    plugins,
-	    element
-	  }, halo, error, onDestroy);
-	}
-
-	/**
-	 * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
-	 */
-
-	/**
-	 * @interface CreateConfig
-	 * @description Rendering configuration for creating and rendering a new object
-	 * @property {string} type
-	 * @property {string=} version
-	 * @property {(Field[])=} fields
-	 * @property {EngineAPI.IGenericObjectProperties=} properties
-	 */
-
-	async function createObject(_ref, halo, generateOnly) {
-	  let {
-	    type,
-	    version,
-	    fields,
-	    properties,
-	    extendProperties /* , options, plugins, element */
-	  } = _ref;
-	  let mergedProps = {};
-	  const children = [];
-	  // let error;
-	  try {
-	    const t = halo.types.get({
-	      name: type,
-	      version
-	    });
-	    mergedProps = await t.initialProperties(properties, extendProperties);
-	    const sn = await t.supernova();
-	    if (fields) {
-	      await populateData({
-	        sn,
-	        properties: mergedProps,
-	        fields,
-	        children
-	      }, halo);
-	    }
-	    if (properties && sn && sn.qae.properties.onChange) {
-	      sn.qae.properties.onChange.call({}, mergedProps);
-	    }
-	  } catch (e) {
-	    // error = e;
-	    // minimal dummy object properties to allow it to be created
-	    // and rendered with the error
-	    if (!generateOnly) {
-	      mergedProps = {
-	        qInfo: {
-	          qType: type
-	        },
-	        visualization: type
-	      };
-	    } else {
-	      mergedProps = null;
-	    }
-	    // console.error(e); // eslint-disable-line
-	  }
-
-	  if (!generateOnly) {
-	    const model = await halo.app.createObject(mergedProps);
-	    if (children.length > 0) {
-	      await model.setFullPropertyTree({
-	        qProperty: mergedProps,
-	        qChildren: children
-	      });
-	    }
-	    modelStore.set(model.id, model);
-	    return model;
-	  }
-	  return mergedProps;
-	}
-
-	async function getObject$1(_ref, halo) {
-	  let {
-	    id,
-	    options,
-	    plugins,
-	    element
-	  } = _ref;
-	  const key = "".concat(id);
-	  let rpc = rpcRequestModelStore.get(key);
-	  if (!rpc) {
-	    rpc = halo.app.getObject(id);
-	    rpcRequestModelStore.set(key, rpc);
-	  }
-	  const model = await rpc;
-	  modelStore.set(key, model);
-	  return init(model, {
-	    options,
-	    plugins,
-	    element
-	  }, halo);
-	}
-
-	/**
-	 * @interface
-	 * @extends HTMLElement
-	 * @experimental
-	 * @since 3.1.0
-	 */
-	const SheetElement = {
-	  /** @type {'njs-sheet'} */
-	  className: 'njs-sheet'
-	};
-	function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount) {
-	  const {
-	    x,
-	    y,
-	    width,
-	    height
-	  } = cell.bounds;
-	  return /*#__PURE__*/React.createElement("div", {
-	    style: {
-	      left: "".concat(x, "%"),
-	      top: "".concat(y, "%"),
-	      width: "".concat(width, "%"),
-	      height: "".concat(height, "%"),
-	      position: 'absolute'
-	    }
-	  }, /*#__PURE__*/React.createElement(Cell, {
-	    ref: cell.cellRef,
-	    halo: halo,
-	    model: cell.model,
-	    currentId: cell.currentId,
-	    initialSnOptions: initialSnOptions,
-	    initialSnPlugins: initialSnPlugins,
-	    initialError: initialError,
-	    onMount: onMount
-	  }));
-	}
-	function Sheet(_ref) {
-	  let {
-	    model,
-	    halo,
-	    initialSnOptions,
-	    initialSnPlugins,
-	    initialError,
-	    onMount
-	  } = _ref;
-	  const {
-	    root
-	  } = halo;
-	  const [layout] = useLayout$1(model);
-	  const {
-	    theme: themeName
-	  } = reactExports.useContext(InstanceContext);
-	  const [cells, setCells] = reactExports.useState([]);
-	  const [bgColor, setBgColor] = reactExports.useState(undefined);
-	  const [bgImage, setBgImage] = reactExports.useState(undefined);
-	  const [deepHash, setDeepHash] = reactExports.useState('');
-
-	  /// For each object
-	  reactExports.useEffect(() => {
-	    if (layout) {
-	      const hash = JSON.stringify(layout.cells);
-	      if (hash === deepHash) {
-	        return;
-	      }
-	      setDeepHash(hash);
-	      const fetchObjects = async () => {
-	        /*
-	          Need to always fetch and evaluate everything as the sheet need to support multiple instances of the same object?
-	          No, there is no way to add the same chart twice, so the optimization should be worth it.
-	        */
-
-	        // Clear the cell list
-	        cells.forEach(c => {
-	          root.removeCell(c.currentId);
-	        });
-	        const lCells = layout.cells;
-	        // TODO - should try reuse existing objects on subsequent renders
-	        // Non-id updates should only change the "css"
-	        const cs = await Promise.all(lCells.map(async c => {
-	          let mounted;
-	          const mountedPromise = new Promise(resolve => {
-	            mounted = resolve;
-	          });
-	          const cell = cells.find(ce => ce.id === c.name);
-	          if (cell) {
-	            cell.bounds = c.bounds;
-	            delete cell.mountedPromise;
-	            return cell;
-	          }
-	          const vs = await getObject$1({
-	            id: c.name
-	          }, halo);
-	          return {
-	            model: vs.model,
-	            id: c.name,
-	            bounds: c.bounds,
-	            cellRef: React.createRef(),
-	            currentId: uid(),
-	            mounted,
-	            mountedPromise
-	          };
-	        }));
-	        cs.forEach(c => root.addCell(c.currentId, c.cellRef));
-	        setCells(cs);
-	      };
-	      fetchObjects();
-	    }
-	  }, [layout]);
-	  const cellRenderers = reactExports.useMemo(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted)) : [], [cells]);
-	  reactExports.useEffect(() => {
-	    const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
-	    setBgColor(resolveBgColor(bgComp, halo.public.theme));
-	    setBgImage(resolveBgImage(bgComp, halo.app));
-	  }, [layout, halo.public.theme, halo.app, themeName]);
-
-	  /* TODO
-	    - sheet title + bg + logo etc + as option
-	    - sheet exposed classnames for theming
-	  */
-
-	  const height = !layout || Number.isNaN(layout.height) ? '100%' : "".concat(Number(layout.height), "%");
-	  const promises = cells.map(c => c.mountedPromise);
-	  const ps = promises.filter(p => !!p);
-	  if (ps.length) {
-	    Promise.all(promises).then(() => {
-	      // TODO - correct? Currently called each time a new cell is mounted?
-	      onMount();
-	    });
-	  }
-	  return /*#__PURE__*/React.createElement("div", {
-	    className: SheetElement.className,
-	    style: {
-	      width: "100%",
-	      height,
-	      position: 'relative',
-	      backgroundColor: bgColor,
-	      backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
-	      backgroundRepeat: 'no-repeat',
-	      backgroundSize: bgImage && bgImage.size,
-	      backgroundPosition: bgImage && bgImage.pos
-	    }
-	  }, cellRenderers);
-	}
-
-	function glue(_ref) {
-	  let {
-	    halo,
-	    element,
-	    model,
-	    initialSnOptions,
-	    initialSnPlugins,
-	    onMount,
-	    initialError
-	  } = _ref;
-	  const {
-	    root
-	  } = halo;
-	  const sheetRef = React.createRef();
-	  const portal = ReactDOM.createPortal( /*#__PURE__*/React.createElement(Sheet, {
-	    ref: sheetRef,
-	    halo: halo,
-	    model: model,
-	    initialSnOptions: initialSnOptions,
-	    initialSnPlugins: initialSnPlugins,
-	    initialError: initialError,
-	    onMount: onMount
-	  }), element, model.id);
-	  const unmount = () => {
-	    root.remove(portal);
-	    model.removeListener('closed', unmount);
-	  };
-	  model.on('closed', unmount);
-	  root.add(portal);
-	  return [unmount, sheetRef];
-	}
-
-	const noopi = () => {};
-	function sheet() {
-	  let {
-	    model,
-	    halo,
-	    initialError,
-	    onDestroy = async () => {}
-	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-	  let unmountSheet = noopi;
-	  let sheetRef = null;
-	  let mountedReference = null;
-	  let onMount = null;
-	  const mounted = new Promise(resolve => {
-	    onMount = resolve;
-	  });
-	  let initialSnOptions = {};
-	  let initialSnPlugins = [];
-	  const setSnOptions = async opts => {
-	    if (mountedReference) {
-	      (async () => {
-	        await mounted;
-	        sheetRef.current.setSnOptions(_objectSpread2(_objectSpread2({}, initialSnOptions), opts));
-	      })();
-	    } else {
-	      // Handle setting options before mount
-	      initialSnOptions = _objectSpread2(_objectSpread2({}, initialSnOptions), opts);
-	    }
-	  };
-	  const setSnPlugins = async plugins => {
-	    validatePlugins(plugins);
-	    if (mountedReference) {
-	      (async () => {
-	        await mounted;
-	        sheetRef.current.setSnPlugins(plugins);
-	      })();
-	    } else {
-	      // Handle setting plugins before mount
-	      initialSnPlugins = plugins;
-	    }
-	  };
-
-	  /**
-	   * @class
-	   * @alias Sheet
-	   * @classdesc A controller to further modify a visualization after it has been rendered.
-	   * @experimental
-	   * @since 3.1.0
-	   * @example
-	   * const sheet = await embed(app).render({
-	   *   element,
-	   *   id: "jD5Gd"
-	   * });
-	   * sheet.destroy();
-	   */
-	  const api = /** @lends Sheet# */{
-	    /**
-	     * The id of this sheets's generic object.
-	     * @type {string}
-	     */
-	    id: model.id,
-	    /**
-	     * This sheets Enigma model, a representation of the generic object.
-	     * @type {string}
-	     */
-	    model,
-	    /**
-	     * Destroys the sheet and removes it from the the DOM.
-	     * @example
-	     * const sheet = await embed(app).render({
-	     *   element,
-	     *   id: "jD5Gd"
-	     * });
-	     * sheet.destroy();
-	     */
-	    async destroy() {
-	      await onDestroy();
-	      unmountSheet();
-	      unmountSheet = noopi;
-	    },
-	    // ===== unexposed experimental API - use at own risk ======
-	    __DO_NOT_USE__: {
-	      mount(element) {
-	        if (mountedReference) {
-	          throw new Error('Already mounted');
-	        }
-	        mountedReference = element;
-	        [unmountSheet, sheetRef] = glue({
-	          halo,
-	          element,
-	          model,
-	          initialSnOptions,
-	          initialSnPlugins,
-	          initialError,
-	          onMount
-	        });
-	        return mounted;
-	      },
-	      async applyProperties(props) {
-	        const current = await model.getEffectiveProperties();
-	        const patches = getPatches('/', props, current);
-	        if (patches.length) {
-	          return model.applyPatches(patches, true);
-	        }
-	        return undefined;
-	      },
-	      options(opts) {
-	        setSnOptions(opts);
-	      },
-	      plugins(plugins) {
-	        setSnPlugins(plugins);
-	      },
-	      exportImage() {
-	        throw new Error('Not implemented');
-	      },
-	      takeSnapshot() {
-	        throw new Error('Not implemented');
-	      },
-	      getModel() {
-	        return model;
-	      }
-	    }
-	  };
-	  return api;
-	}
-
-	/* eslint no-underscore-dangle:0 */
-	async function initSheet(model, optional, halo, initialError) {
-	  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
-	  const api = sheet({
-	    model,
-	    halo,
-	    initialError,
-	    onDestroy
-	  });
-	  if (optional.options) {
-	    api.__DO_NOT_USE__.options(optional.options);
-	  }
-	  if (optional.plugins) {
-	    api.__DO_NOT_USE__.plugins(optional.plugins);
-	  }
-	  if (optional.element) {
-	    await api.__DO_NOT_USE__.mount(optional.element);
-	  }
-	  return api;
-	}
-
-	async function getObject(_ref, halo) {
-	  let {
-	    id,
-	    options,
-	    plugins,
-	    element
-	  } = _ref;
-	  const key = "".concat(id);
-	  let rpc = rpcRequestModelStore.get(key);
-	  if (!rpc) {
-	    rpc = halo.app.getObject(id);
-	    rpcRequestModelStore.set(key, rpc);
-	  }
-	  const model = await rpc;
-	  modelStore.set(key, model);
-	  if (model.genericType === 'sheet') {
-	    return initSheet(model, {
-	      options,
-	      plugins,
-	      element
-	    }, halo);
-	  }
-	  return init(model, {
-	    options,
-	    plugins,
-	    element
-	  }, halo);
-	}
-
-	function flagsFn () {
-	  let flags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-	  /**
-	   * @interface Flags
-	   */
-
-	  return (/** @lends Flags */{
-	      /**
-	       * Checks whether the specified flag is enabled.
-	       * @param {string} flag - The value flag to check.
-	       * @returns {boolean} True if the specified flag is enabled, false otherwise.
-	       */
-	      isEnabled: f => flags[f] === true
-	    }
-	  );
-	}
-
-	/* eslint no-param-reassign: 0, no-restricted-globals: 0 */
-	const extend = extend$2.bind(null, true);
-	const JSONPatch = {};
-	const {
-	  isArray
-	} = Array;
-	function isObject(v) {
-	  return v != null && !Array.isArray(v) && typeof v === 'object';
-	}
-	function isUndef(v) {
-	  return typeof v === 'undefined';
-	}
-	function isFunction(v) {
-	  return typeof v === 'function';
-	}
-
-	/**
-	 * Generate an exact duplicate (with no references) of a specific value.
-	 *
-	 * @private
-	 * @param {Object} The value to duplicate
-	 * @returns {Object} a unique, duplicated value
-	 */
-	function generateValue(val) {
-	  if (val) {
-	    return extend({}, {
-	      val
-	    }).val;
-	  }
-	  return val;
-	}
-
-	/**
-	 * An additional type checker used to determine if the property is of internal
-	 * use or not a type that can be translated into JSON (like functions).
-	 *
-	 * @private
-	 * @param {Object} obj The object which has the property to check
-	 * @param {String} The property name to check
-	 * @returns {Boolean} Whether the property is deemed special or not
-	 */
-	function isSpecialProperty(obj, key) {
-	  return isFunction(obj[key]) || key.substring(0, 2) === '$$' || key.substring(0, 1) === '_';
-	}
-
-	/**
-	 * Finds the parent object from a JSON-Pointer ("/foo/bar/baz" = "bar" is "baz" parent),
-	 * also creates the object structure needed.
-	 *
-	 * @private
-	 * @param {Object} data The root object to traverse through
-	 * @param {String} The JSON-Pointer string to use when traversing
-	 * @returns {Object} The parent object
-	 */
-	function getParent(data, str) {
-	  const seperator = '/';
-	  const parts = str.substring(1).split(seperator).slice(0, -1);
-	  let numPart;
-	  parts.forEach((part, i) => {
-	    if (i === parts.length) {
-	      return;
-	    }
-	    numPart = +part;
-	    const newPart = !isNaN(numPart) ? [] : {};
-	    data[numPart || part] = isUndef(data[numPart || part]) ? newPart : data[part];
-	    data = data[numPart || part];
-	  });
-	  return data;
+	    numPart = +part;
+	    const newPart = !isNaN(numPart) ? [] : {};
+	    data[numPart || part] = isUndef(data[numPart || part]) ? newPart : data[part];
+	    data = data[numPart || part];
+	  });
+	  return data;
 	}
 
 	/**
@@ -35408,130 +34678,1030 @@
 	    if (steps[i] === '') {
 	      continue; // eslint-disable-line no-continue
 	    }
-
-	    if (typeof dataContainer[steps[i]] === 'undefined') {
-	      return defaultValue;
+
+	    if (typeof dataContainer[steps[i]] === 'undefined') {
+	      return defaultValue;
+	    }
+	    dataContainer = dataContainer[steps[i]];
+	  }
+	  return dataContainer;
+	};
+	function target(def) {
+	  const propertyPath = def.path || '/qHyperCubeDef';
+	  const layoutPath = propertyPath.slice(0, -3);
+	  if (/\/(qHyperCube|qListObject|qChildList)$/.test(layoutPath) === false) {
+	    const d = layoutPath.includes('/qHyperCube') ? 'qHyperCubeDef' : 'qListObjectDef';
+	    throw new Error("Incorrect definition for ".concat(d, " at ").concat(propertyPath, ". Valid paths include /qHyperCubeDef, /qListObjectDef, or /qChildListDef, e.g. data/qHyperCubeDef"));
+	  }
+	  return {
+	    propertyPath,
+	    layoutPath,
+	    resolveLayout: layout => resolveValue(layout, layoutPath, {}),
+	    dimensions: defFn(def.dimensions),
+	    measures: defFn(def.measures)
+	  };
+	}
+	function qae() {
+	  let def = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	  let initial = def.properties || {};
+	  let onChange;
+	  if (def.properties && (def.properties.initial || def.properties.onChange)) {
+	    initial = def.properties.initial;
+	    onChange = def.properties.onChange;
+	  }
+	  const q = {
+	    properties: {
+	      initial,
+	      onChange
+	    },
+	    data: {
+	      targets: ((def.data || {}).targets || []).map(target)
+	    },
+	    exportProperties: def.exportProperties,
+	    importProperties: def.importProperties
+	  };
+	  return q;
+	}
+
+	/**
+	 * The entry point for defining a visualization.
+	 * @interface Visualization
+	 * @param {Galaxy} galaxy
+	 * @returns {VisualizationDefinition}
+	 * @example
+	 * import { useElement, useLayout } from '@nebula.js/stardust';
+	 *
+	 * export default function() {
+	 *   return {
+	 *     qae: {
+	 *       properties: {
+	 *         dude: 'Heisenberg',
+	 *       }
+	 *     },
+	 *     component() {
+	 *       const el = useElement();
+	 *       const layout = useLayout();
+	 *       el.innerHTML = `What's my name? ${layout.dude}!!!`;
+	 *     }
+	 *   };
+	 * }
+	 */
+
+	/**
+	 * @interface VisualizationDefinition
+	 * @property {QAEDefinition} qae
+	 * @property {function():void} component
+	 */
+
+	/**
+	 * @interface snGenerator
+	 * @param {Visualization} Sn
+	 * @param {Galaxy} galaxy
+	 * @returns {generator}
+	 * @private
+	 */
+	function generatorFn(UserSN, galaxy) {
+	  let sn;
+
+	  // TODO validate galaxy API
+
+	  if (typeof UserSN === 'function') {
+	    sn = UserSN(galaxy);
+	  } else {
+	    sn = UserSN;
+	  }
+
+	  /**
+	   * @alias generator
+	   * @private
+	   */
+	  const generator = /** @lends generator */{
+	    /**
+	     * @type {QAE}
+	     */
+	    qae: qae(sn.qae),
+	    /**
+	     * @type {SnComponent}
+	     */
+	    component: sn.component || {},
+	    /**
+	     * @param {object} p
+	     * @param {EnigmaAppModel} p.app
+	     * @param {EnigmaObjectModel} p.model
+	     * @param {ObjectSelections} p.selections
+	     */
+	    create(params) {
+	      const ss = create$2(generator, params, galaxy);
+	      return ss;
+	    },
+	    definition: {}
+	  };
+	  Object.keys(sn).forEach(key => {
+	    if (!generator[key]) {
+	      generator.definition[key] = sn[key];
+	    }
+	  });
+	  return generator;
+	}
+
+	/* eslint-disable no-underscore-dangle */
+	const saveSoftProperties = (model, prevEffectiveProperties, effectiveProperties) => {
+	  if (!model) {
+	    return Promise.resolve();
+	  }
+	  let patches = JSONPatch.generate(prevEffectiveProperties, effectiveProperties);
+	  extend$2(true, prevEffectiveProperties, effectiveProperties);
+	  if (patches && patches.length) {
+	    patches = patches.map(p => ({
+	      qOp: p.op,
+	      qValue: JSON.stringify(p.value),
+	      qPath: p.path
+	    }));
+	    if (model.__snInterceptor) {
+	      return model.__snInterceptor.applyPatches.call(model, patches, true);
+	    }
+	    return model.applyPatches(patches, true);
+	  }
+	  return Promise.resolve();
+	};
+
+	const noopi$1 = () => {};
+	function viz() {
+	  let {
+	    model,
+	    halo,
+	    initialError,
+	    onDestroy = async () => {}
+	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	  let unmountCell = noopi$1;
+	  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(_objectSpread2({}, initialSnOptions), opts), {
+	          onInitialRender: createOnInitialRender(override)
+	        }));
+	      })();
+	    } else {
+	      // Handle setting options before mount
+	      initialSnOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, initialSnOptions), opts), {
+	        onInitialRender: createOnInitialRender(override)
+	      });
+	    }
+	  };
+	  const setSnPlugins = async plugins => {
+	    validatePlugins(plugins);
+	    if (mountedReference) {
+	      (async () => {
+	        await mounted;
+	        cellRef.current.setSnPlugins(plugins);
+	      })();
+	    } else {
+	      // Handle setting plugins before mount
+	      initialSnPlugins = plugins;
+	    }
+	  };
+
+	  /**
+	   * @class
+	   * @alias Viz
+	   * @classdesc A controller to further modify a visualization after it has been rendered.
+	   * @example
+	   * const viz = await embed(app).render({
+	   *   element,
+	   *   type: 'barchart'
+	   * });
+	   * viz.destroy();
+	   */
+	  const api = /** @lends Viz# */{
+	    /**
+	     * The id of this visualization's generic object.
+	     * @type {string}
+	     */
+	    id: model.id,
+	    /**
+	     * This visualizations Enigma model, a representation of the generic object.
+	     * @type {EngineAPI.IGenericObject}
+	     */
+	    model,
+	    /**
+	     * Destroys the visualization and removes it from the the DOM.
+	     * @example
+	     * const viz = await embed(app).render({
+	     *   element,
+	     *   id: 'abc'
+	     * });
+	     * viz.destroy();
+	     */
+	    async destroy() {
+	      await onDestroy();
+	      unmountCell();
+	      unmountCell = noopi$1;
+	    },
+	    /**
+	     * Converts the visualization to a different registered type.
+	     *
+	     * Will update properties if permissions allow, else will patch (can be forced with forcePatch parameter)
+	     *
+	     * Not all chart types are compatible, similar structures are required.
+	     *
+	     * @since 1.1.0
+	     * @param {string} newType - Which registered type to convert to.
+	     * @param {boolean=} forceUpdate - Whether to apply the change or not, else simply returns the resulting properties, defaults to true.
+	     * @param {boolean=} forcePatch - Whether to always patch the change instead of making a permanent change
+	     * @throws {Error} Throws an error if the source or target chart does not support conversion
+	     * @returns {Promise<object>} Promise object that resolves to the full property tree of the converted visualization.
+	     * @example
+	     * const viz = await embed(app).render({
+	     *   element,
+	     *   id: 'abc'
+	     * });
+	     * await viz.convertTo('barChart');
+	     * // Change the barchart to a linechart, only in the current session
+	     * const newProperties = await viz.convertTo('lineChart', false, true);
+	     * // Remove the conversion by clearing the patches
+	     * await viz.model.clearSoftPatches();
+	     */
+	    async convertTo(newType) {
+	      let forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+	      let forcePatch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+	      if (forceUpdate) {
+	        const layout = await model.getLayout();
+	        if (canSetProperties(layout) && !forcePatch) {
+	          const propertyTree = await convertTo({
+	            halo,
+	            model,
+	            cellRef,
+	            newType
+	          });
+	          await setProperties(model, propertyTree.qProperty);
+	          return propertyTree;
+	        }
+	        const oldProperties = await model.getEffectiveProperties();
+	        const propertyTree = await convertTo({
+	          halo,
+	          model,
+	          cellRef,
+	          newType,
+	          properties: oldProperties
+	        });
+	        const newProperties = propertyTree.qProperty;
+	        await saveSoftProperties(model, oldProperties, newProperties);
+	        return propertyTree;
+	      }
+	      const propertyTree = await convertTo({
+	        halo,
+	        model,
+	        cellRef,
+	        newType
+	      });
+	      return propertyTree;
+	    },
+	    /**
+	     * Listens to custom events from inside the visualization. See useEmitter
+	     * @experimental
+	     * @param {string} eventName Event name to listen to
+	     * @param {Function} listener Callback function to invoke
+	     */
+	    addListener(eventName, listener) {
+	      emitter.addListener(eventName, listener);
+	    },
+	    /**
+	     * Removes a listener
+	     * @experimental
+	     * @param {string} eventName Event name to remove from
+	     * @param {Function} listener Callback function to remove
+	     */
+	    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) {
+	        if (mountedReference) {
+	          throw new Error('Already mounted');
+	        }
+	        if (!(element instanceof HTMLElement)) {
+	          throw new Error('Provided element is not a proper HTMLElement');
+	        }
+	        mountedReference = element;
+	        [unmountCell, cellRef] = glue$1({
+	          halo,
+	          element,
+	          model,
+	          initialSnOptions,
+	          initialSnPlugins,
+	          initialError,
+	          onMount,
+	          emitter
+	        });
+	        return mounted;
+	      },
+	      async applyProperties(props) {
+	        const current = await model.getEffectiveProperties();
+	        const patches = getPatches('/', props, current);
+	        if (patches.length) {
+	          return model.applyPatches(patches, true);
+	        }
+	        return undefined;
+	      },
+	      options(opts) {
+	        setSnOptions(opts);
+	      },
+	      plugins(plugins) {
+	        setSnPlugins(plugins);
+	      },
+	      exportImage() {
+	        return cellRef.current.exportImage();
+	      },
+	      takeSnapshot() {
+	        return cellRef.current.takeSnapshot();
+	      },
+	      getModel() {
+	        return model;
+	      },
+	      /**
+	       * Contains functionality related to conversions between types in the current session
+	       * @memberof Viz#
+	       * @ignore
+	       * @since 4.5.0
+	       */
+	      convert: {
+	        /**
+	         * Converts the visualization to a different registered type using a patch. Only persists in session
+	         * @since 4.5.0
+	         * @ignore
+	         * @memberof Viz.convert
+	         * @param {string} newType - Which registered type to convert to.
+	         * @throws {Error} Throws an error if the source or target chart does not support conversion
+	         * @returns {Promise<object>} Promise object that resolves to the full property tree of the converted visualization.
+	         * @example
+	         * const viz = await embed(app).render({
+	         *   element,
+	         *   id: 'abc'
+	         * });
+	         * viz.convert.toType('barChart');
+	         */
+	        async toType(newType) {
+	          const oldProperties = await model.getEffectiveProperties();
+	          const propertyTree = await convertTo({
+	            halo,
+	            model,
+	            cellRef,
+	            newType,
+	            properties: oldProperties
+	          });
+	          const newProperties = propertyTree.qProperty;
+	          await saveSoftProperties(model, oldProperties, newProperties);
+	          return propertyTree;
+	        },
+	        /**
+	         * Reverts any conversion done on the visualization
+	         * @since 4.5.0
+	         * @ignore
+	         * @memberof Viz.convert
+	         * @returns {Promise<object>} Promise object that resolves when the conversion is undone, returns result.
+	         * @example
+	         * const viz = await embed(app).render({
+	         *   element,
+	         *   id: 'abc'
+	         * });
+	         * viz.convert.toType('barChart');
+	         * viz.convert.revert();
+	         */
+	        async revert() {
+	          await model.clearSoftPatches();
+	        }
+	      }
+	    }
+
+	    // old QVisualization API
+	    // close() {},
+	    // exportData() {},
+	    // exportImg() {},
+	    // exportPdf() {},
+	    // setOptions() {}, // applied soft patch
+	    // resize() {},
+	    // show() {},
+	    // toggleDataView() {},
+	  };
+
+	  return api;
+	}
+
+	/* eslint no-underscore-dangle:0 */
+	async function init(model, optional, halo, initialError) {
+	  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
+	  const api = viz({
+	    model,
+	    halo,
+	    initialError,
+	    onDestroy
+	  });
+	  if (optional.options) {
+	    api.__DO_NOT_USE__.options(optional.options);
+	  }
+	  if (optional.plugins) {
+	    api.__DO_NOT_USE__.plugins(optional.plugins);
+	  }
+	  if (optional.element) {
+	    await api.__DO_NOT_USE__.mount(optional.element);
+	  }
+	  return api;
+	}
+
+	/**
+	 * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
+	 */
+
+	/**
+	 * @interface RenderConfig
+	 * @description Configuration for rendering a visualisation, either creating or fetching an existing object.
+	 * @property {HTMLElement} element Target html element to render in to
+	 * @property {object=} options Options passed into the visualisation
+	 * @property {Plugin[]} [plugins] plugins passed into the visualisation
+	 * @property {string=} id For existing objects: Engine identifier of object to render
+	 * @property {string=} type For creating objects: Type of visualisation to render
+	 * @property {string=} version For creating objects: Version of visualization to render
+	 * @property {(Field[])=} fields For creating objects: Data fields to use
+	 * @property {boolean=} [extendProperties=false] For creating objects: Whether to deeply extend properties or not. If false then subtrees will be overwritten.
+	 * @property {EngineAPI.IGenericObjectProperties=} properties For creating objects: Explicit properties to set
+	 * @example
+	 * // A config for Creating objects:
+	 * const createConfig = {
+	 *   type: 'bar',
+	 *   element: document.querySelector('.bar'),
+	 *   extendProperties: true,
+	 *   fields: ['[Country names]', '=Sum(Sales)'],
+	 *   properties: {
+	 *     legend: {
+	 *       show: false,
+	 *     },
+	 *   }
+	 * };
+	 * nebbie.render(createConfig);
+	 * // A config for rendering an existing object:
+	 * const createConfig = {
+	 *   id: 'jG5LP',
+	 *   element: document.querySelector('.line'),
+	 * };
+	 * nebbie.render(createConfig);
+	 */
+	async function createSessionObject(_ref, halo) {
+	  let {
+	    type,
+	    version,
+	    fields,
+	    properties,
+	    options,
+	    plugins,
+	    element,
+	    extendProperties
+	  } = _ref;
+	  let mergedProps = {};
+	  const children = [];
+	  let error;
+	  try {
+	    const t = halo.types.get({
+	      name: type,
+	      version
+	    });
+	    mergedProps = await t.initialProperties(properties, extendProperties);
+	    const sn = await t.supernova();
+	    if (fields) {
+	      await populateData({
+	        sn,
+	        properties: mergedProps,
+	        fields,
+	        children
+	      }, halo);
+	    }
+	    if (properties && sn && sn.qae.properties.onChange) {
+	      sn.qae.properties.onChange.call({}, mergedProps);
+	    }
+	  } catch (e) {
+	    error = e;
+	    // minimal dummy object properties to allow it to be created
+	    // and rendered with the error
+	    mergedProps = {
+	      qInfo: {
+	        qType: type
+	      },
+	      visualization: type
+	    };
+	    // console.error(e); // eslint-disable-line
+	  }
+
+	  const model = await halo.app.createSessionObject(mergedProps);
+	  if (children.length > 0) {
+	    await model.setFullPropertyTree({
+	      qProperty: mergedProps,
+	      qChildren: children
+	    });
+	  }
+	  modelStore.set(model.id, model);
+	  const unsubscribe = subscribe(model);
+	  const onDestroy = async () => {
+	    await halo.app.destroySessionObject(model.id);
+	    unsubscribe();
+	  };
+	  return init(model, {
+	    options,
+	    plugins,
+	    element
+	  }, halo, error, onDestroy);
+	}
+
+	/**
+	 * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
+	 */
+
+	/**
+	 * @interface CreateConfig
+	 * @description Rendering configuration for creating and rendering a new object
+	 * @property {string} type
+	 * @property {string=} version
+	 * @property {(Field[])=} fields
+	 * @property {EngineAPI.IGenericObjectProperties=} properties
+	 */
+
+	async function createObject(_ref, halo, generateOnly) {
+	  let {
+	    type,
+	    version,
+	    fields,
+	    properties,
+	    extendProperties /* , options, plugins, element */
+	  } = _ref;
+	  let mergedProps = {};
+	  const children = [];
+	  // let error;
+	  try {
+	    const t = halo.types.get({
+	      name: type,
+	      version
+	    });
+	    mergedProps = await t.initialProperties(properties, extendProperties);
+	    const sn = await t.supernova();
+	    if (fields) {
+	      await populateData({
+	        sn,
+	        properties: mergedProps,
+	        fields,
+	        children
+	      }, halo);
+	    }
+	    if (properties && sn && sn.qae.properties.onChange) {
+	      sn.qae.properties.onChange.call({}, mergedProps);
 	    }
-	    dataContainer = dataContainer[steps[i]];
+	  } catch (e) {
+	    // error = e;
+	    // minimal dummy object properties to allow it to be created
+	    // and rendered with the error
+	    if (!generateOnly) {
+	      mergedProps = {
+	        qInfo: {
+	          qType: type
+	        },
+	        visualization: type
+	      };
+	    } else {
+	      mergedProps = null;
+	    }
+	    // console.error(e); // eslint-disable-line
 	  }
-	  return dataContainer;
-	};
-	function target(def) {
-	  const propertyPath = def.path || '/qHyperCubeDef';
-	  const layoutPath = propertyPath.slice(0, -3);
-	  if (/\/(qHyperCube|qListObject|qChildList)$/.test(layoutPath) === false) {
-	    const d = layoutPath.includes('/qHyperCube') ? 'qHyperCubeDef' : 'qListObjectDef';
-	    throw new Error("Incorrect definition for ".concat(d, " at ").concat(propertyPath, ". Valid paths include /qHyperCubeDef, /qListObjectDef, or /qChildListDef, e.g. data/qHyperCubeDef"));
+
+	  if (!generateOnly) {
+	    const model = await halo.app.createObject(mergedProps);
+	    if (children.length > 0) {
+	      await model.setFullPropertyTree({
+	        qProperty: mergedProps,
+	        qChildren: children
+	      });
+	    }
+	    modelStore.set(model.id, model);
+	    return model;
 	  }
-	  return {
-	    propertyPath,
-	    layoutPath,
-	    resolveLayout: layout => resolveValue(layout, layoutPath, {}),
-	    dimensions: defFn(def.dimensions),
-	    measures: defFn(def.measures)
-	  };
+	  return mergedProps;
 	}
-	function qae() {
-	  let def = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-	  let initial = def.properties || {};
-	  let onChange;
-	  if (def.properties && (def.properties.initial || def.properties.onChange)) {
-	    initial = def.properties.initial;
-	    onChange = def.properties.onChange;
+
+	async function getObject$1(_ref, halo) {
+	  let {
+	    id,
+	    options,
+	    plugins,
+	    element
+	  } = _ref;
+	  const key = "".concat(id);
+	  let rpc = rpcRequestModelStore.get(key);
+	  if (!rpc) {
+	    rpc = halo.app.getObject(id);
+	    rpcRequestModelStore.set(key, rpc);
 	  }
-	  const q = {
-	    properties: {
-	      initial,
-	      onChange
-	    },
-	    data: {
-	      targets: ((def.data || {}).targets || []).map(target)
-	    },
-	    exportProperties: def.exportProperties,
-	    importProperties: def.importProperties
-	  };
-	  return q;
+	  const model = await rpc;
+	  modelStore.set(key, model);
+	  return init(model, {
+	    options,
+	    plugins,
+	    element
+	  }, halo);
 	}
 
 	/**
-	 * The entry point for defining a visualization.
-	 * @interface Visualization
-	 * @param {Galaxy} galaxy
-	 * @returns {VisualizationDefinition}
-	 * @example
-	 * import { useElement, useLayout } from '@nebula.js/stardust';
-	 *
-	 * export default function() {
-	 *   return {
-	 *     qae: {
-	 *       properties: {
-	 *         dude: 'Heisenberg',
-	 *       }
-	 *     },
-	 *     component() {
-	 *       const el = useElement();
-	 *       const layout = useLayout();
-	 *       el.innerHTML = `What's my name? ${layout.dude}!!!`;
-	 *     }
-	 *   };
-	 * }
+	 * @interface
+	 * @extends HTMLElement
+	 * @experimental
+	 * @since 3.1.0
 	 */
+	const SheetElement = {
+	  /** @type {'njs-sheet'} */
+	  className: 'njs-sheet'
+	};
+	function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount) {
+	  const {
+	    x,
+	    y,
+	    width,
+	    height
+	  } = cell.bounds;
+	  return /*#__PURE__*/React.createElement("div", {
+	    style: {
+	      left: "".concat(x, "%"),
+	      top: "".concat(y, "%"),
+	      width: "".concat(width, "%"),
+	      height: "".concat(height, "%"),
+	      position: 'absolute'
+	    }
+	  }, /*#__PURE__*/React.createElement(Cell, {
+	    ref: cell.cellRef,
+	    halo: halo,
+	    model: cell.model,
+	    currentId: cell.currentId,
+	    initialSnOptions: initialSnOptions,
+	    initialSnPlugins: initialSnPlugins,
+	    initialError: initialError,
+	    onMount: onMount
+	  }));
+	}
+	function Sheet(_ref) {
+	  let {
+	    model,
+	    halo,
+	    initialSnOptions,
+	    initialSnPlugins,
+	    initialError,
+	    onMount
+	  } = _ref;
+	  const {
+	    root
+	  } = halo;
+	  const [layout] = useLayout$1(model);
+	  const {
+	    theme: themeName
+	  } = reactExports.useContext(InstanceContext);
+	  const [cells, setCells] = reactExports.useState([]);
+	  const [bgColor, setBgColor] = reactExports.useState(undefined);
+	  const [bgImage, setBgImage] = reactExports.useState(undefined);
+	  const [deepHash, setDeepHash] = reactExports.useState('');
 
-	/**
-	 * @interface VisualizationDefinition
-	 * @property {QAEDefinition} qae
-	 * @property {function():void} component
-	 */
+	  /// For each object
+	  reactExports.useEffect(() => {
+	    if (layout) {
+	      const hash = JSON.stringify(layout.cells);
+	      if (hash === deepHash) {
+	        return;
+	      }
+	      setDeepHash(hash);
+	      const fetchObjects = async () => {
+	        /*
+	          Need to always fetch and evaluate everything as the sheet need to support multiple instances of the same object?
+	          No, there is no way to add the same chart twice, so the optimization should be worth it.
+	        */
 
-	/**
-	 * @interface snGenerator
-	 * @param {Visualization} Sn
-	 * @param {Galaxy} galaxy
-	 * @returns {generator}
-	 * @private
-	 */
-	function generatorFn(UserSN, galaxy) {
-	  let sn;
+	        // Clear the cell list
+	        cells.forEach(c => {
+	          root.removeCell(c.currentId);
+	        });
+	        const lCells = layout.cells;
+	        // TODO - should try reuse existing objects on subsequent renders
+	        // Non-id updates should only change the "css"
+	        const cs = await Promise.all(lCells.map(async c => {
+	          let mounted;
+	          const mountedPromise = new Promise(resolve => {
+	            mounted = resolve;
+	          });
+	          const cell = cells.find(ce => ce.id === c.name);
+	          if (cell) {
+	            cell.bounds = c.bounds;
+	            delete cell.mountedPromise;
+	            return cell;
+	          }
+	          const vs = await getObject$1({
+	            id: c.name
+	          }, halo);
+	          return {
+	            model: vs.model,
+	            id: c.name,
+	            bounds: c.bounds,
+	            cellRef: React.createRef(),
+	            currentId: uid(),
+	            mounted,
+	            mountedPromise
+	          };
+	        }));
+	        cs.forEach(c => root.addCell(c.currentId, c.cellRef));
+	        setCells(cs);
+	      };
+	      fetchObjects();
+	    }
+	  }, [layout]);
+	  const cellRenderers = reactExports.useMemo(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted)) : [], [cells]);
+	  reactExports.useEffect(() => {
+	    const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+	    setBgColor(resolveBgColor(bgComp, halo.public.theme));
+	    setBgImage(resolveBgImage(bgComp, halo.app));
+	  }, [layout, halo.public.theme, halo.app, themeName]);
 
-	  // TODO validate galaxy API
+	  /* TODO
+	    - sheet title + bg + logo etc + as option
+	    - sheet exposed classnames for theming
+	  */
 
-	  if (typeof UserSN === 'function') {
-	    sn = UserSN(galaxy);
-	  } else {
-	    sn = UserSN;
+	  const height = !layout || Number.isNaN(layout.height) ? '100%' : "".concat(Number(layout.height), "%");
+	  const promises = cells.map(c => c.mountedPromise);
+	  const ps = promises.filter(p => !!p);
+	  if (ps.length) {
+	    Promise.all(promises).then(() => {
+	      // TODO - correct? Currently called each time a new cell is mounted?
+	      onMount();
+	    });
 	  }
+	  return /*#__PURE__*/React.createElement("div", {
+	    className: SheetElement.className,
+	    style: {
+	      width: "100%",
+	      height,
+	      position: 'relative',
+	      backgroundColor: bgColor,
+	      backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
+	      backgroundRepeat: 'no-repeat',
+	      backgroundSize: bgImage && bgImage.size,
+	      backgroundPosition: bgImage && bgImage.pos
+	    }
+	  }, cellRenderers);
+	}
+
+	function glue(_ref) {
+	  let {
+	    halo,
+	    element,
+	    model,
+	    initialSnOptions,
+	    initialSnPlugins,
+	    onMount,
+	    initialError
+	  } = _ref;
+	  const {
+	    root
+	  } = halo;
+	  const sheetRef = React.createRef();
+	  const portal = ReactDOM.createPortal( /*#__PURE__*/React.createElement(Sheet, {
+	    ref: sheetRef,
+	    halo: halo,
+	    model: model,
+	    initialSnOptions: initialSnOptions,
+	    initialSnPlugins: initialSnPlugins,
+	    initialError: initialError,
+	    onMount: onMount
+	  }), element, model.id);
+	  const unmount = () => {
+	    root.remove(portal);
+	    model.removeListener('closed', unmount);
+	  };
+	  model.on('closed', unmount);
+	  root.add(portal);
+	  return [unmount, sheetRef];
+	}
+
+	const noopi = () => {};
+	function sheet() {
+	  let {
+	    model,
+	    halo,
+	    initialError,
+	    onDestroy = async () => {}
+	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	  let unmountSheet = noopi;
+	  let sheetRef = null;
+	  let mountedReference = null;
+	  let onMount = null;
+	  const mounted = new Promise(resolve => {
+	    onMount = resolve;
+	  });
+	  let initialSnOptions = {};
+	  let initialSnPlugins = [];
+	  const setSnOptions = async opts => {
+	    if (mountedReference) {
+	      (async () => {
+	        await mounted;
+	        sheetRef.current.setSnOptions(_objectSpread2(_objectSpread2({}, initialSnOptions), opts));
+	      })();
+	    } else {
+	      // Handle setting options before mount
+	      initialSnOptions = _objectSpread2(_objectSpread2({}, initialSnOptions), opts);
+	    }
+	  };
+	  const setSnPlugins = async plugins => {
+	    validatePlugins(plugins);
+	    if (mountedReference) {
+	      (async () => {
+	        await mounted;
+	        sheetRef.current.setSnPlugins(plugins);
+	      })();
+	    } else {
+	      // Handle setting plugins before mount
+	      initialSnPlugins = plugins;
+	    }
+	  };
 
 	  /**
-	   * @alias generator
-	   * @private
+	   * @class
+	   * @alias Sheet
+	   * @classdesc A controller to further modify a visualization after it has been rendered.
+	   * @experimental
+	   * @since 3.1.0
+	   * @example
+	   * const sheet = await embed(app).render({
+	   *   element,
+	   *   id: "jD5Gd"
+	   * });
+	   * sheet.destroy();
 	   */
-	  const generator = /** @lends generator */{
+	  const api = /** @lends Sheet# */{
 	    /**
-	     * @type {QAE}
+	     * The id of this sheets's generic object.
+	     * @type {string}
 	     */
-	    qae: qae(sn.qae),
+	    id: model.id,
 	    /**
-	     * @type {SnComponent}
+	     * This sheets Enigma model, a representation of the generic object.
+	     * @type {string}
 	     */
-	    component: sn.component || {},
+	    model,
 	    /**
-	     * @param {object} p
-	     * @param {EnigmaAppModel} p.app
-	     * @param {EnigmaObjectModel} p.model
-	     * @param {ObjectSelections} p.selections
+	     * Destroys the sheet and removes it from the the DOM.
+	     * @example
+	     * const sheet = await embed(app).render({
+	     *   element,
+	     *   id: "jD5Gd"
+	     * });
+	     * sheet.destroy();
 	     */
-	    create(params) {
-	      const ss = create$2(generator, params, galaxy);
-	      return ss;
+	    async destroy() {
+	      await onDestroy();
+	      unmountSheet();
+	      unmountSheet = noopi;
 	    },
-	    definition: {}
-	  };
-	  Object.keys(sn).forEach(key => {
-	    if (!generator[key]) {
-	      generator.definition[key] = sn[key];
+	    // ===== unexposed experimental API - use at own risk ======
+	    __DO_NOT_USE__: {
+	      mount(element) {
+	        if (mountedReference) {
+	          throw new Error('Already mounted');
+	        }
+	        if (!(element instanceof HTMLElement)) {
+	          throw new Error('Provided element is not a proper HTMLElement');
+	        }
+	        mountedReference = element;
+	        [unmountSheet, sheetRef] = glue({
+	          halo,
+	          element,
+	          model,
+	          initialSnOptions,
+	          initialSnPlugins,
+	          initialError,
+	          onMount
+	        });
+	        return mounted;
+	      },
+	      async applyProperties(props) {
+	        const current = await model.getEffectiveProperties();
+	        const patches = getPatches('/', props, current);
+	        if (patches.length) {
+	          return model.applyPatches(patches, true);
+	        }
+	        return undefined;
+	      },
+	      options(opts) {
+	        setSnOptions(opts);
+	      },
+	      plugins(plugins) {
+	        setSnPlugins(plugins);
+	      },
+	      exportImage() {
+	        throw new Error('Not implemented');
+	      },
+	      takeSnapshot() {
+	        throw new Error('Not implemented');
+	      },
+	      getModel() {
+	        return model;
+	      }
 	    }
+	  };
+	  return api;
+	}
+
+	/* eslint no-underscore-dangle:0 */
+	async function initSheet(model, optional, halo, initialError) {
+	  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
+	  const api = sheet({
+	    model,
+	    halo,
+	    initialError,
+	    onDestroy
 	  });
-	  return generator;
+	  if (optional.options) {
+	    api.__DO_NOT_USE__.options(optional.options);
+	  }
+	  if (optional.plugins) {
+	    api.__DO_NOT_USE__.plugins(optional.plugins);
+	  }
+	  if (optional.element) {
+	    await api.__DO_NOT_USE__.mount(optional.element);
+	  }
+	  return api;
+	}
+
+	async function getObject(_ref, halo) {
+	  let {
+	    id,
+	    options,
+	    plugins,
+	    element
+	  } = _ref;
+	  const key = "".concat(id);
+	  let rpc = rpcRequestModelStore.get(key);
+	  if (!rpc) {
+	    rpc = halo.app.getObject(id);
+	    rpcRequestModelStore.set(key, rpc);
+	  }
+	  const model = await rpc;
+	  modelStore.set(key, model);
+	  if (model.genericType === 'sheet') {
+	    return initSheet(model, {
+	      options,
+	      plugins,
+	      element
+	    }, halo);
+	  }
+	  return init(model, {
+	    options,
+	    plugins,
+	    element
+	  }, halo);
+	}
+
+	function flagsFn () {
+	  let flags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	  /**
+	   * @interface Flags
+	   */
+
+	  return (/** @lends Flags */{
+	      /**
+	       * Checks whether the specified flag is enabled.
+	       * @param {string} flag - The value flag to check.
+	       * @returns {boolean} True if the specified flag is enabled, false otherwise.
+	       */
+	      isEnabled: f => flags[f] === true
+	    }
+	  );
 	}
 
 	var iterator;
@@ -37695,7 +37865,10 @@
 	  language: 'en-US',
 	  /** @type {string=} */
 	  deviceType: 'auto',
-	  /** @type {Constraints=} Deprecated */
+	  /**
+	   * @type {Constraints=}
+	   * @deprecated
+	   * */
 	  constraints: {},
 	  /** @type {Interactions=} */
 	  interactions: {},
@@ -38246,6 +38419,7 @@
 	      getLayout: () => Promise.resolve(layout),
 	      getProperties: () => Promise.resolve(properties),
 	      getEffectiveProperties: () => Promise.resolve(properties),
+	      removeListener: () => {},
 	      id: properties.qInfo.qId
 	    }, properties));
 	  };