@nebula.js/stardust 4.4.0 → 4.5.0-alpha.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.4.0
+* @nebula.js/stardust v4.5.0-alpha.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -4797,16 +4797,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 +6940,12 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.13.2
+	 * @mui/styled-engine v5.14.6
 	 *
 	 * @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 +6988,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 +7023,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) {
@@ -8064,7 +8066,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 +8074,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 +8124,7 @@
 	  });
 	}
 
-	const _excluded$Q = ["sx"];
+	const _excluded$P = ["sx"];
 	const splitProps = props => {
 	  var _props$theme$unstable, _props$theme;
 	  const result = {
@@ -8143,7 +8145,7 @@
 	  const {
 	      sx: inSx
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$2(props, _excluded$Q);
+	    other = _objectWithoutPropertiesLoose$2(props, _excluded$P);
 	  const {
 	    systemProps,
 	    otherProps
@@ -8169,7 +8171,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 +8189,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 +8200,7 @@
 	  return Box;
 	}
 
-	const _excluded$O = ["variant"];
+	const _excluded$N = ["variant"];
 	function isEmpty$3(string) {
 	  return string.length === 0;
 	}
@@ -8212,7 +8214,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 +8226,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 +8332,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 +8802,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 +8935,7 @@
 	        className,
 	        useFlexGap = false
 	      } = props,
-	      other = _objectWithoutPropertiesLoose$2(props, _excluded$M);
+	      other = _objectWithoutPropertiesLoose$2(props, _excluded$L);
 	    const ownerState = {
 	      direction,
 	      spacing,
@@ -8952,7 +8954,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 +8965,7 @@
 	      props = {},
 	      styleOverrides = {}
 	    } = inputTheme,
-	    other = _objectWithoutPropertiesLoose$3(inputTheme, _excluded$L);
+	    other = _objectWithoutPropertiesLoose$3(inputTheme, _excluded$K);
 	  const theme = _extends$5({}, other, {
 	    components: {}
 	  });
@@ -9176,7 +9178,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 +9347,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 +9446,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 +9477,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 +9537,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 +9588,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 +9614,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 +9622,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 +9677,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 +10507,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 +10636,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 +10823,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 +10925,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 +11129,7 @@
 	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"];
+	const _excluded$C = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 	const useUtilityClasses$q = ownerState => {
 	  const {
 	    color,
@@ -11353,7 +11355,7 @@
 	      type,
 	      variant = 'text'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$D);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$C);
 	  const ownerState = _extends$5({}, props, {
 	    color,
 	    component,
@@ -11710,7 +11712,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "9b4b" ;
+	const NEBULA_VERSION_HASH = "d1ff" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -11971,7 +11973,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-alpha.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -12044,7 +12046,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 +12114,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 +12211,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 +12266,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 +12289,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 +12390,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 +12417,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 +12504,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 +12721,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 +12738,7 @@
 	      ownerState,
 	      skipResolvingSlotProps = false
 	    } = parameters,
-	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$y);
+	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$x);
 	  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
 	  const {
 	    props: mergedProps,
@@ -14900,7 +14902,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 +14952,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 +15212,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 +15347,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 +15357,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 +15422,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 +15446,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 ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
 
 	    // The handler doesn't take event.defaultPrevented into account:
 	    //
@@ -15543,62 +15467,71 @@
 	      }
 	    }
 	  };
-	  const childProps = {};
-	  if (children.props.tabIndex === undefined) {
-	    childProps.tabIndex = '-1';
-	  }
+	  const createHandleBackdropClick = otherHandlers => event => {
+	    var _otherHandlers$onClic;
+	    (_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _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.props.onEnter),
+	      onExited: createChainedFunction(handleExited, 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) {
@@ -15956,7 +15889,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,
@@ -16282,7 +16215,7 @@
 	    if (inputRef.current && event.currentTarget === event.target) {
 	      inputRef.current.focus();
 	    }
-	    if (onClick && !fcs.disabled) {
+	    if (onClick) {
 	      onClick(event);
 	    }
 	  };
@@ -16329,7 +16262,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 +16444,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 +16503,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 +16534,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 +16737,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 +16784,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 +16896,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 +16951,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 +17022,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 +17080,7 @@
     stroke-dashoffset: -125px;
   }
 `));
-	const useUtilityClasses$e = ownerState => {
+	const useUtilityClasses$f = ownerState => {
 	  const {
 	    classes,
 	    variant,
@@ -17249,7 +17182,7 @@
 	    value,
 	    variant
 	  });
-	  const classes = useUtilityClasses$e(ownerState);
+	  const classes = useUtilityClasses$f(ownerState);
 	  const circleStyle = {};
 	  const rootStyle = {};
 	  const rootProps = {};
@@ -17289,7 +17222,24 @@
 	});
 	var CircularProgress$1 = CircularProgress;
 
+	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", "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 +17294,6 @@
 	  const {
 	      BackdropComponent = ModalBackdrop,
 	      BackdropProps,
-	      classes,
 	      className,
 	      closeAfterTransition = false,
 	      children,
@@ -17361,17 +17310,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 +17325,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;
 
@@ -31000,17 +30995,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 +32086,8 @@
 	    selections,
 	    nebbie,
 	    focusHandler,
-	    emitter
+	    emitter,
+	    onMount
 	  } = _ref5;
 	  try {
 	    const snType = await getType({
@@ -32098,7 +32103,14 @@
 	      focusHandler,
 	      emitter
 	    });
-	    return sn;
+	    if (sn) {
+	      dispatch({
+	        type: 'LOADED',
+	        sn,
+	        visualization
+	      });
+	      onMount();
+	    }
 	  } catch (err) {
 	    if (!version) {
 	      dispatch({
@@ -32115,8 +32127,8 @@
 	        }
 	      });
 	    }
+	    onMount();
 	  }
-	  return undefined;
 	};
 	const Cell = reactExports.forwardRef((_ref6, ref) => {
 	  let {
@@ -32222,7 +32234,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 +32264,7 @@
 	      dispatch({
 	        type: 'LOADING'
 	      });
-	      const sn = await loadType({
+	      await loadType({
 	        dispatch,
 	        types,
 	        visualization,
@@ -32257,17 +32274,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,796 +32544,18 @@
 	  });
 	}
 
-	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;
-	      }
-	    }
-
-	    // 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);
-	    }
-	  } 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'
+	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);
 	};
-	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);
+	/* eslint-disable no-underscore-dangle */
+	const setProperties = (model, newProperties) => {
+	  if (model.__snInterceptor) {
+	    return model.__snInterceptor.setProperties.call(model, newProperties);
 	  }
-	  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
-	    }
-	  );
-	}
+	  return model.setProperties(newProperties);
+	};
 
 	/* eslint no-param-reassign: 0, no-restricted-globals: 0 */
 	const extend = extend$2.bind(null, true);
@@ -35408,130 +34639,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 +37826,10 @@
 	  language: 'en-US',
 	  /** @type {string=} */
 	  deviceType: 'auto',
-	  /** @type {Constraints=} Deprecated */
+	  /**
+	   * @type {Constraints=}
+	   * @deprecated
+	   * */
 	  constraints: {},
 	  /** @type {Interactions=} */
 	  interactions: {},
@@ -38246,6 +38380,7 @@
 	      getLayout: () => Promise.resolve(layout),
 	      getProperties: () => Promise.resolve(properties),
 	      getEffectiveProperties: () => Promise.resolve(properties),
+	      removeListener: () => {},
 	      id: properties.qInfo.qId
 	    }, properties));
 	  };